/* Sistema compartido de la consola de citofonia.
   Un solo lugar para tokens, navegacion y controles. Las paginas solo
   describen su contenido. */
:root{
  /* superficie */
  --bg:#0d0d0f; --panel:#17171b; --panel2:#1e1e24;
  --line:rgba(255,255,255,.08); --line-fuerte:rgba(255,255,255,.14);
  /* texto: 3 niveles, no mas */
  --txt:#f3f3f5; --txt2:#9a9aa2; --txt3:#6b6b73;
  /* acento unico + semanticos */
  --rojo:#c62f33; --off:#6b6b73; --rojo-hi:#e0484c; --ok:#2f9e5b; --warn:#e8c66a; --err:#ff7a7a;
  --ok-bg:#12211a;
  /* escala de espaciado 4px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  --r-sm:10px; --r:14px; --r-lg:18px;
  --ease:cubic-bezier(.32,.72,0,1);
  --nav-h:56px;
}
*{box-sizing:border-box;margin:0}
body{
  background:radial-gradient(120% 80% at 50% 0%,#1a1a20 0%,var(--bg) 55%);
  background-attachment:fixed;
  color:var(--txt);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100dvh;
}

/* ── Navegacion ───────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;flex:none;
  height:var(--nav-h);display:flex;align-items:center;gap:var(--e5);
  padding:0 var(--e5);
  background:rgba(13,13,15,.72);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:inset 0 -1px 0 var(--line);
}
.nav-marca{display:flex;align-items:center;gap:var(--e2);font-weight:660;
  letter-spacing:-.02em;font-size:15px;text-decoration:none;color:var(--txt);flex:none}
.nav-marca .dot{width:9px;height:9px;border-radius:2px;background:var(--rojo);
  box-shadow:0 0 12px var(--rojo)}
.nav-links{display:flex;align-items:center;gap:var(--e1);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
/* Indicio de que la fila sigue para el lado (movil, barra oculta): solo
   cuando UI.marcarScroll() detecta que hay overflow real. Reutilizado por
   las pestañas de Guiones. */
.con-scroll{
  mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
}
.nav-links a{
  position:relative;color:var(--txt2);text-decoration:none;font-size:14px;
  padding:var(--e2) var(--e3);border-radius:var(--r-sm);white-space:nowrap;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.nav-links a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-links a[aria-current="page"]{color:var(--txt);font-weight:560}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:var(--e3);right:var(--e3);bottom:-1px;
  height:2px;border-radius:2px;background:var(--rojo-hi);
}
.nav-fin{margin-left:auto;display:flex;align-items:center;gap:var(--e2);flex:none}
.nav-estado{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt2)}
.nav-estado .luz{width:7px;height:7px;border-radius:50%;background:var(--txt3)}
.nav-estado.on .luz{background:var(--ok);box-shadow:0 0 8px var(--ok)}
@media (max-width:640px){ .nav{padding:0 var(--e4);gap:var(--e3)} .nav-marca span:not(.dot){display:none} }

/* ── Layout ───────────────────────────────────────────────────────────── */
.pagina{max-width:960px;margin:0 auto;padding:var(--e5) var(--e5) var(--e7)}
.pagina.ancha{max-width:1100px}
.titulo{font-size:24px;font-weight:660;letter-spacing:-.025em;line-height:1.15}
.bajada{color:var(--txt2);font-size:14px;margin-top:var(--e1)}
.seccion{font-size:12px;color:var(--txt2);text-transform:uppercase;
  letter-spacing:.07em;font-weight:600;margin:var(--e6) 0 var(--e3)}

