:root{
  /* violeta y blanco */
  --fondo:#FFFFFF; --tarjeta:#F4F1FB; --texto:#1A1626; --beige:#3D3552;
  --gris:#6E6880; --gris2:#767089; --ambar:#6340C9; --ambar-claro:#5733BC;
  --borde:rgba(99,64,201,.30); --afuera:#E8E6EF; --sobre-acento:#FFFFFF; --sombra:0 1px 3px rgba(26,22,38,.06),0 8px 24px rgba(26,22,38,.05);
  --orbe-1:rgba(99,64,201,.42); --orbe-2:rgba(99,64,201,.14); --orbe-0:rgba(99,64,201,0);
  --serif:'Newsreader',Georgia,serif; --sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
}
/* El mismo violeta, sobre negro. El relleno se aclara apenas (#6F4ED8) porque
   sobre un fondo oscuro el violeta de la luz no se despega del fondo: así el
   borde del botón llega a 3.49:1 contra la página y el blanco encima a 5.59:1. */
[data-tema="oscuro"]{
  --fondo:#0E0B14; --tarjeta:#282041; --texto:#F2EFF8; --beige:#DCD6EC;
  --gris:#9A93AD; --gris2:#8B84A0; --ambar:#6F4ED8; --ambar-claro:#B9A5F5;
  --borde:rgba(185,165,245,.32); --afuera:#000; --sobre-acento:#FFFFFF; --sombra:0 2px 14px rgba(0,0,0,.45);
  --orbe-1:rgba(111,78,216,.60); --orbe-2:rgba(111,78,216,.20); --orbe-0:rgba(111,78,216,0);
}
/* Sobre el violeta oscuro el blanco tiene menos margen: los subtítulos que en
   claro van al 75% acá suben al 88%, que es donde vuelven a pasar AA. */
[data-tema="oscuro"] .acceso-1 .acceso-s,
[data-tema="oscuro"] .opcion[aria-checked="true"] .opcion-s{opacity:.88}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--afuera)}
body{font-family:var(--sans);display:flex;align-items:center;justify-content:center;overflow:hidden;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none}

#marco{position:relative;width:430px;height:884px;transform-origin:center center;flex:0 0 auto;border-radius:62px;
  background:linear-gradient(148deg,#43424A 0%,#1D1C21 26%,#121216 52%,#2E2D34 78%,#4A4951 100%);
  padding:13px;box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 40px 90px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.4)}
/* botones físicos */
#marco::before,#marco::after{content:'';position:absolute;background:#35343C;border-radius:2px}
#marco::before{left:-2px;top:150px;width:2px;height:34px;
  box-shadow:0 66px 0 0 #35343C,0 124px 0 0 #35343C}
#marco::before{height:34px}
#marco::after{right:-2px;top:214px;width:2px;height:100px}

#tel{width:404px;height:858px;background:var(--fondo);color:var(--texto);
  border-radius:50px;overflow:hidden;position:relative}

#isla{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:124px;height:35px;border-radius:18px;background:#08080A;z-index:6}

#estado{position:absolute;top:0;left:0;right:0;height:58px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--texto);
  font-variant-numeric:tabular-nums;pointer-events:none}
#estado svg{fill:var(--texto);stroke:var(--texto)}
#iconos{display:flex;align-items:center;gap:7px}

#marco .p{padding-top:70px}

/* en el celular: pantalla completa, sin marco, respetando notch y barra de gestos */
@media (max-width:520px){
  body{display:block;background:var(--fondo)}
  body{overflow:visible}
  #marco{width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:var(--fondo);transform:none!important}
  #marco::before,#marco::after,#isla,#estado{display:none}
  #tel{border-radius:0}
  #marco .p{padding-top:calc(24px + env(safe-area-inset-top))}
  #tel{width:100%;height:100dvh;border-radius:0}
  .p{padding-top:calc(24px + env(safe-area-inset-top));
     padding-bottom:calc(24px + env(safe-area-inset-bottom));
     padding-left:calc(24px + env(safe-area-inset-left));
     padding-right:calc(24px + env(safe-area-inset-right))}
}
#txt,.ent span[contenteditable]{-webkit-user-select:text;user-select:text}

