
/* Fuente base del plugin */
.bloque-energia-wrap,
#bc-modal-body,
#bc-modal-body input,
#bc-modal-body textarea,
#bc-modal-body select,
#bc-modal-body button {
    font-family: Montserrat, sans-serif;
}


/* ===== BLOQUE ENERGÍA CARDS ===== */
.bc-wrap {
    width: 100%;
    box-sizing: border-box;
}

.bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.bc-wrap[data-columns="1"] .bc-grid { grid-template-columns: 1fr; }
.bc-wrap[data-columns="2"] .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-wrap[data-columns="3"] .bc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-wrap[data-columns="4"] .bc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bc-card {
    background: #9DCECC;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.bc-top {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.bc-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.bc-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    color: #1E2D2F;
}

.bc-check {
    position: absolute;
    right: 15px;
    top: 15px;
    background: #6BAAA8;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.bc-middle {
    padding: 0 18px 18px;
}

.bc-text {
    font-size: 14px;
    margin-bottom: 8px;
    color: #243738;
}

.bc-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bc-bar {
    flex: 1;
    height: 7px;
    background: #d9eceb;
    border-radius: 10px;
    overflow: hidden;
}

.bc-fill {
    height: 100%;
    background: #5A8F8D;
    border-radius: 10px;
}

.bc-percent {
    font-size: 12px;
    color: #1E2D2F;
    font-weight: 600;
    min-width: 34px;
    text-align: right;
}

.bc-bottom {
    background: #F2F2F2;
    padding: 16px;
    text-align: center;
}

.bc-btn {
    background: #5A8F8D;
    border: none;
    padding: 10px 22px;
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.bc-btn:hover,
.bc-btn:focus {
    background: #4A7A78;
    transform: translateY(-1px);
}

@media (max-width: 991px) {
    .bc-wrap[data-columns] .bc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bc-wrap[data-columns] .bc-grid {
        grid-template-columns: 1fr;
    }
}

body.bc-modal-open {
    overflow: hidden;
}

/* ===== MODAL ===== */
.bc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.bc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
}

.bc-modal-content {
    position: relative;
    z-index: 2;
    width: min(96vw, 1180px);
    max-height: 94vh;
    overflow-y: auto;
    margin: 3vh auto;
    background: #f3f1ee;
    border-radius: 0;
    padding: 12px 22px 26px;
    box-sizing: border-box;
    margin-top:100px;
}

.bc-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #d9d9d9;
    color: #111;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ===== FALLBACK ===== */
.bc-coming-soon {
    padding: 40px 20px;
    text-align: center;
    font-size: 22px;
    color: #1f1f1f;
}

/* ===== TIEMPO CONTIGO ===== */
.tc-modal-wrap {
    color: #111;
    font-family: "Montserrat", sans-serif;
}

.tc-main-title,
.tc-panel-title,
.tc-fieldset-title,
.tc-time-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.tc-main-title {
    text-align: center;
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.tc-head-row {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    margin: 0 auto 14px;
    max-width: 1050px;
}

.tc-heart-wrap {
    width: 118px;
    min-width: 118px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
}

.tc-heart-icon {
    width: 90px;
    height: auto;
    object-fit: contain;
    display: block;
}

.tc-head-info {
    flex: 1;
    min-width: 0;
}

.tc-meta-pill {
    height: 34px;
    border-radius: 18px;
    background: #9fd0cf;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 14px;
    max-width: 620px;
    box-sizing: border-box;
}

.tc-meta-left,
.tc-meta-goal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e2d2f;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}

.tc-meta-goal {
    white-space: normal;
    line-height: 1.2;
}

.tc-cal-icon,
.tc-meta-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-cal-icon svg {
    width: 18px;
    height: 18px;
}

.tc-meta-caret svg {
    width: 14px;
    height: 14px;
}

.tc-meta-divider {
    width: 1px;
    height: 18px;
    background: rgba(30, 45, 47, 0.25);
    flex: 0 0 1px;
}

.tc-top-progress-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    max-width: 690px;
}

.tc-top-progress {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: transparent;
    position: relative;
}

.tc-top-progress-fill {
    width: 100%;
    height: 100%;
    background: #6a8f92;
    border-radius: 999px;
}

.tc-top-progress-text {
    font-size: 31px;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    margin-top: -1px;
}

/* PANEL */
.tc-panel {
    max-width: 1050px;
    margin: 14px auto 0;
    background: #9fd0cf;
    border-radius: 22px;
    padding: 12px 28px 28px;
    box-sizing: border-box;
}

.tc-panel-title {
    text-align: center;
    font-size: 28px;
    line-height: 1.15;
    margin: 2px 0 14px;
}

/* FIELDSET */
.tc-fieldset {
    border: 3px solid #6f8e92;
    border-radius: 16px;
    padding: 8px 18px 14px;
    margin-bottom: 12px;
}

.tc-fieldset-title {
    text-align: center;
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 10px;
}

.tc-chip-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}

.tc-chip {
    min-width: 94px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid #6f8e92;
    background: transparent;
    color: #1e2d2f;
    font-size: 14px;
    line-height: 1;
    padding: 0 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

.tc-chip.is-active {
    background: #6f8e92;
    color: #fff;
}

.tc-chip-group-actions .tc-chip {
    min-width: 96px;
}

/* TIME */
.tc-time-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}

.tc-time-title {
    font-size: 22px;
    line-height: 1.1;
}

.tc-chip-group-time {
    gap: 10px 14px;
}

.tc-chip-time {
    min-width: 86px;
    height: 32px;
}

/* ENERGY */
.tc-energy-box {
    padding-top: 10px;
    padding-bottom: 8px;
}

.tc-energy-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 2px;
}

.tc-energy-item {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    border-radius: 16px;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.tc-energy-flower {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    pointer-events: none;
}

.tc-energy-item.is-active {
    transform: translateY(-2px);
}

.tc-energy-item.is-active .tc-energy-flower {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(14, 83, 87, .18));
}

.bc-readonly-mode .tc-energy-item {
    cursor: default;
}

.tc-energy-labels {
    margin-top: 2px;
    display: flex;
    justify-content: center;
    gap: 160px;
    font-size: 14px;
    color: #1f1f1f;
}

