/* AEHCH - Marcador HEMA
   control.css : el panel del operador.

   Criterio: botones grandes y separados. Se opera de pie, con prisa y a veces
   con guantes puestos; un boton pequeno aqui es un punto mal anotado.

   DOS TEMAS, igual que la pantalla, porque el panel tambien se mira durante
   horas y no siempre con la misma luz.

   Los colores van en variables nombradas por su PAPEL —que fondo, que tinta,
   que acento— y no por su color. Es lo que permite tener dos temas sin que el
   codigo mienta: un `--negro` que en el tema claro valiera `#f4f1ea` seria peor
   que no tener variables. Cambiar de tema es cambiar estos valores; ni una
   sola regla de mas abajo distingue entre uno y otro.

   Los colores del tema claro estan escogidos por contraste medido, no a ojo:
   todos pasan de 4,5:1 sobre el fondo de los bloques.
*/

/* ====================================================================== */
/*  Tema OSCURO (por defecto)                                             */
/* ====================================================================== */
body {
  --fondo:    #0f0f0d;   /* la pagina */
  --bloque:   #1a1915;   /* los bloques y las columnas de los tiradores */
  --bloque2:  #24221c;   /* botones y cajas */
  --bloque3:  #2f2c23;   /* al pasar el raton por encima */
  --campo:    #121110;   /* casillas de texto */

  --borde:    rgba(199, 154, 59, .22);
  --borde2:   rgba(199, 154, 59, .45);

  --acento:   #c79a3b;   /* el oro: titulos, etiquetas, bordes */
  --acento2:  #e0b755;   /* el oro con mas fuerza: cifras, enfasis */
  --sobre-acento: #17150f;  /* lo que va escrito ENCIMA del oro */

  --tinta:    #ece9e1;
  --nota:     #a39b86;   /* texto secundario */
  --barra:    #000;      /* la barra de arriba */

  --ok:        #86efac;
  --ok-brillo: rgba(134, 239, 172, .8);
  --punto-off: #6b6459;
  --alerta:    #ff6b5e;  /* el reloj en los ultimos segundos */

  --peligro-borde: rgba(224, 80, 63, .6);
  --peligro-fondo: rgba(224, 80, 63, .18);
  --peligro-tinta: #ffb3ab;

  --amarilla: #f2c94c;
  --roja:     #e0503f;

  --hueco:    rgba(0, 0, 0, .28);       /* la etiqueta de en que lado cae */
  --aviso:    rgba(199, 154, 59, .07);  /* el recuadro de "pendiente" */

  /* Los tiradores. Rojo y azul en los dos temas: identifican al tirador en la
     pista, no son decoracion. */
  --velo:   rgba(0, 0, 0, .6);   /* el fondo oscurecido de las preguntas */
  --sombra: rgba(0, 0, 0, .55);

  --lado-a:     #e0503f;
  --lado-b:     #4a9be0;
  --sobre-lado: #0f0f0d;
}

/* ====================================================================== */
/*  Tema CLARO                                                            */
/* ====================================================================== */
body.panel-claro {
  --fondo:    #f4f1ea;
  --bloque:   #ffffff;
  --bloque2:  #efeadf;
  --bloque3:  #e3dccb;
  --campo:    #ffffff;

  --borde:    rgba(109, 76, 21, .25);
  --borde2:   rgba(109, 76, 21, .45);

  /* El oro de la marca (#c79a3b) sobre blanco da 2,6:1 y no se lee. Aqui va
     oscurecido: 7,8:1, y sigue siendo oro. */
  --acento:   #6d4c15;
  --acento2:  #4d350e;
  --sobre-acento: #ffffff;

  --tinta:    #14120d;
  --nota:     #5f594c;
  --barra:    #14120d;   /* la barra sigue oscura: es la banda de marca, y el
                            emblema es dorado sobre transparencia, asi que
                            sobre fondo claro se deslavaria */

  --ok:        #1a7f37;
  --ok-brillo: rgba(26, 127, 55, .45);
  --punto-off: #b9b2a4;
  --alerta:    #b3261e;

  --peligro-borde: rgba(156, 43, 34, .55);
  --peligro-fondo: rgba(156, 43, 34, .10);
  --peligro-tinta: #9c2b22;

  --amarilla: #8a6600;   /* el amarillo puro sobre blanco no se lee */
  --roja:     #b3261e;

  --hueco:    rgba(0, 0, 0, .07);
  --aviso:    rgba(109, 76, 21, .08);

  /* Oscurecidos para que el blanco de encima se lea: 7,5:1 y 8,1:1. */
  --velo:   rgba(20, 18, 13, .45);   /* el fondo oscurecido de las preguntas */
  --sombra: rgba(20, 18, 13, .28);

  --lado-a:     #9c2b22;
  --lado-b:     #1f5285;
  --sobre-lado: #ffffff;
}