.p{position:absolute;inset:0;display:none;flex-direction:column;padding:24px}
.p.on{display:flex}

.barra{display:flex;justify-content:space-between;align-items:center;height:44px;flex-shrink:0}
.marca{font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--gris)}
.ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.ico svg{stroke:var(--gris);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.crece{flex-grow:1}

h1{font-family:var(--serif);font-size:46px;font-weight:400;line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.1;letter-spacing:-.015em;margin:0}
.cap{font-size:13px;letter-spacing:.06em;color:var(--gris)}
.sabe{font-size:15px;line-height:1.62;color:var(--gris);max-width:300px}
.sub{font-size:15px;line-height:1.62;color:var(--gris);max-width:300px}
/* Los rótulos van en caja baja. En versalitas espaciadas eran el tic más común
   de una página generada, y acá además gritaban: "TEMAS SENSIBLES" en mayúsculas
   arriba de lo que a alguien le duele es el tono exactamente al revés. */
.rot{font-size:13px;line-height:1.3;color:var(--gris)}

.btn{height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;font-family:var(--sans);cursor:pointer;border:0;width:100%}
.btn-1{background:var(--ambar);color:var(--sobre-acento)}
.btn-2{background:none;border:1px solid var(--borde);color:var(--ambar-claro)}
.btn:disabled{opacity:.4;cursor:default}
.link{background:none;border:0;color:var(--gris);font-size:15px;font-family:var(--sans);cursor:pointer;height:48px}

/* home: saludo arriba, tres accesos con jerarquía abajo */
.saludo-bloque{display:flex;flex-direction:column;gap:12px;flex-shrink:0}
#saludo{font-size:34px}

.accesos{display:flex;flex-direction:column;gap:12px;margin-top:32px;flex-shrink:0}
.accesos-fila{display:flex;gap:12px}
.acceso{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  text-align:left;border-radius:16px;cursor:pointer;width:100%;font-family:var(--sans)}
.acceso-t{font-family:var(--serif);font-weight:400;text-wrap:balance}
.acceso-1{height:96px;padding:20px;background:var(--ambar);border:0}
.acceso-1 .acceso-t{font-size:22px;line-height:1.2;color:var(--sobre-acento)}
.acceso-1 .acceso-s{font-size:13px;line-height:1.3;color:var(--sobre-acento);opacity:.75}
.acceso-2{flex:1;min-height:88px;padding:16px;background:var(--fondo);border:1px solid var(--borde)}
.acceso-2 .acceso-t{font-size:17px;line-height:1.15;color:var(--texto)}
.acceso-2 .acceso-s{font-size:12px;line-height:1.3;color:var(--gris)}

.ayuda-link{align-self:center;margin-top:24px;flex-shrink:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:var(--gris);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--borde);padding:4px}

/* onboarding */
.campo{width:100%;background:none;border:0;border-bottom:1px solid var(--borde);color:var(--texto);
  font-size:18px;font-family:var(--sans);padding:10px 0;outline:none}
.campo::placeholder{color:var(--gris)}
.terciario{font-size:13px;color:var(--gris2);margin-top:8px}
.check{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--beige);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--ambar);cursor:pointer}