/* ACTIONS */
.tc-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.tc-save-btn {
    min-width: 164px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #6f8e92;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .bc-modal-content {
        width: 100vw;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        padding: 14px 14px 24px;
    }

    .tc-head-row {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .tc-heart-wrap {
        width: auto;
        min-width: 0;
        padding-top: 0;
    }

    .tc-heart-icon {
        width: 84px;
    }

    .tc-head-info {
        width: 100%;
    }

    .tc-meta-pill {
        max-width: 100%;
        height: auto;
        min-height: 42px;
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tc-meta-divider {
        display: none;
    }

    .tc-top-progress-row {
        max-width: 100%;
    }

    .tc-panel {
        padding: 14px 14px 20px;
        border-radius: 18px;
    }

    .tc-panel-title {
        font-size: 24px;
    }

    .tc-fieldset {
        padding: 10px 10px 14px;
    }

    .tc-fieldset-title,
    .tc-time-title {
        font-size: 20px;
    }

    .tc-energy-scale {
        gap: 8px;
        flex-wrap: wrap;
    }

    .tc-energy-flower {
        font-size: 42px;
    }

    .tc-energy-labels {
        gap: 40px;
        font-size: 13px;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .tc-main-title {
        font-size: 22px;
        margin-top: 6px;
    }

    .bc-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 24px;
    }

    .tc-meta-left,
    .tc-meta-goal {
        font-size: 13px;
    }

    .tc-top-progress {
        height: 8px;
    }

    .tc-top-progress-text {
        font-size: 16px;
    }

    .tc-panel-title {
        font-size: 20px;
    }

    .tc-fieldset-title,
    .tc-time-title {
        font-size: 18px;
    }

    .tc-chip {
        min-width: auto;
        padding: 0 12px;
        font-size: 13px;
    }

    .tc-time-block {
        gap: 12px;
    }

    .tc-energy-scale {
        gap: 6px;
    }

    .tc-energy-flower {
        font-size: 34px;
    }

    .tc-energy-labels {
        justify-content: space-between;
        gap: 10px;
        padding: 0 10px;
    }

    .tc-save-btn {
        width: 100%;
        max-width: 220px;
    }
}

/* ===== DIAS SIN ALCOHOL ===== */

.dsa-container{
    text-align:center;
}

.dsa-title{
    font-size:26px;
    margin-bottom:10px;
}

.dsa-header{
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:center;
}

.dsa-big-icon{
    width:80px;
}

.dsa-pill{
    background:#9DCECC;
    padding:8px 15px;
    border-radius:20px;
    display:flex;
    gap:15px;
}

.dsa-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.dsa-progress{
    width:200px;
    height:6px;
    background:#ddd;
    border-radius:10px;
}

.dsa-progress-fill{
    height:100%;
    background:#5A8F8D;
}

.dsa-box{
    background:#9DCECC;
    padding:20px;
    border-radius:20px;
    margin-top:20px;
}

.dsa-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
    margin:20px 0;
}

.dsa-day{
    cursor:pointer;
}

.dsa-number{
    font-size:12px;
}

.dsa-icon{
    width:30px;
    display:block;
    margin:0 auto;
}

.dsa-fill{
    fill:transparent;
}

.dsa-day.active .dsa-fill{
    fill:#000;
}

.dsa-actions{
    display:flex;
    justify-content:center;
    gap:20px;
}

.dsa-btn-primary{
    background:#5A8F8D;
    color:#fff;
    padding:10px 20px;
    border-radius:20px;
}

.dsa-btn-secondary{
    background:#6f8e92;
    color:#fff;
    padding:10px 20px;
    border-radius:20px;
}

/* MOBILE */
@media(max-width:768px){
    .dsa-grid{
        grid-template-columns: repeat(5,1fr);
    }

    .dsa-header{
        flex-direction:column;
    }
}

/* ===== RELACIONES SIGNIFICATIVAS ===== */
.rel-container{
    font-family:"Montserrat", sans-serif;
    color:#111;
    max-width:980px;
    margin:0 auto;
}

.rel-title{
    margin:0 0 12px;
    text-align:center;
    font-family:"Montserrat", sans-serif;
    font-size:36px;
    line-height:1.05;
    font-weight:600;
    color:#111;
}

.rel-header{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:18px;
    align-items:center;
    margin-bottom:22px;
}

.rel-heart-icon{
    width:120px;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.rel-heart-icon img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

.rel-header-main{
    width:100%;
}

.rel-pill{
    min-height:44px;
    background:#9fd0cf;
    border-radius:999px;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:14px;
    padding:0 20px;
    box-sizing:border-box;
    position:relative;
}

.rel-pill .bc-date-pill-inline{
    border:none;
    background:transparent;
    height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    color:#111;
    cursor:pointer;
    padding:0;
}

.rel-goal-control{
    border:none;
    background:transparent;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#111;
    font-size:16px;
    font-family:"Montserrat", sans-serif;
    cursor:pointer;
    padding:0 8px;
}

.rel-goal-control::after{
    content:"⌄";
    margin-left:8px;
}

.rel-progress-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
    margin-top:18px;
}

.rel-progress{
    height:14px;
    background:#d8eeee;
    border-radius:999px;
    overflow:hidden;
}

.rel-progress-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:#65898e;
    transition:width .25s ease;
}

.rel-progress-text{
    font-size:18px;
    color:#111;
}

.rel-goal-editor{
    display:none;
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.15);
    padding:16px;
    margin-top:10px;
    position:relative;
    z-index:5;
}

.rel-goal-editor.is-open{
    display:block;
}

.rel-goal-label{
    display:block;
    font-size:13px;
    margin:0 0 6px;
    color:#233;
}

.rel-goal-editor select,
.rel-goal-editor input{
    width:100%;
    min-height:38px;
    border:1.5px solid #6f8e92;
    border-radius:10px;
    padding:7px 10px;
    box-sizing:border-box;
    margin-bottom:12px;
    font-family:"Montserrat", sans-serif;
}

.rel-goal-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:8px;
    align-items:center;
}

.rel-goal-row button{
    border:none;
    border-radius:999px;
    padding:10px 14px;
    background:#6f8e92;
    color:#fff;
    cursor:pointer;
}

.rel-goal-row .rel-goal-cancel{
    background:#dfe9e9;
    color:#263b3e;
}

.rel-panel{
    background:#9fd0cf;
    border-radius:26px;
    padding:26px 40px 28px;
    box-sizing:border-box;
}

.rel-input-row{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:18px;
    align-items:center;
    margin-bottom:24px;
}

.rel-input-row label{
    text-align:right;
    font-size:24px;
    line-height:1.15;
}

