/* Plántate — todo el color del formato.
   Lo cargan las tres pantallas (overlay, panel y móvil), así que cambiar el
   aspecto es tocar este archivo y nada más.

   NO es el theme.css del Pub Quiz. Aquel es un tema cálido y dorado, con
   variantes por local; este formato tiene su propia identidad —azul noche,
   ámbar y plata— y no hay temas por local: lo que hay es un concurso de
   escenario, y el grafismo va encima de la imagen de una cámara.

   LO QUE NO ES TEMÁTICO Y NO SE TOCA:
   - El blanco del fondo del QR: una cámara necesita blanco y negro reales.
   - La transparencia del <body> del overlay: si se le pone fondo, tapa la
     cámara y el formato entero deja de funcionar. */

:root{
  /* ---- paleta ------------------------------------------------------- */
  --noche:#0D1B2A;            /* azul noche: el fondo de la marca */
  --noche-alta:#15293D;       /* tarjetas y campos */
  --noche-mas:#1E3A54;        /* fila destacada, estado activo */
  --ambar:#F2B544;            /* el color de la marca: acentos y respuesta fijada */
  --ambar-vivo:#FFCC66;       /* su versión clara, para el hover */
  --ambar-apagado:#8A6726;    /* bordes */
  --plata:#E8E8EA;            /* texto principal */
  --plata-tenue:#9AA5B1;      /* texto secundario */
  --tinta:#0B1420;            /* texto oscuro sobre ámbar */

  --bien:#2FA86B;             /* acierto */
  --bien-vivo:#5BD08C;
  --mal:#C8453C;              /* fallo */
  --mal-vivo:#E0726A;

  /* Los mismos en crudo, para transparencias: CSS no sabe sacar el RGB de un
     #hex, de ahí la duplicidad (mismo criterio que el Pub Quiz). */
  --noche-rgb:13,27,42;
  --ambar-rgb:242,181,68;
  --plata-rgb:232,232,234;
  --bien-rgb:47,168,107;
  --mal-rgb:200,69,60;

  /* ---- tipografía --------------------------------------------------- */
  --letra-titulo:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --letra-texto:'Work Sans', system-ui, -apple-system, sans-serif;

  /* ---- medidas ------------------------------------------------------ */
  --radio:10px;
  --radio-grande:18px;
  --sombra:0 10px 30px rgba(0,0,0,.45);
}

/* ===================================================== lo común ===== */
*{ box-sizing:border-box; }

button{ font-family:inherit; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:11px 16px; border-radius:var(--radio); cursor:pointer;
  font-family:var(--letra-texto); font-size:1rem; font-weight:600;
  background:var(--ambar); color:var(--tinta); border:1px solid var(--ambar);
  transition:background .12s ease, opacity .12s ease;
}
.btn:hover:not(:disabled){ background:var(--ambar-vivo); border-color:var(--ambar-vivo); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn.secundario{ background:transparent; color:var(--plata); border-color:rgba(var(--plata-rgb),.28); }
.btn.secundario:hover:not(:disabled){ background:rgba(var(--plata-rgb),.08); }
.btn.peligro{ background:var(--mal); color:#fff; border-color:var(--mal); }
.btn.peligro:hover:not(:disabled){ background:var(--mal-vivo); border-color:var(--mal-vivo); }
.btn.pequeno{ padding:7px 11px; font-size:.85rem; }

.tarjeta{
  background:var(--noche-alta); border:1px solid rgba(var(--plata-rgb),.1);
  border-radius:var(--radio-grande); padding:18px;
}

.pista{ color:var(--plata-tenue); font-size:.85rem; line-height:1.5; }
.error{
  background:rgba(var(--mal-rgb),.16); border:1px solid var(--mal);
  color:var(--mal-vivo); border-radius:var(--radio); padding:10px 12px; margin:10px 0;
}

input[type=text], input[type=number], textarea, select{
  width:100%; padding:9px 11px; border-radius:var(--radio);
  background:var(--noche-mas); color:var(--plata);
  border:1px solid rgba(var(--plata-rgb),.16);
  font-family:var(--letra-texto); font-size:1rem;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--ambar); outline-offset:1px; }

label{ display:block; font-size:.8rem; color:var(--plata-tenue); margin:12px 0 4px; }

/* Las letras de las opciones: A B C D. Mismo círculo en las tres pantallas. */
.letra{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9em; height:1.9em; flex:0 0 auto; border-radius:50%;
  font-family:var(--letra-titulo); font-weight:700;
  background:rgba(var(--ambar-rgb),.16); color:var(--ambar);
  border:1px solid rgba(var(--ambar-rgb),.45);
}

/* Dentro de un botón ámbar, la letra en ámbar no se ve: se le da la vuelta.
   Pasaba en los cuatro botones de fijar la respuesta del panel, que es justo
   donde el presentador tiene que distinguir la A de la C de un vistazo. */
.btn:not(.secundario):not(.peligro) .letra{
  background:rgba(var(--noche-rgb),.2); color:var(--tinta); border-color:rgba(var(--noche-rgb),.35);
}

/* Estados de una opción, iguales en el overlay y en el móvil para que lo que
   se ve en la tele y lo que se ve en la mano sean lo mismo. */
.op-fijada{ background:var(--ambar) !important; color:var(--tinta) !important; border-color:var(--ambar) !important; }
.op-fijada .letra{ background:rgba(var(--noche-rgb),.22); color:var(--tinta); border-color:rgba(var(--noche-rgb),.3); }
.op-bien{ background:var(--bien) !important; color:#fff !important; border-color:var(--bien) !important; }
.op-bien .letra{ background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.4); }
.op-mal{ background:var(--mal) !important; color:#fff !important; border-color:var(--mal) !important; }
.op-mal .letra{ background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.4); }
.op-caida{ opacity:.18; text-decoration:line-through; }

/* Accesibilidad: quien haya pedido menos animación no ve ninguna. Vale para
   las tres pantallas; en el overlay no cambia nada, porque OBS no pide eso. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}