/* Pantallas del móvil para el escrutinio general (fase 2).
   Mismas medidas y colores que docs/design/maqueta-movil-partidos-elegidos.html y DESIGN.md: nada inventado. */

.paso { font-weight: 700; color: var(--marino); }
.nota { color: var(--tinta-suave); font-size: var(--t-pequena); }
.pasos { margin: var(--e2) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--e2); }
.prioridad { font-size: var(--t-pequena); font-weight: 700; color: var(--blanco); background: var(--marino); border-radius: var(--radio); padding: 0 var(--e2); white-space: nowrap; }
.boton:disabled { background: var(--gris-fondo); border-color: var(--linea); color: var(--gris); cursor: default; }
.campo select { width: 100%; }
[hidden] { display: none !important; }

/* Casilla grande para marcar (permiso de protección de datos, confirmar un borrado) */
.elegir-permiso { display: flex; align-items: center; gap: var(--e3); min-height: var(--toque); padding: var(--e2) var(--e4);
  font-weight: 700; cursor: pointer; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.elegir-permiso input { width: 1.5rem; height: 1.5rem; accent-color: var(--marino); flex: none; }

/* Casillas grandes de la mesa: en el móvil, al tamaño de la maqueta, para que quepan con su letra */
.contenido .casillas.grande { font-size: var(--t-media); }
.contenido section { display: flex; flex-direction: column; gap: var(--e3); }

/* Pie con los botones, siempre a la vista abajo */
.pie-movil { position: sticky; bottom: 0; padding: var(--e3) var(--e4); background: var(--blanco); border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e2); width: 100%; }
.volver { color: var(--blanco); text-decoration: none; font: inherit; font-size: var(--t-media); min-width: var(--toque); min-height: var(--toque); display: inline-grid; place-items: center; background: none; border: 0; cursor: pointer; }

/* Aviso amarillo fijo: hay envíos pendientes de enviar (DESIGN.md, «Móvil») */
.pendientes { background: var(--amarillo-fondo); border-bottom: 2px solid var(--amarillo-vivo); color: var(--tinta); font-weight: 700; padding: var(--e2) var(--e4); position: sticky; top: 0; z-index: 3; }

