/* Karlita · tema Liquid Glass sobre gradiente verde oscuro (decisión del director 2026-09-11).
   Fondo: un solo gradiente en el verde institucional, de muy oscuro a #1f4e3d. Tarjetas y controles:
   vidrio translúcido (blur + borde luminoso + reflejo). Texto blanco. Sin emojis: íconos SVG de trazo. */
:root {
  --verde-0: #04110b; --verde-1: #0a2219; --verde-2: #123527; --verde: #1f4e3d; --verde-claro: #3b7a60;
  --acento: #e2b45a; --acento-suave: #f0cf7e;
  --texto: #ffffff; --texto-suave: rgba(255,255,255,.74); --texto-tenue: rgba(255,255,255,.55);
  --linea: rgba(255,255,255,.14); --linea-fuerte: rgba(255,255,255,.36);
  --vidrio: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.12) 100%);
  --vidrio-denso: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.13));
  --vidrio-oscuro: linear-gradient(135deg, rgba(4,17,11,.72), rgba(10,34,25,.62));
  --rojo: #ff8a80; --ambar: #f2c26b; --azul: #9fd0ff; --ok: #8fe0b5;
  --radio: 22px; --radio-chico: 14px;
  --sombra: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(255,255,255,.08), 0 12px 36px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--verde-1); }
body { margin: 0; color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100dvh;
  background: var(--verde-1);
  background-image: linear-gradient(160deg, var(--verde-0) 0%, var(--verde-1) 35%, var(--verde-2) 70%, var(--verde) 100%);
  background-attachment: fixed; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: .01em; } h3 { font-size: 1rem; }
a { color: var(--acento-suave); }
button { font: inherit; }
::selection { background: rgba(226,180,90,.45); }

/* ---- vidrio ---- */
.vidrio, .tarjeta, .dialogo, .toast, .nav, .nav-inferior, .barra, .login__tarjeta, .burbuja--asistente, .chat__entrada {
  background: var(--vidrio); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); }
.tarjeta, .login__tarjeta, .dialogo { position: relative; overflow: hidden; border-radius: var(--radio); }
.tarjeta::before, .login__tarjeta::before, .dialogo::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); }
.tarjeta > *, .login__tarjeta > *, .dialogo > * { position: relative; }

