/* =========================================================
   Conteo Rapido Municipal - hoja de estilos unica
   ========================================================= */

:root {
    /* ---- Identidad Podemos Peru -------------------------------------
       Los tres colores del logo. Si necesitas afinar algun tono contra
       el manual de marca, cambialo aqui y se propaga a todo el sistema. */
    --azul:           #14509B;   /* azul institucional (campo del logo) */
    --azul-osc:       #0E3A72;
    --azul-prof:      #092B57;
    --azul-claro:     #E3ECF8;
    --amarillo:       #F5A800;   /* dorado de la media luna */
    --amarillo-osc:   #C98A00;
    --amarillo-claro: #FFF4D9;
    --amarillo-texto: #7A5200;   /* dorado legible sobre fondo claro */
    --rojo:           #E4032E;   /* rojo del marco */
    --rojo-osc:       #B80225;
    --rojo-claro:     #FDE4E9;

    /* ---- Neutros, matizados hacia el azul de marca ---- */
    --fondo:        #F1F4F9;
    --superficie:   #ffffff;
    --superficie-2: #F7F9FC;
    --borde:        #DDE5F0;
    --borde-fuerte: #C2CFE2;
    --texto:        #0B2545;
    --texto-suave:  #5B7599;
    --texto-tenue:  #93A6BF;

    /* ---- Roles semanticos, todos derivados de la marca ----
       exito  -> dorado  (acta registrada, avance del conteo)
       alerta -> rojo suave (algo que revisar, como un acta descuadrada)
       peligro-> rojo pleno (anular, eliminar)
       info   -> azul */
    --primario:      var(--azul);
    --primario-osc:  var(--azul-osc);
    --primario-claro: var(--azul-claro);
    --exito:         var(--amarillo);
    --exito-claro:   var(--amarillo-claro);
    --alerta:        var(--rojo-osc);
    --alerta-claro:  var(--rojo-claro);
    --peligro:       var(--rojo);
    --peligro-claro: var(--rojo-claro);

    /* ---- Cedula de sufragio ----
       Los colores de la cedula impresa: rosado la eleccion de Lima
       Metropolitana, celeste la distrital. El personero tiene el papel
       delante; si la pantalla usa otros colores tiene que traducir. */
    --cedula-lima:        #FBDCE3;
    --cedula-lima-suave:  #FDEFF3;
    --cedula-lima-fuerte: #F6C3CF;
    --cedula-lima-borde:  #E9A6B7;
    --cedula-dist:        #D9EDF9;
    --cedula-dist-suave:  #EDF7FC;
    --cedula-dist-fuerte: #BCDFF2;
    --cedula-dist-borde:  #93C9E6;
    /* Gris azulado mas oscuro que --texto-suave: ese no llega a 4.5:1
       sobre el rosa ni sobre el celeste, y las siglas quedaban lavadas. */
    --cedula-texto-2:     #345069;

    --radio:   10px;
    --radio-s: 6px;
    --sombra:   0 1px 2px rgba(9, 43, 87, .07), 0 1px 3px rgba(9, 43, 87, .05);
    --sombra-m: 0 4px 12px rgba(9, 43, 87, .10);
    --lateral: 244px;
}

* { box-sizing: border-box; }

/* Debe ganar a cualquier clase que fije display (.aviso, .foto-previa, etc.) */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* ---------------------------------------------------------
   Layout principal
   --------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: var(--azul-osc);
    color: #C9D8EC;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 3px solid var(--rojo);
}

.lateral__marca {
    padding: 18px 16px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    gap: 11px;
}
.lateral__marca img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 3px; }
.lateral__marca__texto { min-width: 0; }
.lateral__marca strong { display: block; color: #fff; font-size: 14.5px; letter-spacing: -.01em; }
.lateral__marca span { display: block; font-size: 10px; color: var(--amarillo); text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; font-weight: 600; }

/* El boton de menu solo existe en celular */
.lateral__boton { display: none; }

.lateral__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.lateral__nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.lateral__grupo { padding: 14px 8px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #6E8FBC; }

.lateral__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radio-s);
    color: #C9D8EC;
    font-weight: 500;
    margin-bottom: 2px;
}
.lateral__link:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
/* El item activo toma el dorado del logo sobre el azul profundo */
.lateral__link.activo { background: var(--amarillo); color: var(--azul-prof); font-weight: 700; }
.lateral__link.activo:hover { background: var(--amarillo); color: var(--azul-prof); }
.lateral__link svg { width: 17px; height: 17px; flex: 0 0 17px; }

