/*
 * Kyra — pantalla de demostración (encargo 003, §4.3). Objetivo visual: productos/kyra/referencia/maqueta-pantalla.webp.
 * Todo se dibuja para 1920×1080 y se escala por igual con --u (≈ 1 px a 1920×1080; ≈ 0,71 px a 1366×768).
 * Sin modo oscuro. Sin nada que dependa de «hover». Colores muestreados de la maqueta.
 */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/PlusJakartaSans-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/PlusJakartaSans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/PlusJakartaSans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/PlusJakartaSans-800.woff2") format("woff2"); }

:root {
  --u: min(0.0520833vw, 0.0925926vh);
  /* marca integraIA (docs/10) */
  --violeta: #5b2be0; --magenta: #a63de8; --lavanda: #ece8fc; --borde: #e8e9f1; --marino: #0f1b3d;
  /* identidad de Kyra (maqueta) */
  --turquesa: #19c6b7; --azul: #4f8cf0; --morado: #8b5cf6;
  --burbuja-kyra: #e4f9f4; --burbuja-persona: #f1edfa; --insignia: #ddfef7; --banda: #efecfd;
  --verde: #1a9a55; --gris: #5d6580; --gris-claro: #8a91a8;
  --sombra: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(60, 50, 120, .10);
  --nivel: 0;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--marino);
  background:
    radial-gradient(60% 55% at 0% 0%, #fdeeee 0%, rgba(253, 238, 238, 0) 70%),
    radial-gradient(60% 55% at 100% 100%, #f3ecfb 0%, rgba(243, 236, 251, 0) 70%),
    radial-gradient(50% 45% at 100% 0%, #fdf0ee 0%, rgba(253, 240, 238, 0) 70%),
    #fefcfc;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
svg { fill: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: calc(4 * var(--u)) solid var(--morado); outline-offset: calc(3 * var(--u)); }

/* ───────── Estructura: dos columnas ───────── */
.app {
  height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) calc(620 * var(--u));
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "encI encD" "izq der";
  column-gap: calc(52 * var(--u)); padding: calc(20 * var(--u)) calc(32 * var(--u)) calc(24 * var(--u));
}
.enc-izq { grid-area: encI; display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(72 * var(--u)); }
.enc-der { grid-area: encD; display: flex; align-items: center; justify-content: flex-end; gap: calc(28 * var(--u)); height: calc(72 * var(--u)); }
.izq { grid-area: izq; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.panel { grid-area: der; min-height: 0; }

/* ───────── Encabezado ───────── */
.logo-estrella { width: calc(56 * var(--u)); height: calc(56 * var(--u)); flex: none; }
.logo-texto { font-size: calc(54 * var(--u)); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.logo-linea { width: calc(2 * var(--u)); height: calc(36 * var(--u)); background: #c9cde0; margin: 0 calc(6 * var(--u)); }
.logo-lema { font-size: calc(26 * var(--u)); color: var(--gris); font-weight: 500; }
.en-vivo { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; }
.punto-vivo { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #27c023; box-shadow: 0 0 0 calc(6 * var(--u)) rgba(39, 192, 35, .18); }

.btn-borde {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  min-height: calc(64 * var(--u)); padding: 0 calc(30 * var(--u)); border-radius: calc(32 * var(--u));
  background: rgba(255, 255, 255, .92); border: calc(2 * var(--u)) solid #cfd3e3; font-size: calc(26 * var(--u)); font-weight: 600; cursor: pointer;
  touch-action: manipulation;
}
.btn-borde svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; stroke: currentColor; }
.btn-borde:active { background: var(--lavanda); }
.btn-borde.cuadrado { padding: 0; width: calc(96 * var(--u)); }
.btn-borde.confirmando { border-color: #d6455d; color: #a3243a; background: #fff3f5; }
.btn-principal {
  min-height: calc(64 * var(--u)); padding: 0 calc(40 * var(--u)); border: 0; border-radius: calc(32 * var(--u)); cursor: pointer;
  color: #fff; font-size: calc(26 * var(--u)); font-weight: 700; background: linear-gradient(95deg, var(--violeta), var(--magenta));
}

/* ───────── Centro ───────── */
.insignia {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(30 * var(--u)); border-radius: 999px; background: var(--insignia); color: #0a6b61;
  font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: .04em;
}
.insignia svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke: currentColor; }
h1 { margin: calc(8 * var(--u)) 0 0; font-size: calc(72 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-align: center; }
.subtitulo { margin: calc(4 * var(--u)) 0 0; font-size: calc(28 * var(--u)); color: var(--gris); font-weight: 500; text-align: center; }

.zona-esfera { position: relative; flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.esfera-respira { height: min(72%, calc(280 * var(--u))); aspect-ratio: 1; animation: respira 5s ease-in-out infinite; }
.esfera {
  position: relative; height: 100%; width: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 24%, #6ffcf1 0%, #1fd2c6 24%, #19b9c8 40%, #4d8ade 64%, #8059f8 86%, #b98bf6 100%);
  box-shadow: 0 0 calc(70 * var(--u)) calc(14 * var(--u)) rgba(25, 198, 183, .28), 0 0 calc(120 * var(--u)) calc(30 * var(--u)) rgba(139, 92, 246, .16);
  transform: scale(calc(1 + var(--nivel) * .16));
  transition: transform .09s linear;
}
.esfera .onda { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 22s linear infinite; }
.esfera .brillo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%); }
.aros { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.aros span { position: absolute; height: min(72%, calc(280 * var(--u))); aspect-ratio: 1; border-radius: 50%; border: calc(2 * var(--u)) solid rgba(79, 140, 240, .30); }
.aros span:nth-child(1) { transform: scale(calc(1.2 + var(--nivel) * .06)); }
.aros span:nth-child(2) { transform: scale(calc(1.42 + var(--nivel) * .1)); border-color: rgba(139, 92, 246, .16); }
.aros span { transition: transform .12s linear; }

[data-estado="pensando"] .esfera, [data-estado="mirando"] .esfera { animation: brillo 2.6s ease-in-out infinite; }
[data-estado="escuchando"] .esfera-respira, [data-estado="hablando"] .esfera-respira { animation: none; }

.barras { display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); height: calc(70 * var(--u)); margin-top: calc(6 * var(--u)); }
.barras span { width: calc(9 * var(--u)); height: calc(9 * var(--u) + var(--h, 0) * 60 * var(--u)); border-radius: 999px; background: var(--c, var(--azul)); transition: height .06s linear; }
.estado-texto { margin: calc(2 * var(--u)) 0 calc(8 * var(--u)); min-height: calc(32 * var(--u)); font-size: calc(26 * var(--u)); color: var(--gris); }

/* ───────── Conversación (las dos últimas intervenciones) ───────── */
.conversacion { width: 100%; display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-height: calc(190 * var(--u)); justify-content: flex-end; }
.conversacion .vacio { margin: 0; text-align: center; font-size: calc(22 * var(--u)); color: var(--gris-claro); }
.burbuja { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: calc(24 * var(--u)); width: 100%; }
.burbuja.persona { background: var(--burbuja-persona); }
.burbuja.kyra { background: var(--burbuja-kyra); }
.burbuja .avatar { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: calc(2 * var(--u)); }
.burbuja.persona .avatar { background: #ddd4f6; color: var(--violeta); }
.burbuja .avatar svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke: currentColor; }
.burbuja .avatar svg.estrella { stroke: none; }
.burbuja .nombre { font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.2; }
.burbuja .texto { font-size: calc(28 * var(--u)); line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.reintentar { margin-top: calc(10 * var(--u)); }

/* ───────── Barra inferior ───────── */
.barra {
  position: relative; margin-top: calc(14 * var(--u)); width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(34 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u)); background: #fff; border-radius: 999px; box-shadow: var(--sombra);
}
.mic {
  width: calc(112 * var(--u)); height: calc(112 * var(--u)); margin: calc(-14 * var(--u)) 0; border-radius: 50%; border: 0; cursor: pointer; color: #fff; flex: none;
  background: linear-gradient(150deg, var(--turquesa), var(--azul) 55%, var(--morado));
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(80, 90, 230, .42);
  display: grid; place-items: center; touch-action: none;
}
.mic svg { width: calc(54 * var(--u)); height: calc(54 * var(--u)); stroke: currentColor; }
[data-estado="escuchando"] .mic { animation: pulso 1.2s ease-in-out infinite; }
[data-estado="pensando"] .mic, [data-estado="hablando"] .mic { filter: saturate(.7); }

/* ───────── Panel derecho ───────── */
.panel { background: #fff; border-radius: calc(24 * var(--u)); box-shadow: var(--sombra); padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; margin-top: calc(6 * var(--u)); }
.panel h2 { margin: 0; font-size: calc(40 * var(--u)); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.panel-sub { margin: calc(2 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(26 * var(--u)); color: var(--gris); }
.seccion { border: calc(2 * var(--u)) solid var(--borde); border-radius: calc(18 * var(--u)); overflow: hidden; margin-bottom: calc(18 * var(--u)); }
.seccion-cab { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); background: var(--banda); }
.seccion-cab svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); stroke: var(--violeta); flex: none; }
.seccion-cab h3 { margin: 0; font-size: calc(30 * var(--u)); font-weight: 700; }
.seccion-cuerpo { padding: calc(8 * var(--u)) calc(18 * var(--u)); }
.panel-vacio { margin: calc(12 * var(--u)) 0; font-size: calc(24 * var(--u)); color: var(--gris-claro); }
.panel-pie { margin-top: auto; padding-top: calc(10 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)) calc(20 * var(--u)); color: var(--gris-claro); font-size: calc(20 * var(--u)); }
.panel-pie p { margin: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); }
.panel-pie svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke: currentColor; flex: none; }
.logo-integraia { position: relative; display: inline-block; width: calc(123 * var(--u)); height: calc(26 * var(--u)); overflow: hidden; }
/* El archivo trae fondo blanco y márgenes: se recorta a las letras (118–1882 × 210–582 de 2000×772) y se funde con multiply. */
.logo-integraia img { position: absolute; width: calc(139.8 * var(--u)); height: calc(54 * var(--u)); left: calc(-8.25 * var(--u)); top: calc(-14.7 * var(--u)); mix-blend-mode: multiply; }

/* ───────── Entrada, teclado, aviso ───────── */
.velo { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(250, 248, 255, .94); }
.tarjeta-entrada, .tarjeta-teclado { width: min(calc(760 * var(--u)), 92vw); background: #fff; border-radius: calc(28 * var(--u)); box-shadow: var(--sombra); padding: calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); -webkit-user-select: text; user-select: text; }
.logo-entrada { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); }
.entrada-texto { margin: 0; text-align: center; font-size: calc(26 * var(--u)); color: var(--gris); }
.entrada-error { margin: 0; min-height: calc(30 * var(--u)); text-align: center; font-size: calc(24 * var(--u)); color: #b3243a; font-weight: 600; }
.tarjeta-entrada input, .tarjeta-teclado textarea { width: 100%; border: calc(2 * var(--u)) solid #cfd3e3; border-radius: calc(18 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); font-size: calc(28 * var(--u)); background: #fff; resize: none; }
.tarjeta-teclado label { font-size: calc(26 * var(--u)); font-weight: 700; }
.fila-botones { display: flex; justify-content: flex-end; gap: calc(16 * var(--u)); }
.aviso { position: fixed; left: 50%; bottom: calc(150 * var(--u)); transform: translateX(-50%); z-index: 20; max-width: 80vw; padding: calc(16 * var(--u)) calc(30 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--marino); color: #fff; font-size: calc(24 * var(--u)); font-weight: 600; box-shadow: var(--sombra); text-align: center; }

/* ───────── Animaciones ───────── */
@keyframes respira { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes brillo { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22) saturate(1.15); } }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 0 0 calc(10 * var(--u)) rgba(139, 92, 246, .25), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(80, 90, 230, .42); } 50% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 0 0 calc(22 * var(--u)) rgba(139, 92, 246, .12), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(80, 90, 230, .42); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────── Panel: grupos, filas y hoja de la jornada (etapas 2 y 3) ───────── */
.panel { overflow: hidden; }
.seccion { display: flex; flex-direction: column; min-height: 0; }
#panelNos { flex: 1 1 0; }
#panelDoc { flex: 1.35 1 0; }
.seccion-cab { flex: none; }
.seccion-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.grupo + .grupo { margin-top: calc(8 * var(--u)); }
.grupo-titulo { margin: calc(8 * var(--u)) 0 calc(2 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; color: var(--violeta); letter-spacing: .02em; }
.fila {
  display: flex; align-items: flex-start; gap: calc(14 * var(--u)); width: 100%; min-height: calc(64 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: 0; border-radius: calc(12 * var(--u)); background: transparent; text-align: left; cursor: pointer; touch-action: manipulation;
}
.fila:active { background: var(--lavanda); }
.fila svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; margin-top: calc(4 * var(--u)); stroke: var(--violeta); }
.fila-txt { display: flex; flex-direction: column; min-width: 0; }
.fila-etq { font-size: calc(22 * var(--u)); color: var(--gris); font-weight: 600; }
.fila-valor { font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.fila-nota { font-size: calc(20 * var(--u)); color: var(--gris-claro); }
.fila.pendiente .fila-valor { color: var(--gris-claro); font-weight: 500; font-style: italic; }
.fila.pendiente svg { stroke: var(--gris-claro); }
.fila.conflicto { background: #fff4dc; box-shadow: inset calc(6 * var(--u)) 0 0 #f0a020; }
.fila.conflicto .fila-nota { color: #9a5b00; font-weight: 700; }
.chip-doc { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(8 * var(--u)) 0; padding: calc(10 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid var(--borde); border-radius: calc(14 * var(--u)); background: #fafaff; font-size: calc(24 * var(--u)); }
.chip-doc svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; stroke: var(--violeta); }
.chip-nombre { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-estado { flex: none; font-weight: 700; color: var(--gris); }
.chip-estado.ok { color: var(--verde); }
.chip-doc.leyendo .chip-estado { animation: parpadeo 1.2s ease-in-out infinite; }
.doc-error { margin: calc(8 * var(--u)) 0; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff3f5; }
.doc-error-txt { margin: 0; font-size: calc(26 * var(--u)); font-weight: 700; color: #a3243a; }
.doc-error-det { margin: calc(4 * var(--u)) 0 0; font-size: calc(22 * var(--u)); color: var(--gris); }
.doc-error-botones { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }

/* Último mensaje de la persona: se puede tocar para corregirlo */
.burbuja.editable { font: inherit; color: inherit; border: 0; text-align: left; cursor: pointer; touch-action: manipulation; }
.burbuja.editable:active { filter: brightness(.96); }
.nombre .lapiz { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-left: calc(10 * var(--u)); vertical-align: calc(-3 * var(--u)); stroke: var(--gris-claro); }

/* ───────── Ventanas de apoyo ───────── */
.tarjeta-teclado h3 { margin: 0; font-size: calc(34 * var(--u)); font-weight: 800; }
.dialogo-nota { margin: 0; font-size: calc(24 * var(--u)); color: var(--gris); }

/* ───────── Cámara (etapa 5) ───────── */
.velo-camara { background: rgba(15, 27, 61, .94); }
.camara-caja { width: min(calc(1180 * var(--u)), 94vw); display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(26 * var(--u)); border-radius: calc(28 * var(--u)); background: #fff; box-shadow: var(--sombra); }
.camara-enc { display: flex; align-items: center; justify-content: space-between; }
.camara-activa { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800; color: #b3122c; }
.punto-rojo { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #e11d3a; box-shadow: 0 0 0 calc(6 * var(--u)) rgba(225, 29, 58, .2); animation: parpadeo 1.2s ease-in-out infinite; }
#video { width: 100%; max-height: calc(600 * var(--u)); object-fit: cover; border-radius: calc(20 * var(--u)); background: var(--marino); cursor: pointer; }
.camara-aviso { margin: 0; text-align: center; font-size: calc(24 * var(--u)); color: var(--gris); }
.miniatura { position: fixed; left: calc(32 * var(--u)); bottom: calc(150 * var(--u)); z-index: 15; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(20 * var(--u)); background: #fff; box-shadow: var(--sombra); font-size: calc(22 * var(--u)); font-weight: 700; color: var(--gris); }
.miniatura img { width: calc(260 * var(--u)); border-radius: calc(12 * var(--u)); display: block; }

/* ───────── Cajón «Director» (solo para el instructor) ───────── */
.director-icono { position: fixed; left: calc(16 * var(--u)); bottom: calc(16 * var(--u)); z-index: 9; width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; opacity: .14; touch-action: manipulation; }
.director-icono:focus-visible, .director-icono:active { opacity: .9; }
.director-icono svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); stroke: var(--violeta); }
.director { position: fixed; left: calc(24 * var(--u)); top: calc(96 * var(--u)); bottom: calc(24 * var(--u)); z-index: 12; width: calc(580 * var(--u)); overflow-y: auto; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255, 255, 255, .98); box-shadow: 0 calc(10 * var(--u)) calc(50 * var(--u)) rgba(40, 30, 100, .28); }
.director-cab { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.director-cab h2 { margin: 0; font-size: calc(34 * var(--u)); font-weight: 800; }
.director-cab p { margin: 0; font-size: calc(22 * var(--u)); color: var(--gris); }
.dir-btn { display: flex; align-items: center; gap: calc(14 * var(--u)); width: 100%; min-height: calc(64 * var(--u)); padding: 0 calc(18 * var(--u)); border: calc(2 * var(--u)) solid #cfd3e3; border-radius: calc(18 * var(--u)); background: #fff; font-size: calc(26 * var(--u)); font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation; }
.dir-btn:active { background: var(--lavanda); }
.dir-btn kbd, .dir-etq kbd { min-width: calc(48 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--banda); color: var(--violeta); font: inherit; font-size: calc(22 * var(--u)); font-weight: 800; text-align: center; }
.dir-veredicto { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.dir-etq { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(4 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; color: var(--gris); }
.dir-veredicto .dir-btn { margin-left: calc(24 * var(--u)); width: calc(100% - 24 * var(--u)); }
.dir-sep { height: calc(2 * var(--u)); margin: calc(6 * var(--u)) 0; background: var(--borde); }

@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ═════════ Diseño violeta de Kyra (maqueta del 6 nov 2026) ═════════ */
:root {
  --turquesa: #4a1fd6; --azul: #7a2be8; --morado: #a63de8;
  --burbuja-traby: #f4e8fd; --burbuja-persona: #f0ecfb; --insignia: #ece4ff; --banda: #ece6fb;
  --titulo: #2b0f5e; --ondas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'><path d='M0 330c160-90 300-110 470-40s300 120 470 20 200-80 260-60V0H0z' fill='%23efe3ff' fill-opacity='.55'/><path d='M0 420c180-70 320-60 480 10s320 100 480 10 190-50 240-30V260c-60-20-130 20-240 80s-300 30-480-30S160 330 0 380z' fill='%23e3d0ff' fill-opacity='.38'/><path d='M0 560c200-40 340-10 500 50s330 60 700-70v200H0z' fill='%23f6ddff' fill-opacity='.5'/></svg>");
}
body {
  background:
    radial-gradient(55% 50% at 0% 0%, #f7f0ff 0%, rgba(247, 240, 255, 0) 70%),
    radial-gradient(55% 50% at 100% 100%, #f6e9ff 0%, rgba(246, 233, 255, 0) 70%),
    #fff;
}
.logo-texto { background: linear-gradient(95deg, #3a17b0, #7a2be8 60%, #a63de8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-estrella { filter: drop-shadow(0 0 calc(6 * var(--u)) rgba(166, 61, 232, .35)); }

/* Tarjeta central con ondas suaves */
.izq { background: var(--ondas) center / 100% 100% no-repeat, #fff; border-radius: calc(30 * var(--u)); padding: calc(10 * var(--u)) calc(26 * var(--u)) calc(12 * var(--u)); margin-top: calc(6 * var(--u)); box-shadow: var(--sombra); }
.insignia { background: #ece4ff; color: #5b2be0; }
h1 { color: var(--titulo); font-size: calc(76 * var(--u)); letter-spacing: -.01em; }
.subtitulo { color: #3b2a66; }

/* Esfera violeta */
.esfera {
  background:
    radial-gradient(circle at 33% 24%, #ffffff 0%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 36% 30%, #f1c4ff 0%, #c36cf5 22%, #7a2be8 52%, #3a17b0 80%, #230b72 100%);
  box-shadow: 0 0 calc(90 * var(--u)) calc(18 * var(--u)) rgba(166, 61, 232, .30), 0 0 calc(150 * var(--u)) calc(40 * var(--u)) rgba(91, 43, 224, .16);
}
.esfera .onda path:first-child { fill: rgba(255, 255, 255, .30); }
.esfera .onda path:last-child { fill: rgba(236, 160, 255, .34); }
.aros span { border-color: rgba(122, 43, 232, .30); }
.aros span:nth-child(2) { border-color: rgba(166, 61, 232, .16); }
.estado-texto { color: #4a3a73; }

/* Conversación en vivo */
.conv-cab { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); padding-bottom: calc(6 * var(--u)); border-bottom: calc(2 * var(--u)) solid #e6defa; }
.conv-tit { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: .02em; }
.conv-tit svg, .conv-hist svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; stroke: #7a2be8; }
.conv-hist { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(64 * var(--u)); padding: 0 calc(14 * var(--u)); border: 0; background: transparent; color: #7a2be8; font-size: calc(24 * var(--u)); font-weight: 700; cursor: pointer; touch-action: manipulation; }
.burbuja { background: #f1ecfb; }
.burbuja.traby { background: #f6e9fd; }
.burbuja .nombre { text-transform: uppercase; letter-spacing: .02em; font-size: calc(24 * var(--u)); font-weight: 800; }
.burbuja.persona .avatar { background: #e4daf9; color: #5b2be0; }
.burbuja.traby .avatar, .burbuja.kyra .avatar { background: transparent; }

/* Barra inferior */
.barra { box-shadow: 0 calc(10 * var(--u)) calc(36 * var(--u)) rgba(91, 43, 224, .12); }
.mic { background: linear-gradient(150deg, #4a1fd6, #7a2be8 55%, #a63de8); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(106, 40, 232, .45); }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 0 0 calc(10 * var(--u)) rgba(166, 61, 232, .25), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(106, 40, 232, .45); } 50% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .9), 0 0 0 calc(22 * var(--u)) rgba(166, 61, 232, .12), 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(106, 40, 232, .45); } }
.mantener { margin: calc(8 * var(--u)) 0 0; font-size: calc(22 * var(--u)); color: #5d5680; text-align: center; }

/* Panel «Contexto de la sesión» */
.panel h2 { color: var(--titulo); }
.panel-sub { color: #4a3a73; }
.seccion-cab h3 { font-size: calc(30 * var(--u)); }
.seccion-cab svg { stroke: #5b2be0; }
.fila svg, .chip-doc svg { stroke: #5b2be0; }
.temas-tit { margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 800; color: var(--titulo); }
.temas { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.tema { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: #f1e8fd; color: #3b1b86; font-size: calc(22 * var(--u)); font-weight: 600; }
.tema svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke: none; }
.temas-nota { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) 0 calc(4 * var(--u)); padding-top: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid #eee8fb; font-size: calc(22 * var(--u)); font-style: italic; color: #6b6489; }
.temas-nota svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: none; stroke: currentColor; }
.panel-pie { flex-direction: column; align-items: stretch; gap: calc(10 * var(--u)); color: #5d5680; font-size: calc(22 * var(--u)); }
.contexto-nota { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(18 * var(--u)); background: #f6ecfe; color: #3b1b86; font-style: italic; font-size: calc(24 * var(--u)); }
.contexto-nota svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }
.panel-pie .tecnologia { justify-content: center; font-size: calc(22 * var(--u)); }

/* Historial */
.tarjeta-historial { max-height: 86vh; }
.historial-lista { display: flex; flex-direction: column; gap: calc(10 * var(--u)); overflow-y: auto; max-height: calc(620 * var(--u)); }

/* Ajustes tras la primera vista: esfera más grande, burbuja de Kyra violeta y panel con más sitio para la hoja */
.burbuja.kyra { background: #f6e9fd; }
.burbuja.kyra .avatar { background: transparent; }
.conversacion { min-height: calc(150 * var(--u)); }
.esfera-respira { height: min(88%, calc(430 * var(--u))); }
.aros span { height: min(88%, calc(430 * var(--u))); }
h1 { font-size: calc(70 * var(--u)); margin-top: calc(4 * var(--u)); }
#panelNos { flex: .75 1 0; }
#panelDoc { flex: 1.7 1 0; }

/* Esfera de Kyra (imagen) */
.esfera { background: url("/img/kyra-esfera.webp") center / 118% no-repeat; }
.esfera .onda, .esfera .brillo { display: none; }

/* ═════════ Celular (clase con grupos): una sola columna, sin cámara ni Director ═════════ */
@media (max-width: 820px) {
  :root { --u: .62px; }
  html, body { height: auto; }
  body { overflow: auto; }
  .app { position: relative; height: auto; min-height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: 10px; }
  .enc-izq { height: auto; padding-right: 100px; }
  .enc-der { position: absolute; top: 12px; right: 10px; height: auto; }
  .enc-der .en-vivo, .logo-lema, .logo-linea { display: none; }
  .izq { margin-top: 0; padding: 12px 12px 14px; }
  .zona-esfera { flex: none; height: 190px; }
  .esfera-respira, .aros span { height: 170px; }
  .conversacion { min-height: 120px; }
  .btn-borde { min-height: 44px; padding: 0 16px; }
  .btn-borde.cuadrado { width: 52px; padding: 0; }
  .barra { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; border-radius: 28px; }
  .mic { width: 76px; height: 76px; margin: -10px 0; }
  .mic svg { width: 36px; height: 36px; }
  #btnCamara, .director-icono, .director, .miniatura { display: none !important; }
  .panel { height: auto; overflow: visible; margin-top: 0; }
  .seccion { flex: none !important; }
  .seccion-cuerpo { overflow: visible; }
  .tarjeta-entrada, .tarjeta-teclado { padding: 22px; }
}
@media (max-width: 820px) { #btnModoClase { display: none !important; } }
.entrada-powered { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: #6b6a85; }
.entrada-powered .logo-integraia { --u: .6px; }
.en-vivo { white-space: nowrap; }