/* conversación */
#hilo{position:relative;flex-grow:1;display:flex;flex-direction:column;gap:30px;padding-top:28px;overflow-y:auto;min-height:0;scrollbar-width:none}
#hilo::-webkit-scrollbar{display:none}
.am{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--texto);max-width:300px;white-space:pre-wrap}
.yo{align-self:flex-end;text-align:right;font-family:var(--sans);font-size:17px;line-height:1.41;
  color:var(--gris);max-width:250px;white-space:pre-wrap;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.yo p{margin:0}
.am,.yo{animation:entra .4s cubic-bezier(.16,1,.3,1) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pill{height:40px;padding:0 16px;border-radius:10px;background:var(--tarjeta);color:var(--ambar-claro);
  font-size:14px;border:0;font-family:var(--sans);cursor:pointer}

/* Una presencia, no un aviso: un punto que respira, no tres que saltan. */
.puntos{display:flex;align-items:center;height:20px}
.pt{width:9px;height:9px;border-radius:50%;background:var(--ambar);animation:respira 1.6s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

/* aperturas: formas de empezar para quien se queda en blanco */
.aperturas{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:-12px}
.apertura{background:none;border:1px solid var(--borde);border-radius:10px;padding:9px 14px;
  font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--ambar-claro);cursor:pointer;
  text-align:left;transition:background .2s ease}
.apertura:hover{background:var(--tarjeta)}

.acceso-mem{align-self:flex-start;margin-top:-16px;background:none;border:0;padding:0 0 3px;
  cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--gris2);
  border-bottom:1px solid var(--borde);transition:color .2s ease}
.acceso-mem:hover{color:var(--ambar-claro)}

.comp{flex-shrink:0;border-top:1px solid var(--tarjeta);padding-top:12px;display:flex;flex-direction:column;gap:8px;position:relative}
.fila{display:flex;align-items:center;gap:10px;min-height:48px}
.caret{width:1px;height:20px;background:var(--ambar);flex-shrink:0}
#txt{flex-grow:1;background:none;border:0;color:var(--texto);font-size:17px;font-family:var(--sans);
  resize:none;outline:none;line-height:1.41;max-height:120px;padding:12px 0}
#txt::placeholder{color:var(--gris2)}
#enviar{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  opacity:.45;transition:opacity .3s ease}
#enviar svg{stroke:var(--gris2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#enviar.listo{opacity:1}
#enviar.listo svg{stroke:var(--ambar-claro)}

/* Voz: la voz entra, no sale. El usuario puede hablar; Amber nunca contesta
   hablando. Lo dictado cae en el mismo campo de siempre y queda editable: nadie
   manda sin leer lo que dijo, menos todavía si lo dijo llorando. */
#micro{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  opacity:.55;transition:opacity .3s ease,background .3s ease,border-color .3s ease}
#micro:hover{opacity:1}
#micro svg{stroke:var(--gris2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#micro .i-stop{display:none}
#micro.on{opacity:1;background:var(--ambar);border-color:var(--ambar)}
#micro.on svg{stroke:var(--sobre-acento)}
#micro.on .i-mic{display:none}
#micro.on .i-stop{display:block}
#micro[hidden]{display:none}

/* Mientras el micrófono está abierto tiene que ser imposible dudarlo. */
#escucha{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;color:var(--gris2)}
#escucha[hidden]{display:none}
#escucha .pt{width:7px;height:7px}
#reloj{font-variant-numeric:tabular-nums}

/* Si te fuiste para arriba a leer, el hilo deja de perseguirte. */
#bajar{position:absolute;right:0;top:-52px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--borde);background:var(--fondo);display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:3}
#bajar svg{stroke:var(--ambar-claro);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#bajar[hidden]{display:none}
/* El disclaimer es también la puerta a los recursos: siempre visible, no depende
   de que el clasificador acierte. */