/* ====================================================================== */
/*  Armazon                                                               */
/* ====================================================================== */
body {
  min-height: 100vh;
  font-size: 15px;
  background: var(--fondo);
  color: var(--tinta);
}

.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--barra);
  border-bottom: 2px solid var(--acento);
  padding: 10px 16px;
}
.barra img { height: 34px; width: 34px; object-fit: contain; }
.barra .marca {
  font-weight: 700; color: var(--acento); letter-spacing: .5px;
  display: flex; align-items: center; gap: 10px;
}
.barra .hueco { flex: 1 1 auto; }

/* La barra se queda oscura en los dos temas, asi que lo que va encima conserva
   los colores del tema oscuro aunque el resto del panel sea claro. Se hace
   redefiniendo las variables solo aqui dentro, sin duplicar ni una regla. */
body.panel-claro .barra {
  --acento:  #c79a3b;
  --acento2: #e0b755;
  --tinta:   #ece9e1;
  --nota:    #a39b86;
  --bloque2: #24221c;
  --bloque3: #2f2c23;
  --borde:   rgba(199, 154, 59, .22);
  --borde2:  rgba(199, 154, 59, .45);
  --sobre-acento: #17150f;
}

.envoltorio { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }

.bloque {
  background: var(--bloque);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 16px;
}
.bloque > h2 {
  margin: 0 0 14px;
  font-size: .82rem; font-weight: 700;
  color: var(--acento); text-transform: uppercase; letter-spacing: .14em;
}

/* ---------- Botones ---------- */
.btn {
  background: var(--bloque2);
  color: var(--tinta);
  border: 1px solid var(--borde2);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .92rem; font-weight: 600;
  transition: background .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--bloque3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.oro { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento2); font-weight: 700; }
.btn.oro:hover:not(:disabled) { background: var(--acento2); }
.btn.fantasma { background: transparent; border-color: var(--borde); color: var(--nota); }
.btn.fantasma:hover:not(:disabled) { background: var(--bloque2); color: var(--tinta); }
.btn.peligro { border-color: var(--peligro-borde); color: var(--peligro-tinta); }
.btn.peligro:hover:not(:disabled) { background: var(--peligro-fondo); }
.btn.grande { padding: 14px 22px; font-size: 1.05rem; }

/* ---------- Estado del enlace con la pantalla ---------- */
.enlace { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--nota); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--punto-off); flex: 0 0 auto; }
.punto.vivo { background: var(--ok); box-shadow: 0 0 8px var(--ok-brillo); }

/* ---------- Tema del propio panel, en la barra ---------- */
/* Va arriba y no en los ajustes: cambia lo que el operador esta mirando en ese
   momento, y si la pantalla le deslumbra no puede tener que buscarlo. */
.tema-panel { display: flex; align-items: center; gap: 8px; }
.tema-panel > .rot {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nota);
}
.tema-panel .btn { padding: 7px 12px; font-size: .78rem; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .74rem; color: var(--acento); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
input[type=text], input[type=number], select {
  width: 100%;
  background: var(--campo);
  color: var(--tinta);
  border: 1px solid var(--borde2);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: .95rem; font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* ---------- Vista previa de la pantalla ---------- */
/* Dentro va pantalla.html a tamano de proyector (1280x720), encogido con una
   escala que calcula el JS segun lo ancho que sea la columna. Asi la miniatura
   guarda las proporciones exactas del televisor: lo que aqui se sale o se
   corta, alli tambien. */
.vista-previa > h2 { text-align: center; }
.vista-previa .marco {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--borde2);
  border-radius: 8px;
  /* Negro fijo, no del tema: detras va la pantalla proyectada, que tiene su
     propio tema y no debe tenirse con el del panel. */
  background: #000;
}
.vista-previa .sin-vista {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  /* Sobre ese negro fijo, un gris fijo. */
  font-size: .78rem; line-height: 1.5; color: #a39b86;
}
.vista-previa iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  border: 0;
  transform-origin: top left;
  /* Es un espejo, no un mando: no se pincha ni recibe el foco. */
  pointer-events: none;
}

