/* ═══════════════════════════════════════════════════════════════════════
   Capa técnica — SINTRAEMSDES
   ═══════════════════════════════════════════════════════════════════════
   Se carga DESPUÉS del <style> de cada página, así que refina sin tocar
   la maquetación. No cambia ni un tamaño, ni una posición, ni un
   comportamiento: quitar este archivo devuelve la plataforma exactamente
   a como estaba.

   Qué hace: sombras en capas teñidas de azul, un filo de luz en la cresta
   de las tarjetas, halo de foco propio, retícula de fondo apenas visible,
   cristal en los modales y cifras con ancho fijo.

   Qué NO hace, a propósito: nada parpadea, nada se mueve solo, nada brilla.
   Esto es una urna, no una consola. Mientras alguien decide su voto, la
   pantalla se queda quieta.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --tec-sombra:
    0 1px 2px rgba(13,43,82,.06),
    0 8px 18px -10px rgba(13,43,82,.26),
    0 24px 48px -28px rgba(13,43,82,.28);
  --tec-sombra-baja:
    0 1px 2px rgba(13,43,82,.05),
    0 10px 26px -20px rgba(13,43,82,.38);
  --tec-filo: inset 0 1px 0 rgba(255,255,255,.9);
  --tec-halo: 0 0 0 3px rgba(18,58,109,.18), 0 0 0 1px #123a6d;
  --tec-reticula:
    linear-gradient(rgba(18,58,109,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,58,109,.045) 1px, transparent 1px);
}

/* ── Retícula de fondo ──────────────────────────────────────────────────
   Se pinta en un pseudo-elemento fijo detrás de todo, para no interferir
   con los degradados que ya tiene cada página en su `body`. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--tec-reticula);
  background-size:28px 28px;
  /* Se desvanece hacia abajo: arriba da estructura, abajo estorbaría. */
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 62%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 62%);
}

/* ── Superficies ────────────────────────────────────────────────────────
   Un solo bloque para los cinco nombres que usan las páginas para decir
   «tarjeta». Cuando migren al sistema de diseño esto se reduce a uno. */
.tarjeta, .hoja, .dato, .caja-cert, .cajacodigo,
.bg-white.rounded-xl, .bg-white.rounded-2xl{
  box-shadow:var(--tec-sombra), var(--tec-filo) !important;
}
.tarjeta, .hoja{ border:1px solid rgba(18,58,109,.08); }
.dato, .caja-cert{ box-shadow:var(--tec-sombra-baja), var(--tec-filo) !important; }

/* La barra superior gana profundidad y un filo inferior de luz. */
header, .barra{
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,
             0 6px 24px -12px rgba(13,43,82,.65) !important;
}

/* ── Controles ──────────────────────────────────────────────────────────
   Relieve arriba, apoyo abajo. Al pulsar, el botón se hunde de verdad. */
button, .sds-boton, .principal, .tecla, .acciones button, .b-azul, .b-verde, .b-gris{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(13,43,82,.14);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover:not(:disabled), .principal:hover:not(:disabled){ filter:brightness(1.05); }
button:active:not(:disabled), .principal:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(13,43,82,.22);
}
/* EXCEPCIÓN: la casilla del tarjetón y la opción de la lista NO se hunden.
   Son botones, así que la regla de arriba las alcanzaría — y ahí marcar ES
   votar: mientras se traza el aspa, la casilla no puede moverse un píxel ni
   cambiar de sombra. Cualquier temblor en ese instante es ruido justo donde
   la persona está comprobando qué marcó. La `.tecla` tiene su propio hundido
   de 3px en la página y gana por especificidad, así que no hace falta aquí. */
.casilla:active, .casilla:hover, .opcion:active{
  transform:none !important;
  filter:none !important;
}
.casilla:active{ box-shadow:0 6px 18px -12px rgba(13,43,82,.55) !important; }
.casilla.marcada:active{ box-shadow:0 0 0 6px rgba(211,48,47,.16) !important; }
/* El botón hueco no lleva relieve: es el de cancelar, tiene que pesar menos. */
button.hueco, .b-gris, .sds-boton--hueco{ box-shadow:none; }

/* Foco propio. El outline del navegador en una tableta de mesa se lee como
   un error de la aplicación, no como «aquí está el cursor». */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible,
.campo:focus, .entrada:focus{
  outline:none !important;
  box-shadow:var(--tec-halo) !important;
  border-color:#123a6d !important;
}
/* En el tarjetón el foco sigue siendo amarillo: ahí se está votando y el
   contraste manda por encima de la coherencia estética. */
.casilla:focus-visible, .opcion:focus-visible{
  outline:4px solid #f6c915 !important; outline-offset:3px !important;
  box-shadow:none !important;
}

input, select, textarea{ transition:box-shadow .12s ease, border-color .12s ease; }

/* ── Modales ────────────────────────────────────────────────────────────
   El fondo se desenfoca en vez de taparse: se sigue viendo dónde está uno. */
.capa, .modal, #modal{
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
.dialogo, .modal .caja, .caja{
  box-shadow:0 32px 64px -24px rgba(13,43,82,.55),
             0 0 0 1px rgba(255,255,255,.6) inset !important;
}

/* ── Cifras ─────────────────────────────────────────────────────────────
   Ancho fijo por dígito. Sin esto, un contador en vivo baila al pasar de
   199 a 200 y parece que la pantalla se sacude. */
.dato .n, .codigo, .reloj, .caja-cert b, .n, td, th,
.text-2xl, .text-xl, .font-black{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ── Tablas ─────────────────────────────────────────────────────────────*/
thead th{
  background:linear-gradient(180deg,#f8fafc,#f1f5f9) !important;
  border-bottom:1px solid rgba(18,58,109,.10);
}
tbody tr{ transition:background .12s ease; }

/* ── Franja tricolor ────────────────────────────────────────────────────
   Un realce de un píxel debajo: la despega del fondo sin engordarla. */
.franja, .tricolor{ box-shadow:0 1px 3px rgba(13,43,82,.28); }

/* ── Respeto por quien no quiere movimiento ────────────────────────────*/
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── Impresión ──────────────────────────────────────────────────────────
   El acta y los listados se imprimen: fuera retícula, fuera sombras. */
@media print{
  body::before{ display:none; }
  .tarjeta, .hoja, .dato{ box-shadow:none !important; border:1px solid #ccc; }
}