.disc{font-size:11px;line-height:1.5;color:var(--gris2);font-family:var(--sans);
  background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.disc u{text-decoration-color:var(--borde);text-underline-offset:2px}

/* recursos de riesgo */
.rec{display:flex;flex-direction:column;gap:8px;max-width:100%}
.rec-f{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;
  padding:14px 18px;border-radius:12px;background:var(--tarjeta);border:1px solid transparent;
  text-decoration:none;color:var(--texto);transition:border-color .2s ease}
.rec-f.pri{border-color:var(--borde)}
.rec-f:hover{border-color:var(--ambar-claro)}
.rec-n{font-size:18px;font-weight:500;line-height:1.3}
.rec-f.pri .rec-n{color:var(--ambar-claro)}
.rec-d{font-size:13px;line-height:1.45;color:var(--gris)}
.rec-flecha{stroke:var(--gris2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ayuda: el flujo real de derivación, no un número suelto */
#ayuda .cuerpo{overflow-y:auto;min-height:0;flex-grow:1;scrollbar-width:none;padding-top:24px;
  display:flex;flex-direction:column;gap:20px}
#ayuda .cuerpo::-webkit-scrollbar{display:none}

/* calmarme */
#calma{align-items:center}
.orbe{width:260px;height:260px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.o1,.o2{position:absolute;border-radius:50%;animation:resp 13s ease-in-out infinite}
.o1{width:240px;height:240px;background:radial-gradient(circle,var(--orbe-1) 0%,var(--orbe-2) 52%,var(--orbe-0) 72%)}
.o2{width:132px;height:132px;background:var(--ambar)}
@keyframes resp{0%{transform:scale(.82)}32%{transform:scale(1.12)}46%{transform:scale(1.12)}92%{transform:scale(.82)}100%{transform:scale(.82)}}
.pal{position:relative;width:200px;height:40px;display:flex;align-items:center;justify-content:center}
.pal span{position:absolute;font-family:var(--serif);font-size:26px;color:var(--sobre-acento)}
.w1{animation:wIn 13s ease-in-out infinite}.w2{animation:wOut 13s ease-in-out infinite}
@keyframes wIn{0%,30%{opacity:1}40%,100%{opacity:0}}
@keyframes wOut{0%,34%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
.barrita{width:132px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--gris) 24%,transparent);overflow:hidden}
.barrita i{display:block;height:100%;width:0;background:var(--ambar);animation:llenar 90s linear forwards}
@keyframes llenar{to{width:100%}}

/* memoria */
#mem .cuerpo{overflow-y:auto;min-height:0;flex-grow:1;scrollbar-width:none;padding-top:24px;
  display:flex;flex-direction:column;gap:20px}
#mem .cuerpo::-webkit-scrollbar{display:none}
.grupo{display:flex;flex-direction:column;gap:10px}
.tarj{background:var(--tarjeta);border-radius:18px;padding:18px 22px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:14px}
.ent{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ent span{font-size:16px;line-height:1.5;flex-grow:1}
.ent span[contenteditable]:focus{outline:0;border-bottom:1px solid var(--borde)}
.ent span:empty::before{content:'Tocá para escribir tu nombre';color:var(--gris2)}
.acc{display:flex;align-items:center;gap:14px;flex-shrink:0}
.acc button{background:none;border:0;padding:0;cursor:pointer;display:flex}
.acc svg{fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.div{height:1px;background:color-mix(in srgb,var(--gris) 18%,transparent)}
.nota{font-size:14px;line-height:1.5;color:var(--gris)}

/* Con reduced-motion se apaga lo decorativo, pero la respiración sigue:
   es la función de la pantalla, no un adorno. */
@media (prefers-reduced-motion:reduce){
  .am,.yo{animation:none}
  .pt{animation:none;opacity:.8;transform:none}
  .apertura,.rec-f,.disc,.acceso-mem,#enviar{transition:none}
}


/* ── pantalla de arranque ──────────────────────────────────────────────────
   Puro CSS: aparece con la página, se apaga sola y deja de existir.
   La barra de estado y la isla quedan por encima, como en una app real. */
#splash{position:absolute;inset:0;z-index:5;background:var(--ambar);
  display:flex;align-items:center;justify-content:center;
  animation:splashFuera .45s ease-in .95s forwards}
#splash span{font-family:var(--serif);font-size:38px;font-weight:400;
  letter-spacing:.20em;color:var(--sobre-acento);opacity:0;
  animation:splashDentro .55s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes splashDentro{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
@keyframes splashFuera{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  #splash{animation:splashFuera .3s linear .7s forwards}
  #splash span{opacity:1;animation:none}
}

/* Prioridad 1 del checklist: quien navega con teclado tiene que ver dónde está.
   :focus-visible en vez de :focus deja el anillo para el teclado y no para el
   mouse, así que no ensucia el uso normal. Va al final para ganarle a los
   outline:none de arriba. */
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:6px}
/* Ningún campo de texto lleva caja. El foco es el cursor que parpadea más el
   subrayado que ya tienen: encerrarlos en un rectángulo violeta los convierte en
   un formulario, que es exactamente lo que Amber no quiere parecer. El segundo
   píxel se dibuja con sombra y no engrosando el borde, para que nada se mueva. */
.campo:focus-visible,.ent span[contenteditable]:focus-visible{
  outline:none;border-bottom-color:var(--ambar);box-shadow:0 1px 0 0 var(--ambar)}
/* El campo de escribir no lleva marco: en un campo de texto el indicador de foco
   es el cursor que parpadea, y encerrarlo en una caja violeta ensuciaba lo único
   que tiene que estar tranquilo en esta pantalla. La barrita de la izquierda
   crece un poco y alcanza. */
#txt:focus-visible{outline:none}
.caret{transition:height .2s ease,width .2s ease}
.fila:has(#txt:focus-visible) .caret{width:2px;height:26px}
/* El botón atenuado atenúa también su anillo de foco: al enfocarlo, opacidad plena. */
#enviar:focus-visible,#micro:focus-visible{opacity:1}

/* Existe para el lector de pantalla y para nadie más. */
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Cómo estuvo el día: una barra de 1 a 5, no un botón. Es lo único de esta
   pantalla que le pide algo al usuario, así que pide lo mínimo: un gesto. */
.dia{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;
  border:1px solid var(--borde);background:var(--fondo)}
.dia-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dia-t{font-family:var(--serif);font-size:17px;line-height:1.15;color:var(--texto)}
.dia-v{font-family:var(--sans);font-size:13px;color:var(--gris);text-align:right}
.dia.sin-tocar .dia-v{color:var(--gris2);opacity:.8}
.dia-ext{display:flex;justify-content:space-between;font-family:var(--sans);font-size:11px;color:var(--gris2)}

#dia{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:none;cursor:pointer;margin:0}
#dia::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--ambar) 22%,transparent)}
#dia::-moz-range-track{height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--ambar) 22%,transparent)}
#dia::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--ambar);border:3px solid var(--fondo);margin-top:-10px;
  box-shadow:var(--sombra);transition:transform .15s ease}
#dia::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ambar);
  border:3px solid var(--fondo);box-shadow:var(--sombra)}
#dia:active::-webkit-slider-thumb{transform:scale(1.12)}
.dia.sin-tocar #dia::-webkit-slider-thumb{background:var(--gris2)}
.dia.sin-tocar #dia::-moz-range-thumb{background:var(--gris2)}
@media (prefers-reduced-motion:reduce){
  .caret,#dia::-webkit-slider-thumb{transition:none}
}

/* La puerta al chat queda cerrada hasta que la barra se movió. Se usa
   aria-disabled y no disabled: así el botón sigue siendo enfocable y, al
   tocarlo, puede explicar por qué no se abre en vez de no hacer nada. */
/* Cerrado NO se dibuja bajando la opacidad: eso apagaría justo la línea que hay
   que leer para saber qué hacer (el subtítulo caía a 1.92:1). Se dibuja sacando
   el relleno: el botón pasa a contorno con texto gris, 5.31:1, y se enciende en
   violeta recién cuando la barra se movió. El encendido es la confirmación. */
.acceso-1[aria-disabled="true"]{background:var(--fondo);border:1px solid var(--borde);
  transition:background .25s ease}
.acceso-1[aria-disabled="true"] .acceso-t{color:var(--gris)}
.acceso-1[aria-disabled="true"] .acceso-s{color:var(--gris);opacity:1}
.dia.pide{animation:pide 1.1s ease}
@keyframes pide{0%,100%{box-shadow:none}
  22%,62%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ambar) 32%,transparent)}}