/* 1. Todos los partidos, en el orden del acta, con la prioridad que pone el administrador */
.orden-acta { list-style: none; margin: 0; padding: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.orden-acta li { display: flex; align-items: center; gap: var(--e3); min-height: 2.5rem; padding: var(--e1) var(--e3); border-bottom: 1px solid var(--linea); }
.orden-acta li:last-child { border-bottom: 0; }
.orden-acta .numero { width: 1.6em; text-align: right; color: var(--tinta-suave); font-variant-numeric: tabular-nums; flex: none; }
.orden-acta .sigla { flex: 1; }
.orden-acta li.vigilado { box-shadow: inset 6px 0 0 var(--marino); font-weight: 700; }
.orden-acta form { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.orden-acta form input { width: 4.5rem; min-height: var(--toque); font: inherit; padding: 0 var(--e2); border: 2px solid var(--linea); border-radius: var(--radio); }

/* 2. Franja con los dos desplegables, que se quedan elegidos */
.franja.con-campos { align-items: flex-end; flex-wrap: nowrap; }
.franja.con-campos .campo label { color: var(--blanco); }
.franja.con-campos .campo.municipio { flex: 1; min-width: 0; }
.franja.con-campos .campo.distrito { width: 5.5rem; flex: none; }

/* 2. Una fila por sección: distrito y sección, y sus mesas con su color */
.leyenda { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-pequena); }
.secciones { list-style: none; margin: 0; padding: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.secciones li { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e2); }
.secciones li:last-child { border-bottom: 0; }
.secciones .mesas { display: flex; gap: var(--e2); flex-wrap: wrap; }
.mesa-boton {
  font: inherit; font-size: var(--t-media); font-weight: 700; width: var(--toque); height: var(--toque);
  border-radius: var(--radio); border: 2px solid var(--marino); background: var(--blanco); color: var(--marino); cursor: pointer;
}
.mesa-boton.rojo { background: var(--rojo-fondo); border-color: var(--rojo); color: var(--rojo); }
.mesa-boton.amarillo { background: var(--amarillo-fondo); border-color: var(--amarillo-vivo); color: var(--amarillo); }
.mesa-boton.azul { background: var(--azul-fondo); border-color: var(--azul); color: var(--azul); }
.mesa-boton[aria-pressed="true"] { outline: 4px solid var(--marino); outline-offset: 2px; }
.corregidas { font-size: var(--t-pequena); font-weight: 700; color: var(--verde); }
.elegida { font-weight: 700; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* 3. Corrección de una mesa: todos los partidos, en el orden del acta */
.bloque { border-radius: var(--radio); border: 1px solid var(--linea); }
.partido { background: var(--blanco); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e1); }
.partido:last-child { border-bottom: 0; }
.partido.vigilado { box-shadow: inset 6px 0 0 var(--marino); }
.partido .cabecera { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.partido .numero { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.partido .nombre-partido { font-weight: 700; font-size: var(--t-media); }
.partido .alerta { font-size: var(--t-pequena); }
.partido .votos { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.partido .ya-corregido { font-size: var(--t-pequena); color: var(--verde); font-weight: 700; }
.partido .dos-casillas { display: flex; gap: var(--e3); align-items: stretch; }
.casilla-dato { display: flex; flex-direction: column; }
.casilla-dato.queda { flex: 1; }
.casilla-dato .rotulo { font-size: var(--t-pequena); font-weight: 700; color: var(--tinta-suave); }
.contador { display: flex; align-items: center; gap: var(--e1); }
.contador button {
  font: inherit; font-size: 1.75rem; font-weight: 700; width: var(--toque); height: var(--toque);
  border-radius: var(--radio); border: 2px solid var(--marino); background: var(--blanco); color: var(--marino); cursor: pointer;
}
.contador button.mas { background: var(--marino); color: var(--blanco); }
.contador output, .queda output {
  display: grid; place-items: center; height: var(--toque); font-size: var(--t-grande); font-weight: 700;
  font-variant-numeric: tabular-nums; border-radius: var(--radio);
}
.contador output { min-width: 4.2rem; border: 2px solid var(--linea); background: var(--blanco); }
.queda output { border: 2px solid var(--marino); background: var(--marino-claro); color: var(--marino); }
.partido.tocado .contador output { border-color: var(--verde); background: var(--verde-fondo); color: var(--verde); }

/* 3. Recuadro de texto (nota y discrepancia) con sus tres iconos dentro: agrandar, altavoz y micrófono */
.recuadro-texto { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e2); background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--radio); }
.recuadro-texto:focus-within { border-color: var(--marino); }
.campo .recuadro-texto textarea { border: 0; padding: var(--e1); min-height: 6rem; width: 100%; resize: none; }
.iconos-texto { display: flex; justify-content: flex-end; gap: var(--e3); }
.icono { width: var(--toque); height: var(--toque); flex: none; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: var(--radio); border: 2px solid var(--marino); background: var(--blanco); color: var(--marino); }
.icono svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono[aria-pressed="true"] { background: var(--marino); color: var(--blanco); }
.icono.grabando { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
/* Agrandado: casi toda la pantalla y letra grande; otro toque en el icono lo deja como estaba */
.recuadro-texto.agrandado { position: fixed; top: var(--e2); right: var(--e2); bottom: var(--e2); left: var(--e2); z-index: 10; border-color: var(--marino); }
.campo .recuadro-texto.agrandado textarea { flex: 1; font-size: var(--t-grande); line-height: 1.3; }

/* 3. «Discrepancia con la mesa»: botón con la letra en rojo, debajo de la nota */
.boton.boton-discrepancia { color: var(--rojo); border-color: var(--rojo); }
#caja-discrepancia { display: flex; flex-direction: column; gap: var(--e2); }
.texto-largo { white-space: pre-line; overflow-wrap: anywhere; }
.caja .campo { margin-top: var(--e2); }

/* Flecha roja de «hay que bajar»: fija a la derecha mientras quede pantalla por bajar. Solo adorno */
.flecha-bajar { position: fixed; right: 0; top: 45%; z-index: 2; pointer-events: none; width: 1.75rem; height: var(--toque); display: grid; place-items: center; color: var(--rojo); background: var(--blanco); border: 2px solid var(--rojo); border-right: 0; border-radius: var(--radio) 0 0 var(--radio); }
.flecha-bajar svg { width: 1.5rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Repaso antes de enviar, aviso de mesa revisada e historial */
.repaso-lista { list-style: none; margin: 0; padding: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.repaso-lista li { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); font-weight: 700; }
.repaso-lista li:last-child { border-bottom: 0; }
.repaso-lista .cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.caja p + p { margin-top: var(--e2); }
.anulado { color: var(--gris); }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.historial li { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: var(--e2); }

/* 5. Pasar la corrección a otra mesa */
.dos-campos { display: flex; gap: var(--e3); }
.dos-campos .campo { flex: 1; min-width: 0; }
/* La caja «Explica la discrepancia», en rojo: es lo más importante de la pantalla (Manuel, 11/11/2026) */
#caja-discrepancia label { color: var(--rojo); font-weight: 700; font-size: var(--t-media); }
#caja-discrepancia .recuadro-texto,
#caja-discrepancia .recuadro-texto:focus-within,
#caja-discrepancia .recuadro-texto.agrandado { border: 3px solid var(--rojo); background: var(--blanco); }