/*
 * MATCH IMPRO DIRECTOR :: ESTILOS DEL PANEL WEB
 * Corporación Acción Impro · Medellín, Colombia · 2026 · CC BY 4.0
 *
 * Dos ideas gobiernan este archivo:
 *
 * 1. EL MODO FUNCIÓN TIENE QUE CABER EN LA PANTALLA. Se opera en vivo y a
 *    oscuras: si hay que hacer scroll para llegar al «+» de un equipo, la
 *    herramienta no sirve. Por eso la página no crece: es una columna flex de
 *    alto 100dvh y lo único que puede desbordar (la lista de equipos) tiene su
 *    propio scroll como último recurso.
 * 2. LOS GRISES DE TEXTO superan el contraste mínimo AA (4,5:1) porque el panel
 *    se opera en salas a oscuras.
 */

:root {
  --fondo: #1a1a1a;
  --panel: #222;
  --fila: #2e2e2e;
  --borde: #3a3a3a;
  /* Amarillo de marca Acción Impro. Sobre los fondos oscuros del panel da 8:1
     o más, así que aquí sí puede ser texto (la restricción de `--ai-link-int`
     aplica solo sobre fondos claros). */
  --acento: #edb61d;
  --texto: #fff;
  --texto-suave: #c4c4c4;
  --texto-tenue: #a8a8a8;
  --ok: #5fe08a;
  --alerta: #ffd166;
  --error: #ff7b72;
  --verde: #1d7a4a;
  --ambar: #8a6d1f;
  --rojo: #b93b3b;

  /* Tamaños de los mandos del match. Se encogen solos con 5 o 6 equipos. */
  --bt: 64px;          /* lado del botón de punto */
  --fila-alto: 68px;   /* alto de la fila de un equipo */
  --reloj: 66px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;             /* la página nunca hace scroll: lo hacen sus partes */
}

