/* Estados y componentes dinámicos (hecho a mano; sin estilos en línea).
   Todo valor personalizable es una variable de :root: cambia el diseño aquí.
   Va sin capa y con :root delante para ganar a las hojas base, igual que lo hacía el estilo en línea. */
:root{
  --op-inactivo:.6;--op-archivado:.55;--op-revisado:.7;
  --c-aviso-borde:#f59e0b;--c-aviso-fondo:#fffbeb;--c-pendiente-borde:#fca5a5;--c-alerta-texto:#991b1b;
  --c-sin-color:#ef4444;--c-solo-lectura-fondo:#f8fafc;
  --codigo-tam:28px;--codigo-espaciado:.2em;
  --c-peligro-fondo:#fef2f2;--toast-fondo:#0f172a;--z-toast:80000;--z-bloqueo:90000;--op-apagado:.45;
}
/* listas: elementos desactivados / archivados / revisados */
:root .is-inactivo{opacity:var(--op-inactivo)}
:root .is-archivado{opacity:var(--op-archivado)}
:root .is-revisado{opacity:var(--op-revisado)}
:root .is-pendiente{border-color:var(--c-pendiente-borde)}
:root .is-aviso{border-color:var(--c-aviso-borde);background:var(--c-aviso-fondo)}
/* texto de resultados */
:root .txt-alerta{color:var(--c-alerta-texto)}
:root .txt-normal{color:var(--ink-600)}
/* pestañas de estado de cita: el color viene de datos (--est-borde, --est-texto) */
:root .estados button.est-b{border-color:var(--est-borde);color:var(--est-texto)}
:root .estados button.est-b.on{background:var(--est-borde)}
/* ubicaciones del perfil público: la seleccionada */
:root .chips span.sel{background:var(--accent);color:#fff}
/* editor de recetas */
:root .cps .cp-principal{grid-column:1/-1;font-weight:600}
:root .ind .ib.on{background:var(--accent);color:#fff}
:root .sw-dot.sin-color{background-image:linear-gradient(135deg,#fff 45%,var(--c-sin-color) 45%,var(--c-sin-color) 55%,#fff 55%)}
/* plantillas de WhatsApp sin edición */
:root .solo-lectura{background:var(--c-solo-lectura-fondo);color:var(--ink-600);cursor:not-allowed}
/* código de verificación */
:root .campo-codigo{width:100%;text-align:center;border:2px solid var(--ink-200);border-radius:14px;outline:0;padding:13px 10px;font-weight:800}
:root .campo-codigo-grande{font-size:var(--codigo-tam);letter-spacing:var(--codigo-espaciado)}
/* avisos del panel */
:root .aviso{margin-bottom:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
:root .aviso.peligro{border-color:var(--c-pendiente-borde);background:var(--c-peligro-fondo)}
:root .aviso.atencion{border-color:var(--c-aviso-borde);background:var(--c-aviso-fondo)}
:root .fila-flex{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
:root .pie-version{font-size:10.5px;padding:0 14px 8px}
:root .toast-flotante{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:var(--z-toast);background:var(--toast-fondo);color:#fff;padding:12px 16px;border-radius:99px;display:flex;gap:12px;align-items:center;box-shadow:0 12px 36px rgba(0,0,0,.35);font-weight:600;font-size:14px;max-width:92vw}
:root .btn-ancho{width:100%;margin-top:8px}
:root .btn-ancho-calendario{width:100%;margin:10px 0}
/* cámara oculta y pantalla de bloqueo */
:root .cam-oculta{position:fixed;left:-9999px;top:0;width:2px;height:2px;opacity:0}
:root .ov-bloqueo{position:fixed;inset:0;z-index:var(--z-bloqueo);display:grid;place-items:center;background:rgba(15,23,42,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:16px}
/* animaciones y estados que antes se aplicaban con style */
:root .shake{animation:shake .35s}
:root .toast-sale{transition:opacity .3s;opacity:0}
:root .is-apagado{opacity:var(--op-apagado)}
:root .ctx-btn{max-width:300px;overflow:hidden;text-overflow:ellipsis}
:root .sin-puntero{pointer-events:none}
:root .oculto{display:none!important}
:root .og-g{min-height:44px}
.stg-b260>*{--b:260ms}.stg-b520>*{--b:520ms}
:root .vencido{color:#b91c1c}

.otp{position:relative;display:flex;justify-content:center;gap:8px;margin:6px 0 4px}.otp-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;z-index:2;cursor:text}.otp-sep{width:10px;align-self:center;height:3px;border-radius:2px;background:var(--ink-300)}
.otp-d{width:46px;height:58px;border:2px solid var(--ink-200);border-radius:14px;background:var(--card,#fff);display:grid;place-items:center;font:800 26px/1 ui-monospace,monospace;color:var(--ink-900);transition:border-color .2s,box-shadow .2s,background .2s}.otp-d.act{border-color:var(--accent);box-shadow:var(--ring,0 0 0 3px rgba(var(--accent-rgb),.2))}.otp-d.lleno{border-color:var(--accent)}.otp-d.pop{animation:otpPop .28s cubic-bezier(.2,.9,.25,1.4)}
.otp.mal .otp-d{border-color:#dc2626;background:rgba(220,38,38,.07);animation:otpMal .5s}.otp.bien .otp-d{border-color:#16a34a;background:rgba(22,163,74,.12);color:#15803d;animation:otpBien .5s both}.otp.bien .otp-d:nth-child(3){animation-delay:.06s}.otp.bien .otp-d:nth-child(4){animation-delay:.12s}.otp.bien .otp-d:nth-child(6){animation-delay:.18s}.otp.bien .otp-d:nth-child(7){animation-delay:.24s}.otp.bien .otp-d:nth-child(8){animation-delay:.3s}
.err-in{animation:otpErr .35s}
@keyframes otpPop{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1);opacity:1}}@keyframes otpMal{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}@keyframes otpBien{0%{transform:scale(1)}50%{transform:scale(1.18) translateY(-4px)}100%{transform:scale(1)}}@keyframes otpErr{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
@media(max-width:380px){.otp-d{width:38px;height:50px;font-size:22px}}@media(prefers-reduced-motion:reduce){.otp-d,.otp.mal .otp-d,.otp.bien .otp-d,.err-in{animation:none!important}}
html[data-tema=dark] .otp-d{background:#16241d;border-color:rgba(232,240,234,.28)}html[data-tema=dark] .otp-d.lleno,html[data-tema=dark] .otp-d.act{border-color:var(--accent)}

.tel-c{display:flex;align-items:center;gap:0;border:2px solid var(--ink-200);border-radius:16px;background:var(--card,#fff);overflow:hidden;transition:border-color .2s,box-shadow .2s}.tel-c:focus-within{border-color:var(--accent);box-shadow:var(--ring,0 0 0 3px rgba(var(--accent-rgb),.2))}
.tel-p{display:flex;align-items:center;gap:7px;align-self:stretch;padding:0 14px;background:rgba(var(--accent-rgb),.08);border-right:2px solid var(--ink-200);font-weight:800;font-size:17px;color:var(--accent);white-space:nowrap}.tel-p i{font-size:14px}
.tel-i{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:15px 12px;font:800 22px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--ink-900)}.tel-i::placeholder{font-weight:600;color:var(--ink-300);letter-spacing:.04em}
.tel-ok{margin-right:14px;font-size:22px;color:#16a34a;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.25,1.5)}.tel-c.listo{border-color:#16a34a}.tel-c.listo .tel-ok{opacity:1;transform:scale(1)}
html[data-tema=dark] .tel-c{background:#16241d;border-color:rgba(232,240,234,.28)}html[data-tema=dark] .tel-p{border-color:rgba(232,240,234,.28)}@media(max-width:380px){.tel-i{font-size:19px}}
.p5-host .lg.stg{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:18px 16px;box-shadow:0 18px 40px -22px rgba(15,23,42,.45)}
html[data-tema=dark] .p5-host .lg.stg{background:rgba(15,26,21,.8);border-color:rgba(232,240,234,.16);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
html[data-tema=dark] .p5-host .lg.stg h3{color:#f1f5f2}html[data-tema=dark] .p5-host .lg.stg p,html[data-tema=dark] .p5-host .lg.stg .muted{color:#b9c9bf}
html[data-tema=dark] .btn-outline{background:#16241d;color:#e8f0ea;border-color:rgba(232,240,234,.28)}html[data-tema=dark] .btn-outline:disabled{opacity:.55;color:#9db0a5}
html[data-tema=dark] .lgc-back,html[data-tema=dark] .lg .lgc-back{color:#b9c9bf}
.lg.stg{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:18px 16px;box-shadow:0 18px 40px -22px rgba(15,23,42,.45)}
.lg.stg h3,.lg.stg p,.lg.stg .muted,.lg.stg .lgc-back,.lg.stg b{color:#0e1526}.lg.stg .muted{color:#344054}
html[data-tema=dark] .lg.stg{background:rgba(15,26,21,.86);border-color:rgba(232,240,234,.16)}html[data-tema=dark] .lg.stg h3,html[data-tema=dark] .lg.stg p,html[data-tema=dark] .lg.stg b,html[data-tema=dark] .lg.stg .lgc-back{color:#f1f5f2}html[data-tema=dark] .lg.stg .muted{color:#c3d1c8}
.est-h,.est-r{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(var(--accent-rgb),.08);margin:8px 0}.est-h i,.est-r i{font-size:28px;color:var(--accent);flex:none}.est-h b,.est-r b{display:block}.est-h span,.est-r span{display:block;font-size:13px;color:var(--ink-600);line-height:1.45}.est-r{background:rgba(245,158,11,.12)}.est-r i{color:#b45309}
html[data-tema=dark] .est-h span,html[data-tema=dark] .est-r span{color:#b9c9bf}
.lg-terminos{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:4px 0 12px;font-size:13.5px;line-height:1.45;color:#0e1526}.lg-terminos input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--accent)}.lg-terminos a{color:inherit;text-decoration:underline}.lg-terminos.sacude{animation:otpMal .5s}
.tm-ic{width:56px;height:56px;border-radius:18px;background:rgba(var(--accent-rgb),.12);color:var(--accent);display:grid;place-items:center;font-size:28px;margin:0 auto 10px}
html[data-tema=dark] .lg-terminos{color:#f1f5f2}
.est-bs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.est-bs .btn{justify-content:center;min-height:48px}@media(max-width:380px){.est-bs{grid-template-columns:1fr}}
.tm-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:8px}.tm-tabs button{border:1.5px solid var(--ink-200);background:transparent;color:inherit;border-radius:999px;padding:7px 12px;font:700 12.5px/1 inherit;cursor:pointer}.tm-tabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tm-doc{max-height:38vh;overflow:auto;border:1px solid var(--ink-200);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.7);font-size:13px;line-height:1.55;text-align:left;margin-bottom:10px}.tm-doc h1{font-size:18px;margin:0 0 6px}.tm-doc h2{font-size:15px;margin:12px 0 4px}.tm-doc .m,.tm-doc code{font-size:11px;color:var(--ink-500);word-break:break-all}
html[data-tema=dark] .tm-doc{background:rgba(15,26,21,.6);border-color:rgba(232,240,234,.16)}html[data-tema=dark] .tm-tabs button{border-color:rgba(232,240,234,.28)}
.xd-carga{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 14px;color:var(--ink-600,#475467);font-size:13.5px}
.esc-qr{display:grid;place-items:center;padding:6px 0}.esc-ar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.esc-ar .odo-img{width:64px;height:64px}