/* ---- botones ---- */
.btn { display: inline-flex; align-items: center; gap: .4em; border: 1px solid var(--linea-fuerte); background: rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--texto); padding: .58em 1.1em; border-radius: 999px; cursor: pointer; box-shadow: inset 0 1px 1px rgba(255,255,255,.35); text-decoration: none; transition: background .15s, transform .15s; }
.btn:hover { background: rgba(255,255,255,.22); }
.btn:active { transform: translateY(1px); }
.btn--primario { background: rgba(255,255,255,.92); color: var(--verde); border-color: #fff; }
.btn--primario:hover { background: #fff; }
.btn--peligro { background: rgba(179,38,30,.55); border-color: rgba(255,150,140,.5); }
.btn--chico { padding: .32em .8em; font-size: .9em; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-icono { background: transparent; border: 0; color: inherit; font-size: 1.3rem; padding: .3em .5em; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; }
.btn-icono:hover { background: rgba(255,255,255,.14); }
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .ic, h2 .ic, h3 .ic { margin-right: .1em; }
.nav a .ic { margin-right: .35em; }
.nav-inferior .ic { width: 1.4em; height: 1.4em; margin: 0; }
.btn-icono .ic, .mic .ic { width: 1.35em; height: 1.35em; margin: 0; vertical-align: middle; }

/* ---- acceso ---- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login__tarjeta { padding: 2.2rem 2rem; max-width: 400px; width: 100%; text-align: center; }
.login__tarjeta img { border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.login__tarjeta h1 { font-size: 2rem; letter-spacing: -.01em; }
.login__nota { color: var(--texto-suave); font-size: .85em; }
.error { color: var(--rojo); }

/* ---- estructura ---- */
#app { display: grid; grid-template-columns: 230px 1fr; min-height: 100dvh; grid-template-rows: auto 1fr; }
.barra { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; padding-top: max(.55rem, env(safe-area-inset-top));
  border-left: 0; border-right: 0; border-top: 0; border-radius: 0; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.barra__titulo { flex: 1; font-size: 1.05rem; }
.barra__titulo span { opacity: .8; margin-left: .35em; }
.barra__derecha { display: flex; align-items: center; gap: .4rem; }
.pildora { background: rgba(255,255,255,.16); border: 1px solid var(--linea); padding: .15em .65em; border-radius: 999px; font-size: .8em; }
.nav { display: flex; flex-direction: column; gap: .2rem; padding: .9rem .6rem; margin: .75rem 0 .75rem .75rem; border-radius: var(--radio); align-self: start; position: sticky; top: 4.2rem; }
.nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 14px; color: var(--texto); text-decoration: none; transition: background .15s; }
.nav a:hover { background: rgba(255,255,255,.12); }
.nav a.activo { background: rgba(255,255,255,.88); color: var(--verde); font-weight: 600; box-shadow: inset 0 1px 1px #fff; }
.contador { margin-left: auto; background: var(--rojo); color: #3a0d0a; border-radius: 999px; padding: 0 .55em; font-size: .75em; font-weight: 700; }
.vista { padding: 1rem 1.25rem; max-width: 1100px; width: 100%; padding-bottom: 5.5rem; }
.nav-inferior { display: none; }
#btn-menu { display: none; }

@media (max-width: 800px) {
  #app { grid-template-columns: 1fr; }
  .nav { position: fixed; inset: 0 26% 0 0; z-index: 30; margin: 0; border-radius: 0 var(--radio) var(--radio) 0; transform: translateX(-102%); transition: transform .2s; padding-top: 4.5rem; background: var(--vidrio-oscuro); top: 0; }
  .nav.abierto { transform: none; }
  #btn-menu { display: inline-flex; }
  .nav-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: .6rem; left: .6rem; right: .6rem; border-radius: var(--radio); padding-bottom: env(safe-area-inset-bottom); z-index: 25; }
  .nav-inferior a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem 0; font-size: 1.15rem; color: var(--texto-suave); text-decoration: none; border-radius: 16px; margin: .3rem .2rem; }
  .nav-inferior a span { font-size: .65rem; }
  .nav-inferior a.activo { color: var(--verde); background: rgba(255,255,255,.9); font-weight: 600; }
  .vista { padding: .9rem .8rem 6.5rem; }
}

/* ---- tarjetas y listas ---- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; margin: .75rem 0; }
.tarjeta { padding: 1rem 1.15rem; transition: transform .18s ease, box-shadow .18s ease; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 18px 46px rgba(0,0,0,.4); }
.tarjeta h3 { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta .cifra { font-size: 2.2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tarjeta .sub, .sub { color: var(--texto-suave); font-size: .85em; }
.tarjeta--ancha { grid-column: 1 / -1; }
.lista { list-style: none; margin: .3rem 0 0; padding: 0; }
.lista li { padding: .5rem 0; border-top: 1px solid var(--linea); display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
.lista li:first-child { border-top: 0; }
.lista .meta, .meta { color: var(--texto-suave); font-size: .85em; margin-left: auto; }
.etiqueta { display: inline-block; padding: .12em .65em; border-radius: 999px; font-size: .75em; font-weight: 600; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.26); }
.etiqueta--rojo { background: rgba(255,120,110,.32); }
.etiqueta--ambar { background: rgba(226,180,90,.36); }
.etiqueta--azul { background: rgba(120,180,255,.3); }
.etiqueta--gris { background: rgba(255,255,255,.1); color: var(--texto-suave); }
.vacio { color: var(--texto-suave); font-style: italic; padding: .5rem 0; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.seccion { margin: 1.4rem 0; }
details summary { cursor: pointer; color: var(--acento-suave); }

/* ---- formularios ---- */
.campo { display: flex; flex-direction: column; gap: .25rem; margin: .55rem 0; }
.campo label { font-size: .85em; color: var(--texto-suave); }
input, select, textarea { font: inherit; padding: .55em .8em; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: rgba(255,255,255,.12); color: var(--texto); width: 100%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255,255,255,.55); outline-offset: 1px; }
select option { background: var(--verde-2); color: #fff; }
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"] { width: auto; }

/* ---- tablas y texto ---- */
table { width: 100%; border-collapse: collapse; font-size: .92em; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--texto-suave); font-weight: 600; font-size: .85em; }
.tabla-contenedor { overflow-x: auto; }
pre.texto { white-space: pre-wrap; font: inherit; background: rgba(0,0,0,.28); border: 1px solid var(--linea); padding: .8rem .9rem; border-radius: var(--radio-chico); max-height: 60vh; overflow: auto; }
/* ---- matriz docente × semana ---- */
.matriz table { font-size: .82em; border-collapse: separate; border-spacing: 2px; }
.matriz th, .matriz td { padding: .3rem .25rem; border: 0; text-align: center; white-space: nowrap; }
.matriz th.fija, .matriz td.fija { text-align: left; position: sticky; left: 0; background: rgba(10,34,25,.92); backdrop-filter: blur(8px); z-index: 1; min-width: 120px; padding-right: .6rem; border-radius: 8px; }
.matriz thead th { font-size: .75em; color: var(--texto-suave); }
.matriz thead th.futura { opacity: .45; }
.matriz .num { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.matriz tr.total td, .matriz tr.total th { border-top: 1px solid var(--linea); font-weight: 600; color: var(--texto); }
.celda { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--texto-tenue); }
td.celda { display: table-cell; width: 30px; height: 30px; }
td.celda a { color: inherit; display: inline-flex; }
.celda .ic { width: 1em; height: 1em; margin: 0; }
.celda--ENTREGADA { background: rgba(143,224,181,.32); color: #eafff3; }
.celda--TARDE { background: rgba(242,194,107,.34); color: #fff3dc; }
.celda--MAL_UBICADA { background: rgba(242,194,107,.22); color: #fff3dc; }
.celda--FALTANTE { background: rgba(255,138,128,.34); color: #ffe9e6; }
.celda--SIN_REVISAR { background: rgba(255,255,255,.05); }
.celda--FUTURA { background: transparent; }
.grafica { display: grid; gap: .35rem; }
.grafica .barra-h { display: grid; grid-template-columns: 140px 1fr 50px; gap: .5rem; align-items: center; font-size: .85em; }
.grafica .barra-h i { display: block; height: 12px; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.9)); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* ---- chat ---- */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 9.5rem); }
.chat__mensajes { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: .6rem; padding: .5rem 0; }
.burbuja { max-width: 85%; padding: .65rem .95rem; border-radius: 18px; white-space: pre-wrap; }
.burbuja--user { align-self: flex-end; background: rgba(255,255,255,.9); color: var(--verde); border-bottom-right-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.burbuja--asistente { align-self: flex-start; border-bottom-left-radius: 6px; border-radius: 18px; }
.burbuja .propuestas { margin-top: .5rem; font-size: .85em; }
.chat__entrada { display: flex; gap: .45rem; align-items: flex-end; padding: .55rem .6rem; border-radius: var(--radio); margin-top: .5rem; }
.chat__entrada textarea { min-height: 44px; max-height: 160px; border-radius: 16px; }
.mic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mic--escuchando { background: rgba(255,120,110,.6); border-color: var(--rojo); animation: pulso 1s infinite; }
.mic--procesando { background: rgba(226,180,90,.6); }
.mic--error { background: rgba(255,120,110,.25); color: var(--rojo); }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(255,138,128,.55);} 50% { box-shadow: 0 0 0 12px rgba(255,138,128,0);} }
.estado-voz { font-size: .8em; color: var(--texto-suave); min-height: 1.2em; }
.estado-voz.error { color: var(--rojo); }
.chat__barra { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .2rem 0 .5rem; }
.chat__entidades { margin-left: auto; }
.burbuja { position: relative; }
.burbuja--pendiente .burbuja__texto { opacity: .8; font-style: italic; }
.burbuja__play { position: absolute; right: .35rem; top: .35rem; width: 30px; height: 30px; opacity: .7; }
.burbuja__play:hover { opacity: 1; }
.burbuja--asistente { padding-right: 2.6rem; }

/* ---- avisos y diálogos ---- */
.toasts { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 50; }
.toast { padding: .65rem 1.1rem; border-radius: 999px; max-width: 90vw; background: var(--vidrio-oscuro); }
.toast--error { background: rgba(179,38,30,.7); border-color: rgba(255,150,140,.5); }
.dialogo { border: 1px solid var(--linea-fuerte); padding: 0; max-width: 540px; width: calc(100% - 2rem); color: var(--texto); background: var(--vidrio-oscuro); }
.dialogo::backdrop { background: rgba(2,10,6,.55); backdrop-filter: blur(6px); }
.dialogo__cuerpo { padding: 1.3rem; }
.dialogo__cuerpo h3 { margin-bottom: .5rem; }
.dialogo__pie { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.3rem; border-top: 1px solid var(--linea); }
.cargando { opacity: .6; pointer-events: none; }
.integracion { display: flex; gap: .5rem; align-items: center; padding: .3rem 0; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.punto--ok { background: var(--ok); } .punto--no { background: var(--rojo); } .punto--pend { background: var(--ambar); }

@media (prefers-reduced-motion: reduce) { .tarjeta, .btn, .nav { transition: none; } .tarjeta:hover { transform: none; } }

/* ---- narrador ---- */
.narrador__voces { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
@media (max-width: 800px) { .narrador__voces { grid-template-columns: repeat(2, minmax(0, 1fr)); } .narrador__voz { padding: .65rem .7rem; font-size: .92em; } }
.narrador__voz { cursor: pointer; }
.narrador__voz.elegida { outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; background: rgba(255,255,255,.2); }