/* =====================================================================
   OPCIONES DEL FONDO DEL TABLERO (28 y 29-oct). Ver opciones/fondo.js.
   Pedido de Camilo: "el fondo del tablero, no sé, se ve muy hecho con IA.
   esos puntitos son muy IA. necesito otras opciones, al menos 4".
   Cuatro fondos quietos para comparar; valen solo con html[data-op-fondo="N"],
   que pone opciones/fondo.js. En tablero.html la 1 ("Noche lisa", elección de
   Camilo del 30-oct) va por omisión y ?fondo=0 (o #fondo=0) la apaga; en
   variantes.html cada fondo se pide con ?fondo=N o #fondo=N y sin parámetro
   nada de esto aplica (la portada de antes, con los puntitos).
     1  Noche lisa: el tablero plano; el único detalle es un filete rojo.
     2  La caja: la cifra montada en la caja negra de un marcador real.
     3  El escudo: noche lisa y la cruz de Teletón entera, chica, una vez.
     4  El rojo: el tablero en el rojo de Teletón, fichas blancas sobre rojo.
   Reglas comunes a las cuatro:
   - Fuera los puntitos en todas las piezas que los llevaban (banda, columna
     del celular, panel apaisado, tarjetas noche del cierre y de Donar).
   - Nada se mueve: ni animación ni transición nueva.
   - Alto contraste (data-contraste="1") vuelve a la noche plana de la base;
     en forced-colors no se pinta ningún dibujo.
   - Nada pesado: CSS y un módulo chico que mide (fondo.js); la 3 usa como
     máscara el SVG de la cruz que la maqueta ya carga.
   ===================================================================== */

/* ---------- comunes: fuera los puntitos ---------- */
html[data-op-fondo] :is(.vt-marcador, .vt-torre, .vt-don, .vt-ap-panel, .vt-gr-pie) { background-image: none; }


/* =====================================================================
   1. NOCHE LISA
   La losa plana: la textura la ponen las fichas, que son el marcador. El
   único detalle de marca es un filete rojo de 3 px (el rojo de Teletón) que
   cierra el tablero, como la cinta de una transmisión. En el escritorio y la
   tablet reemplaza la línea blanca de 1 px bajo la banda; en el celular va
   justo sobre el video.
   El cierre no lo necesita: la franja del cómputo final ya está sobre el
   rojo de la página.
   En el panel del celular apaisado no va (revisión del 29-oct, segunda
   ronda): bajo el tablero quedaba a 2 o 3 px del monto de la meta y del
   corazón del riel, como un subrayado, con "Dona aquí" en rojo 5 a 8 px más
   abajo (tres rojos en 20 px). Arriba tampoco sirve: ahí el panel toca el
   header, que es rojo, y el filete desaparece. Darle aire cambiaría las
   medidas del panel. Queda en noche lisa, como la 4 en ese panel.
   ===================================================================== */
html[data-op-fondo="1"]:not([data-contraste="1"]) .vt-marcador[data-modo="banda"],
html[data-op-fondo="1"]:not([data-contraste="1"]) .vt[data-disp="tab"] .vt-hero > .vt-marcador {
  box-shadow: inset 0 -3px 0 var(--tg-rojo);
}
html[data-op-fondo="1"]:not([data-contraste="1"]) .vt-torre > .vt-video {
  position: relative;
  box-shadow: 0 -3px 0 var(--tg-rojo);
}


/* =====================================================================
   2. LA CAJA
   La referencia física de un marcador de verdad: las fichas de la cifra
   montadas en una caja negra (#070103, un paso más oscura que la noche),
   rellena por dentro (los huecos entre fichas son la caja, no la noche) y
   con un canto de luz de 1 px en todo el contorno, más claro abajo, para que
   la caja exista aunque la pantalla tenga poco brillo. Solo la cifra va en
   la caja: la hora y la meta son datos del tablero, no el marcador. Sin
   topes de color (se leían como un cursor "|$").
   Corrección del 29-oct: la caja ya no calcula su margen como fracción del
   ancho de ficha; fondo.js mide el espacio libre de verdad alrededor de las
   fichas (texto y piezas pintadas, 4 px de aire, 8 px al borde) y lo deja
   en --fo-cx-js y --fo-cy-js. Así no toca "CÓMPUTO FINAL", ni el título, ni
   la etiqueta de la meta, en ninguna disposición ni tamaño de letra. Donde
   arriba o abajo no cabe margen (la tablet en retrato: la etiqueta de la
   meta va 4 px bajo las fichas), la caja queda del alto justo de las fichas,
   como la ranura de un marcador de paletas, y conserva su canto de luz en
   los cuatro lados (si ni el canto cabe, --fo-rv-js en 0). En el modo
   "línea" del celular y del apaisado (data-linea: la hora delante de la
   cifra, en una fila) no hay caja, tampoco cuando la cifra sigue en fichas
   (13 de los 304 casos de la matriz al 29-oct; en otros 17 la cifra va en
   texto y no hay fichas que encajar).
   Todo con background y box-shadow: no cambia ninguna medida (tablero.js
   mide lo mismo). La caja va de --fo-cx a los lados y --fo-cy arriba y
   abajo; con dos márgenes distintos se arma con cuatro sombras corridas.
   ===================================================================== */