.lateral__pie {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
}
.lateral__pie .nombre { color: #fff; font-weight: 600; }
.lateral__pie .rol { color: var(--amarillo); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; font-weight: 600; }
.lateral__pie .ambito { color: #A8C0DC; margin-top: 6px; font-size: 11px; }
.lateral__pie a { color: #FF9BAB; display: inline-block; margin-top: 10px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
    background: var(--superficie);
    /* Franja roja superior: recoge el marco del logo */
    border-top: 3px solid var(--rojo);
    border-bottom: 1px solid var(--borde);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.barra__titulo { flex: 1; min-width: 0; }
.barra__titulo p { margin: 2px 0 0; color: var(--texto-suave); font-size: 12.5px; }

.contenido { padding: 22px 24px 48px; flex: 1; }

/* ---------------------------------------------------------
   Tarjetas y bloques
   --------------------------------------------------------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta__cab {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tarjeta__cuerpo { padding: 18px; }
.tarjeta__cuerpo.sin-relleno { padding: 0; }

.rejilla { display: grid; gap: 16px; }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--2-1 { grid-template-columns: 2fr 1fr; }

.metrica {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
}
.metrica__etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); font-weight: 600; }
.metrica__valor { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.metrica__nota { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }
.metrica--destacada { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-prof) 100%); border-color: transparent; color: #fff; }
.metrica--destacada .metrica__etiqueta { color: rgba(255, 255, 255, .75); }
.metrica--destacada .metrica__nota { color: rgba(255, 255, 255, .80); }

/* Barra de avance: el dorado del logo sobre el azul */
.avance { height: 7px; background: var(--borde); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.avance__relleno { height: 100%; background: var(--amarillo); border-radius: 99px; transition: width .4s ease; }
.metrica--destacada .avance { background: rgba(255, 255, 255, .25); }
.metrica--destacada .avance__relleno { background: var(--amarillo); }

/* ---------------------------------------------------------
   Resultados por partido
   --------------------------------------------------------- */
.resultado { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borde); }
.resultado:last-child { border-bottom: 0; }
.resultado__puesto { width: 22px; font-size: 12px; font-weight: 700; color: var(--texto-tenue); text-align: center; }
.resultado__color { width: 10px; height: 32px; border-radius: 3px; flex: 0 0 10px; }
.resultado__info { flex: 1; min-width: 0; }
.resultado__nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado__barra { height: 6px; background: var(--superficie-2); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.resultado__barra span { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.resultado__cifras { text-align: right; min-width: 108px; font-variant-numeric: tabular-nums; }
.resultado__pct { font-size: 17px; font-weight: 700; }
.resultado__votos { font-size: 12px; color: var(--texto-suave); }
/* El puntero se marca en azul: el dorado no contrasta sobre fondo blanco */
.resultado--lider .resultado__pct { color: var(--azul); }

/* ---------------------------------------------------------
   Tablas
   --------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th {
    text-align: left;
    padding: 10px 14px;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borde);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    font-weight: 600;
    white-space: nowrap;
}
table.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

/* ---------------------------------------------------------
   Formularios
   --------------------------------------------------------- */
.campo { margin-bottom: 14px; }
.campo > label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--azul-osc); }
.campo .ayuda { font-size: 11.5px; color: var(--texto-suave); margin-top: 4px; }

input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="tel"], input[type="date"], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s);
    font-size: 14px;
    font-family: inherit;
    color: var(--texto);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(20, 80, 155, .16);
}
input[type="color"] { width: 46px; height: 36px; padding: 2px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); background: #fff; }
textarea { resize: vertical; min-height: 68px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235B7599' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 140px; }

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--primario);
    color: #fff;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.boton:hover { background: var(--primario-osc); text-decoration: none; color: #fff; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--suave { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton--suave:hover { background: var(--superficie-2); color: var(--texto); }
.boton--peligro { background: var(--peligro); }
.boton--peligro:hover { background: var(--rojo-osc); }
/* Boton dorado con texto azul profundo: el blanco sobre dorado no seria legible */
.boton--exito { background: var(--amarillo); color: var(--azul-prof); }
.boton--exito:hover { background: var(--amarillo-osc); color: var(--azul-prof); }
.boton--bloque { width: 100%; }
.boton--grande { padding: 13px 22px; font-size: 15px; }
.boton--chico { padding: 5px 10px; font-size: 12px; }

