[hidden] { display:none !important; }
:root { --fondo:#f6f4ef; --texto:#1d2626; --suave:#5b6767; --verde:#1f7a4d; --rojo:#b3261e; --ambar:#b26a00; --azul:#1b5fa8; --tarjeta:#fff; }
@media (prefers-color-scheme: dark) { :root { --fondo:#111818; --texto:#eef2f2; --suave:#a9b5b5; --tarjeta:#1b2424; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:18px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:480px; margin:0 auto; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); }
h1 { font-size:1.6rem; margin:0; } h2 { font-size:1.25rem; }
header p { color:var(--suave); margin:.2rem 0 1rem; }
label { display:block; margin:1rem 0 .3rem; font-weight:600; }
input { width:100%; font-size:1.4rem; padding:.7rem; border-radius:12px; border:2px solid #9aa; background:var(--tarjeta); color:var(--texto); letter-spacing:.08em; }
.grande { display:block; width:100%; font-size:1.4rem; font-weight:700; padding:1.3rem; margin:1.2rem 0; border:0; border-radius:18px; background:var(--azul); color:#fff; min-height:72px; }
.verde { background:var(--verde); } .rojo { background:var(--rojo); }
.grande:disabled { opacity:.5; }
.enlace { background:none; border:0; color:var(--suave); text-decoration:underline; font-size:1rem; padding:1rem 0; }
.nota { color:var(--suave); font-size:1rem; }
.aviso { background:#fff3cd; color:#5c4400; padding:1rem; border-radius:12px; }
.indicador { text-align:center; padding:.8rem 0 .3rem; }
.indicador p { font-size:1.6rem; font-weight:700; margin:.8rem 0 0; }
.circulo { width:110px; height:110px; margin:0 auto; border-radius:50%; background:#c9d1d1; transition:background .2s; }
[data-estado="escuchando"] .circulo { background:var(--verde); animation:latido 1.6s infinite; }
[data-estado="pensando"] .circulo, [data-estado="preparando"] .circulo, [data-estado="conectando"] .circulo { background:var(--ambar); animation:latido .9s infinite; }
[data-estado="hablando"] .circulo { background:var(--azul); animation:latido .5s infinite; }
@keyframes latido { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .circulo { animation:none !important; } }
.mediano { display:block; width:100%; font-size:1.15rem; font-weight:700; padding:.9rem; margin:.6rem 0; border:2px solid var(--azul); border-radius:14px; background:var(--tarjeta); color:var(--azul); min-height:56px; }
.tarjeta { background:var(--tarjeta); border:2px solid var(--azul); border-radius:16px; padding:.8rem 1rem; margin:.5rem 0 1rem; }
.tarjeta h2 { margin:.2rem 0 .4rem; font-size:1.15rem; } .tarjeta p { margin:.4rem 0; }
.charla { max-height:38vh; overflow-y:auto; margin:.8rem 0; display:flex; flex-direction:column; gap:.45rem; }
.charla:empty { display:none; }
.burbuja { max-width:88%; padding:.55rem .8rem; border-radius:14px; font-size:1.05rem; line-height:1.35; overflow-wrap:anywhere; }
.burbuja.tu { align-self:flex-end; background:#dcefe3; color:#123; }
.burbuja.ella { align-self:flex-start; background:var(--tarjeta); border:1px solid #c9d1d1; cursor:pointer; }
.burbuja.ella.con-audio::after { content:" 🔈"; }
.burbuja.callado { opacity:.55; font-style:italic; }
@media (prefers-color-scheme: dark) { .burbuja.tu { background:#1f3a2b; color:#e8f3ec; } }
.burbuja a { color:var(--azul); text-decoration:underline; word-break:break-all; }

.boton-tg, .burbuja a.boton-tg { display:block; margin-top:.6em; padding:.7em 1em; border-radius:.8em; background:#229ED9; color:#fff;
  text-align:center; font-weight:600; text-decoration:none; }
.dias { display:flex; gap:.4em; overflow-x:auto; margin:.6em 0; }
.dia { flex:0 0 auto; padding:.45em .9em; border-radius:1em; border:1px solid #0f3d3e; background:transparent; color:inherit; }
.dia.activo { background:#0f3d3e; color:#fff; }
.separador { text-align:center; font-size:.85em; opacity:.7; margin:.8em 0 .3em; }