html[data-op-fondo="2"]:not([data-contraste="1"]) .vt:not([data-linea]) .vt-cifra-vis > .vt-fichas {
  --fo-c: #070103;
  --fo-luz: rgba(255, 255, 255, 0.16);
  --fo-luz-b: rgba(255, 255, 255, 0.26);
  --fo-cx: var(--fo-cx-js, 6px);
  --fo-cy: var(--fo-cy-js, 2px);
  --fo-rh: var(--fo-rh-js, 1px);
  --fo-rv: var(--fo-rv-js, 1px);
  --fo-s: min(var(--fo-cx), var(--fo-cy));
  --fo-dx: calc(var(--fo-cx) - var(--fo-s));
  --fo-dy: calc(var(--fo-cy) - var(--fo-s));
  --fo-dx-: calc(var(--fo-dx) * -1);
  --fo-dy-: calc(var(--fo-dy) * -1);
  --fo-lx: calc(var(--fo-dx) + var(--fo-rh));
  --fo-lx-: calc(var(--fo-lx) * -1);
  --fo-ly: calc(var(--fo-dy) + var(--fo-rv));
  --fo-ly-: calc(var(--fo-ly) * -1);
  background-color: var(--fo-c);
  border-radius: 3px;
  box-shadow:
    /* la caja */
    var(--fo-dx) var(--fo-dy) 0 var(--fo-s) var(--fo-c),
    var(--fo-dx-) var(--fo-dy) 0 var(--fo-s) var(--fo-c),
    var(--fo-dx) var(--fo-dy-) 0 var(--fo-s) var(--fo-c),
    var(--fo-dx-) var(--fo-dy-) 0 var(--fo-s) var(--fo-c),
    /* el canto de luz de 1 px: abajo un poco más claro, arriba y a los lados */
    var(--fo-dx) var(--fo-ly) 0 var(--fo-s) var(--fo-luz-b),
    var(--fo-dx-) var(--fo-ly) 0 var(--fo-s) var(--fo-luz-b),
    var(--fo-dx) var(--fo-ly-) 0 var(--fo-s) var(--fo-luz),
    var(--fo-dx-) var(--fo-ly-) 0 var(--fo-s) var(--fo-luz),
    var(--fo-lx) var(--fo-dy) 0 var(--fo-s) var(--fo-luz),
    var(--fo-lx-) var(--fo-dy) 0 var(--fo-s) var(--fo-luz),
    var(--fo-lx) var(--fo-dy-) 0 var(--fo-s) var(--fo-luz),
    var(--fo-lx-) var(--fo-dy-) 0 var(--fo-s) var(--fo-luz);
}
/* las muescas de las bisagras de las fichas toman el negro de la caja */
html[data-op-fondo="2"]:not([data-contraste="1"]) .vt:not([data-linea]) .vt-cifra-vis .vt-f::before {
  background: linear-gradient(90deg, #070103 0 calc(var(--fw) * 0.07), transparent calc(var(--fw) * 0.07) calc(100% - var(--fw) * 0.07), #070103 calc(100% - var(--fw) * 0.07));
}


/* =====================================================================
   3. EL ESCUDO
   Corrección del 29-oct: la cruz gigante, recortada y tono sobre tono no se
   reconocía y quedaba como marca de agua (el mismo reclamo que los
   puntitos). Ahora el tablero es noche liso y la cruz de Teletón va ENTERA,
   chica y una sola vez, como el escudo del local en un marcador de estadio:
   al final del espacio libre de la fila del título. En el escritorio eso es
   justo antes de la cifra; en la tablet y el apaisado, la esquina alta
   derecha del tablero; en el cierre, junto a "Cómputo final", en el borde de
   la franja. En el celular en retrato va justo después del título: en la
   esquina quedaba 10 px bajo "Abrir menú" y se leía como un botón más
   (revisión del 29-oct, segunda ronda). La posición y el tamaño (entre 18 y 44 px, del
   alto del título) los mide fondo.js en el espacio que de verdad queda
   libre; si no cabe, no se dibuja. En el rojo de Teletón, el color propio
   de la cruz (5,1:1 sobre la noche): la ronda anterior la probó al 42 % sobre
   la noche y se leía como un ícono apagado, que con poco brillo se perdía.
   Un ::after del tablero, sin clics ni medidas.
   ===================================================================== */
html[data-op-fondo="3"]:not([data-contraste="1"]) .vt-marcador[data-fo-cruz]::after {
  content: "";
  position: absolute;
  left: var(--fo-x, 0);
  top: var(--fo-y, 0);
  width: var(--fo-s, 0);
  height: var(--fo-s, 0);
  pointer-events: none;
  background-color: var(--tg-rojo);
  -webkit-mask: url("../../assets/cruz-teleton-blanca.svg") center / contain no-repeat;
  mask: url("../../assets/cruz-teleton-blanca.svg") center / contain no-repeat;
}


/* =====================================================================
   4. EL ROJO
   Las fichas blancas sobre rojo, como la cuenta regresiva de la landing. El
   rojo es el accesible (#e12d39, 4,53:1 con blanco). Lo que era rojo sobre
   noche cambia para seguir viéndose: la mosca (en la previa) y los chips van en
   noche, el riel se llena de blanco y el corazón lleva anillo noche; los
   textos que eran blancos translúcidos pasan a blanco pleno (AA). Las
   muescas de las bisagras de las fichas toman el rojo del fondo.
   Corrección del 29-oct:
   - Una franja noche de 3 px arriba separa el tablero del header (el rojo
     del header y el del tablero dan 1,16:1 y se fundían en un bloque).
   - El cierre queda en noche, como la base: la franja del cómputo final va
     sobre la página roja y en rojo casi desaparecía.
   - El panel del celular apaisado queda en noche: "Dona aquí" sigue siendo
     el único bloque rojo de esa columna.
   En el celular retrato solo el tablero es rojo: el video y la fila de
   Donar siguen sobre la noche.
   ===================================================================== */
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) {
  background-color: var(--tg-rojo-a11y);
  box-shadow: inset 0 3px 0 var(--tg-noche);
}
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-f::before {
  background: linear-gradient(90deg, var(--tg-rojo-a11y) 0 calc(var(--fw) * 0.07), transparent calc(var(--fw) * 0.07) calc(100% - var(--fw) * 0.07), var(--tg-rojo-a11y) calc(100% - var(--fw) * 0.07));
}
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) :is(.vt-mosca, .vt-chip-nuevo) { background: var(--tg-noche); }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-punto { background: #fff; }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) :is(.vt-h2, .vt-meta-txt, .om-txt-l, .vt-rotulo, .vt-rot-txt) { color: #fff; }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-meta-pista { background: rgba(22, 3, 7, 0.34); }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-meta-relleno { background: #fff; }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-meta-corazon { box-shadow: 0 0 0 3px var(--tg-noche), 0 4px 10px rgba(0, 0, 0, 0.35); }
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-sello > span { background: var(--tg-noche); }
/* fichas apagadas (antes del primer cómputo): granate sobre rojo */
html[data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .vt-fichas--off .vt-f { background: #9d1f29; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
/* opciones/hora.css (?hora=3) pone su pastilla en noche sobre el tablero rojo para toda .vt-marcador; en
   el cierre y en el panel apaisado, que ahora quedan en noche, la pastilla vuelve a su fondo y su borde de
   siempre (los mismos valores de hora.css) para no fundirse con la noche */
html[data-op-hora="3"][data-op-fondo="4"]:not([data-contraste="1"]) :is(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .oh .oh-pill {
  background: #2e1d21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}


/* =====================================================================
   forced-colors: ningún dibujo (el sistema pinta el fondo; la base ya pone
   el borde del tablero)
   ===================================================================== */
@media (forced-colors: active) {
  html[data-op-fondo] .vt-marcador { background-image: none; }
  html[data-op-fondo="1"] .vt-torre > .vt-video { box-shadow: none; }
  html[data-op-fondo="2"] .vt-cifra-vis > .vt-fichas { box-shadow: none; background-color: transparent; }
  html[data-op-fondo="3"] .vt-marcador[data-fo-cruz]::after { display: none; }
}