/* ---------------------------------------------------------
   Etiquetas de estado
   --------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pill--ok       { background: var(--amarillo-claro); color: var(--amarillo-texto); border: 1px solid #F0CE84; }
.pill--pend     { background: var(--superficie-2);  color: var(--texto-suave); border: 1px solid var(--borde); }
.pill--alerta   { background: var(--rojo-claro);    color: var(--rojo-osc); }
.pill--peligro  { background: var(--rojo-claro);    color: var(--rojo-osc); border: 1px solid #F5A3B2; }
.pill--info     { background: var(--azul-claro);    color: var(--azul-osc); }

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */
.aviso {
    padding: 11px 15px;
    border-radius: var(--radio-s);
    margin-bottom: 14px;
    font-size: 13.5px;
    border: 1px solid;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.aviso--exito  { background: var(--amarillo-claro); border-color: #F0C24D; color: var(--amarillo-texto); }
.aviso--error  { background: var(--rojo-claro);     border-color: #F5A3B2; color: var(--rojo-osc); }
.aviso--aviso  { background: var(--rojo-claro);     border-color: #F7BCC7; color: var(--rojo-osc); }
.aviso--info   { background: var(--azul-claro);     border-color: #A9C6E8; color: var(--azul-osc); }

.vacio { text-align: center; padding: 40px 20px; color: var(--texto-suave); }
.vacio strong { display: block; color: var(--texto); margin-bottom: 4px; font-size: 15px; }

/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */
.acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(150deg, var(--azul-prof) 0%, var(--azul) 65%, #1A62BC 100%);
}
.acceso__caja {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    /* Filo rojo superior, como el marco del logo */
    border-top: 5px solid var(--rojo);
    padding: 30px 28px;
    box-shadow: 0 20px 45px rgba(9, 43, 87, .40);
}
.acceso__marca { text-align: center; margin-bottom: 22px; }
.acceso__marca h1 { font-size: 19px; }
.acceso__marca p { color: var(--texto-suave); font-size: 13px; margin: 5px 0 0; }
.acceso__escudo {
    width: 62px; height: 62px; margin: 0 auto 14px;
    display: block;
}

/* ---------------------------------------------------------
   Formulario de acta (optimizado para celular)
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   La cedula: dos columnas que COMPARTEN las filas
   Una organizacion que compite en las dos elecciones queda a
   la misma altura a izquierda y derecha, igual que en el papel;
   donde una columna no tiene lista, la celda va vacia.
   --------------------------------------------------------- */
.cedula { overflow: hidden; }

.cedula-encabezado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: var(--texto);
}
.cedula-encabezado__col {
    padding: 11px 14px;
    text-align: center;
    border-bottom: 2px solid var(--borde-fuerte);
}
.cedula-encabezado__col--provincial {
    background: var(--cedula-lima-fuerte);
    border-bottom-color: var(--cedula-lima-borde);
}
.cedula-encabezado__col--distrital {
    background: var(--cedula-dist-fuerte);
    border-bottom-color: var(--cedula-dist-borde);
}
.cedula-encabezado__col strong { display: block; font-size: 13px; letter-spacing: -.01em; }
.cedula-encabezado__col small { display: block; font-size: 10.5px; color: var(--cedula-texto-2); margin-top: 2px; }

.cedula-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--borde);
}
.cedula-fila:last-child { border-bottom: 0; }
.cedula-fila--otro:first-of-type { border-top: 2px solid var(--borde-fuerte); }

.cedula-celda {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    min-height: 52px;
}
/* Cada eleccion con el color de su cedula impresa */
.cedula-celda--provincial { background: var(--cedula-lima); }
.cedula-celda--distrital  { background: var(--cedula-dist); }
/* Los renglones que no son una lista (blancos, nulos, impugnados) no van
   en el papel: van mas claros para que no se confundan con una lista. */
.cedula-fila--otro .cedula-celda--provincial { background: var(--cedula-lima-suave); }
.cedula-fila--otro .cedula-celda--distrital  { background: var(--cedula-dist-suave); }
/* El hueco mantiene la altura de la fila para que el renglon calce. Va en
   blanco, como en la cedula impresa: ahi no hay lista que marcar. */
.cedula-celda--vacia,
.cedula-fila--otro .cedula-celda--vacia {
    background: repeating-linear-gradient(135deg, #fff, #fff 7px, var(--superficie-2) 7px, var(--superficie-2) 14px);
}

/* Va a la derecha del nombre, como el recuadro del simbolo en el papel */
.cedula-celda__logo {
    width: 36px; height: 36px; flex: 0 0 36px;
    border: 2px solid var(--borde-fuerte);
    border-radius: 6px;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden;
}
.cedula-celda__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cedula-celda__logo--plano { border-color: var(--borde); }
.cedula-celda__inicial {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}

.cedula-celda__nombre { flex: 1; min-width: 0; font-weight: 600; font-size: 12px; line-height: 1.25; }
.cedula-celda__nombre small { display: block; font-weight: 500; color: var(--cedula-texto-2); font-size: 10.5px; }

.cedula-celda input {
    width: 76px; flex: 0 0 76px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 7px 4px;
    background: #fff;
    border-color: var(--borde-fuerte);
}

.cedula-pie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid var(--borde-fuerte);
}
.cedula-pie__col {
    padding: 10px 14px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--cedula-texto-2);
}
.cedula-pie__col[data-sub-contenedor="provincial"] { background: var(--cedula-lima-fuerte); }
.cedula-pie__col[data-sub-contenedor="distrital"]  { background: var(--cedula-dist-fuerte); }
.cedula-pie__etiqueta { font-weight: 700; color: var(--texto); }
.cedula-pie strong { color: var(--texto); font-size: 15px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.cedula-pie__col.excede strong { color: var(--peligro); }

.acta-resumen {
    position: sticky;
    bottom: 0;
    background: var(--superficie);
    border-top: 2px solid var(--borde);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    box-shadow: 0 -4px 12px rgba(9, 43, 87, .09);
    z-index: 10;
}
.acta-resumen__dato { font-size: 12px; color: var(--texto-suave); }
.acta-resumen__dato strong { display: block; font-size: 19px; color: var(--texto); font-variant-numeric: tabular-nums; }
.acta-resumen__dato.excede strong { color: var(--peligro); }
.acta-resumen__acciones { margin-left: auto; display: flex; gap: 10px; }

.foto-previa {
    max-width: 100%;
    border-radius: var(--radio-s);
    border: 1px solid var(--borde);
    display: block;
    margin-top: 10px;
}

/* ---------------------------------------------------------
   Utilidades
   --------------------------------------------------------- */
.apilado { display: flex; flex-direction: column; gap: 16px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grupo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }
.pequeno { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.mt-16 { margin-top: 16px; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }

.paginacion { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 14px; flex-wrap: wrap; }
.paginacion a, .paginacion span {
    padding: 6px 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s);
    font-size: 13px;
    background: var(--superficie);
}
.paginacion .activa { background: var(--primario); color: #fff; border-color: var(--primario); }
.paginacion .inerte { color: var(--texto-tenue); background: var(--superficie-2); }

.lista-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--azul-claro); color: var(--azul-osc);
    border-radius: 99px; padding: 4px 11px; font-size: 12px; font-weight: 600;
}
.chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }

