/* Compromiso · la lista del día en /checkin/ (12-sep-2026). Cinco bases + el paso del día + lo propio de hoy.
   El hero (racha) y la celebración del hito son los de la página; sólo se apagan el formulario de
   medición y su confirmación. */
:root{--comp-cream:#EEE5D2;--comp-cream-deep:#E4D8BE;--comp-ink:#11172D;--comp-muted:#596078}
/* Fail-CLOSED: el apagado NO cuelga de que cargue el JS ni de que el miembro tenga sesión.
   Esta hoja se pide sólo desde /checkin/, así que no alcanza a ninguna otra pantalla. */
#form-wrap,#confirm{display:none!important}
.sv-compromiso .hero-sub{max-width:520px}
.comp-shell{padding:8px 0 150px}
.comp-wrap{width:min(100% - 28px,720px);margin:auto}
.comp-surface{background:linear-gradient(180deg,#F4EDDE 0%,var(--comp-cream) 100%);color:var(--comp-ink);padding:clamp(20px,5vw,38px);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.comp-progress{display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:center;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid rgba(17,23,45,.13)}
.comp-ring{--p:0;display:grid;place-items:center;width:74px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#C9A84C calc(var(--p)*1%),rgba(17,23,45,.1) 0);position:relative}
.comp-ring:before{content:"";position:absolute;inset:6px;border-radius:inherit;background:#EEE5D2}
.comp-ring strong{position:relative;font:600 1.05rem Cinzel,serif}
.comp-progress-copy strong{display:block;font:600 1rem/1.3 Raleway,sans-serif}
.comp-progress-copy span{display:block;margin-top:4px;color:var(--comp-muted);font-size:.95rem}
.comp-presence{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:10px;padding:6px 11px;border:1px solid rgba(47,95,90,.35);border-radius:999px;color:#2F5F5A;background:rgba(78,205,196,.12);font:600 .69rem/1 Raleway,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.comp-presence[hidden]{display:none}
.comp-presence i{width:7px;height:7px;border-radius:50%;background:#2F5F5A;box-shadow:0 0 10px rgba(78,205,196,.8)}
.comp-group+.comp-group{margin-top:30px}
.comp-group-title{font:600 .68rem/1.2 Raleway,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:#6E5819;margin:0 0 12px}
.comp-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.comp-item{border:1px solid rgba(17,23,45,.13);border-radius:16px;background:rgba(255,255,255,.38);overflow:hidden;transition:border-color .22s,background .22s,transform .22s}
.comp-item.is-done{border-color:rgba(47,95,90,.55);background:rgba(78,205,196,.12)}
.comp-toggle{width:100%;min-height:64px;display:grid;grid-template-columns:40px 1fr 28px;align-items:center;gap:12px;padding:10px 14px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.comp-toggle:active{transform:scale(.992)}
.comp-toggle:focus-visible{outline:2px solid #6E5819;outline-offset:-4px;border-radius:14px}
.comp-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#7D6329;background:rgba(201,168,76,.13)}
.comp-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.comp-texts{min-width:0}
.comp-label{display:block;font:600 1rem/1.28 Raleway,sans-serif}
.comp-sub{display:block;margin-top:4px;font:400 .84rem/1.32 Raleway,sans-serif;color:var(--comp-muted)}
.comp-sub[hidden]{display:none}
.comp-check{width:25px;height:25px;border:1.5px solid rgba(17,23,45,.62);border-radius:50%;display:grid;place-items:center;color:transparent;transition:.2s}
.is-done .comp-check{color:#071728;background:#4ECDC4;border-color:#2F5F5A}
.comp-check svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.comp-feedback{display:flex;align-items:center;gap:6px;padding:0 14px 10px 66px}
.comp-feedback[hidden]{display:none}
.comp-feedback span{font:500 .72rem Raleway,sans-serif;color:var(--comp-muted);margin-right:3px}
.comp-thumb{width:44px;height:44px;border:0;border-radius:50%;background:rgba(17,23,45,.06);color:#4E5468;display:grid;place-items:center;cursor:pointer}
.comp-thumb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.comp-thumb.abajo svg{transform:rotate(180deg)}
.comp-thumb[aria-pressed=true]{background:#11172D;color:#E8C96A}
.comp-thumb:focus-visible{outline:2px solid #6E5819;outline-offset:2px}
.comp-observe{margin-top:30px;padding:21px;border:1px solid rgba(17,23,45,.13);border-radius:18px;background:rgba(255,255,255,.28)}
.comp-observe p{font:italic 1.15rem/1.35 'Cormorant Garamond',serif;margin:0 0 12px}
.comp-observe a{display:inline-flex;align-items:center;min-height:44px;color:#725B1B;font:700 .74rem Raleway,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(114,91,27,.35)}
.comp-status{min-height:22px;margin:14px 0 0;color:#725B1B;font:600 .78rem/1.4 Raleway,sans-serif}
@media(max-width:640px){body.sv-compromiso #svv-btn{width:52px!important;min-width:52px!important;padding:0!important;justify-content:center!important}body.sv-compromiso #svv-btn span:not(.svv-star){display:none!important}}
@media(max-width:420px){.comp-wrap{width:min(100% - 20px,720px)}.comp-surface{padding:20px 14px}.comp-toggle{grid-template-columns:38px 1fr 26px;padding-inline:10px}.comp-feedback{padding-left:58px}}
@media(prefers-reduced-motion:reduce){.comp-item,.comp-toggle,.comp-check{transition:none!important}}