/* ---------- Zona de mando: tirador | reloj | tirador ---------- */
/* El reloj se pone EN MEDIO de los dos tanteos, no en un bloque suelto arriba.
   Es lo que más se toca durante el asalto, y tenerlo lejos obligaba a subir y
   bajar la página en mitad del combate. De paso, el panel queda con la misma
   disposición que la pantalla, que es una ayuda más de lo que parece. */
.mando {
  display: grid;
  grid-template-columns: 1fr minmax(210px, 270px) 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.mando .bloque { margin-bottom: 0; }
.centro-mando { min-width: 0; }

/* Las columnas de los tiradores son altas; el reloj se queda a la vista. */
.pegado { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }

.reloj-mando { text-align: center; }
.reloj-num {
  display: block;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: var(--acento2); text-align: center;
  margin-bottom: 12px;
}
#relojNum { cursor: pointer; }
#relojNum:hover:not(.urgente) { color: var(--acento); }

/* Al editar NO aparece una caja: sigue siendo el mismo numero, en el mismo
   sitio y del mismo tamano. Lo unico que cambia es una linea dorada debajo y
   el cursor parpadeando, que es cuanto hace falta para entender que ahora se
   puede escribir encima. Sin fondo ni recuadro: un marco lo convertiria en
   'otra ventanita', que es justo lo que no se quiere.

   Va DESPUES de la regla general de 'input[type=text]', que si no le impondria
   su tamano de letra. */
input.reloj-num {
  display: block;
  width: 100%;
  padding: 0 0 4px;
  background: transparent;
  color: var(--acento2);
  border: none;
  border-bottom: 3px solid var(--acento);
  border-radius: 0;
  font-family: inherit;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  text-align: center;
  caret-color: var(--acento);
  margin-bottom: 8px;
}
/* El foco ya se ve por la linea de abajo; el recuadro general sobra aqui. */
input.reloj-num:focus { outline: none; }
.reloj-num.urgente { color: var(--alerta); }
.ancho { width: 100%; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.par + .ancho { margin-top: 8px; }

/* En pantallas estrechas se apila, y el reloj sube arriba del todo: es lo
   primero que hay que tener a mano. */
@media (max-width: 1040px) {
  .mando { grid-template-columns: 1fr; }
  .centro-mando { order: -1; }
  .pegado { position: static; }
}

.lado {
  border: 2px solid var(--color);
  border-radius: var(--radio);
  background: var(--bloque);
  overflow: hidden;
}
.lado.a { --color: var(--lado-a); }
.lado.b { --color: var(--lado-b); }
.lado > header {
  background: var(--color); color: var(--sobre-lado);
  padding: 8px 14px;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .86rem;
  display: flex; align-items: center; justify-content: space-between;
}
.lado > .cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.tanteo { display: flex; align-items: center; justify-content: center; gap: 16px; }
.tanteo .num { font-size: 4.2rem; font-weight: 800; line-height: 1; min-width: 2.4ch; text-align: center; }
.tanteo .btn { width: 46px; height: 46px; padding: 0; font-size: 1.5rem; border-radius: 50%; }

.rejilla-puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rejilla-puntos .btn { padding: 14px 8px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rejilla-puntos .btn .val { font-size: 1.3rem; font-weight: 800; color: var(--acento2); }
/* Los botones que RESTAN, marcados aparte. Van pegados a los que suman y
   confundirlos es un punto mal anotado en mitad del asalto, asi que no basta
   con el signo: cambian de color. */
.rejilla-puntos .btn.resta { border-color: var(--peligro-borde); }
.rejilla-puntos .btn.resta:hover:not(:disabled) { background: var(--peligro-fondo); }
.rejilla-puntos .btn.resta .val { color: var(--peligro-tinta); }

.rejilla-puntos .btn .txt { font-size: .78rem; font-weight: 600; color: var(--nota); text-align: center; line-height: 1.2; }

.sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caja {
  background: var(--bloque2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 9px 11px;
}
.caja .titulo { font-size: .68rem; color: var(--acento); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; }
.caja .fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.caja .num { font-size: 1.5rem; font-weight: 800; min-width: 1.6ch; text-align: center; }
.caja .btn { width: 32px; height: 32px; padding: 0; font-size: 1.1rem; border-radius: 6px; }
.caja .num.amarilla { color: var(--amarilla); }
.caja .num.roja { color: var(--roja); }

/* ---------- Preguntas y avisos ---------- */
/* En vez de los cuadros del navegador. Ademas de verse como el resto del
   panel, no bloquean la pagina: con un confirm() del navegador el reloj del
   asalto deja de repintarse hasta que alguien contesta. */
.velo-dialogo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--velo);
}
.velo-dialogo .dialogo {
  background: var(--bloque);
  color: var(--tinta);
  border: 1px solid var(--borde2);
  border-radius: var(--radio);
  box-shadow: 0 18px 50px var(--sombra);
  padding: 22px;
  max-width: 440px; width: 100%;
}
.velo-dialogo .texto {
  margin: 0 0 20px;
  font-size: 1rem; line-height: 1.55;
  /* Los mensajes traen su propio salto de linea. */
  white-space: pre-line;
}
.velo-dialogo .botones { display: flex; gap: 10px; justify-content: flex-end; }
.velo-dialogo .botones .btn { padding: 11px 20px; }

/* ---------- El reclamo ---------- */
/* El mismo icono que sale en la pantalla, para que el operador vea lo mismo
   que ve la sala. Se pulsa cuando el arbitro RECHAZA un reclamo: ahi el
   tirador pierde el derecho y el icono se tacha en los dos sitios. */
.reclamo-btn {
  position: relative;
  display: block; margin: 0 auto;
  width: 52px; height: 52px;
  background: url('../img/reclamo.png') center / contain no-repeat;
  border: none; padding: 0;
  transition: transform .06s;
}
.reclamo-btn:hover { transform: scale(1.06); }
.reclamo-btn:active { transform: scale(.96); }
.reclamo-btn.gastado { opacity: .75; }
.reclamo-btn.gastado::before,
.reclamo-btn.gastado::after {
  content: '';
  position: absolute; top: 50%; left: -6%;
  width: 112%; height: 6px;
  background: var(--roja); border-radius: 3px;
}
.reclamo-btn.gastado::before { transform: translateY(-50%) rotate(45deg); }
.reclamo-btn.gastado::after  { transform: translateY(-50%) rotate(-45deg); }

/* ---------- Mandos de la pantalla proyectada ---------- */
.mandos-pantalla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mandos-pantalla .nota { margin-top: 8px; }

/* Control segmentado: dos opciones pegadas, una encendida. Se lee de un
   vistazo cual esta puesta, que es lo que hace falta con prisa. */
.segmentado { display: inline-flex; border: 1px solid var(--borde2); border-radius: 8px; overflow: hidden; }
.segmentado .btn { border: none; border-radius: 0; background: transparent; color: var(--nota); padding: 11px 20px; }
.segmentado .btn + .btn { border-left: 1px solid var(--borde2); }
.segmentado .btn:hover:not(.activo) { background: var(--bloque2); color: var(--tinta); }
.segmentado .btn.activo { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }

/* En que mitad de la pantalla acaba este tirador. Solo aparece con el espejo
   puesto: sin espejo es obvio y seria ruido. */
.donde {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--hueco); border-radius: 999px; padding: 3px 10px;
}
.donde:empty { display: none; }

/* ---------- Rótulos ---------- */
.rotulos { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-duracion { max-width: 320px; margin-bottom: 14px; }

.fila-proximo {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 8px; align-items: end; margin-top: 12px;
}
.fila-proximo .vs {
  font-size: .8rem; font-weight: 700; color: var(--acento);
  text-transform: uppercase; padding-bottom: 10px;
}
@media (max-width: 620px) {
  .fila-proximo { grid-template-columns: 1fr; }
  .fila-proximo .vs { padding: 0; text-align: center; }
}

.fila-rotulo-libre { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.rotulos .btn.activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento2); }

/* ---------- Ajustes ---------- */
details.ajustes > summary {
  cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 700;
  color: var(--acento); text-transform: uppercase; letter-spacing: .14em;
  display: flex; align-items: center; gap: 8px;
}
details.ajustes > summary::-webkit-details-marker { display: none; }
details.ajustes > summary::before { content: '▸'; transition: transform .15s; }
details.ajustes[open] > summary::before { transform: rotate(90deg); }
details.ajustes > .contenido { padding-top: 16px; }

.editor-botones { display: flex; flex-direction: column; gap: 8px; }
.fila-boton { display: grid; grid-template-columns: 1fr 90px 40px; gap: 8px; align-items: center; }
.fila-boton .quitar { color: var(--peligro-tinta); }
@media (max-width: 620px) { .fila-boton { grid-template-columns: 1fr 1fr; } }

.nota { font-size: .8rem; color: var(--nota); line-height: 1.5; margin: 6px 0 0; }
.pendiente {
  border-left: 3px solid var(--acento);
  background: var(--aviso);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  font-size: .84rem; color: var(--nota); line-height: 1.55;
}
.pendiente strong { color: var(--acento2); }