button {
  font: inherit; font-weight: 700; color: var(--texto);
  background: var(--fila); border: 1px solid var(--borde); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; touch-action: manipulation;
}
button:hover:not(:disabled) { background: #3a3a3a; }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
.btn-cta { background: var(--acento); color: #000; border-color: var(--acento); }
.btn-cta:hover:not(:disabled) { background: #ffc93c; }

input, select {
  font: inherit; background: #111; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px; padding: 7px;
}
input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
input[type="range"] { accent-color: var(--acento); padding: 0; }
a { color: var(--acento); }

/* ====================================================================== */
/* BARRA SUPERIOR                                                         */
/* ====================================================================== */
.barra-superior {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px; background: #141414; border-bottom: 1px solid var(--borde);
  flex: 0 0 auto;
}
.barra-superior .marca {
  font-weight: 800; letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; margin: 0;               /* es un <h1>: neutralizamos el tamaño del navegador */
}
.barra-superior .marca small { color: var(--texto-tenue); font-weight: 400; }
.barra-superior .marca img { width: 24px; height: 24px; display: block; flex: none; }
.separador { width: 1px; align-self: stretch; background: var(--borde); margin: 0 2px; }

/* Cambio de idioma. Cada idioma es una página propia, así que son enlaces de
   verdad: los buscadores los siguen y se pueden compartir. */
.idiomas {
  display: flex; gap: 2px; margin-left: 12px; align-items: center;
  border: 1px solid var(--borde); border-radius: 8px; overflow: hidden;
}
.idiomas > * {
  font: 700 11px/1 system-ui, sans-serif; padding: 8px 9px;
  color: var(--texto-tenue); text-decoration: none;
}
.idiomas > [aria-current] { background: var(--panel); color: var(--acento); }
.idiomas a:hover { color: var(--texto); background: var(--fila); }

/* Los dos modos. El activo se lee de un vistazo desde lejos. */
.modos { display: flex; gap: 4px; margin-left: 14px; margin-right: auto; }
.modos button {
  background: transparent; border-color: transparent; color: var(--texto-tenue);
  font-size: 13px; padding: 8px 14px;
}
.modos button[aria-selected="true"] {
  background: var(--panel); border-color: var(--borde); color: var(--acento);
}

/* Luz de la ventana del proyector: verde = abierta y sincronizada. */
.luz-tablero {
  width: 10px; height: 10px; border-radius: 50%; background: #555; flex: none;
}
.luz-tablero.viva { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

/* El enlace de vuelta al sitio vive en la barra de ABAJO, no entre los mandos:
   ahí un clic sin querer sacaba de la aplicación en plena función. */
.volver {
  color: var(--texto-tenue); font-size: 12px; text-decoration: none; font-weight: 700;
}
.volver:hover, .volver:focus-visible { color: var(--acento); }

/* ====================================================================== */
/* ESCENA (las dos vistas)                                                */
/* ====================================================================== */
.escena {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  /* `minmax(0, 1fr)` y no `auto`: con `auto` la fila crece hasta el contenido y
     la escena desborda la pantalla, que es justo lo que hay que evitar. */
  grid-template-rows: minmax(0, 1fr);
  gap: 12px; padding: 12px;
}
.escena .columna { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* En preparación no hay prisa: puede desbordar y se hace scroll con calma. */
.escena-prep .columna { overflow: auto; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px; flex: 0 0 auto;
}
.tarjeta h2 {
  font-size: 11px; letter-spacing: 1.5px; color: var(--acento);
  margin: 0 0 10px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.btn-h2 {
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--texto-tenue); padding: 5px 9px; background: transparent;
}
.btn-h2:hover { color: var(--texto); }

/* ====================================================================== */
/* CRONÓMETRO                                                             */
/* ====================================================================== */
#reloj {
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--reloj); font-weight: 800;
  text-align: center; color: var(--acento); letter-spacing: 2px; line-height: 1;
  margin-bottom: 10px;
}
#reloj.alerta { color: var(--error); }
#reloj.corriendo { color: var(--ok); }

/* El botón más pulsado de la aplicación: uno solo, que alterna. Dos botones
   obligaban a mirar cuál era cuál en medio de la función. */
.btn-crono {
  width: 100%; padding: 16px; font-size: 18px; letter-spacing: .5px;
  background: var(--verde); border-color: transparent;
}
.btn-crono.corriendo { background: var(--ambar); }
.btn-crono.agotado { background: var(--fila); color: var(--texto-tenue); }
.pista-crono { margin: 6px 0 10px; text-align: center; color: var(--texto-tenue); font-size: 11px; }

/* Fijar el tiempo es lo que más se hace: una impro, un tiempo. De un toque. */
.rapidos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.rapidos button { padding: 11px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.rapidos button.puesto { border-color: var(--acento); color: var(--acento); }

.ajustes-tiempo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ajustes-tiempo button { padding: 8px 9px; font-size: 12px; }
.ajustes-tiempo .hueco { flex: 1; }
.ajustes-tiempo input { width: 52px; text-align: center; font-size: 15px; }
.ajustes-tiempo .dospuntos { color: var(--texto-tenue); }

.fila { display: flex; gap: 8px; align-items: center; }
.fila > .crece { flex: 1; }
.fila label { color: var(--texto-suave); font-size: 12px; }
.fila-volumen { margin-top: 10px; }

/* ====================================================================== */
/* EQUIPOS (modo función)                                                 */
/* ====================================================================== */
.tarjeta-equipos { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#equipos { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }

/* Con 5 o 6 equipos hay que ganar sitio: se aprietan las filas y, sobre todo,
   se encoge la vista previa. Medido con 6 equipos a 1366×768, sin esto la lista
   se pasaba 65 px y el sexto equipo quedaba fuera. La previa es lo que sobra:
   el tablero de verdad está en el proyector. */
body[data-equipos="5"] #equipos,
body[data-equipos="6"] #equipos { --bt: 56px; --fila-alto: 58px; }

.equipo {
  background: var(--fila); border-radius: 10px; padding: 0 12px;
  border-left: 6px solid #555;
  min-height: var(--fila-alto); flex: 0 0 auto;
  /* Columnas de ancho FIJO para los mandos: así el botón FALTA cae siempre en
     el mismo sitio y se puede pulsar sin mirar. Solo el nombre se estira. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 72px var(--bt) 92px 96px;
  gap: 8px; align-items: center;
}
.equipo .nombre {
  font-weight: 800; font-size: 15px; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
/* Las teclas, escritas en la propia fila. Estaban solo en la pestaña de ayuda
   del otro modo, así que en la práctica no las usaba nadie; aquí se aprenden
   solas y operar con el teclado es lo que permite no apartar la vista. */
.equipo .tecla {
  background: #111; border: 1px solid var(--borde); border-radius: 4px;
  color: var(--acento); font: 700 10px/1 ui-monospace, monospace;
  padding: 3px 5px; flex: none;
}

/* Sumar se hace treinta veces por función; restar, una o dos y para corregir.
   Con los dos botones iguales, ir rápido y a oscuras acaba en un punto de menos. */
.btn-punto {
  padding: 0; display: flex; align-items: center; justify-content: center;
}
.btn-punto.menos {
  height: calc(var(--bt) - 16px); font-size: 20px;
  background: transparent; color: var(--texto-tenue);
}
.btn-punto.menos:hover:not(:disabled) { background: var(--borde); color: var(--texto); }
.btn-punto.mas {
  height: calc(var(--bt) - 2px); font-size: 28px;
  background: var(--acento); color: #000; border-color: var(--acento);
}
.puntos {
  font-size: 32px; font-weight: 800; color: var(--acento);
  text-align: center; font-variant-numeric: tabular-nums; line-height: 1;
}

/* Confirmación de que la jugada entró, para quien está mirando el escenario. */
@keyframes anotado {
  0%   { background: var(--acento); }
  100% { background: var(--fila); }
}
.equipo.anotado { animation: anotado .45s ease-out; }
@media (prefers-reduced-motion: reduce) { .equipo.anotado { animation: none; } }
.luces { display: flex; gap: 6px; justify-content: center; }
.luz {
  width: 22px; height: 22px; border-radius: 50%; background: #555;
  border: 0; padding: 0; cursor: pointer;
}
.luz:hover { outline: 2px solid var(--texto-tenue); outline-offset: 2px; }
.btn-falta {
  background: var(--rojo); height: calc(var(--bt) - 12px);
  font-size: 12px; letter-spacing: .5px; padding: 0;
}

/* ====================================================================== */
/* EQUIPOS (modo preparación)                                             */
/* ====================================================================== */
.equipo-config {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
  background: var(--fila); border-radius: 10px; padding: 8px;
  border-left: 6px solid #555;
}
.equipo-config .indice { color: var(--texto-tenue); font-size: 12px; width: 14px; flex: none; }
.equipo-config input[type="text"] { flex: 1; font-weight: 700; }

/* ====================================================================== */
/* EFECTOS                                                                */
/* ====================================================================== */
.rejilla-fx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rejilla-fx button { min-height: 58px; font-size: 12px; padding: 6px; position: relative; }
.rejilla-fx button.sonando { box-shadow: 0 0 0 2px var(--acento) inset; }
/* Un botón sin sonido no se desactiva: lleva a cargarlo. Un botón muerto sin
   explicación es un callejón sin salida. */
.rejilla-fx button.vacio { color: var(--texto-tenue); font-weight: 400; border-style: dashed; }
/* El reloj marca cuál va a sonar solo cuando se acabe el tiempo. */
.rejilla-fx button.fin::after {
  content: '⏰'; position: absolute; top: 4px; left: 5px; font-size: 11px;
}

/* ====================================================================== */
/* VISTA PREVIA                                                           */
/* ====================================================================== */
/* El lienzo se limita POR ANCHO, no por alto: si se limitara el alto, el canvas
   se estiraría y el tablero se vería deformado respecto al proyector. */
#lienzo-previa {
  width: 100%; max-width: calc(var(--previa-vh, 22vh) * 16 / 9); aspect-ratio: 16 / 9;
  display: block; margin: 0 auto;
  background: #000; border: 1px solid var(--borde); border-radius: 8px;
}
body[data-equipos="5"], body[data-equipos="6"] { --previa-vh: 12vh; }
#lienzo-grande {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: #000; border: 1px solid var(--borde); border-radius: 8px;
}
.tarjeta-previa.plegada #lienzo-previa { display: none; }
.pie-previa {
  margin: 8px 0 0; text-align: center;
  color: var(--texto-tenue); font-size: 12px;
}

/* ====================================================================== */
/* PESTAÑAS (preparación)                                                 */
/* ====================================================================== */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; flex: 0 0 auto; }
.pestanas button {
  background: transparent; border: 1px solid transparent; color: var(--texto-tenue);
  font-size: 12px; padding: 7px 11px;
}
.pestanas button[aria-selected="true"] {
  background: var(--panel); border-color: var(--borde); color: var(--acento);
}
[hidden] { display: none !important; }

/* ---------- Bloques plegables del diseño ----------
   La pestaña medía 953 px de alto con 24 controles seguidos: había que bajar
   345 px para llegar al final. Agrupados, y con los dos últimos cerrados, son
   tres decisiones en vez de un muro. */
.bloque {
  background: var(--fila); border: 1px solid var(--borde);
  border-radius: 10px; margin-bottom: 8px; padding: 0 11px;
}
.bloque > summary {
  cursor: pointer; list-style: none; padding: 11px 0;
  font-size: 12px; font-weight: 700; color: var(--texto);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bloque > summary::-webkit-details-marker { display: none; }
.bloque > summary::after { content: '▸'; color: var(--texto-tenue); }
.bloque[open] > summary::after { content: '▾'; }
.bloque > summary small { color: var(--texto-tenue); font-weight: 400; }
.bloque > .dentro { padding: 2px 0 12px; }

/* ---------- Selector de cuántos equipos ----------
   Era un desplegable: dos clics y una lista para cinco opciones. */
.segmentado { display: flex; gap: 4px; }
.segmentado button { padding: 8px 0; width: 40px; font-size: 14px; }
.segmentado button[aria-pressed="true"] {
  background: var(--acento); color: #000; border-color: var(--acento);
}

/* ---------- Fila de un efecto en preparación ----------
   Antes no se veía qué huecos tenían sonido (el nombre es el que escribe el
   usuario, no el del archivo) ni había forma de escucharlo sin cambiar de modo. */
/* Improvisación en curso: el número es corto y el título se lleva el resto. */
#impro-num { width: 62px; text-align: center; font-weight: 700; }
#impro-titulo { min-width: 0; }

.boton-enlace {
  display: block; text-align: center; text-decoration: none;
  background: var(--fila); border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; font-weight: 700; color: var(--texto); margin-top: 8px;
}
.boton-enlace:hover { background: var(--borde); color: var(--acento); }

.fx-ranura { margin-bottom: 10px; }
.fx-ranura .num { color: var(--texto-tenue); font-size: 11px; width: 18px; flex: none; }
.etiqueta-corta { color: var(--texto-suave); font-size: 12px; flex: none; }
.fx-archivo {
  margin: 3px 0 0 26px; font-size: 11px; color: var(--texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-archivo.vacia { font-style: italic; opacity: .8; }
.fx-archivo .marca-fin { color: var(--acento); font-weight: 700; }

.campo { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.campo label { width: 132px; color: var(--texto-suave); font-size: 12px; flex: none; }
.campo input[type="range"] { flex: 1; }
.campo .valor {
  width: 46px; text-align: right; color: var(--texto-tenue);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.rejilla-colores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rejilla-colores label { font-size: 11px; color: var(--texto-suave); display: block; margin-bottom: 3px; }
.rejilla-colores input { width: 100%; }
.interruptores { display: flex; flex-wrap: wrap; gap: 12px; }
.interruptores label { font-size: 12px; color: var(--texto-suave); cursor: pointer; }

/* ====================================================================== */
/* BARRA DE ESTADO                                                        */
/* ====================================================================== */
.pie-barra {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; background: #141414; border-top: 1px solid var(--borde);
}
#estado {
  flex: 1 1 auto; min-width: 0; color: var(--texto-tenue); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#estado.ok { color: var(--ok); }
#estado.alerta { color: var(--alerta); }
#estado.error { color: var(--error); }
/* Un error escrito en gris abajo del todo no lo ve nadie en una función. */
#estado.error, #estado.alerta { animation: latir .5s ease-in-out 2; }
@keyframes latir { 50% { background: #3a2020; } }

.ayuda { color: var(--texto-tenue); font-size: 12px; line-height: 1.6; }
.ayuda kbd, kbd {
  background: #111; border: 1px solid var(--borde); border-radius: 4px;
  padding: 1px 5px; font-family: ui-monospace, monospace; color: var(--alerta);
  font-size: .9em;
}
table.atajos { width: 100%; border-collapse: collapse; font-size: 12px; }
table.atajos td { padding: 4px 0; color: var(--texto-suave); }
table.atajos td:first-child { width: 45%; }

/* ====================================================================== */
/* DIÁLOGO                                                                */
/* ====================================================================== */
dialog {
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 14px; padding: 22px 24px; max-width: 440px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
dialog::backdrop { background: rgba(0, 0, 0, .68); }
dialog h2 { margin: 0 0 8px; font-size: 17px; color: var(--acento); }
dialog p { margin: 0 0 18px; color: var(--texto-suave); line-height: 1.55; }
.dlg-botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-botones button { padding: 11px 16px; }

/* ====================================================================== */
/* PANTALLAS ESTRECHAS                                                    */
/* ====================================================================== */
@media (max-width: 900px), (max-height: 560px) {
  body { overflow: auto; height: auto; min-height: 100%; }
  .escena { grid-template-columns: 1fr; }
  .escena .columna { overflow: visible; }
  #equipos { overflow: visible; }
  #lienzo-previa { max-width: none; }
  :root { --reloj: 54px; }
}

/* Oferta del otro idioma. Discreta y descartable: no es un error ni una alerta,
   solo una puerta para quien llegó a la página que no era la suya. */
.aviso-idioma {
  margin: 10px 12px 0; padding: 9px 12px; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--acento);
  border-radius: 10px; color: var(--texto-suave); font-size: 13px;
}
.aviso-idioma a { font-weight: 700; margin-right: auto; }
.aviso-idioma button { padding: 4px 8px; background: transparent; border-color: transparent; color: var(--texto-tenue); }

/* Solo para quien llega desde un enlace compartido y lo abre en el móvil. */
.aviso-movil { display: none; }
@media (max-width: 700px) {
  .aviso-movil {
    display: block; margin: 12px 12px 0; padding: 11px 13px;
    background: var(--panel); border: 1px solid var(--acento); border-left-width: 4px;
    border-radius: 10px; color: var(--texto-suave); font-size: 13px; line-height: 1.5;
  }
  .aviso-movil b { color: var(--acento); }
  .modos { margin-left: 0; }
  .equipo { grid-template-columns: minmax(0, 1fr) var(--bt) 64px var(--bt); }
  .equipo .luces, .equipo .btn-falta { grid-column: span 2; }
}