.caja-scroll { max-height: 260px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 10px; background: var(--superficie-2); }
.opcion { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radio-s); cursor: pointer; }
.opcion:hover { background: #fff; }
.opcion input { width: auto; }


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
    .rejilla--2-1 { grid-template-columns: 1fr; }
    .rejilla--3 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .app { flex-direction: column; }

    /* En celular el menu deja de ser una barra lateral y pasa a ser una
       cabecera con boton. Antes era una tira horizontal que se cortaba en
       pantallas angostas y dejaba opciones fuera de alcance. */
    .lateral {
        width: 100%; flex: none; height: auto;
        position: sticky; top: 0; z-index: 30;
        border-right: 0;
        border-bottom: 3px solid var(--rojo);
    }
    .lateral__marca { border-bottom: 0; padding: 10px 14px; }
    .lateral__marca strong { font-size: 14px; }
    .lateral__marca span { display: none; }

    .lateral__boton {
        display: grid; place-items: center;
        margin-left: auto;
        width: 44px; height: 44px;
        flex: 0 0 44px;
        background: rgba(255, 255, 255, .10);
        border: 0;
        border-radius: var(--radio-s);
        color: #fff;
        cursor: pointer;
    }
    .lateral__boton svg { width: 22px; height: 22px; }
    .lateral__boton[aria-expanded="true"] { background: var(--amarillo); color: var(--azul-prof); }

    /* Cerrado por defecto; se abre con el boton */
    .lateral__panel {
        display: none;
        border-top: 1px solid rgba(255, 255, 255, .14);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .lateral--abierto .lateral__panel { display: flex; }

    .lateral__nav { padding: 8px; }
    .lateral__grupo { display: block; padding: 12px 10px 4px; }
    /* Objetivo tactil comodo: el dedo no debe dudar entre dos opciones */
    .lateral__link { margin-bottom: 2px; padding: 12px 13px; font-size: 14px; }
    .lateral__pie { display: block; }

    .barra { padding: 12px 16px; }
    .contenido { padding: 16px 14px 40px; }
    .rejilla--4, .rejilla--2 { grid-template-columns: 1fr 1fr; }
    .metrica__valor { font-size: 23px; }
    .acta-resumen { gap: 12px; }
    .acta-resumen__acciones { width: 100%; margin-left: 0; }
    .acta-resumen__acciones .boton { flex: 1; }
}

/* La cedula en celular: se aprieta pero NO se apila, porque el calce de
   los renglones entre las dos columnas es justo lo que evita que el
   personero se equivoque de fila al copiar el acta. */
@media (max-width: 820px) {
    .cedula-encabezado__col { padding: 9px 8px; }
    .cedula-encabezado__col strong { font-size: 11px; }
    .cedula-encabezado__col small { font-size: 9.5px; }
    .cedula-celda { gap: 5px; padding: 6px; min-height: 54px; }
    .cedula-encabezado__col { border-bottom-width: 2px; }
    .cedula-celda__logo { width: 26px; height: 26px; flex: 0 0 26px; border-width: 1px; border-radius: 4px; }
    .cedula-celda__inicial { font-size: 9px; }
    .cedula-celda__nombre { font-size: 10.5px; line-height: 1.2; }
    .cedula-celda__nombre small { font-size: 9px; }
    /* 16px no es estetico: por debajo de eso iOS hace zoom al enfocar el campo
       y descuadra la cedula entera. Y 42px de alto es lo minimo para acertar
       con el dedo sin equivocarse de renglon. */
    .cedula-celda input {
        width: 54px; flex: 0 0 54px;
        font-size: 16px;
        min-height: 42px;
        padding: 6px 2px;
    }
    .cedula-pie__col { gap: 8px; padding: 9px 8px; font-size: 11px; }
    .cedula-pie strong { font-size: 13px; }
}

@media (max-width: 520px) {
    .rejilla--4, .rejilla--2 { grid-template-columns: 1fr; }
    .resultado__cifras { min-width: 84px; }
}

@media print {
    .lateral, .barra, .acta-resumen__acciones, .no-imprimir { display: none !important; }
    body { background: #fff; }
    .tarjeta { box-shadow: none; border-color: var(--borde-fuerte); break-inside: avoid; }
}

/* Logo de la organizacion en la lista de resultados del dashboard */
.resultado__logo {
    width: 32px; height: 32px; flex: 0 0 32px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 5px;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden;
}
.resultado__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Logo en el panel de administracion de organizaciones */
.partido-logo {
    width: 34px; height: 34px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 5px;
    background: #fff;
    display: grid; place-items: center;
    overflow: hidden;
}
.partido-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.partido-logo--vacio { border-style: dashed; color: var(--texto-tenue); font-size: 10px; }

/* ---------------------------------------------------------
   Catalogo de organizaciones con checks (vista del distrito)
   --------------------------------------------------------- */
.cat-fila {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
}
.cat-fila:last-child { border-bottom: 0; }
.cat-fila:hover { background: var(--superficie-2); }
.cat-fila--marcada { background: var(--azul-claro); }
.cat-fila--marcada:hover { background: #D6E4F6; }
.cat-fila input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; cursor: pointer; }
.cat-fila__nombre { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.3; }
.cat-fila__nombre small { display: block; font-weight: 500; color: var(--texto-suave); font-size: 11px; }
.cat-fila__marcas { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.partido-logo__inicial {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}

@media (max-width: 520px) {
    .cat-fila { gap: 8px; padding: 8px 10px; }
    .cat-fila__nombre { font-size: 12px; }
    .cat-fila__marcas { flex-direction: column; align-items: flex-end; gap: 3px; }
}

/* ---------------------------------------------------------
   Revision de actas e impugnaciones
   --------------------------------------------------------- */
.revision-acciones { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
form.inline { display: inline; margin: 0; }

/* Popup: en escritorio es una ventana centrada; en celular ocupa todo */
.dialogo {
    border: 0;
    border-radius: var(--radio);
    padding: 0;
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-shadow: 0 18px 50px rgba(9, 43, 87, .30);
    color: var(--texto);
}
.dialogo::backdrop { background: rgba(9, 43, 87, .55); }
.dialogo__form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.dialogo__cab {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    background: var(--azul-prof);
    color: #fff;
    border-bottom: 3px solid var(--rojo);
}
.dialogo__cab h2 { margin: 0; font-size: 16px; color: #fff; }
.dialogo__cab p { color: rgba(255, 255, 255, .78); }
.dialogo__cerrar {
    flex: 0 0 36px; width: 36px; height: 36px;
    border: 0; border-radius: var(--radio-s);
    background: rgba(255, 255, 255, .12); color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.dialogo__cerrar:hover { background: var(--rojo); }
.dialogo__cuerpo { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.dialogo__pie {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-2);
}

/* Tabla comparativa registrado vs. oficial */
.comparar-seccion + .comparar-seccion { margin-top: 14px; }
.comparar-seccion__titulo {
    margin: 0 0 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--azul-osc);
}
table.comparar th, table.comparar td { padding: 7px 10px; }
/* La cabecera puede partirse: en celular "Registrado" en una linea empuja la tabla fuera del popup */
table.comparar th { white-space: normal; }
table.comparar input[type="number"] { width: 92px; padding: 6px 8px; text-align: right; font-size: 16px; }
.comparar__fila--dif td { background: var(--rojo-claro); }
.comparar__fila--dif td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.comparar__delta--mas   { color: var(--amarillo-texto); font-weight: 700; }
.comparar__delta--menos { color: var(--rojo-osc); font-weight: 700; }

/* Acta impugnada: el aviso que ve el personero al abrirla */
.acta-impugnada { border-color: var(--rojo); }
.acta-impugnada .tarjeta__cab { background: var(--rojo-claro); }
.acta-impugnada .tarjeta__cab h2 { color: var(--rojo-osc); }

@media (max-width: 820px) {
    .dialogo { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; }
    .dialogo__form { max-height: 100vh; }
    .dialogo__cuerpo { padding: 12px 14px; }
    .dialogo__pie .grupo { width: 100%; }
    .dialogo__pie .grupo .boton { flex: 1; }
    table.comparar th, table.comparar td { padding: 6px; }
    table.comparar input[type="number"] { width: 70px; min-height: 42px; }
    .revision-acciones { justify-content: flex-start; }
}

/* ---------------------------------------------------------
   Personeros por mesa
   --------------------------------------------------------- */
.asignar-barra { background: var(--superficie-2); }
table.tabla--asignar select { min-width: 220px; padding: 7px 9px; font-size: 13.5px; }
.fila--cambiada td { background: var(--amarillo-claro); }
.fila--cambiada td:first-child { box-shadow: inset 3px 0 0 var(--amarillo); }
@media (max-width: 820px) {
    table.tabla--asignar select { min-width: 160px; font-size: 16px; }
}

/* Casilla de autorizacion del personero: que no pase desapercibida */
.campo.autorizar { padding: 10px 12px; border: 1px solid #F0CE84; background: var(--amarillo-claro); border-radius: var(--radio-s); }

/* ---------------------------------------------------------
   Capacitacion: hoja de asistencia
   --------------------------------------------------------- */
.fila--asistio td { background: var(--amarillo-claro); }
.fila--asistio td:first-child { box-shadow: inset 3px 0 0 var(--amarillo); }
table.tabla--asistencia input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
table.tabla--asistencia input[type="text"] { padding: 6px 8px; font-size: 13px; }
@media (max-width: 820px) {
    /* En celular el dedo necesita blanco: la casilla es el gesto principal */
    table.tabla--asistencia input[type="checkbox"] { width: 24px; height: 24px; }
    table.tabla--asistencia td { padding: 12px 8px; }
    table.tabla--asistencia input[type="text"] { font-size: 16px; min-width: 130px; }
}