@media (prefers-reduced-motion:reduce){ .dia.pide{animation:none} }

/* Cerrar aparece recién cuando hubo conversación: ofrecer cerrar algo que no
   empezó no tiene sentido. Y cerrar no es la acción principal de la pantalla,
   así que va en contorno y no en relleno. */
.barra-der{display:flex;align-items:center;gap:8px}
#cerrar-hoy{background:none;border:1px solid var(--borde)}
#cerrar-hoy[hidden]{display:none}
#cerrar-hoy:disabled{opacity:.45}
.volver-inicio{align-self:flex-start;background:none;border:1px solid var(--borde);
  border-radius:10px;padding:9px 14px;font-family:var(--sans);font-size:14px;
  color:var(--ambar-claro);cursor:pointer}

/* Elegir el registro: dos formas de que te hablen, no un cuestionario. */
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:16px;border-radius:14px;border:1px solid var(--borde);background:var(--fondo);
  cursor:pointer;transition:background .2s ease,border-color .2s ease}
.opcion-t{font-family:var(--serif);font-size:18px;line-height:1.15;color:var(--texto)}
.opcion-s{font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--gris)}
.opcion[aria-checked="true"]{background:var(--ambar);border-color:var(--ambar)}
.opcion[aria-checked="true"] .opcion-t{color:var(--sobre-acento)}
.opcion[aria-checked="true"] .opcion-s{color:var(--sobre-acento);opacity:.85}