.rel-input-row input{
    min-height:44px;
    border:4px solid #6f8e92;
    border-radius:10px;
    background:#fff;
    padding:8px 44px 8px 12px;
    box-sizing:border-box;
    font-size:16px;
    font-style:italic;
    font-family:"Montserrat", sans-serif;
    background-image:linear-gradient(135deg, transparent 55%, #777 55%), linear-gradient(45deg, #777 45%, transparent 45%);
    background-size:18px 18px, 18px 18px;
    background-repeat:no-repeat;
    background-position:calc(100% - 18px) 15px, calc(100% - 13px) 15px;
}

.rel-fieldset{
    border:4px solid #6f8e92;
    border-radius:16px;
    padding:8px 16px 16px;
    margin-bottom:24px;
}

.rel-fieldset-title{
    margin:0 0 16px;
    text-align:center;
    font-family:"Montserrat", sans-serif;
    font-size:29px;
    font-weight:500;
    line-height:1.1;
}

.rel-options{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 18px;
}

.rel-options-wrap{
    max-width:700px;
    margin:0 auto;
}

.rel-pill-btn{
    min-width:150px;
    min-height:36px;
    padding:6px 18px;
    border-radius:999px;
    border:2px solid #6f8e92;
    background:transparent;
    color:#1e2d2f;
    font-family:"Montserrat", sans-serif;
    font-size:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.rel-pill-btn.active,
.rel-pill-btn.is-active{
    background:#6f8e92;
    color:#fff;
}

.rel-actions{
    display:flex;
    justify-content:center;
    margin-top:-8px;
}

.rel-btn-primary{
    min-width:220px;
    height:38px;
    border:none;
    border-radius:999px;
    background:#6f8e92;
    color:#fff;
    font-family:"Montserrat", sans-serif;
    font-size:16px;
    cursor:pointer;
    padding:0 28px;
}

@media (max-width: 991px){
    .rel-title{font-size:30px;}
    .rel-header{grid-template-columns:100px 1fr;}
    .rel-heart-icon{width:92px;}
    .rel-panel{padding:22px 20px;}
    .rel-input-row{grid-template-columns:1fr;gap:8px;}
    .rel-input-row label{text-align:left;font-size:20px;}
    .rel-fieldset-title{font-size:24px;}
}

@media (max-width: 640px){
    .rel-title{font-size:25px;}
    .rel-header{grid-template-columns:1fr;gap:8px;}
    .rel-heart-icon{width:92px;}
    .rel-pill{grid-template-columns:1fr;padding:8px 14px;border-radius:20px;gap:4px;}
    .rel-goal-control{justify-content:flex-start;font-size:14px;}
    .rel-goal-row{grid-template-columns:1fr;}
    .rel-panel{padding:18px 14px;border-radius:20px;}
    .rel-fieldset{padding:10px 10px 14px;}
    .rel-fieldset-title{font-size:20px;}
    .rel-pill-btn{min-width:auto;width:100%;font-size:14px;}
    .rel-input-row label{font-size:18px;}
    .rel-btn-primary{width:100%;max-width:240px;}
}

/* ===== AHORRO ===== */

.ahorro-container{
    text-align:center;
    font-family:Montserrat, sans-serif;
}

.ahorro-title{
    font-size:28px;
    margin-bottom:10px;
}

.ahorro-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.ahorro-icon{
    width:80px;
}

.ahorro-pill{
    background:#9DCECC;
    padding:8px 15px;
    border-radius:20px;
    display:flex;
    gap:15px;
}

.ahorro-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.ahorro-progress{
    width:220px;
    height:6px;
    background:#ddd;
    border-radius:10px;
}

.ahorro-progress-fill{
    height:100%;
    background:#5A8F8D;
}

.ahorro-box{
    background:#9DCECC;
    margin-top:20px;
    padding:25px;
    border-radius:20px;
}

.ahorro-total{
    font-size:28px;
    margin-bottom:15px;
}

.ahorro-icons{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:15px;
}

.ahorro-step{
    width:40px;
    height:40px;
    border:2px solid #fff;
    border-radius:8px;
}

.ahorro-step.active{
    background:#5A8F8D;
}

.ahorro-options{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:15px 0;
}

.ahorro-pill-btn{
    padding:8px 15px;
    border-radius:20px;
    border:2px solid #6f8e92;
    background:transparent;
    cursor:pointer;
}

.ahorro-pill-btn.active{
    background:#6f8e92;
    color:#fff;
}

.ahorro-input-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:15px 0;
}

.ahorro-input-row input{
    width:150px;
    padding:8px;
    border-radius:10px;
    border:1px solid #ccc;
}

.ahorro-btn{
    background:#5A8F8D;
    color:#fff;
    padding:10px 25px;
    border-radius:20px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .ahorro-header{
        flex-direction:column;
    }

    .ahorro-progress{
        width:100%;
    }

    .ahorro-input-row{
        flex-direction:column;
    }

    .ahorro-input-row input{
        width:100%;
    }

    .ahorro-btn{
        width:100%;
    }
}

/* ===== PRESENCIA AMIGOS ===== */

.pca-container{
    text-align:center;
    font-family:Montserrat, sans-serif;
}

.pca-title{
    font-size:26px;
    margin-bottom:10px;
}

.pca-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.pca-icon{
    width:80px;
}

.pca-pill{
    background:#9DCECC;
    padding:8px 15px;
    border-radius:20px;
    display:flex;
    gap:15px;
}

.pca-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.pca-progress{
    width:220px;
    height:6px;
    background:#ddd;
    border-radius:10px;
}

.pca-progress-fill{
    height:100%;
    background:#5A8F8D;
}

.pca-box{
    background:#9DCECC;
    margin-top:20px;
    padding:25px;
    border-radius:20px;
}

.pca-input-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:15px;
}

.pca-input-row input{
    padding:8px;
    border-radius:10px;
    border:1px solid #ccc;
}

.pca-fieldset{
    border:2px solid #6f8e92;
    padding:15px;
    border-radius:15px;
    margin-bottom:15px;
}

.pca-options{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}

.pca-pill-btn{
    padding:8px 15px;
    border-radius:20px;
    border:2px solid #6f8e92;
    background:transparent;
    cursor:pointer;
}

.pca-pill-btn.active{
    background:#6f8e92;
    color:#fff;
}

.pca-split{
    display:flex;
    gap:20px;
    margin:15px 0;
}

.pca-col{
    flex:1;
    border-top:2px solid #6f8e92;
    padding-top:10px;
}

.pca-btn{
    margin-top:15px;
    background:#5A8F8D;
    color:#fff;
    padding:10px 25px;
    border-radius:20px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .pca-header{
        flex-direction:column;
    }

    .pca-split{
        flex-direction:column;
    }

    .pca-input-row{
        flex-direction:column;
    }

    .pca-input-row input{
        width:100%;
    }

    .pca-btn{
        width:100%;
    }
}


/* ===== LLAMADA FAMILIAR ===== */

.lf-container{
    text-align:center;
    font-family:Montserrat, sans-serif;
}

.lf-title{
    font-size:26px;
    margin-bottom:10px;
}

.lf-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.lf-icon{
    width:80px;
}

.lf-pill{
    background:#9DCECC;
    padding:8px 15px;
    border-radius:20px;
    display:flex;
    gap:15px;
}

.lf-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.lf-progress{
    width:220px;
    height:6px;
    background:#ddd;
    border-radius:10px;
}

.lf-progress-fill{
    height:100%;
    background:#5A8F8D;
}

.lf-box{
    background:#9DCECC;
    margin-top:20px;
    padding:25px;
    border-radius:20px;
}

.lf-input-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:15px;
}

.lf-input-row input{
    padding:8px;
    border-radius:10px;
    border:1px solid #ccc;
}

.lf-fieldset{
    border:2px solid #6f8e92;
    padding:15px;
    border-radius:15px;
    margin-bottom:15px;
}

.lf-options{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}

.lf-pill-btn{
    padding:8px 15px;
    border-radius:20px;
    border:2px solid #6f8e92;
    background:transparent;
    cursor:pointer;
}

.lf-pill-btn.active{
    background:#6f8e92;
    color:#fff;
}

.lf-split{
    display:flex;
    gap:20px;
    margin:15px 0;
}