/* ── Controles ────────────────────────────────────────────────────────── */
input,button,select,textarea{font:inherit;color:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px var(--e4);cursor:pointer;min-height:44px;
  color:var(--txt);text-decoration:none;
  transition:background .15s var(--ease),transform .1s var(--ease),border-color .15s var(--ease);
}
.btn:hover{background:#2a2a31;border-color:var(--line-fuerte)}
.btn:visited{color:var(--txt)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--rojo-hi);outline-offset:2px}
.btn-primario{background:var(--rojo);border-color:transparent;color:#fff}
.btn-primario:hover{background:var(--rojo-hi);border-color:transparent}
.btn-ok{background:var(--ok);border-color:transparent;color:#fff}
.btn-primario:visited,.btn-ok:visited{color:#fff}
.btn-peligro{background:#3a1f22;border-color:rgba(198,47,51,.35);color:var(--rojo-hi)}
.btn-sm{min-height:36px;padding:var(--e2) var(--e3);font-size:13px}
/* Paginador de tablas (UI.paginar): debajo de la tabla, a la derecha. */
.paginador{display:flex;align-items:center;justify-content:flex-end;gap:var(--e2);
  margin-top:var(--e3);color:var(--txt2);font-size:12.5px;font-variant-numeric:tabular-nums}
.paginador[hidden]{display:none}
.paginador span{min-width:9ch;text-align:center}
.btn svg,button svg{flex:none}
input.campo,select.campo,textarea.campo{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px var(--e3);width:100%;min-height:44px}
.campo::placeholder{color:var(--txt3)}
/* Campo de formulario = label + control apilados. La etiqueta va PEGADA a su
   control (proximidad): 6px al suyo, 12px al siguiente campo. */
.campo{display:block}
.campo > label{display:block;font-size:11.5px;color:var(--txt2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:6px}
.campo > input,.campo > select{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px var(--e3);width:100%;min-height:44px}


/* ── Tipografia y ancho de pagina (las vistas usan <main>) ───────────────
   Antes cada pagina definia su propio main/h1/.sub/h2 con valores distintos
   (900 vs 920 vs 960 de ancho, h1 de 22 vs 30px). Una sola escala. */
main{max-width:960px;margin:0 auto;padding:var(--e5) var(--e5) var(--e7)}
main.ancha{max-width:1100px}
/* Vistas de pantalla completa (totem, canales): la barra sigue arriba y el
   contenido ocupa todo lo que queda, sin la columna de lectura. */
body.full{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.full main{max-width:none;width:100%;flex:1;min-height:0;padding:0;
  display:flex;flex-direction:column;position:relative}
h1{font-size:24px;font-weight:660;letter-spacing:-.025em;line-height:1.15;margin:0 0 var(--e1)}
.sub{color:var(--txt2);font-size:14px;margin:0 0 var(--e5);max-width:60ch}
/* Titulo de seccion: SOLO el h2 que cuelga directo de <main> (o la clase
   .seccion explicita). Antes era un h2{} global y se filtraba a cualquier
   h2 de un componente (tarjeta de Equipos, puerta de acceso...): cada
   componente define su propio titulo, este no debe pisarlo. */
main > h2{font-size:12px;color:var(--txt2);text-transform:uppercase;letter-spacing:.07em;
   font-weight:600;margin:var(--e6) 0 var(--e3)}

/* ── Tablas: una sola definicion para historial y admin ─────────────────
   La tabla suelta trae su propia superficie; dentro de .tabla-wrap (que scrollea
   en horizontal) la superficie la pone el wrapper, no la tabla. */
table{width:100%;border-collapse:collapse;font-size:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tabla-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r)}
.tabla-wrap > table{background:transparent;border:0;border-radius:0}
th{color:var(--txt2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
   text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--line);
   font-weight:600;white-space:nowrap}
td{padding:var(--e3) var(--e4);border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover td{background:rgba(255,255,255,.025)}
/* Ojo: en Activas '.sala' es la TARJETA de una conversacion, no un texto.
   Por eso la version monoespaciada se limita a las celdas de tabla. */
td.sala,td .sala{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--txt2)}
.ext{font-variant-numeric:tabular-nums;font-weight:600}
/* Numeros/fechas: nunca se parten en dos lineas dentro de una celda angosta. */
.num{white-space:nowrap}

/* ── Etiquetas de estado ───────────────────────────────────────────────── */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  white-space:nowrap}
.e-participant_joined,.e-room_started,.r-answered{background:rgba(47,158,91,.16);color:#7fe0a6}
.e-participant_left,.e-room_finished{background:rgba(198,47,51,.14);color:#f0a0a2}
.r-missed,.r-timeout{background:rgba(232,198,106,.14);color:var(--warn)}
.badge-ok{background:rgba(47,158,91,.16);color:#7fe0a6}
.badge-neutro{background:rgba(255,255,255,.08);color:var(--txt2)}
.badge-warn{background:rgba(232,198,106,.14);color:var(--warn)}
.badge-err{background:rgba(198,47,51,.14);color:#f0a0a2}

/* .err es el mismo aviso de error; una sola definicion para todas. */
.err{color:var(--err);font-size:13.5px;min-height:20px}
.ok{color:var(--ok)}

/* ── Puerta de clave (una sola, compartida) ───────────────────────────── */
.puerta{max-width:400px;margin:var(--e7) auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--e5);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.35)}
.puerta h2{font-size:17px;font-weight:640;margin-bottom:var(--e1)}
.puerta p{color:var(--txt2);font-size:13.5px;margin-bottom:var(--e4)}
.puerta .fila{display:flex;gap:var(--e2)}
.puerta .fila .campo{flex:1}
.puerta .err{color:var(--err);font-size:13px;min-height:18px;margin-top:var(--e2)}

/* ── Piezas comunes ───────────────────────────────────────────────────── */
.tarjeta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--e5)}
.aviso{color:var(--err);font-size:13.5px;min-height:20px}
.vacio{color:var(--txt2);font-size:14px;text-align:center;padding:var(--e6) var(--e4);
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--r)}
.num{font-variant-numeric:tabular-nums}

/* Foco visible en cualquier control, use o no las clases del sistema. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rojo-hi);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Paginas de pantalla completa (totem, canales, video en llamada): la barra
   sigue siendo el primer elemento y nunca se encoge, asi la navegacion se
   mantiene tambien "paginas adentro". */
body > .nav + header{ display:none }   /* si quedo algun header viejo, no duplicar */

/* ── Botones: una sola definicion para todas las paginas ──────────────────
   Antes cada vista definia su propio button{} con padding distinto (10px,
   11px, 8px): alturas dispares y los chicos por debajo del minimo de toque.
   Aqui viven la base y las variantes que ya usa el HTML, sin tocar markup. */
button{
  font:inherit;color:inherit;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px var(--e4);min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  transition:background .15s var(--ease),transform .1s var(--ease),border-color .15s var(--ease);
}
button:hover{background:#2a2a31;border-color:var(--line-fuerte)}
button:active{transform:scale(.97)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.primario{background:var(--rojo);border-color:transparent;color:#fff}
button.primario:hover{background:var(--rojo-hi);border-color:transparent}
button.abrir{background:var(--ok);border-color:transparent;color:#fff}
button.abrir:hover{background:#37b169;border-color:transparent}
button.colgar{background:#3a1f22;border-color:rgba(198,47,51,.35);color:var(--rojo-hi)}
button.colgar:hover{background:#4a262a;border-color:rgba(198,47,51,.5)}
/* Secundarios de tabla/controles: mas compactos pero aun comodos de tocar */
button.ctl,button.peligro{min-height:38px;padding:var(--e2) var(--e3);font-size:13.5px}
button.ctl{background:var(--panel2)}
button.peligro{background:#3a1f22;border-color:rgba(198,47,51,.35);color:var(--rojo-hi)}
button.peligro:hover{background:#4a262a}

/* ── Atributo hidden ──────────────────────────────────────────────────────
   Las clases .btn y button fijan display:inline-flex y le ganan al display:none
   del navegador para [hidden]; sin esto "Salir" oculto en la barra se veía igual. */
[hidden]{display:none !important}

/* ── Pantalla única de bloqueo (ui.js: acceso pendiente, sección solo-admin) ──
   Se oculta el contenido de la página y queda una sola tarjeta bajo la barra. */
body.bloqueado > main,body.bloqueado > footer{display:none}
.bloqueo .fila{margin-top:var(--e4);flex-wrap:wrap}

/* Línea de ayuda bajo un bloque (antes vivía solo en admin.html) */
.text-muted{color:var(--txt2);font-size:12.5px;margin-top:var(--e2)}

/* Diálogo modal (turno del operador). Entrada de 150 ms: opacidad + un
   desplazamiento corto; la salida es inmediata. */
dialog.modal{
  position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 2 * var(--e4)));
  background:var(--panel);color:var(--txt);border:1px solid var(--line-fuerte);
  border-radius:var(--r-lg);padding:var(--e5);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 48px rgba(0,0,0,.5)}
dialog.modal::backdrop{background:rgba(0,0,0,.6)}
dialog.modal[open]{animation:modal-in .15s var(--ease)}
dialog.modal[open]::backdrop{animation:modal-fondo .15s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes modal-fondo{from{opacity:0}to{opacity:1}}
dialog.modal h2{font-size:18px;font-weight:660;letter-spacing:-.01em;margin-bottom:var(--e2)}
dialog.modal p{color:var(--txt2);font-size:14px;line-height:1.55}
dialog.modal p + p{margin-top:var(--e2)}
dialog.modal .cuenta{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
dialog.modal .acciones-modal{display:flex;gap:var(--e2);justify-content:flex-end;
  flex-wrap:wrap;margin-top:var(--e5)}
@media (max-width:640px){
  dialog.modal .acciones-modal{flex-direction:column-reverse}
  dialog.modal .acciones-modal .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  dialog.modal[open],dialog.modal[open]::backdrop{animation:none}
}
body.bloqueado .nav-estado{display:none}