/* Una vez contestada, la barra deja de ser un control y pasa a ser una respuesta
   dada. Pero no desaparece: un día no termina cuando abrís la app, y quien puso
   "bien" a las seis puede estar destrozado a las once. Cambiarla cuesta un toque
   más, que es justo lo que hace que no sea un jueguito. */
.dia.cerrada #dia,.dia.cerrada .dia-ext{display:none}
.dia-cambiar{display:none;align-self:flex-start;background:none;border:0;padding:0 0 2px;
  cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--gris2);
  border-bottom:1px solid var(--borde)}
.dia.cerrada .dia-cambiar{display:block}
.dia.cerrada .dia-v{color:var(--ambar-claro)}

/* Un grupo vacío dice qué va a ir adentro, en vez de no existir. */
.vacio{font-size:13px;line-height:1.5;color:var(--gris2)}

/* menú y sus pantallas */
.lista{display:flex;flex-direction:column}
.fila-menu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--gris) 16%,transparent);
  padding:18px 2px;cursor:pointer;width:100%;font-family:var(--sans)}
.fila-menu:last-child{border-bottom:0}
.fila-t{font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--texto)}
.fila-s{font-size:13px;line-height:1.35;color:var(--gris)}

/* historia */
.charla-f{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  background:var(--tarjeta);border:0;border-radius:14px;padding:16px;cursor:pointer;
  width:100%;font-family:var(--sans);box-shadow:var(--sombra)}
.charla-c{font-size:12px;letter-spacing:.04em;color:var(--gris)}
.charla-r{font-size:15px;line-height:1.45;color:var(--texto)}
.charla-cuando{display:flex;align-items:center;gap:8px}
.punto-dia{width:8px;height:8px;border-radius:50%;background:var(--ambar);flex-shrink:0}

/* preferencias: una fila, un interruptor */
.pref{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;
  border-bottom:1px solid color-mix(in srgb,var(--gris) 16%,transparent)}
.pref:last-child{border-bottom:0}
.pref-txt{display:flex;flex-direction:column;gap:4px;flex-grow:1}
.pref-t{font-size:16px;line-height:1.3;color:var(--texto)}
.pref-s{font-size:13px;line-height:1.4;color:var(--gris)}
.llave{position:relative;width:48px;height:28px;border-radius:14px;flex-shrink:0;cursor:pointer;
  border:1px solid var(--borde);background:var(--tarjeta);transition:background .2s ease,border-color .2s ease}
.llave::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--gris2);transition:transform .2s ease,background .2s ease}
.llave[aria-checked="true"]{background:var(--ambar);border-color:var(--ambar)}
.llave[aria-checked="true"]::after{transform:translateX(20px);background:var(--sobre-acento)}
.llave:disabled{opacity:.4;cursor:default}

/* sobre amber */
.texto-largo{display:flex;flex-direction:column;gap:18px}
.texto-largo h3{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.2;margin:0 0 6px;color:var(--texto)}
.texto-largo p{margin:0;font-size:15px;line-height:1.6;color:var(--gris)}
.texto-largo strong{color:var(--texto);font-weight:500}

@media (prefers-reduced-motion:reduce){ .llave,.llave::after{transition:none} }