/* Escrutinio Electoral · estilo común (ordenador y móvil)
   Ruta en PC: D:\exclutinio Electoral\docs\design\estilo.css
   Reglas en D:\exclutinio Electoral\DESIGN.md. Antigravity lo copia a src\escrutinio\web\estaticos\estilo.css */

:root {
  /* Color */
  --marino: #14284B;
  --marino-oscuro: #0D1B33;
  --marino-claro: #E4EAF3;
  --blanco: #FFFFFF;
  --papel: #F3F6FA;
  --linea: #C9D3E0;
  --tinta: #0D1B33;
  --tinta-suave: #3E4C64;
  --rojo: #B3261E;
  --rojo-fondo: #FCEBE9;
  --naranja: #9A4A00;
  --naranja-fondo: #FFF1DE;
  --gris: #56606C;
  --gris-fondo: #ECEFF3;
  --verde: #1D6B3A;
  --verde-fondo: #E6F3EA;
  --foco: #2D6CDF;

  /* Letra */
  --letra: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --t-base: 1.125rem;   /* 18 px */
  --t-pequena: 1rem;    /* 16 px: nunca menos */
  --t-media: 1.375rem;  /* 22 px */
  --t-grande: 1.75rem;  /* 28 px */
  --t-titulo: 2.25rem;  /* 36 px */

  /* Espacio y forma */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
  --radio-casilla: 3px;
  --radio: 8px;
  --toque: 3rem;        /* 48 px: altura mínima de cualquier cosa que se pulsa */
}

@media (max-width: 40rem) {
  :root { --t-base: 1.1875rem; } /* 19 px en el móvil */
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: var(--t-grande); }
h2 { font-size: var(--t-media); }
h3 { font-size: var(--t-base); }
p { margin: 0; max-width: 70ch; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.numero { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- Franja superior */
.franja {
  background: var(--marino);
  color: var(--blanco);
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding: var(--e4) var(--e6);
  flex-wrap: wrap;
}
.franja .nombre { font-size: var(--t-media); font-weight: 700; }
.franja .contexto { color: #C9D6EA; }
.franja .acciones { margin-left: auto; display: flex; gap: var(--e3); }
.franja :focus-visible { outline-color: var(--blanco); }

/* ---------------------------------------------------------------- Botones */
.boton {
  font: inherit;
  min-height: var(--toque);
  padding: 0 var(--e5);
  border-radius: var(--radio);
  border: 2px solid var(--marino);
  background: var(--marino);
  color: var(--blanco);
  font-weight: 700;
  cursor: pointer;
}
.boton.secundario { background: var(--blanco); color: var(--marino); }
.franja .boton { border-color: var(--blanco); }
.franja .boton.secundario { background: transparent; color: var(--blanco); }
.boton.ancho { width: 100%; min-height: 3.5rem; font-size: var(--t-media); }

/* ---------------------------------------------------------------- Pestañas */
.pestanas {
  display: flex;
  gap: var(--e2);
  padding: 0 var(--e6);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.pestanas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--e4);
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.pestanas a[aria-current="page"] { color: var(--marino); font-weight: 700; border-bottom-color: var(--marino); }

/* ---------------------------------------------------------------- Casillas: el sello de la app
   Cada cifra del código de la mesa va en su casilla, como en el acta oficial.
   Los ceros de la izquierda se ven siempre. */
.casillas { display: inline-flex; align-items: flex-end; gap: 0.45em; font-variant-numeric: tabular-nums; }
.casillas .grupo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2em; }
.casillas .cifras { display: inline-flex; }
.casillas .cifras b {
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.45em;
  font-weight: 700;
  border: 1.5px solid var(--marino);
  margin-left: -1.5px;
  background: var(--blanco);
  color: var(--marino);
}
.casillas .cifras b:first-child { margin-left: 0; border-radius: var(--radio-casilla) 0 0 var(--radio-casilla); }
.casillas .cifras b:last-child { border-radius: 0 var(--radio-casilla) var(--radio-casilla) 0; }
.casillas .grupo.letra .cifras b { background: var(--marino); color: var(--blanco); }
.casillas .rotulo { font-size: var(--t-pequena); color: var(--tinta-suave); font-weight: 400; }
.casillas.grande { font-size: var(--t-grande); }

/* ---------------------------------------------------------------- Alertas: color + palabra, siempre */
.alerta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 700;
  white-space: nowrap;
}
.alerta::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 2px; background: currentColor; }
.alerta.rojo { color: var(--rojo); }
.alerta.naranja { color: var(--naranja); }
.alerta.gris { color: var(--gris); }
.alerta.verde { color: var(--verde); }
.alerta.comprobada { color: var(--marino); }

.caja { border-left: 6px solid; border-radius: var(--radio); padding: var(--e4) var(--e5); }
.caja.rojo { background: var(--rojo-fondo); border-color: var(--rojo); }
.caja.naranja { background: var(--naranja-fondo); border-color: var(--naranja); }
.caja.gris { background: var(--gris-fondo); border-color: var(--gris); }
.caja.verde { background: var(--verde-fondo); border-color: var(--verde); }
.caja.comprobada { background: var(--marino-claro); border-color: var(--marino); }

/* ---------------------------------------------------------------- Tablas */
.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); }
.tabla th {
  text-align: left;
  font-size: var(--t-pequena);
  color: var(--tinta-suave);
  font-weight: 700;
  padding: var(--e3) var(--e4);
  border-bottom: 2px solid var(--marino);
}
.tabla td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--papel); }
.tabla tbody tr[aria-selected="true"] { background: var(--marino-claro); box-shadow: inset 6px 0 0 var(--marino); }
.tabla th.numero, .tabla td.numero { text-align: right; }

/* Partido vigilado: barra marino a la izquierda y en negrita */
.vigilado td { font-weight: 700; }
.vigilado td:first-child { box-shadow: inset 6px 0 0 var(--marino); }

/* ---------------------------------------------------------------- Formularios */
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo label { font-size: var(--t-pequena); font-weight: 700; color: var(--tinta-suave); }
.campo select, .campo input, .campo textarea {
  font: inherit;
  min-height: var(--toque);
  padding: 0 var(--e3);
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
}
.campo select:focus-visible, .campo input:focus-visible, .campo textarea:focus-visible { border-color: var(--marino); }
.campo textarea { padding: var(--e3); min-height: 9rem; resize: vertical; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}