:root {
  --fondo: #FAF9F5;
  --tinta: #1F1E1D;
  --tinta-suave: #6E6B63;
  --linea: #E6E2D9;
  --hundido: #F1EFE8;
  --acento: #C15F3C;
  --verde: #4F7A5C;
  --ambar: #B4762A;
  --rojo: #A6402F;
  --radio: 12px;
  --suave: cubic-bezier(.22, 1, .36, 1);
  --radio-chip: 8px;
  --cristal: rgba(250, 249, 245, 0.72);
  --cristal-borde: rgba(31, 30, 29, 0.08);
  --tam-sub: 25px;
  --tam-sub-ca: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #1F1E1D; --tinta: #F5F4EF; --tinta-suave: #A8A49B;
    --linea: #35332F; --hundido: #2A2926;
    --cristal: rgba(31, 30, 29, 0.72); --cristal-borde: rgba(245, 244, 239, 0.10);
  }
}
:root[data-tema="oscuro"] {
  --fondo: #1F1E1D; --tinta: #F5F4EF; --tinta-suave: #A8A49B;
  --linea: #35332F; --hundido: #2A2926;
  --cristal: rgba(31, 30, 29, 0.72); --cristal-borde: rgba(245, 244, 239, 0.10);
}
:root[data-tema="noche"] {
  --fondo: #000; --tinta: #E8E4DA; --tinta-suave: #8A857B;
  --linea: #1A1A1A; --hundido: #121211;
  --cristal: rgba(0, 0, 0, 0.65); --cristal-borde: rgba(255, 255, 255, 0.08);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: -apple-system, "Roboto", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- barra de cristal ---------- */
.topglass {
  flex: 0 0 auto;
  margin: max(10px, env(safe-area-inset-top)) 12px 6px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.05);
  z-index: 20;
}
.estado { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tinta-suave); min-width: 0; }
.estado span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: 0 0 auto; }
.punto.on { background: var(--verde); }
.punto.vivo { background: var(--verde); animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }
.acciones { display: flex; justify-content: flex-end; }
.ajustes {
  background: none; border: 0; color: var(--tinta-suave);
  font-family: inherit; font-size: 12px; padding: 4px 2px;
}

.segmento {
  position: relative; display: flex; padding: 3px; gap: 0;
  border: 1px solid var(--cristal-borde); border-radius: 12px;
  background: color-mix(in srgb, var(--fondo) 40%, transparent);
}
.segmento .indicador {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--hundido); border-radius: 9px;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.segmento[data-modo="asistente"] .indicador { transform: translateX(100%); }
.segmento button {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 92px;
  height: 34px; padding: 0 12px; border: 0; background: transparent;
  color: var(--tinta-suave); font-family: inherit; font-size: 14px;
}
.segmento button.activo { color: var(--tinta); }

/* ---------- contenido ---------- */
.contenido { flex: 1 1 auto; min-height: 0; position: relative; }
.pantalla {
  display: none; flex-direction: column; height: 100%;
  padding: 4px 22px max(20px, env(safe-area-inset-bottom));
  gap: 12px;
}
.pantalla.activa { display: flex; animation: fundido .3s var(--suave); }
@keyframes fundido { from { opacity: 0; transform: translateY(6px) scale(.995); } to { opacity: 1; transform: none; } }

