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

:root {
    /* ---- Identidad Renovacion Popular ---------------------------------
       El logo tiene un solo color: el celeste de la R y de su marco. Toda
       la paleta sale de ese tono. Si necesitas afinar el valor contra el
       manual de marca, cambialo aqui y se propaga a todo el sistema. */
    --celeste:        #0C7AA0;   /* celeste institucional (la R y el marco del logo) */
    --celeste-osc:    #085E7C;   /* hover de botones, etiquetas, texto sobre tintes claros */
    --celeste-prof:   #064A62;   /* menu lateral, cabeceras oscuras, degradados */
    --celeste-vivo:   #5CC6EC;   /* acento sobre fondos oscuros: item activo, avance */
    --celeste-claro:  #E0F1F8;   /* tintes suaves: chips, avisos, filas marcadas */

    /* ---- Neutros, matizados hacia el celeste de marca ---- */
    --fondo:        #EFF5F8;
    --superficie:   #ffffff;
    --superficie-2: #F5F9FB;
    --borde:        #D8E5EC;
    --borde-fuerte: #BCD0DB;
    --texto:        #0B2A38;
    --texto-suave:  #4F6E7E;
    --texto-tenue:  #8AA3B1;

    /* ---- Roles semanticos ----
       Con un logo de un solo color no se pueden derivar de el; se usan los
       tonos convencionales, ajustados para armonizar con el celeste y para
       pasar contraste WCAG AA:
       exito  -> verde  (acta registrada, guardar, conforme)
       alerta -> ambar  (algo que revisar, como un acta descuadrada)
       peligro-> rojo   (anular, eliminar, impugnada, errores)
       info   -> celeste */
    --primario:       var(--celeste);
    --primario-osc:   var(--celeste-osc);
    --primario-claro: var(--celeste-claro);
    --exito:          #177A4C;
    --exito-osc:      #115E3A;
    --exito-claro:    #E2F4EA;
    --exito-borde:    #A8DEC0;
    --exito-texto:    #0F5A37;   /* verde legible sobre fondo claro */
    --alerta:         #B45309;
    --alerta-claro:   #FFF3DC;
    --alerta-borde:   #F2D28B;
    --alerta-texto:   #8A4B00;   /* ambar legible sobre fondo claro */
    --peligro:        #D12A36;
    --peligro-osc:    #A81E29;
    --peligro-claro:  #FCE8EA;
    --peligro-borde:  #F3AAB1;
    --peligro-texto:  var(--peligro-osc);

    --radio:   10px;
    --radio-s: 6px;
    --sombra:   0 1px 2px rgba(6, 74, 98, .07), 0 1px 3px rgba(6, 74, 98, .05);
    --sombra-m: 0 4px 12px rgba(6, 74, 98, .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(--celeste-prof);
    color: #CFE7F1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 3px solid var(--celeste);
}

.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(--celeste-vivo); 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: #9AD1E6; }

.lateral__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radio-s);
    color: #CFE7F1;
    font-weight: 500;
    margin-bottom: 2px;
}
.lateral__link:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
/* El item activo: celeste vivo sobre el celeste profundo del menu */
.lateral__link.activo { background: var(--celeste-vivo); color: var(--celeste-prof); font-weight: 700; }
.lateral__link.activo:hover { background: var(--celeste-vivo); color: var(--celeste-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(--celeste-vivo); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; font-weight: 600; }
.lateral__pie .ambito { color: #A6D8EA; margin-top: 6px; font-size: 11px; }
.lateral__pie a { color: var(--celeste-vivo); display: inline-block; margin-top: 10px; }

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

.barra {
    background: var(--superficie);
    /* Franja celeste superior: recoge el marco del logo */
    border-top: 3px solid var(--celeste);
    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(--celeste-osc) 0%, var(--celeste-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: celeste sobre fondo claro, celeste vivo sobre la tarjeta oscura */
.avance { height: 7px; background: var(--borde); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.avance__relleno { height: 100%; background: var(--celeste); border-radius: 99px; transition: width .4s ease; }
.metrica--destacada .avance { background: rgba(255, 255, 255, .25); }
.metrica--destacada .avance__relleno { background: var(--celeste-vivo); }

/* ---------------------------------------------------------
   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 celeste */
.resultado--lider .resultado__pct { color: var(--celeste); }

/* ---------------------------------------------------------
   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(--celeste-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(12, 122, 160, .20);
}
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='%234F6E7E' 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(--peligro-osc); }
/* Boton verde: guardar, confirmar, autorizar */
.boton--exito { background: var(--exito); color: #fff; }
.boton--exito:hover { background: var(--exito-osc); color: #fff; }
.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(--exito-claro);   color: var(--exito-texto);   border: 1px solid var(--exito-borde); }
.pill--pend     { background: var(--superficie-2);  color: var(--texto-suave); border: 1px solid var(--borde); }
.pill--alerta   { background: var(--alerta-claro);  color: var(--alerta-texto); }
.pill--peligro  { background: var(--peligro-claro); color: var(--peligro-texto); border: 1px solid var(--peligro-borde); }
.pill--info     { background: var(--celeste-claro); color: var(--celeste-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(--exito-claro);   border-color: var(--exito-borde);   color: var(--exito-texto); }
.aviso--error  { background: var(--peligro-claro); border-color: var(--peligro-borde); color: var(--peligro-texto); }
.aviso--aviso  { background: var(--alerta-claro);  border-color: var(--alerta-borde);  color: var(--alerta-texto); }
.aviso--info   { background: var(--celeste-claro); border-color: #A5D2E4;             color: var(--celeste-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(--celeste-prof) 0%, var(--celeste) 65%, #1F9BC4 100%);
}
.acceso__caja {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    /* Filo celeste superior, como el marco del logo */
    border-top: 5px solid var(--celeste);
    padding: 30px 28px;
    box-shadow: 0 20px 45px rgba(6, 74, 98, .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;
    background: var(--celeste-prof);
    color: #fff;
}
.cedula-encabezado__col {
    padding: 11px 14px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.cedula-encabezado__col:first-child { border-left: 0; }
.cedula-encabezado__col strong { display: block; font-size: 13px; letter-spacing: -.01em; }
.cedula-encabezado__col small { display: block; font-size: 10.5px; color: var(--celeste-vivo); 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 { background: var(--superficie-2); }
.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;
    border-left: 1px solid var(--borde);
    min-height: 52px;
}
.cedula-celda:first-child { border-left: 0; }
/* El hueco mantiene la altura de la fila para que el renglon calce */
.cedula-celda--vacia { background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--superficie-2) 7px, var(--superficie-2) 14px); }

.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(--texto-suave); 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;
}

.cedula-pie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid var(--borde-fuerte);
    background: var(--superficie-2);
}
.cedula-pie__col {
    padding: 10px 14px;
    border-left: 1px solid var(--borde);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--texto-suave);
}
.cedula-pie__col:first-child { border-left: 0; }
.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(6, 74, 98, .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(--celeste-claro); color: var(--celeste-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(--celeste);
    }
    .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(--celeste-vivo); color: var(--celeste-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-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(--celeste-claro); }
.cat-fila--marcada:hover { background: #CDE7F1; }
.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(6, 74, 98, .30);
    color: var(--texto);
}
.dialogo::backdrop { background: rgba(6, 74, 98, .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(--celeste-prof);
    color: #fff;
    border-bottom: 3px solid var(--celeste);
}
.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(--peligro); }
.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(--celeste-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(--peligro-claro); }
.comparar__fila--dif td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.comparar__delta--mas   { color: var(--exito-texto); font-weight: 700; }
.comparar__delta--menos { color: var(--peligro-texto); font-weight: 700; }

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

@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(--celeste-claro); }
.fila--cambiada td:first-child { box-shadow: inset 3px 0 0 var(--celeste); }
@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 #A5D2E4; background: var(--celeste-claro); border-radius: var(--radio-s); }