.lf-col{
    flex:1;
    border-top:2px solid #6f8e92;
    padding-top:10px;
}

.lf-col input{
    margin-top:10px;
    width:100%;
    padding:8px;
    border-radius:10px;
    border:1px solid #ccc;
}

.lf-btn{
    margin-top:15px;
    background:#5A8F8D;
    color:#fff;
    padding:10px 25px;
    border-radius:20px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .lf-header{
        flex-direction:column;
    }

    .lf-split{
        flex-direction:column;
    }

    .lf-input-row{
        flex-direction:column;
    }

    .lf-input-row input{
        width:100%;
    }

    .lf-btn{
        width:100%;
    }
}
/* ===== GUARDADO TRACKER ENERGÍA ===== */
.bc-save-msg {
    margin: 10px 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.bc-save-msg.is-success {
    background: #e4f4ef;
    color: #1e6652;
}

.bc-save-msg.is-error {
    background: #f8e2e2;
    color: #8a2222;
}

.is-saving {
    opacity: .7;
    cursor: wait !important;
}

/* ===== SELECTOR DE FECHA / HISTÓRICO ===== */
.bc-date-control {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.bc-date-pill {
    border: 0;
    border-radius: 999px;
    background: #9DCECC;
    color: #1E2D2F;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.bc-date-pill:hover {
    filter: brightness(.97);
}

.bc-date-input {
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bc-readonly-msg {
    background: #fff3cd;
    color: #664d03;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 12px;
    font-size: 13px;
}

.bc-readonly-mode button:not(.bc-date-pill):not(.bc-close):not([data-bc-close]) {
    cursor: not-allowed;
    opacity: .7;
}

.bc-date-inline-host {
    position: relative;
}

.bc-date-pill-inline {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.tc-meta-left.bc-date-pill {
    cursor: pointer;
}

.tc-meta-left.bc-date-pill:hover,
.bc-date-pill-inline:hover {
    filter: brightness(.94);
}

.dsa-pill .bc-date-pill,
.ahorro-pill .bc-date-pill,
.pca-pill .bc-date-pill,
.lf-pill .bc-date-pill {
    background: transparent;
    color: inherit;
    border: 0;
    padding: 0;
    font: inherit;
}

.dsa-pill .bc-date-arrow,
.ahorro-pill .bc-date-arrow,
.pca-pill .bc-date-arrow,
.lf-pill .bc-date-arrow {
    font-size: 13px;
    line-height: 1;
}

.bc-date-input {
    z-index: -1;
}

/* Ajuste Días sin alcohol: selección tipo radio + imagen copa */
.dsa-helper {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .85;
}

.dsa-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dsa-day {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.dsa-day:hover {
    background: rgba(255,255,255,.18);
    transform: translateY(-1px);
}

.dsa-day.active,
.dsa-day.is-active {
    background: rgba(255,255,255,.28);
}

.dsa-number {
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.dsa-copa-wrap {
    position: relative;
    display: block;
    width: 34px;
    height: 44px;
}

.dsa-copa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .18s ease, transform .18s ease;
}

.dsa-copa-full {
    opacity: 0;
    transform: scale(.92);
}

.dsa-day.active .dsa-copa-empty,
.dsa-day.is-active .dsa-copa-empty,
.dsa-radio:checked ~ .dsa-copa-wrap .dsa-copa-empty {
    opacity: 0;
}

.dsa-day.active .dsa-copa-full,
.dsa-day.is-active .dsa-copa-full,
.dsa-radio:checked ~ .dsa-copa-wrap .dsa-copa-full {
    opacity: 1;
    transform: scale(1);
}

.bc-readonly-mode .dsa-day {
    cursor: default;
    opacity: .78;
}

.bc-readonly-mode .dsa-day:hover {
    background: transparent;
    transform: none;
}

@media (max-width: 480px) {
    .dsa-copa-wrap {
        width: 30px;
        height: 39px;
    }
}

/* Meta interactiva: Días sin alcohol */
.dsa-goal-control {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.dsa-goal-control:hover .dsa-goal-text {
    text-decoration: underline;
}

.dsa-goal-editor {
    display: none;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(17,42,60,.12);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 10px 28px rgba(17,42,60,.10);
}

.dsa-goal-editor.is-open {
    display: block;
}

.dsa-goal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.dsa-goal-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dsa-goal-input {
    width: 88px;
    border: 1px solid rgba(17,42,60,.18);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 15px;
}

.dsa-goal-save,
.dsa-goal-cancel {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.dsa-goal-save {
    background: #5A8F8D;
    color: #fff;
}

.dsa-goal-cancel {
    background: rgba(17,42,60,.09);
    color: #112a3c;
}

.dsa-goal-editor small {
    display: block;
    margin-top: 7px;
    opacity: .72;
}

.bc-readonly-mode .dsa-goal-control {
    cursor: default;
}

.bc-readonly-mode .dsa-goal-control:hover .dsa-goal-text {
    text-decoration: none;
}

@media (max-width: 480px) {
    .dsa-pill {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dsa-goal-row {
        justify-content: center;
    }
}

/* Meta interactiva: Tiempo contigo */
.tc-goal-control {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.tc-goal-control:hover .tc-goal-text {
    text-decoration: underline;
}

.tc-goal-editor {
    display: none;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(17,42,60,.12);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 10px 28px rgba(17,42,60,.10);
    max-width: 620px;
}

.tc-goal-editor.is-open {
    display: block;
}

.tc-goal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 6px;
}

.tc-goal-label:first-child {
    margin-top: 0;
}

.tc-goal-description-input,
.tc-goal-days-input {
    border: 1px solid rgba(17,42,60,.18);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 15px;
    box-sizing: border-box;
}

.tc-goal-description-input {
    width: 100%;
}

.tc-goal-days-input {
    width: 88px;
}

.tc-goal-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.tc-goal-save,
.tc-goal-cancel {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.tc-goal-save {
    background: #5A8F8D;
    color: #fff;
}

.tc-goal-cancel {
    background: rgba(17,42,60,.09);
    color: #112a3c;
}

.tc-goal-editor small {
    display: block;
    margin-top: 7px;
    opacity: .72;
}

.bc-readonly-mode .tc-goal-control {
    cursor: default;
}

.bc-readonly-mode .tc-goal-control:hover .tc-goal-text {
    text-decoration: none;
}

@media (max-width: 480px) {
    .tc-goal-row {
        justify-content: center;
    }
}

/* Meta interactiva: Ahorro */
.ahorro-goal-control {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.ahorro-goal-control:hover .ahorro-goal-text {
    text-decoration: underline;
}

.ahorro-goal-editor {
    display: none;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(17,42,60,.12);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 10px 28px rgba(17,42,60,.10);
    max-width: 520px;
}

.ahorro-goal-editor.is-open {
    display: block;
}

.ahorro-goal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 6px;
}

.ahorro-goal-label:first-child {
    margin-top: 0;
}

.ahorro-goal-period-input,
.ahorro-goal-amount-input {
    border: 1px solid rgba(17,42,60,.18);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 15px;
    background: #fff;
}

.ahorro-goal-period-input {
    min-width: 150px;
}

.ahorro-goal-amount-input {
    width: 150px;
}

.ahorro-goal-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ahorro-goal-save,
.ahorro-goal-cancel {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.ahorro-goal-save {
    background: #5A8F8D;
    color: #fff;
}

.ahorro-goal-cancel {
    background: rgba(17,42,60,.09);
    color: #112a3c;
}

.ahorro-goal-editor small {
    display: block;
    margin-top: 7px;
    opacity: .72;
}

.bc-readonly-mode .ahorro-goal-control {
    cursor: default;
}

.bc-readonly-mode .ahorro-goal-control:hover .ahorro-goal-text {
    text-decoration: none;
}

@media (max-width: 480px) {
    .ahorro-pill {
        flex-wrap: wrap;
        justify-content: center;
    }
    .ahorro-goal-row {
        justify-content: center;
    }
}

/* Meta interactiva: Llamada familiar */
.lf-header-info {
    text-align: left;
}

.lf-goal-control {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.lf-goal-control:hover .lf-goal-text {
    text-decoration: underline;
}

.lf-goal-editor {
    display: none;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(17,42,60,.12);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 10px 28px rgba(17,42,60,.10);
    max-width: 520px;
}

.lf-goal-editor.is-open {
    display: block;
}

.lf-goal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 6px;
}

.lf-goal-label:first-child {
    margin-top: 0;
}

.lf-goal-period-input,
.lf-goal-count-input {
    border: 1px solid rgba(17,42,60,.18);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 15px;
    background: #fff;
}

.lf-goal-period-input {
    min-width: 150px;
}

.lf-goal-count-input {
    width: 110px;
}

.lf-goal-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lf-goal-save,
.lf-goal-cancel {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.lf-goal-save {
    background: #5A8F8D;
    color: #fff;
}

.lf-goal-cancel {
    background: rgba(17,42,60,.09);
    color: #112a3c;
}

.lf-goal-editor small {
    display: block;
    margin-top: 7px;
    opacity: .72;
}

.lf-total {
    font-size: 13px;
    margin-top: 6px;
    color: #112a3c;
    opacity: .85;
}

.lf-progress-fill {
    border-radius: 10px;
    transition: width .25s ease;
}

.bc-readonly-mode .lf-goal-control {
    cursor: default;
}

.bc-readonly-mode .lf-goal-control:hover .lf-goal-text {
    text-decoration: none;
}

@media (max-width: 480px) {
    .lf-pill {
        flex-wrap: wrap;
        justify-content: center;
    }
    .lf-goal-row {
        justify-content: center;
    }
    .lf-header-info {
        text-align: center;
    }
}

/* ===== META PRESENCIA CON AMIGOS ===== */
.pca-goal-control {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.pca-goal-control:hover .pca-goal-text {
    text-decoration: underline;
}

.pca-goal-editor {
    display: none;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(17,42,60,.12);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 10px 28px rgba(17,42,60,.10);
    max-width: 560px;
}

.pca-goal-editor.is-open {
    display: block;
}

.pca-goal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 6px;
}

.pca-goal-label:first-child {
    margin-top: 0;
}

.pca-goal-period-input,
.pca-goal-count-input,
.pca-goal-action-input {
    border: 1px solid rgba(17,42,60,.18);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 15px;
    background: #fff;
}

.pca-goal-period-input {
    min-width: 150px;
}

.pca-goal-action-input {
    width: 100%;
    max-width: 380px;
}

.pca-goal-count-input {
    width: 110px;
}

.pca-goal-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pca-goal-save,
.pca-goal-cancel {
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.pca-goal-save {
    background: #5A8F8D;
    color: #fff;
}

.pca-goal-cancel {
    background: rgba(17,42,60,.09);
    color: #112a3c;
}

.pca-goal-editor small {
    display: block;
    margin-top: 7px;
    opacity: .72;
}

.pca-total {
    font-size: 13px;
    margin-top: 6px;
    color: #112a3c;
    opacity: .85;
}

.pca-progress-fill {
    border-radius: 10px;
    transition: width .25s ease;
}

.bc-readonly-mode .pca-goal-control {
    cursor: default;
}

.bc-readonly-mode .pca-goal-control:hover .pca-goal-text {
    text-decoration: none;
}

@media (max-width: 480px) {
    .pca-pill {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pca-goal-row {
        justify-content: center;
    }
    .pca-header-info {
        text-align: center;
    }
}

/* Días sin alcohol - datos extra diarios */
.dsa-extra-panel{
    margin-top: 22px;
    display: grid;
    gap: 16px;
}

.dsa-extra-box{
    border: 2px solid rgba(18, 45, 45, .28);
    border-radius: 16px;
    padding: 14px 16px 16px;
    background: rgba(255,255,255,.18);
}

.dsa-extra-title{
    margin: 0 0 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2vw, 24px);
    color: #17243a;
    font-weight: 700;
}

.dsa-choice-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

.dsa-choice-row-compact{
    gap: 10px;
}

.dsa-choice-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 34px;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(18, 45, 45, .30);
    background: rgba(255,255,255,.16);
    color: #31434a;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;
    user-select: none;
}

.dsa-choice-pill input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dsa-choice-pill:hover,
.dsa-choice-pill.active,
.dsa-choice-pill.is-active,
.dsa-choice-pill:has(input:checked){
    background: #718b90;
    color: #ffffff;
    border-color: #718b90;
}

.dsa-other-input{
    display: none;
    width: min(100%, 420px);
    margin: 12px auto 0;
    border: 1px solid rgba(18, 45, 45, .25);
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(255,255,255,.72);
    color: #17243a;
    text-align: center;
}

.dsa-other-input.is-visible{
    display: block;
}

.dsa-streak-box{
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    color: #111;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.25;
    margin: 4px 0 0;
}

.dsa-streak-box strong,
.dsa-streak-box span{
    display: block;
}

.bc-readonly-mode .dsa-choice-pill{
    cursor: default;
    opacity: .86;
}

.bc-readonly-mode .dsa-other-input{
    opacity: .78;
}

@media (max-width: 640px){
    .dsa-extra-box{
        padding: 12px;
    }
    .dsa-choice-pill{
        min-width: 92px;
        padding: 7px 12px;
        font-size: 13px;
    }
}

/* v15: Días sin alcohol - layer de meta con formulario diario */
.dsa-goal-editor {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 22, 28, .44);
    backdrop-filter: blur(5px);
    margin: 0;
    border: 0;
    box-shadow: none;
    max-width: none;
}

.dsa-goal-editor.is-open {
    display: flex;
}

.dsa-layer-card {
    position: relative;
    width: min(94vw, 560px);
    max-height: min(88vh, 780px);
    overflow-y: auto;
    background: #a8d6d3;
    border: 2px solid rgba(18, 45, 45, .32);
    border-radius: 20px;
    padding: 24px 20px 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    color: #132238;
    text-align: center;
}

.dsa-layer-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.26);
    color: #132238;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.dsa-layer-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(19px, 2.2vw, 25px);
    margin-bottom: 10px;
}

.dsa-goal-row-centered {
    justify-content: center;
}

.dsa-goal-editor .dsa-goal-input {
    width: 110px;
    text-align: center;
    border: 1.5px solid rgba(18,45,45,.32);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 18px;
    background: rgba(255,255,255,.75);
}

.dsa-extra-panel-layer {
    margin-top: 18px;
}

.dsa-layer-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.dsa-layer-actions .dsa-goal-save,
.dsa-layer-actions .dsa-goal-cancel {
    min-width: 128px;
}

.bc-readonly-mode .dsa-goal-editor.is-open {
    display: none;
}

@media (max-width: 520px) {
    .dsa-layer-card {
        width: 96vw;
        padding: 22px 12px 16px;
    }
    .dsa-choice-pill {
        min-width: 88px;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ===== AJUSTE RESPONSIVE Y SOLO LECTURA - RELACIONES ===== */
.bc-readonly-msg{
    margin:10px 0 14px;
    padding:10px 14px;
    border-radius:14px;
    background:#eef7f7;
    color:#385c60;
    font-size:14px;
    font-weight:600;
    text-align:center;
}

.rel-container,
.rel-container *{
    box-sizing:border-box;
}

.rel-container .bc-readonly-mode input,
.bc-readonly-mode .rel-container input,
.bc-readonly-mode .rel-container select,
.bc-readonly-mode .rel-container textarea{
    opacity:.85;
    cursor:not-allowed;
}

.bc-readonly-mode .rel-container .rel-pill-btn,
.bc-readonly-mode .rel-container .rel-goal-control{
    cursor:not-allowed;
}

@media (max-width: 480px){
    .rel-container{
        max-width:100%;
        padding:0 2px;
    }

    .rel-title{
        font-size:22px;
        line-height:1.15;
    }

    .rel-header{
        grid-template-columns:1fr;
        margin-bottom:14px;
    }

    .rel-heart-icon{
        font-size:52px;
        letter-spacing:-17px;
        min-height:46px;
    }

    .rel-pill{
        width:100%;
        grid-template-columns:1fr;
        align-items:stretch;
        padding:8px 12px;
    }

    .rel-pill .bc-date-pill-inline,
    .rel-goal-control{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .rel-progress-row{
        margin-top:12px;
    }

    .rel-panel{
        padding:16px 12px 18px;
        border-radius:18px;
    }

    .rel-input-row{
        margin-bottom:18px;
    }

    .rel-input-row label{
        text-align:center;
        font-size:17px;
    }

    .rel-input-row input{
        width:100%;
        min-height:42px;
        border-width:2px;
        font-size:14px;
    }

    .rel-fieldset{
        border-width:2px;
        margin-bottom:18px;
    }

    .rel-fieldset-title{
        font-size:18px;
    }
}


@media (max-width: 640px){
    .rel-heart-icon{
        width:88px;
        margin:0 auto;
    }
}

.rel-container .rel-heart-icon img{
    display:block;
}


/* v19 stable: Relaciones Significativas */
.rel-container, .rel-container *{font-family: Montserrat, sans-serif;}
.rel-title, .rel-fieldset-title{font-family: Montserrat, sans-serif;}
.rel-heart-icon img{display:block;width:100%;height:auto;object-fit:contain;}
@media (max-width:640px){.rel-heart-icon{width:88px;margin:0 auto;}.rel-header{grid-template-columns:1fr;}.rel-pill{width:100%;}}

/* Tracker Respiraciones */
.resp-container{
    font-family:'Montserrat', Arial, sans-serif;
    position:relative;
    max-width:920px;
    margin:0 auto;
    padding:18px 28px 26px;
    color:#0c1828;
}
.resp-close{position:absolute;right:-12px;top:-18px;width:34px;height:34px;border:0;border-radius:50%;background:#e5e5e5;font-size:28px;line-height:1;cursor:pointer;color:#111}
.resp-title{font-family:'Montserrat',Arial,sans-serif;text-align:center;font-size:34px;font-weight:700;margin:0 0 14px;color:#090909}
.resp-head{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;margin-bottom:18px}
.resp-icon{width:135px;height:auto;display:block;object-fit:contain}
.resp-pill{position:relative;display:grid;grid-template-columns:180px 1fr;align-items:center;background:#9ed4d2;border-radius:22px;overflow:visible;max-width:490px;min-height:44px}
.resp-date-placeholder{display:flex;gap:8px;align-items:center;justify-content:center;background:transparent;border:0;border-right:1px solid rgba(0,0,0,.18);height:44px;font-size:17px;color:#13212b;cursor:pointer}
.resp-goal-control{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;font-size:17px;color:#13212b;cursor:pointer;padding:0 16px}
.resp-progress-row{display:flex;align-items:center;gap:10px;margin-top:22px;max-width:545px}
.resp-progress{height:14px;flex:1;background:#e6e5ef;border-radius:999px;overflow:hidden}.resp-progress-fill{height:100%;width:0;background:#61868b;border-radius:999px;transition:width .25s ease}.resp-progress-text{font-size:19px;color:#111}
.resp-goal-editor{display:none;position:absolute;top:58px;left:185px;right:0;z-index:5;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 12px 35px rgba(0,0,0,.18);border-radius:18px;padding:16px;max-width:360px}.resp-goal-editor.is-open{display:block}.resp-goal-editor label{display:block;margin:8px 0 6px;font-size:13px}.resp-goal-editor select,.resp-goal-editor input{width:100%;border:1px solid #60878c;border-radius:10px;padding:9px 11px;background:#fff}.resp-goal-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}.resp-goal-save,.resp-goal-cancel{border:0;border-radius:999px;padding:9px 13px;background:#62878c;color:#fff;cursor:pointer}.resp-goal-cancel{background:#9aa2a5;color:#fff}
.resp-box{background:#9ed4d2;border-radius:26px;padding:20px 38px 18px}.resp-total{text-align:center;font-size:31px;margin:0 0 18px;font-weight:700;color:#030303}.resp-duration-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-bottom:18px;font-size:20px}.resp-duration-control{display:flex;align-items:center;border:2px solid #071216;border-radius:10px;overflow:hidden;height:46px}.resp-duration-control input{width:80px;border:0;background:transparent;text-align:center;font-size:18px}.resp-duration-control span{padding-right:8px}.resp-step{width:38px;height:46px;border:0;background:transparent;font-size:36px;line-height:1;cursor:pointer;border-right:2px solid #071216}.resp-step:last-child{border-left:2px solid #071216;border-right:0}.resp-time-btn,.resp-btn{border:0;border-radius:999px;background:#62878c;color:#fff;min-width:180px;padding:12px 22px;font-size:17px;cursor:pointer}.resp-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 20px}.resp-col:first-child{border-right:2px solid rgba(50,80,86,.55);padding-right:12px}.resp-col h4{font-size:18px;font-weight:500;border-bottom:2px solid rgba(50,80,86,.55);padding-bottom:10px;margin:0 0 14px}.resp-options{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center}.resp-pill-btn{border:2px solid #66898e;border-radius:999px;background:transparent;color:#10222d;padding:8px 20px;min-width:110px;font-size:16px;cursor:pointer}.resp-pill-btn.active,.resp-pill-btn.is-active{background:#62878c;color:#fff;border-color:#62878c}.resp-feel{border:3px solid #66898e;border-radius:18px;padding:12px 18px 20px;margin-top:10px}.resp-feel h3{text-align:center;font-size:25px;margin:0 0 16px}.resp-btn{display:block;margin:22px auto 0;min-width:220px}.bc-readonly-mode .resp-pill-btn,.bc-readonly-mode .resp-step,.bc-readonly-mode .resp-time-btn{cursor:not-allowed;opacity:.78}
@media (max-width:768px){.resp-container{padding:14px 10px 22px}.resp-title{font-size:28px}.resp-head{grid-template-columns:1fr;gap:12px;text-align:center}.resp-icon{width:105px;margin:0 auto}.resp-pill{grid-template-columns:1fr;max-width:100%;border-radius:18px}.resp-date-placeholder{border-right:0;border-bottom:1px solid rgba(0,0,0,.18)}.resp-progress-row{margin-top:14px}.resp-goal-editor{left:0;right:0;top:96px;margin:auto}.resp-box{padding:18px 14px}.resp-total{font-size:25px}.resp-duration-row{flex-direction:column;gap:12px}.resp-split{grid-template-columns:1fr}.resp-col:first-child{border-right:0;border-bottom:2px solid rgba(50,80,86,.55);padding:0 0 16px}.resp-pill-btn{min-width:0;flex:1 1 42%;font-size:14px;padding:8px 10px}.resp-feel h3{font-size:22px}.resp-btn{width:70%;min-width:0}}

/* =========================================================
   v22 - Estandarizacion visual de trackers Energia
   Ajustes no invasivos: solo tamanos, tipografia y responsive.
   ========================================================= */
.be-tracker-modal,
.be-tracker-modal *,
.tc-container,
.tc-container *,
.rel-container,
.rel-container *,
.resp-container,
.resp-container *,
.dsa-container,
.dsa-container *,
.ahorro-container,
.ahorro-container *,
.pa-container,
.pa-container *{
  font-family:'Montserrat', Arial, sans-serif !important;
  box-sizing:border-box;
}

/* Respiraciones: medidas alineadas al diseno aprobado */
.resp-container{
  width:min(900px, calc(100vw - 28px));
  max-width:900px;
  padding:18px 18px 22px !important;
}
.resp-title{
  font-size:34px !important;
  line-height:1.05 !important;
  margin-bottom:14px !important;
}
.resp-head{
  grid-template-columns:150px minmax(0, 1fr) !important;
  gap:28px !important;
  margin-bottom:18px !important;
}
.resp-icon{
  width:130px !important;
  max-width:130px !important;
}
.resp-pill{
  max-width:490px !important;
  min-height:44px !important;
  border-radius:22px !important;
}
.resp-date-placeholder,
.resp-goal-control{
  height:44px !important;
  font-size:17px !important;
  line-height:1 !important;
}
.resp-progress-row{
  max-width:545px !important;
  gap:12px !important;
  margin-top:22px !important;
}
.resp-progress{
  height:14px !important;
}
.resp-progress-text{
  font-size:19px !important;
  line-height:1 !important;
}
.resp-box{
  border-radius:26px !important;
  padding:20px 38px 18px !important;
}
.resp-total{
  font-size:31px !important;
  line-height:1.15 !important;
  margin-bottom:18px !important;
}
.resp-duration-row{
  gap:28px !important;
  margin-bottom:18px !important;
  font-size:20px !important;
}
.resp-duration-control{
  width:164px !important;
  height:46px !important;
  border-radius:10px !important;
}
.resp-duration-control input{
  width:76px !important;
  font-size:18px !important;
  height:42px !important;
}
.resp-step{
  width:38px !important;
  height:46px !important;
  font-size:34px !important;
  padding:0 !important;
}
.resp-time-btn{
  min-width:180px !important;
  height:42px !important;
  padding:0 22px !important;
  font-size:17px !important;
}
.resp-split{
  gap:20px !important;
  margin:8px 0 20px !important;
}
.resp-col h4{
  font-size:18px !important;
  line-height:1.2 !important;
  margin-bottom:14px !important;
  padding-bottom:10px !important;
}
.resp-options{
  gap:12px 14px !important;
}
.resp-pill-btn{
  height:36px !important;
  min-width:118px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
.resp-feel{
  border-radius:18px !important;
  padding:12px 18px 20px !important;
  margin-top:10px !important;
}
.resp-feel h3{
  font-size:25px !important;
  line-height:1.15 !important;
  margin:0 0 16px !important;
}
.resp-btn{
  min-width:220px !important;
  height:42px !important;
  padding:0 24px !important;
  border-radius:999px !important;
  font-size:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:22px auto 0 !important;
}

/* Estandar comun para chips/botones de seleccion ya existentes */
.tc-chip,
.tc-option,
.rel-pill-btn,
.rel-option,
.dsa-pill-btn,
.dsa-option,
.ahorro-pill-btn,
.ahorro-option,
.pa-pill-btn,
.pa-option{
  min-height:36px;
  border-radius:999px;
  font-size:16px;
  line-height:1;
}

@media (max-width:768px){
  .resp-container{
    width:calc(100vw - 20px);
    padding:14px 10px 20px !important;
  }
  .resp-title{
    font-size:28px !important;
  }
  .resp-head{
    grid-template-columns:1fr !important;
    gap:12px !important;
    text-align:center !important;
  }
  .resp-icon{
    width:96px !important;
    max-width:96px !important;
    margin:0 auto !important;
  }
  .resp-pill{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    border-radius:18px !important;
  }
  .resp-date-placeholder{
    border-right:0 !important;
    border-bottom:1px solid rgba(0,0,0,.18) !important;
  }
  .resp-goal-control,
  .resp-date-placeholder{
    font-size:15px !important;
  }
  .resp-progress-row{
    max-width:100% !important;
    margin-top:14px !important;
  }
  .resp-progress-text{
    font-size:16px !important;
  }
  .resp-box{
    padding:18px 14px !important;
    border-radius:22px !important;
  }
  .resp-total{
    font-size:25px !important;
  }
  .resp-duration-row{
    flex-direction:column !important;
    gap:12px !important;
    font-size:18px !important;
  }
  .resp-split{
    grid-template-columns:1fr !important;
  }
  .resp-col:first-child{
    border-right:0 !important;
    border-bottom:2px solid rgba(50,80,86,.55) !important;
    padding:0 0 16px !important;
  }
  .resp-col h4{
    font-size:16px !important;
  }
  .resp-pill-btn{
    min-width:0 !important;
    flex:1 1 42% !important;
    height:34px !important;
    font-size:14px !important;
    padding:0 10px !important;
  }
  .resp-feel h3{
    font-size:22px !important;
  }
  .resp-btn,
  .resp-time-btn{
    width:70% !important;
    min-width:0 !important;
    max-width:260px !important;
    height:42px !important;
    font-size:16px !important;
  }
}

@media (max-width:430px){
  .resp-pill-btn{
    flex-basis:100% !important;
  }
  .resp-btn,
  .resp-time-btn{
    width:90% !important;
  }
}

/* =========================================================
   v23 - Compactacion visual para evitar scroll en ventanas
   Solo ajusta tamanos/espaciados; no modifica JS ni logica.
   ========================================================= */
.resp-container{
  width:min(860px, calc(100vw - 24px)) !important;
  max-width:860px !important;
  padding:12px 16px 14px !important;
  max-height:calc(100vh - 28px) !important;
  overflow:hidden !important;
}
.resp-close{width:30px !important;height:30px !important;font-size:24px !important;top:-10px !important;right:-8px !important}
.resp-title{font-size:29px !important;margin-bottom:8px !important;line-height:1 !important}
.resp-head{grid-template-columns:130px minmax(0,1fr) !important;gap:18px !important;margin-bottom:12px !important}
.resp-icon{width:112px !important;max-width:112px !important}
.resp-pill{max-width:470px !important;min-height:40px !important;border-radius:20px !important}
.resp-date-placeholder,.resp-goal-control{height:40px !important;font-size:15px !important}
.resp-progress-row{max-width:520px !important;margin-top:14px !important;gap:9px !important}
.resp-progress{height:11px !important}
.resp-progress-text{font-size:17px !important}
.resp-box{border-radius:24px !important;padding:14px 32px 14px !important}
.resp-total{font-size:27px !important;margin-bottom:12px !important;line-height:1.05 !important}
.resp-duration-row{gap:22px !important;margin-bottom:12px !important;font-size:18px !important}
.resp-duration-control{width:150px !important;height:40px !important}
.resp-duration-control input{width:70px !important;height:38px !important;font-size:16px !important}
.resp-step{width:34px !important;height:40px !important;font-size:30px !important}
.resp-time-btn{min-width:165px !important;height:38px !important;font-size:15px !important;padding:0 18px !important}
.resp-split{gap:16px !important;margin:6px 0 14px !important}
.resp-col h4{font-size:16px !important;margin-bottom:10px !important;padding-bottom:8px !important}
.resp-options{gap:9px 10px !important}
.resp-pill-btn{height:32px !important;min-width:104px !important;padding:0 13px !important;font-size:14px !important;border-width:1.5px !important}
.resp-feel{padding:10px 16px 14px !important;margin-top:8px !important;border-width:2px !important;border-radius:16px !important}
.resp-feel h3{font-size:22px !important;margin-bottom:12px !important;line-height:1.05 !important}
.resp-btn{min-width:205px !important;height:38px !important;font-size:15px !important;margin-top:16px !important}

@media (max-width:768px){
  .resp-container{width:calc(100vw - 16px) !important;max-height:none !important;overflow:visible !important;padding:12px 9px 16px !important}
  .resp-title{font-size:25px !important}
  .resp-head{gap:10px !important;margin-bottom:10px !important}
  .resp-icon{width:82px !important;max-width:82px !important}
  .resp-pill{min-height:38px !important}
  .resp-date-placeholder,.resp-goal-control{height:38px !important;font-size:14px !important}
  .resp-progress-row{margin-top:10px !important}
  .resp-box{padding:14px 10px !important;border-radius:20px !important}
  .resp-total{font-size:22px !important;margin-bottom:10px !important}
  .resp-duration-row{gap:9px !important;margin-bottom:10px !important;font-size:16px !important}
  .resp-duration-control{height:38px !important}
  .resp-step{height:38px !important}
  .resp-split{gap:12px !important;margin-bottom:12px !important}
  .resp-col h4{font-size:14px !important;margin-bottom:8px !important}
  .resp-pill-btn{height:30px !important;font-size:13px !important;flex:1 1 30% !important;padding:0 8px !important}
  .resp-feel{padding:9px 10px 12px !important}
  .resp-feel h3{font-size:19px !important;margin-bottom:10px !important}
  .resp-btn,.resp-time-btn{height:36px !important;font-size:14px !important;margin-top:12px !important}
}

/* =========================================================
   v24 - Respiraciones: eliminar overflow horizontal/cortes
   Ajuste visual solamente. No modifica guardado, calendario ni AJAX.
   ========================================================= */
#bc-modal-body .resp-container{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
#bc-modal-body .resp-box,
#bc-modal-body .resp-split,
#bc-modal-body .resp-feel,
#bc-modal-body .resp-col{
  box-sizing:border-box !important;
  max-width:100% !important;
}
#bc-modal-body .resp-split{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
}
#bc-modal-body .resp-col{
  min-width:0 !important;
}
#bc-modal-body .resp-options{
  max-width:100% !important;
  overflow:visible !important;
}
#bc-modal-body .resp-pill-btn{
  white-space:nowrap !important;
}

@media (max-width:900px){
  .bc-modal-content:has(.resp-container){
    width:min(96vw, 760px) !important;
    padding-left:12px !important;
    padding-right:12px !important;
    overflow-x:hidden !important;
  }
  #bc-modal-body .resp-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #bc-modal-body .resp-box{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  #bc-modal-body .resp-pill-btn{
    min-width:96px !important;
    font-size:13px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media (max-width:680px){
  .bc-modal-content:has(.resp-container){
    width:96vw !important;
    max-height:96vh !important;
    margin:2vh auto !important;
    padding:10px 10px 16px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  #bc-modal-body .resp-title{
    font-size:23px !important;
  }
  #bc-modal-body .resp-head{
    grid-template-columns:86px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
  }
  #bc-modal-body .resp-icon{
    width:78px !important;
    max-width:78px !important;
  }
  #bc-modal-body .resp-pill{
    grid-template-columns:42% 58% !important;
    max-width:100% !important;
  }
  #bc-modal-body .resp-date-placeholder,
  #bc-modal-body .resp-goal-control{
    font-size:13px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #bc-modal-body .resp-progress-row{
    max-width:100% !important;
  }
  #bc-modal-body .resp-box{
    padding:12px 10px 14px !important;
  }
  #bc-modal-body .resp-total{
    font-size:20px !important;
  }
  #bc-modal-body .resp-duration-row{
    flex-wrap:wrap !important;
    gap:10px 12px !important;
  }
  #bc-modal-body .resp-split{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #bc-modal-body .resp-col:first-child{
    border-right:0 !important;
    border-bottom:1.5px solid rgba(50,80,86,.55) !important;
    padding-right:0 !important;
    padding-bottom:12px !important;
  }
  #bc-modal-body .resp-pill-btn{
    flex:1 1 31% !important;
    min-width:86px !important;
    height:29px !important;
    font-size:12px !important;
    padding:0 7px !important;
  }
  #bc-modal-body .resp-feel{
    padding:8px 8px 10px !important;
  }
  #bc-modal-body .resp-feel h3{
    font-size:17px !important;
  }
}