.centro-inicio { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.etiqueta { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
h1 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.ultima { margin: 6px 0 0; color: var(--tinta-suave); font-size: 14px; }
.pie-inicio { display: flex; flex-direction: column; gap: 10px; }
.nota { margin: 0; text-align: center; color: var(--tinta-suave); font-size: 13px; }

.principal {
  width: 100%; border: 0; border-radius: var(--radio);
  background: var(--tinta); color: var(--fondo);
  font-size: 19px; font-weight: 500; padding: 17px 16px;
  min-height: 58px; font-family: inherit;
  transition: transform .12s ease, opacity .12s ease;
}
.principal:active { transform: scale(.985); opacity: .95; }
.principal.compacto { flex: 0 0 38%; font-size: 16px; }
.secundario {
  flex: 1; border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  border-radius: var(--radio); font-size: 15px; padding: 12px 8px; min-height: 54px;
  font-family: inherit; white-space: nowrap;
}
.icono-pausa {
  flex: 0 0 62px; min-height: 54px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.icono-pausa.pausado { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }

/* nivel de micrófono */
.nivel { height: 2px; border-radius: 2px; background: var(--linea); overflow: hidden; margin-top: 2px; }
.nivel span {
  display: block; height: 100%; width: 0%;
  background: var(--tinta-suave); border-radius: 2px;
  transition: width .12s linear;
}

.subtitulos {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px;
  overflow: hidden; padding-top: 6vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
}
.frase { display: flex; flex-direction: column; gap: 3px; opacity: .72; animation: sube .42s var(--suave);
  transition: opacity .45s var(--suave); }
@keyframes sube { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: .72; transform: none; } }
.frase.nueva { opacity: 1; }
.frase .ca { margin: 0; font-size: var(--tam-sub-ca); color: var(--tinta-suave); }
.frase .es { margin: 0; font-size: var(--tam-sub); line-height: 1.32; }
.frase .es { transition: font-size .45s var(--suave); }
.frase:not(.nueva) .es { font-size: calc(var(--tam-sub) - 4px); }
.escuchando { margin: auto 0; color: var(--tinta-suave); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.escuchando .punto { animation: latido 1.6s ease-in-out infinite; }

.controles { display: flex; gap: 8px; }
.centro-fin { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.resumen { margin: 0; color: var(--tinta-suave); }
.lista-vocab { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }

.hoja { gap: 14px; overflow-y: auto; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tinta-suave); }
.campo select, .campo input {
  font-family: inherit; font-size: 16px; color: var(--tinta); background: transparent;
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 11px;
}
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: 22px;
  background: var(--tinta); color: var(--fondo); padding: 13px 15px; border-radius: var(--radio);
  font-size: 14px; z-index: 40; animation: fundido .2s ease-out;
}

/* asistente */
.clases { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.clase {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 4px;
  background: transparent; text-align: left; color: var(--tinta); font-family: inherit;
  transition: background .15s ease, transform .12s ease;
}
.clase:active { transform: scale(.99); background: var(--hundido); }
.clase .titulo { font-size: 17px; font-weight: 500; }
.clase .meta { font-size: 13px; color: var(--tinta-suave); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { background: var(--hundido); color: var(--tinta-suave); border-radius: var(--radio-chip); padding: 3px 8px; font-size: 12px; }
.proximo { background: var(--hundido); border-radius: var(--radio); padding: 15px 16px; display: flex; flex-direction: column; gap: 4px; }
.nota-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.nota-seccion { font-size: 17px; font-weight: 500; margin-top: 10px; }
.nota-frase .ca { font-size: 13px; color: var(--tinta-suave); }
.nota-frase .es { font-size: 16px; }
.nota-enlace { color: var(--acento); font-size: 13px; }

:root[data-fuente="s"] { --tam-sub: 21px; --tam-sub-ca: 15px; }
:root[data-fuente="l"] { --tam-sub: 30px; --tam-sub-ca: 19px; }
@media (max-height: 640px) { h1 { font-size: 30px; } .principal { min-height: 54px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- inicio con vida ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(46px); opacity: .75;
  animation: flotar 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { width: 260px; height: 260px; left: -40px; top: 8%; background: #E7C9B8; }
.aurora span:nth-child(2) { width: 220px; height: 220px; right: -30px; top: 32%; background: #CBD8CE; animation-duration: 27s; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 300px; height: 300px; left: 20%; bottom: -60px; background: #E3DCC9; animation-duration: 31s; animation-delay: -12s; }
@keyframes flotar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -26px, 0) scale(1.12); }
}
:root[data-tema="oscuro"] .aurora span, :root[data-tema="noche"] .aurora span { opacity: .18; }

.pantalla { position: relative; }
.pantalla > *:not(.aurora) { position: relative; z-index: 1; }
.aurora { z-index: 0; }
.centro-inicio { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }

.hero {
  position: relative; width: 100%; min-height: 206px;
  transition: transform .18s var(--suave), box-shadow .25s var(--suave);
  border: 0; border-radius: 22px; overflow: hidden;
  background: var(--tinta); color: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  font-family: inherit; font-size: 21px; font-weight: 500;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
  box-shadow: 0 10px 30px rgba(31,30,29,.18);
}
.hero:active { transform: scale(.975); box-shadow: 0 6px 18px rgba(31,30,29,.16); }
.hero-texto { position: relative; z-index: 1; }
.hero-icono { position: relative; z-index: 1; opacity: .92; }
.hero-anillo {
  position: absolute; width: 84px; height: 84px; top: 42px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .18;
  animation: anillo 3.2s ease-out infinite;
}
@keyframes anillo {
  0% { transform: scale(.65); opacity: .30; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { opacity: 0; }
}

/* frases y estados con un poco más de vida */
.frase { animation: sube .34s cubic-bezier(.2,.8,.2,1); }
#estadoTexto { transition: opacity .18s ease; }
.escuchando .punto { animation: latido 1.4s ease-in-out infinite; }
.escuchando::after {
  content: ''; width: 26px; height: 12px; margin-left: 4px;
  background:
    linear-gradient(var(--tinta-suave), var(--tinta-suave)) 0 50%/2px 40% no-repeat,
    linear-gradient(var(--tinta-suave), var(--tinta-suave)) 6px 50%/2px 70% no-repeat,
    linear-gradient(var(--tinta-suave), var(--tinta-suave)) 12px 50%/2px 100% no-repeat,
    linear-gradient(var(--tinta-suave), var(--tinta-suave)) 18px 50%/2px 60% no-repeat,
    linear-gradient(var(--tinta-suave), var(--tinta-suave)) 24px 50%/2px 30% no-repeat;
  animation: onda 1.1s ease-in-out infinite;
}
@keyframes onda { 50% { transform: scaleY(.55); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .aurora span, .hero-anillo, .escuchando::after { animation: none !important; }
}

/* ---------- chat ---------- */
.mensajes {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 6px 2px 4px; scroll-behavior: smooth;
}
.burbuja {
  max-width: 84%; padding: 11px 14px; font-size: 15px; line-height: 1.42;
  border-radius: 16px; animation: entraBurbuja .3s cubic-bezier(.2,.9,.2,1);
  white-space: pre-wrap; word-wrap: break-word;
}
@keyframes entraBurbuja {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.burbuja.yo {
  align-self: flex-end; background: var(--tinta); color: var(--fondo);
  border-bottom-right-radius: 6px;
}
.burbuja.ella {
  align-self: flex-start; background: var(--hundido); color: var(--tinta);
  border-bottom-left-radius: 6px;
}
.burbuja.nota { font-size: 13px; color: var(--tinta-suave); background: transparent; padding: 4px 2px; }

.pensando { display: flex; gap: 4px; align-items: center; padding: 12px 14px; align-self: flex-start;
  background: var(--hundido); border-radius: 16px; border-bottom-left-radius: 6px; }
.pensando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-suave);
  animation: pensar 1.2s ease-in-out infinite;
}
.pensando span:nth-child(2) { animation-delay: .15s; }
.pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes pensar { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.sugerencias { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 4px; }
.sug {
  border: 1px solid var(--linea); background: transparent; color: var(--tinta-suave);
  border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 13px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.sug:active { transform: scale(.97); background: var(--hundido); color: var(--tinta); }

.compositor {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 6px 6px 14px; margin-bottom: max(4px, env(safe-area-inset-bottom));
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 18px;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 20px rgba(0,0,0,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.compositor:focus-within { border-color: var(--tinta-suave); box-shadow: 0 8px 26px rgba(0,0,0,.08); }
.compositor input {
  flex: 1; border: 0; background: transparent; color: var(--tinta);
  font-family: inherit; font-size: 15px; padding: 10px 0; outline: none;
}
.compositor input::placeholder { color: var(--tinta-suave); }
.enviar {
  width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--tinta); color: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s ease, opacity .18s ease;
}
.enviar:active { transform: scale(.94); }
.enviar:disabled { opacity: .35; }

.mensajes .empuje { flex: 1 1 auto; }

.sin-anim *, .sin-anim *::before, .sin-anim *::after { animation: none !important; transition: none !important; }

/* grano muy sutil para que el cristal no se vea plano */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 30;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) { body::after { mix-blend-mode: screen; opacity: .05; } }
:root[data-tema="noche"] body::after { opacity: .03; }

/* estado vacío del chat */
.vacio { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vacio .halo {
  width: 96px; height: 96px; border-radius: 50%; position: relative;
  border: 1px solid var(--linea);
}
.vacio .halo::before, .vacio .halo::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--linea); animation: respirar 3.4s var(--suave) infinite;
}
.vacio .halo::after { animation-delay: 1.7s; }
@keyframes respirar {
  0% { transform: scale(1); opacity: .8; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
.vacio p { margin: 0; font-size: 14px; color: var(--tinta-suave); text-align: center; max-width: 240px; }

/* cursor del efecto máquina de escribir */
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor;
  vertical-align: -2px; margin-left: 2px; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.mensajes:has(.vacio) .empuje { flex: 0 0 auto; }

/* el botón se convierte en la pantalla */
.hero-clon {
  pointer-events: none; border-radius: 22px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinta); color: var(--fondo);
  font-family: inherit; font-size: 21px;
}
.burbuja.yo { animation: brotar .3s var(--suave); transform-origin: 90% 100%; }
@keyframes brotar {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: none; }
}

.aurora.suave span { opacity: .28; }
:root[data-tema="oscuro"] .aurora.suave span, :root[data-tema="noche"] .aurora.suave span { opacity: .12; }

/* esqueletos con brillo mientras carga */
.esqueleto {
  height: 74px; border-radius: var(--radio);
  background: linear-gradient(90deg, var(--hundido) 25%, var(--linea) 37%, var(--hundido) 63%);
  background-size: 400% 100%;
  animation: brillo 1.5s ease-in-out infinite;
}
.esqueleto.corto { height: 18px; width: 55%; margin-top: 8px; }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.mensajes {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 8px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 8px));
}
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }