/* =====================================================================
   scope.css  ·  Sistema de diseño de SCOPE
   Sistema de Control, Observacion y Proyeccion Electoral

   Se apoya en Bootstrap 5.3 y le pone encima una capa propia: tokens de
   color, tipografia, superficies y componentes.

   Los dos temas se definen con variables sobre [data-theme]. El tema vive
   en el atributo data-theme del <html> y lo fija un script en el <head>
   antes de pintar, para que no haya un parpadeo blanco al cargar.
   ===================================================================== */

/* ==================== TOKENS ==================== */
:root {
    /* --- Marca --- */
    --scope-red:      #c1121f;
    --scope-red-700:  #8f0d17;
    --scope-red-600:  #a30f1a;
    --scope-red-400:  #e0505c;

    /* --- Acentos para datos ---
       El rojo es la marca, no un color de dato: si todo el panel fuera
       rojo, no se distinguiria lo importante. */
    --scope-verde:    #15803d;
    --scope-verde-bg: #dcfce7;
    --scope-ambar:    #b45309;
    --scope-ambar-bg: #fef3c7;
    --scope-frio:     #0e7490;
    --scope-frio-bg:  #cffafe;
    /* Lila para el Administrador. Elegido oscuro a proposito: sobre el
       fondo claro tiene que leerse como texto, no como un resaltador. */
    --scope-lila:     #6d28d9;
    --scope-lila-bg:  #ede9fe;

    /* --- Superficies y texto (tema claro) --- */
    --sc-bg:          #f4f5f7;
    --sc-surface:     #ffffff;
    --sc-surface-2:   #fafbfc;
    --sc-border:      #e3e6ea;
    --sc-border-soft: #eef0f3;
    --sc-text:        #14171c;
    --sc-text-muted:  #5b6472;
    --sc-text-faint:  #8b95a3;

    /* Barra superior: en claro lleva el rojo del movimiento */
    --sc-nav-bg:      var(--scope-red);
    --sc-nav-text:    #ffffff;
    --sc-nav-hover:   rgba(255, 255, 255, .16);
    --sc-nav-border:  var(--scope-red-700);

    --sc-shadow:      0 1px 2px rgba(16, 20, 26, .06), 0 2px 8px rgba(16, 20, 26, .05);
    --sc-shadow-lg:   0 2px 6px rgba(16, 20, 26, .08), 0 12px 28px rgba(16, 20, 26, .10);
    --sc-radius:      12px;
    --sc-radius-sm:   8px;

    /* Bootstrap: que su "primary" sea nuestro rojo */
    --bs-primary:     #c1121f;
    --bs-primary-rgb: 193, 18, 31;
    --bs-body-bg:     var(--sc-bg);
    --bs-body-color:  var(--sc-text);
    --bs-border-color: var(--sc-border);
}

/* --- Tema oscuro --- */
[data-theme="dark"] {
    --sc-bg:          #0e1116;
    --sc-surface:     #171b22;
    --sc-surface-2:   #1d222b;
    --sc-border:      #2a313c;
    --sc-border-soft: #222833;
    --sc-text:        #e8ecf1;
    --sc-text-muted:  #9aa5b4;
    --sc-text-faint:  #6d7887;

    /* En oscuro la barra no es roja: seria demasiado. Queda casi negra
       con una linea roja abajo, que mantiene la identidad. */
    --sc-nav-bg:      #12161d;
    --sc-nav-text:    #e8ecf1;
    --sc-nav-hover:   rgba(255, 255, 255, .08);
    --sc-nav-border:  var(--scope-red);

    --scope-verde:    #4ade80;
    --scope-verde-bg: #14532d;
    --scope-ambar:    #fbbf24;
    --scope-ambar-bg: #4a2f08;
    --scope-frio:     #22d3ee;
    --scope-frio-bg:  #0b3f4a;
    /* En oscuro se invierte: el texto va claro y el fondo apagado, como
       hacen el resto de los chips de este tema. */
    --scope-lila:     #c4b5fd;
    --scope-lila-bg:  #2e1065;
    --scope-red-400:  #ff6b78;

    --sc-shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
    --sc-shadow-lg:   0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40);

    --bs-body-bg:     var(--sc-bg);
    --bs-body-color:  var(--sc-text);
    --bs-border-color: var(--sc-border);
    --bs-secondary-color: var(--sc-text-muted);
    --bs-emphasis-color: var(--sc-text);
}

/* ==================== BASE ==================== */
body {
    background-color: var(--sc-bg);
    color: var(--sc-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.015em;
    color: var(--sc-text);
}

/* Las cifras alineadas en columna: sin esto los numeros bailan */
.sc-num, .sc-stat-valor, td.text-end, .table td, .table th {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--scope-red);
    text-decoration: none;
}
a:hover {
    color: var(--scope-red-600);
    text-decoration: underline;
}
[data-theme="dark"] a       { color: var(--scope-red-400); }
[data-theme="dark"] a:hover { color: #ff8f99; }

.text-muted { color: var(--sc-text-muted) !important; }

/* ==================== BARRA SUPERIOR ==================== */
.sc-navbar {
    background-color: var(--sc-nav-bg);
    border-bottom: 1px solid var(--sc-nav-border);
    box-shadow: var(--sc-shadow);
}
.sc-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 1.05rem;
    color: var(--sc-nav-text);
}
.sc-navbar .navbar-brand:hover { color: var(--sc-nav-text); text-decoration: none; }
.sc-navbar .navbar-brand .sc-logo { width: 26px; height: 26px; flex: none; }

.sc-navbar .nav-link {
    color: var(--sc-nav-text);
    opacity: .85;
    font-weight: 500;
    padding: .45rem .8rem;
    border-radius: var(--sc-radius-sm);
    transition: background-color .15s ease, opacity .15s ease;
}
.sc-navbar .nav-link:hover {
    opacity: 1;
    background-color: var(--sc-nav-hover);
}
.sc-navbar .nav-link.activo {
    opacity: 1;
    background-color: var(--sc-nav-hover);
    font-weight: 600;
}
.sc-navbar .navbar-toggler {
    border-color: var(--sc-nav-hover);
    color: var(--sc-nav-text);
}

/* El nombre de quien esta usando el sistema lleva a su cuenta. Va con
   color propio porque el rojo de los enlaces sobre la barra roja no se lee. */
/* Va anidado bajo .sc-navbar a proposito: `[data-theme="dark"] a` tiene mas
   especificidad que `.sc-usuario` sola y le pintaba el nombre de rojo sobre
   la barra, donde no se lee. */
/* Acceso a Mi cuenta: avatar con la inicial mas el nombre.
   Antes era el nombre suelto y no se leia como enlace, asi que la gente no
   encontraba donde cambiarse la contrasena. */
.sc-navbar .sc-usuario {
    align-items: center;
    gap: .45rem;
    color: var(--sc-nav-text);
    font-size: .875rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .18rem .7rem .18rem .18rem;
    max-width: 190px;
    transition: background-color .15s ease, border-color .15s ease;
}
.sc-navbar .sc-usuario .nombre {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sc-navbar a.sc-usuario:hover,
.sc-navbar a.sc-usuario:focus-visible {
    color: var(--sc-nav-text);
    background-color: var(--sc-nav-hover);
    border-color: var(--sc-nav-hover);
    text-decoration: none;
}
/* Cuando ya se esta en Mi cuenta, queda marcado como el resto de las secciones */
.sc-navbar a.sc-usuario.activo {
    background-color: var(--sc-nav-hover);
    border-color: var(--sc-nav-hover);
}

/* Inicial del usuario. Es un circulo y no una foto porque el sistema no
   guarda retratos de los usuarios: la unica foto que hay es la del candidato. */
.sc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* Invertido respecto de la barra: en claro queda blanco sobre rojo, en
       oscuro claro sobre casi negro, y en los dos casos contrasta. */
    background: var(--sc-nav-text);
    color: var(--sc-nav-bg);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
/* El del panel de telefonos va sobre fondo de tarjeta, no sobre la barra,
   asi que toma el rojo de la marca en lugar de invertir la barra. */
.sc-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    background: var(--scope-red);
    color: #fff;
}

/* Campana bajo la que se esta trabajando, en la barra superior */
.sc-campania {
    align-items: center;
    gap: .4rem;
    background: var(--sc-nav-hover);
    color: var(--sc-nav-text);
    border-radius: 999px;
    padding: .22rem .7rem .22rem .28rem;
    font-size: .82rem;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sc-campania:not(:has(.sc-campania-foto)) { padding-left: .7rem; }
.sc-campania-foto {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

/* Boton de tema y de salir dentro de la barra */
.sc-btn-nav {
    background: transparent;
    border: 1px solid var(--sc-nav-hover);
    color: var(--sc-nav-text);
    border-radius: var(--sc-radius-sm);
    padding: .35rem .6rem;
    line-height: 1;
    transition: background-color .15s ease;
}
.sc-btn-nav:hover { background-color: var(--sc-nav-hover); color: var(--sc-nav-text); }

/* ==================== TARJETAS ==================== */
.card {
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    color: var(--sc-text);
}
.card-body { padding: 1.15rem 1.25rem; }

/* Titulo de seccion dentro de una tarjeta */
.sc-titulo-seccion {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
    margin-bottom: 1rem;
}

/* "hace 3 h 21 min" en un solo renglon. Partido en dos -- "hace 3 h" /
   "21 min" -- se lee como si fueran dos datos distintos. */
.sc-conexion-desde { white-space: nowrap; }

/* ==================== DESCARGAS DEL PANEL ====================

   Un nombre y sus dos formatos. Los cuatro botones dicen "Excel" o "PDF",
   asi que lo unico que los distingue es de que grupo cuelgan: el gap chico
   adentro y el gap-2 de la barra afuera son los que arman esos dos bloques
   a la vista. */
/* Los dos grupos viajan juntos: si no entran en el renglon de
   "Actualizado", bajan los dos y no uno solo, que dejaba la barra
   desbalanceada. */
.sc-descargas {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
}

.sc-descarga {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.sc-descarga-que {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sc-text-muted);
    white-space: nowrap;
}

/* En el telefono cada informe ocupa su renglon -- el nombre arriba y los
   dos botones abajo -- en vez de cuatro botones seguidos donde no se sabe
   cual pertenece a cual. */
@media (max-width: 575.98px) {
    .sc-descargas {
        width: 100%;
        gap: .6rem;
    }
    .sc-descarga {
        flex-wrap: wrap;
        width: 100%;
        gap: .35rem;
    }
    .sc-descarga-que { width: 100%; }
    .sc-descarga .btn { flex: 1 1 0; }
}

/* ==================== CIFRAS DEL PANEL ==================== */
.sc-stat {
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    padding: 1.15rem 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* Cinta de color a la izquierda: identifica la cifra de un vistazo */
.sc-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sc-text-faint);
}
.sc-stat.es-marca::before { background: var(--scope-red); }
.sc-stat.es-verde::before { background: var(--scope-verde); }
.sc-stat.es-frio::before  { background: var(--scope-frio); }

.sc-stat-etiqueta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}
.sc-stat-valor {
    font-size: 2.1rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-top: .3rem;
}
.sc-stat.es-marca .sc-stat-valor { color: var(--scope-red); }
[data-theme="dark"] .sc-stat.es-marca .sc-stat-valor { color: var(--scope-red-400); }
.sc-stat.es-verde .sc-stat-valor { color: var(--scope-verde); }
.sc-stat.es-frio  .sc-stat-valor { color: var(--scope-frio); }
.sc-stat-pie {
    font-size: .8rem;
    color: var(--sc-text-muted);
    margin-top: .15rem;
}

/* ==================== TABLAS ==================== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sc-text);
    margin-bottom: 0;
}
.table > thead th {
    background-color: var(--sc-surface-2);
    border-bottom: 1px solid var(--sc-border);
    color: var(--sc-text-faint);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .7rem .85rem;
    white-space: nowrap;
}
.table > tbody td {
    border-color: var(--sc-border-soft);
    padding: .7rem .85rem;
    vertical-align: middle;
    color: var(--sc-text);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--sc-surface-2);
    color: var(--sc-text);
}
.table > tbody > tr.table-active > * {
    background-color: rgba(193, 18, 31, .07);
    color: var(--sc-text);
}
[data-theme="dark"] .table > tbody > tr.table-active > * {
    background-color: rgba(224, 80, 92, .12);
}

/* La tabla ocupa toda la tarjeta, sin doble borde */
.card > .table-responsive { border-radius: var(--sc-radius); overflow: hidden; }

/* ==================== BOTONES ==================== */
.btn {
    border-radius: var(--sc-radius-sm);
    font-weight: 550;
    padding: .45rem .9rem;
}
.btn-sm { padding: .3rem .65rem; font-size: .82rem; }

.btn-primary {
    --bs-btn-bg: var(--scope-red);
    --bs-btn-border-color: var(--scope-red);
    --bs-btn-hover-bg: var(--scope-red-600);
    --bs-btn-hover-border-color: var(--scope-red-600);
    --bs-btn-active-bg: var(--scope-red-700);
    --bs-btn-active-border-color: var(--scope-red-700);
    --bs-btn-disabled-bg: var(--scope-red);
    --bs-btn-disabled-border-color: var(--scope-red);
    box-shadow: 0 1px 2px rgba(193, 18, 31, .25);
}
.btn-outline-primary {
    --bs-btn-color: var(--scope-red);
    --bs-btn-border-color: var(--scope-red);
    --bs-btn-hover-bg: var(--scope-red);
    --bs-btn-hover-border-color: var(--scope-red);
    --bs-btn-active-bg: var(--scope-red-600);
}
[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--scope-red-400);
    --bs-btn-border-color: var(--scope-red-400);
    --bs-btn-hover-bg: var(--scope-red);
    --bs-btn-hover-border-color: var(--scope-red);
}
.btn-outline-secondary {
    --bs-btn-color: var(--sc-text-muted);
    --bs-btn-border-color: var(--sc-border);
    --bs-btn-hover-bg: var(--sc-surface-2);
    --bs-btn-hover-border-color: var(--sc-border);
    --bs-btn-hover-color: var(--sc-text);
}
.btn-success {
    --bs-btn-bg: var(--scope-verde);
    --bs-btn-border-color: var(--scope-verde);
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
}
[data-theme="dark"] .btn-success {
    --bs-btn-color: #06240f;
    --bs-btn-hover-color: #06240f;
}

/* ==================== FORMULARIOS ==================== */
.form-control, .form-select {
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text);
    padding: .5rem .75rem;
}
.form-control:focus, .form-select:focus {
    background-color: var(--sc-surface);
    color: var(--sc-text);
    border-color: var(--scope-red-400);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, .14);
}
.form-control::placeholder { color: var(--sc-text-faint); }

/* La version chica, para las filas de tabla.
   Va despues de .form-control a proposito: aquella fija su padding sin
   condiciones y, sin esto, le ganaba al de Bootstrap. El resultado era
   una casilla de 39px al lado de un boton de 27, en la misma fila. */
.form-control-sm, .form-select-sm {
    padding: .25rem .6rem;
    font-size: .875rem;
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa5b4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-label { font-weight: 550; font-size: .875rem; color: var(--sc-text); margin-bottom: .35rem; }
.form-text  { color: var(--sc-text-muted); font-size: .82rem; }
.form-check-input:checked { background-color: var(--scope-red); border-color: var(--scope-red); }
.form-check-input:focus   { border-color: var(--scope-red-400); box-shadow: 0 0 0 3px rgba(193, 18, 31, .14); }
[data-theme="dark"] .form-check-input { background-color: var(--sc-surface-2); border-color: var(--sc-border); }

/* Campo que hace falta completar si o si. Se marca con el borde y no solo
   con un asterisco, para que se note al recorrer una lista larga. */
.sc-obligatorio {
    border-color: var(--scope-ambar) !important;
    background-color: var(--scope-ambar-bg);
}
.sc-obligatorio::placeholder { color: var(--scope-ambar); opacity: .9; }
.sc-obligatorio:focus {
    border-color: var(--scope-ambar) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .18);
}

/* Barra de filtros: se distingue del contenido sin gritar */
.sc-filtros {
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 1rem 1.15rem;
    box-shadow: var(--sc-shadow);
}

/* ==================== SEMAFORO Y ETIQUETAS ==================== */
.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .02em;
    padding: .22rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    /* Transparente, pero presente. El chip gris necesita borde -- su
       fondo es casi el de la fila y sin el no se lee como chip -- y los
       de color no. Sin esta linea, el gris medía dos pixeles mas que sus
       vecinos y la columna de estado saltaba de fila en fila. */
    border: 1px solid transparent;
}
.sc-chip::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.sc-chip-verde  { background: var(--scope-verde-bg); color: var(--scope-verde); }
.sc-chip-rojo   { background: rgba(193,18,31,.12);   color: var(--scope-red); }
.sc-chip-gris   { background: var(--sc-surface-2);   color: var(--sc-text-muted); border-color: var(--sc-border); }
.sc-chip-frio   { background: var(--scope-frio-bg);  color: var(--scope-frio); }
.sc-chip-lila   { background: var(--scope-lila-bg);  color: var(--scope-lila); }
.sc-chip-ambar  { background: var(--scope-ambar-bg); color: var(--scope-ambar); }
[data-theme="dark"] .sc-chip-rojo { background: rgba(255,107,120,.14); color: var(--scope-red-400); }

/* "No responde" va en negro y NO en gris: el gris ya es "sin llamar", y
   confundirlos haria que el call center vuelva a marcar a quien no atiende
   como si nunca se lo hubiera intentado. */
.sc-chip-negro {
    background: #2b3038;
    color: #e8ecf1;
}
[data-theme="dark"] .sc-chip-negro {
    background: #000000;
    color: #c7cdd6;
    border: 1px solid var(--sc-border);
}

/* Etiqueta neutra sin punto (permisos, proponentes) */
.sc-tag {
    display: inline-block;
    font-size: .74rem;
    font-weight: 550;
    padding: .18rem .55rem;
    border-radius: 6px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-muted);
    white-space: nowrap;
}

/* ==================== BOTONES DEL SEMAFORO ====================
   Uno por estado, con su color. Que el boton tenga el color del estado que
   aplica evita equivocarse con la fila de al lado. */
.sc-btn-semaforo {
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .78rem;
    padding: .25rem .55rem;
}
.sc-btn-verde  { background: var(--scope-verde); color: #fff; }
.sc-btn-ambar  { background: var(--scope-ambar); color: #fff; }
.sc-btn-rojo   { background: var(--scope-red);   color: #fff; }
.sc-btn-negro  { background: #2b3038;            color: #fff; }
.sc-btn-verde:hover, .sc-btn-ambar:hover,
.sc-btn-rojo:hover,  .sc-btn-negro:hover { filter: brightness(1.12); color: #fff; }
[data-theme="dark"] .sc-btn-verde { color: #06240f; }
[data-theme="dark"] .sc-btn-ambar { color: #2a1c02; }

/* ==================== CABECERA CON EL CANDIDATO ====================
   La foto sale de la campana del usuario, no de un archivo fijo: con varias
   campanas en el mismo sistema, una imagen clavada mostraria el candidato
   equivocado.

   Va tenue y detras del texto: es una pantalla de trabajo, donde lo que
   tiene que leerse son los datos del padron. */
.sc-cabecera-campania {
    position: relative;
    overflow: hidden;
    border-radius: var(--sc-radius);
    background: linear-gradient(100deg, var(--scope-red) 0%, var(--scope-red-700) 100%);
    color: #fff;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sc-shadow);
}
.sc-cabecera-campania .sc-encabezado { margin-bottom: 0; }
.sc-cabecera-campania h1 { color: #fff; margin: 0; }
.sc-cabecera-campania .sc-sub { color: rgba(255, 255, 255, .85); margin: .15rem 0 0; }
.sc-cabecera-campania .text-muted { color: rgba(255, 255, 255, .8) !important; }

/* --- Fila de identidad: de quien es esta boca de urna ---
   Va arriba del titulo y se ve tambien en telefonos. Con varias campanas
   conviviendo, saber bajo que candidato se esta trabajando no es un adorno:
   es lo que evita cargar un votante en la lista equivocada. */
.sc-cabecera-marca {
    /* Rejilla de tres columnas y no flex con space-between: con flex, el
       elemento del medio se corre segun cuanto midan los de los costados, y
       aca tiene que quedar centrado de verdad. Las dos columnas 1fr se
       reparten el sobrante por igual, asi que el centro cae en el centro
       aunque el nombre del candidato sea largo. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}
.sc-cabecera-marca > .sc-cabecera-scope     { justify-self: start; }
.sc-cabecera-marca > .sc-cabecera-candidato { justify-self: end; }

/* Identidad de la campana, al centro de la cabecera.
   La pildora clara no es decoracion: la cabecera es un degradado rojo y
   estas imagenes son rojo y verde sobre transparente, asi que sin fondo el
   logotipo y el bloque "LISTA 1" quedarian invisibles contra el. */
.sc-cabecera-identidad {
    /* Nunca mas ancha que su contenedor: con un alto grande en pantalla
       angosta las dos imagenes sumaban mas que el ancho del telefono y
       empujaban la pagina entera, dejando todo cortado a la derecha. */
    max-width: 100%;
    /* El alto sale de una variable para poder ajustarlo en un solo lugar:
       es lo primero que se pide cambiar de un elemento de marca.
       Con las imagenes recortadas este numero es el alto REAL del arte; con
       los originales, tres cuartos eran margen transparente. */
    --sc-identidad-alto: 48px;

    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 1rem;
    background: #fff;
    border-radius: 999px;
    padding: .45rem 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
/* El logotipo es una linea de texto muy apaisada (3.5:1) y la lista es casi
   cuadrada (1.33:1). A la misma altura el logotipo domina y la lista se
   pierde, asi que la lista va mas alta para que las dos pesen parecido. */
.sc-cabecera-identidad .logo  { height: var(--sc-identidad-alto); width: auto; }
.sc-cabecera-identidad .lista { height: calc(var(--sc-identidad-alto) * 1.35); width: auto; }
.sc-cabecera-scope {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    opacity: .72;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
}
.sc-cabecera-scope .sc-logo { width: 16px; height: 16px; }

.sc-cabecera-candidato {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: .22rem .75rem .22rem .25rem;
}
.sc-cabecera-candidato:not(:has(.foto)) { padding-left: .75rem; }
.sc-cabecera-candidato .foto {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    flex: none;
    background: rgba(255, 255, 255, .2);
}
.sc-cabecera-candidato .datos { min-width: 0; line-height: 1.15; }
.sc-cabecera-candidato .nombre {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-cabecera-candidato .puesto {
    display: block;
    font-size: .68rem;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El retrato, a la derecha y difuminado hacia el borde */
.sc-cabecera-campania .retrato {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 150%;
    opacity: .28;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
    mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
.sc-cabecera-campania .contenido { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
    .sc-cabecera-campania { padding: 1rem 1.1rem; }
    .sc-cabecera-campania .retrato { height: 128%; opacity: .2; }
}

/* ==================== SOLAPAS ==================== */
.sc-solapas {
    border-bottom: 1px solid var(--sc-border);
    gap: .25rem;
}
.sc-solapas .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--sc-text-muted);
    font-weight: 550;
    padding: .55rem .9rem;
}
.sc-solapas .nav-link:hover {
    border-bottom-color: var(--sc-border);
    color: var(--sc-text);
    background: transparent;
}
.sc-solapas .nav-link.active {
    background: transparent;
    color: var(--scope-red);
    border-bottom-color: var(--scope-red);
}
[data-theme="dark"] .sc-solapas .nav-link.active { color: var(--scope-red-400); }

/* ==================== BARRA DE AVANCE ==================== */
.sc-barra {
    height: 8px;
    background-color: var(--sc-border-soft);
    border-radius: 999px;
    overflow: hidden;
}
[data-theme="dark"] .sc-barra { background-color: #262c37; }
.sc-barra > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--scope-red-600), var(--scope-red-400));
    border-radius: 999px;
    transition: width .4s ease;
}

/* ==================== AVISOS ==================== */
.alert {
    border-radius: var(--sc-radius);
    border: 1px solid transparent;
    padding: .8rem 1rem;
}
.alert-success { background: var(--scope-verde-bg); border-color: var(--scope-verde); color: var(--scope-verde); }
.alert-danger  { background: rgba(193,18,31,.10);   border-color: var(--scope-red);   color: var(--scope-red); }
.alert-warning { background: var(--scope-ambar-bg); border-color: var(--scope-ambar); color: var(--scope-ambar); }
.alert-light   { background: var(--sc-surface-2);   border-color: var(--sc-border);   color: var(--sc-text); }
[data-theme="dark"] .alert-danger { color: var(--scope-red-400); border-color: var(--scope-red-400); }

/* ==================== ESTADO VACIO ==================== */
.sc-vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--sc-text-muted);
}
.sc-vacio .sc-logo { width: 40px; height: 40px; opacity: .28; margin-bottom: .75rem; }

/* ==================== ENCABEZADO DE PAGINA ==================== */
.sc-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.sc-encabezado h1 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0;
}
.sc-encabezado .sc-sub {
    color: var(--sc-text-muted);
    font-size: .875rem;
    margin: .15rem 0 0;
}

/* ==================== PAGINACION ==================== */
.pagination { --bs-pagination-bg: var(--sc-surface); }
.page-link {
    background-color: var(--sc-surface);
    border-color: var(--sc-border);
    color: var(--sc-text);
}
.page-link:hover { background-color: var(--sc-surface-2); color: var(--scope-red); }
.page-item.disabled .page-link { background-color: var(--sc-surface); color: var(--sc-text-faint); }

/* ==================== LOGO ==================== */
.sc-logo { display: inline-block; vertical-align: middle; }

/* ==================== LOGIN ====================
   La foto del candidato viene recortada (PNG con transparencia), asi que
   se monta sobre el rojo de campana en lugar de ir dentro de un recuadro.
*/
.sc-login {
    min-height: 100vh;
    display: flex;
    background-color: var(--sc-bg);
}

.sc-login-visual {
    flex: 1 1 52%;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.45), transparent 60%),
        linear-gradient(150deg, var(--scope-red) 0%, var(--scope-red-700) 100%);
}

/* La figura del candidato, apoyada abajo y alineada a la derecha */
.sc-login-visual .foto {
    position: absolute;
    right: -2%;
    bottom: 0;
    height: 92%;
    max-width: 78%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
    pointer-events: none;
}

.sc-login-visual .contenido {
    padding: 3rem;
    position: relative;
    z-index: 1;
    max-width: 60%;
}
.sc-login-visual .logo-campania {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1.25rem;
    filter: brightness(0) invert(1);   /* el logo en blanco sobre el rojo */
}
.sc-login-visual .lista-opcion {
    width: 130px;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 10px;
    padding: .4rem .6rem;
}
.sc-login-visual h2 {
    font-weight: 800;
    color: #fff;
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.sc-login-visual p {
    margin: .4rem 0 0;
    opacity: .95;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

.sc-login-form {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--sc-surface);
    position: relative;
    z-index: 1;
}
.sc-login-card { width: 100%; max-width: 380px; }
.sc-login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--sc-text);
}
.sc-login-marca .sc-logo { width: 34px; height: 34px; }
.sc-login-lema {
    color: var(--sc-text-muted);
    font-size: .8rem;
    text-align: center;
    margin-top: .35rem;
}

/* --- Login en telefonos ---
   El panel de la izquierda no entra, pero esconderlo dejaba una pantalla
   sin ninguna identidad. En vez de eso, la campana pasa a ser el fondo: el
   rojo cubre todo, la figura del candidato se apoya abajo y el formulario
   flota encima en una tarjeta. */
@media (max-width: 991.98px) {
    .sc-login {
        display: block;
        position: relative;
        background:
            radial-gradient(130% 80% at 50% 100%, rgba(0,0,0,.5), transparent 62%),
            linear-gradient(160deg, var(--scope-red) 0%, var(--scope-red-700) 100%);
    }

    /* El panel visual deja de ser una columna y pasa a ser el fondo */
    .sc-login-visual {
        position: fixed;
        inset: 0;
        display: block;
        background: none;
    }
    .sc-login-visual .contenido { display: none; }

    /* La figura, grande y apoyada abajo, detras del formulario */
    .sc-login-visual .foto {
        right: 50%;
        transform: translateX(50%);
        bottom: 0;
        height: auto;
        width: 118%;
        max-width: none;
        opacity: .5;
    }

    /* El formulario flota encima, con su propia tarjeta */
    .sc-login-form {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        background: none;
        padding: 1.5rem 1.15rem;
        align-items: flex-start;
        padding-top: 8vh;
    }
    .sc-login-card {
        background: var(--sc-surface);
        border-radius: var(--sc-radius);
        padding: 1.5rem 1.25rem;
        box-shadow: var(--sc-shadow-lg);
    }
    /* La marca de la campana arriba del formulario, ya que el panel no esta */
    .sc-login-movil { display: block !important; }
}

/* En escritorio la marca de campana vive en el panel de la izquierda */
.sc-login-movil { display: none; }
.sc-login-movil img {
    display: block;
    margin: 0 auto 1rem;
    max-width: 190px;
    width: 100%;
}

/* ==================== UTILIDADES ==================== */
.sc-separador { height: 1px; background: var(--sc-border); margin: 1.25rem 0; }
.sc-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ==================== LLAMAR ====================
   En el call center la accion es una sola: llamar. En escritorio alcanza
   con el numero como enlace; en el telefono se convierte en un bloque
   verde grande, porque ahi el numero ES el boton y se toca con el pulgar
   mientras se sostiene el aparato. */
.sc-llamar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--scope-verde);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sc-llamar:hover { color: var(--scope-verde); text-decoration: underline; }
.sc-llamar svg { width: 15px; height: 15px; flex: none; }
[data-theme="dark"] .sc-llamar { color: var(--scope-verde); }

/* ==================== NAVEGACION ====================
   En escritorio las secciones viven en la barra de arriba. En telefonos
   pasan a una barra fija abajo: el menu hamburguesa obligaba a dos toques
   y quedaba en la esquina mas lejos del pulgar. */
.sc-navbar .sc-secciones {
    flex-direction: row;
    align-items: center;
    gap: .1rem;
    margin-right: auto;
}

.sc-nav-inferior { display: none; }

@media (max-width: 991.98px) {
    .sc-navbar .sc-secciones { display: none; }

    .sc-nav-inferior {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: var(--sc-surface);
        border-top: 1px solid var(--sc-border);
        box-shadow: 0 -2px 14px rgba(16, 20, 26, .07);
        padding: .4rem .25rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    }
    [data-theme="dark"] .sc-nav-inferior { box-shadow: 0 -2px 14px rgba(0, 0, 0, .35); }

    .sc-nav-inferior a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .15rem;
        padding: .3rem .1rem;
        color: var(--sc-text-faint);
        font-size: .65rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
    }
    .sc-nav-inferior a:hover { color: var(--sc-text-muted); text-decoration: none; }
    .sc-nav-inferior a.activo { color: var(--scope-red); font-weight: 700; }
    [data-theme="dark"] .sc-nav-inferior a.activo { color: var(--scope-red-400); }
    .sc-nav-inferior svg { width: 21px; height: 21px; flex: none; }
    .sc-nav-inferior span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Que la barra de abajo no tape el final de la pagina.
       
       El reservado tiene que incluir env(safe-area-inset-bottom) igual que
       lo hace la barra: en telefonos con barra de gestos eso agrega unos
       34px al alto real, y con un valor fijo la barra terminaba tapando el
       final del contenido. La barra mide ~60px de contenido, asi que 5.5rem
       mas el area segura deja aire suficiente en cualquier equipo. */
    /* Va sobre main.container y no sobre main a secas: las utilidades de
       espaciado de Bootstrap (.py-4) traen !important, y entre dos reglas
       !important decide la especificidad, no el orden. Una clase (0,1,0)
       le gana a un elemento (0,0,1), asi que .py-4 pisaba esta regla en
       todas las pantallas. Con main.container (0,1,1) la relacion se invierte. */
    main.container {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* El numero pasa a ser el boton */
    .sc-llamar {
        display: flex;
        justify-content: center;
        gap: .55rem;
        background: var(--scope-verde-bg);
        border-radius: var(--sc-radius-sm);
        padding: .7rem .8rem;
        font-size: 1.05rem;
        font-weight: 700;
    }
    .sc-llamar:hover { text-decoration: none; }
    .sc-llamar svg { width: 18px; height: 18px; }
    .sc-llamar + .sc-llamar { margin-top: .35rem; }
}

/* ====================================================================
   TELEFONOS
   En una pantalla de 360px, una tabla de 8 columnas o se corta o obliga a
   arrastrar de costado perdiendo de vista quien es cada fila. Abajo de
   768px las tablas marcadas con .sc-tabla-movil dejan de ser tablas: cada
   fila pasa a ser una tarjeta y cada celda muestra su propio titulo,
   tomado del atributo data-titulo.
   ==================================================================== */
@media (max-width: 767.98px) {

    /* --- Tablas como tarjetas ---
       La fila pasa a ser una tarjeta y cada celda se acomoda segun su papel,
       no segun la columna en la que estaba:

         .sc-celda-titulo    el nombre, arriba de todo y sin etiqueta
         .sc-celda-chip      dato corto, como pastilla con su etiqueta adentro
         .sc-celda-suelta    la celda ya trae su propio chip, va sin envoltorio
         (sin clase)         renglon etiqueta / valor, para lo largo
         .sc-celda-acciones  los botones, al final y a lo ancho

       El orden lo fija `order` y no el HTML, asi la tarjeta se lee de arriba
       hacia abajo aunque en la tabla el nombre sea la segunda columna. */
    .sc-tabla-movil thead { display: none; }
    .sc-tabla-movil,
    .sc-tabla-movil tbody { display: block; width: 100%; }

    .sc-tabla-movil tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
        width: 100%;
        background: var(--sc-surface);
        border: 1px solid var(--sc-border);
        border-radius: var(--sc-radius);
        box-shadow: var(--sc-shadow);
        padding: .85rem .9rem;
        margin-bottom: .7rem;
    }
    .sc-tabla-movil tr:last-child { margin-bottom: 0; }
    .sc-tabla-movil.table-hover > tbody > tr:hover > * { background: transparent; }

    /* Caso general: renglon etiqueta / valor */
    .sc-tabla-movil td {
        order: 2;
        flex: 1 1 100%;
        border: none;
        padding: .15rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
    }
    .sc-tabla-movil td::before {
        content: attr(data-titulo);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--sc-text-faint);
        text-align: left;
        flex: none;
    }

    /* --- El nombre --- */
    .sc-tabla-movil td.sc-celda-titulo {
        order: 0;
        display: flex;
        align-items: center;
        /* Sin esto hereda el space-between de la celda base y el nombre se va
           al borde derecho, lejos del circulo con la inicial. */
        justify-content: flex-start;
        gap: .6rem;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 650;
        line-height: 1.25;
        padding: 0 0 .15rem;
    }
    .sc-tabla-movil td.sc-celda-titulo::before { content: none; }
    /* El nombre lleva enlace a la ficha, pero una lista entera de nombres en
       rojo no deja ver donde estan las acciones. */
    .sc-tabla-movil td.sc-celda-titulo a { color: var(--sc-text); }
    .sc-tabla-movil td.sc-celda-titulo a:hover { color: var(--scope-red); }
    [data-theme="dark"] .sc-tabla-movil td.sc-celda-titulo a:hover { color: var(--scope-red-400); }

    /* La inicial en un circulo, cuando la fila la trae en data-inicial */
    .sc-tabla-movil td.sc-celda-titulo[data-inicial]::before {
        content: attr(data-inicial);
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(193, 18, 31, .10);
        color: var(--scope-red);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
        font-weight: 750;
        letter-spacing: 0;
        /* Los usuarios se llaman en minuscula ("adminvot1"): la inicial de un
           avatar se lee mejor en mayuscula. */
        text-transform: uppercase;
    }
    [data-theme="dark"] .sc-tabla-movil td.sc-celda-titulo[data-inicial]::before {
        background: rgba(255, 107, 120, .14);
        color: var(--scope-red-400);
    }

    /* --- Datos cortos: pastillas que envuelven --- */
    .sc-tabla-movil td.sc-celda-chip {
        order: 1;
        flex: 0 1 auto;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .55rem;
        border-radius: 6px;
        background: var(--sc-surface-2);
        border: 1px solid var(--sc-border);
        font-size: .8rem;
        text-align: left;
    }
    .sc-tabla-movil td.sc-celda-chip::before {
        font-size: .65rem;
        letter-spacing: .05em;
    }
    /* La pastilla ya es la caja: una etiqueta adentro no lleva la suya */
    .sc-tabla-movil td.sc-celda-chip .sc-tag {
        background: transparent;
        border: none;
        padding: 0;
        color: inherit;
        font-weight: 600;
    }

    /* La celda ya trae su chip de color: no hay que meterlo en otra caja */
    .sc-tabla-movil td.sc-celda-suelta {
        order: 1;
        flex: 0 1 auto;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: 0;
        text-align: left;
    }
    .sc-tabla-movil td.sc-celda-suelta::before { content: none; }

    /* --- Celda que necesita todo el ancho y varias lineas (estado + nota) --- */
    .sc-tabla-movil td.sc-celda-bloque {
        order: 2;
        flex: 1 1 100%;
        display: block;
        text-align: left;
        padding: .2rem 0;
    }
    .sc-tabla-movil td.sc-celda-bloque::before {
        display: block;
        margin-bottom: .25rem;
    }

    /* --- Celda con un formulario propio (el celular extra) --- */
    .sc-tabla-movil td.sc-celda-form {
        order: 3;
        flex: 1 1 100%;
        display: block;
        text-align: left;
        padding-top: .45rem;
    }
    .sc-tabla-movil td.sc-celda-form::before {
        display: block;
        margin-bottom: .3rem;
    }
    .sc-tabla-movil td.sc-celda-form form { display: flex !important; gap: .4rem; }
    .sc-tabla-movil td.sc-celda-form .form-control {
        flex: 1 1 auto;
        min-width: 0 !important;
    }
    .sc-tabla-movil td.sc-celda-form .btn { flex: none; }

    /* --- Botones: al final y a lo ancho, para el pulgar --- */
    .sc-tabla-movil td.sc-celda-acciones {
        order: 9;
        flex: 1 1 100%;
        display: block;
        text-align: left;
        padding-top: .6rem;
        margin-top: .2rem;
        border-top: 1px solid var(--sc-border-soft);
    }
    .sc-tabla-movil td.sc-celda-acciones::before { content: none; }
    .sc-tabla-movil td.sc-celda-acciones .btn { width: 100%; margin-bottom: .35rem; }
    .sc-tabla-movil td.sc-celda-acciones .btn:last-child { margin-bottom: 0; }
    .sc-tabla-movil td.sc-celda-acciones form { display: block !important; }
    /* Un campo dentro de las acciones (el celular al agregar) ocupa el ancho */
    .sc-tabla-movil td.sc-celda-acciones .form-control {
        width: 100% !important;
        margin-bottom: .4rem;
    }

    /* Una celda vacia no deberia dejar una linea con el titulo solo */
    .sc-tabla-movil td:empty { display: none; }

    /* --- Filtros --- */
    .sc-filtros { padding: .85rem; }
    .sc-filtros .btn { width: 100%; }

    /* --- Encabezado de pagina --- */
    .sc-encabezado h1 { font-size: 1.25rem; }
    .sc-encabezado > a.btn,
    .sc-encabezado > div > a.btn { width: 100%; }

    /* --- Cifras del panel: dos por fila y mas compactas --- */
    .sc-stat { padding: .85rem .9rem; }
    .sc-stat-valor { font-size: 1.5rem; }
    .sc-stat-etiqueta { font-size: .66rem; }
    .sc-stat-pie { font-size: .72rem; }

    /* --- Barra superior --- */
    .sc-navbar .navbar-brand { font-size: .95rem; }
    .sc-campania { max-width: 150px; }

    /* --- Botones del semaforo: dos por fila y grandes ---
       Se tildan cientos por jornada y con una sola mano. Cuadricula de 2x2
       para que el dedo no dude entre dos estados pegados. */
    /* El !important pisa el .d-flex de Bootstrap, que tambien lo lleva */
    .sc-tabla-movil .sc-semaforo-botones {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem !important;
    }
    .sc-btn-semaforo { padding: .7rem .4rem; font-size: .88rem; }

    /* --- Solapas --- */
    .sc-solapas .nav-link { padding: .5rem .7rem; font-size: .92rem; }

    /* --- Paginacion --- */
    .pagination { flex-wrap: wrap; gap: .25rem; }

    /* Evita el zoom automatico de iOS al enfocar un campo */
    .form-control, .form-select { font-size: 16px; }
}

/* En tablet, las tablas siguen siendo tablas pero con scroll propio */
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
}
/* ==================== BANNER DE CONTEXTO ====================
   "Viendo votantes de X" / "Viendo equipo del Referente X".
   Va arriba de todo y con peso visual suficiente para que no se confunda
   con un filtro mas: cuando el listado esta acotado a una persona, eso es
   lo primero que hay que saber. */
.sc-contexto {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-left: 4px solid var(--scope-red);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
}
.sc-contexto .datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sc-contexto .que {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}
.sc-contexto .quien {
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--sc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* En telefono el boton baja y ocupa todo el ancho: al lado del nombre
       queda un blanco de pocos milimetros donde nadie acierta. */
    .sc-contexto { flex-wrap: wrap; }
    .sc-contexto .btn { width: 100%; margin-left: 0 !important; }
    .sc-contexto .quien { white-space: normal; }
}

/* ==================== BUSCADOR DEL PADRON ====================
   El padron es donde el proponente pasa el dia y buscar es lo unico que
   hace ahi. Antes el campo era una barra de filtros identica a la del resto
   del sistema y se perdia entre lo demas; ahora es el centro de la pantalla.

   Lo visual sale del retrato del candidato que cada campana tiene cargado,
   no de un archivo fijo: con varias campanas en la misma instalacion, una
   imagen fija mostraria el candidato equivocado. */
.sc-buscador {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow-lg);
    position: relative;
    overflow: hidden;
}
/* Franja de marca a la izquierda */
.sc-buscador::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--scope-red), var(--scope-red-700));
}

.sc-buscador-marca {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-surface-2);
    border: 2px solid var(--sc-border);
    color: var(--scope-red);
}
.sc-buscador-marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc-buscador-marca .sc-logo { width: 42px; height: 42px; }

.sc-buscador-form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.sc-buscador-titulo {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
    margin: 0;
}

/* Campo grande con la lupa adentro */
.sc-buscador-campo {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--sc-bg);
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 0 .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-buscador-campo:focus-within {
    border-color: var(--scope-red);
    box-shadow: 0 0 0 .2rem rgba(193, 18, 31, .15);
}
.sc-buscador-campo svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--sc-text-faint);
}
.sc-buscador-campo input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sc-text);
    font-size: 1.15rem;
    padding: .7rem 0;
    outline: none;
}
.sc-buscador-campo input::placeholder { color: var(--sc-text-faint); }

.sc-buscador-extra {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}
.sc-buscador-secc { width: 8.5rem; }
.sc-buscador-secc .form-label { font-size: .78rem; margin-bottom: .2rem; }
.sc-buscador-boton { min-width: 8rem; font-weight: 600; }

/* Las dos cifras de contexto del padron */
.sc-padron-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* Nombre con su inicial al lado, en los resultados */
.sc-persona {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* ============ ACCIONES DE LA FILA DEL PADRON ============
   El formulario de alta y el enlace a la ficha son dos elementos en
   linea: se alineaban por la base del texto y, con los dos campos
   apilados, Ficha quedaba veinte pixeles mas arriba que Agregar.
   Como fila flex se centran los dos con lo que tengan adentro. */
.sc-acciones-padron {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Justo: con .4rem la fila se pasaba dos pixeles del contenedor y
       aparecia una barra de desplazamiento por nada. */
    gap: .25rem;
}

/* En el telefono la fila es una tarjeta y la celda vuelve a ser un
   bloque a lo ancho, con los botones apilados para el pulgar.

   Los dos campos tienen que ocupar el ancho completo. Sin esto el
   contenedor se quedaba en su ancho de contenido, el boton de Agregar
   arrancaba donde terminaba ese bloque y con su width:100% se salia de
   la tarjeta: en pantalla se veia cortado contra el borde derecho. */
@media (max-width: 767.98px) {
    .sc-acciones-padron { display: block; }
    .sc-tabla-movil td.sc-acciones-padron .sc-campos-alta {
        display: flex !important;
        width: 100%;
    }
    .sc-tabla-movil td.sc-acciones-padron .sc-campos-alta .form-control {
        width: 100% !important;
    }

    /* El chip de "ya lo tiene" ocupa su propio renglon. Como pastilla en
       linea, el boton de Ficha que va debajo arrancaba donde terminaba el
       chip y, con su ancho al 100%, se salia de la tarjeta. */
    .sc-tabla-movil td.sc-acciones-padron > .sc-chip {
        display: flex;
        width: fit-content;
        margin-bottom: .45rem;
    }
}

/* Acciones de la fila: mas grandes que un btn-sm, que el dia de la
   eleccion se toca desde un telefono y con apuro */
.sc-btn-agregar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    padding: .45rem .9rem;
}
/* Un poco mas angosto que Agregar: es la accion secundaria de la fila,
   y esos tres pixeles son los que hacian que la tabla se pasara del
   contenedor y apareciera una barra de desplazamiento por nada. */
.sc-btn-ficha { padding: .45rem .8rem; }

@media (max-width: 991.98px) {
    /* En telefono la foto y el buscador se apilan: uno al lado del otro
       dejarian el campo demasiado angosto para escribir una cedula. */
    .sc-buscador {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        padding: 1.1rem;
    }
    .sc-buscador-marca {
        width: 68px;
        height: 68px;
        align-self: center;
    }
    .sc-buscador-campo input { font-size: 1.05rem; }
    .sc-buscador-extra { flex-wrap: wrap; }
    .sc-buscador-secc { width: 100%; }
    .sc-buscador-extra .btn { flex: 1 1 0; }
    .sc-btn-agregar, .sc-btn-ficha { width: 100%; justify-content: center; }
}



/* ==================== DESCARGAS POR FILA (PANEL) ====================
   Bajar el listado de un equipo o de una persona sin salir del panel.
   Van chicos y discretos: son un atajo, no la accion principal de la fila. */
.sc-acciones-fila {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.sc-mini-descarga {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    padding: .28rem .34rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text-muted);
    background: var(--sc-surface);
    text-decoration: none;
}
.sc-mini-descarga:hover {
    color: #fff;
    background: var(--scope-red);
    border-color: var(--scope-red);
    text-decoration: none;
}

@media (max-width: 991.98px) {
    /* En la vista de tarjetas de telefono la celda pierde el ancho fijo, asi
       que los tres botones se acomodan solos en la linea. */
    .sc-acciones-fila { flex-wrap: wrap; }
}

/* Variantes de tarjeta que faltaban, para los estados del semaforo.
   El dubitativo, el rojo y el que no responde necesitan su propio color:
   son estados de trabajo distintos y en el panel se leen de un vistazo. */
.sc-stat.es-ambar::before { background: var(--scope-ambar); }
.sc-stat.es-rojo::before  { background: var(--scope-red); }
.sc-stat.es-negro::before { background: var(--sc-text-faint); }
.sc-stat.es-ambar .sc-stat-valor { color: var(--scope-ambar); }
.sc-stat.es-rojo  .sc-stat-valor { color: var(--scope-red); }
[data-theme="dark"] .sc-stat.es-rojo .sc-stat-valor { color: var(--scope-red-400); }
.sc-stat.es-negro .sc-stat-valor { color: var(--sc-text-muted); }

/* ==================== COLUMNA DE NUMERACION ====================
   Numera el listado para poder decir "el 47 de la lista" en voz alta, que
   el dia de la eleccion se coordina por telefono. Angosta y en gris: es una
   referencia, no un dato del votante. */
.sc-col-nro {
    width: 3.2rem;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    /* En la vista de tarjetas el numero va arriba a la derecha, chico y sin
       etiqueta: como renglon propio ("# 47") ocuparia una linea entera para
       un dato que solo sirve de referencia. */
    .sc-tabla-movil td.sc-col-nro {
        position: absolute;
        top: .55rem;
        right: .75rem;
        width: auto;
        padding: 0;
        border: 0;
        font-size: .72rem;
        opacity: .55;
    }
    .sc-tabla-movil td.sc-col-nro::before { content: "#"; margin-right: .1rem; }
    .sc-tabla-movil tbody tr { position: relative; }
}

/* ==================== FIRMA "TEAM LB" ====================
   Acompana al logotipo en los tres lugares donde aparece: la barra
   superior, la cabecera de cada pantalla y el login.

   El tamano va en em y no en rem a proposito: asi la firma se escala sola
   con el logotipo que acompana, que mide 1.05rem en la barra y 1.75rem en
   el login. Con un tamano fijo habria que ajustarla en cada lugar.

   Tambien se reinicia el letter-spacing: el logotipo lo lleva muy abierto
   y heredado dejaba la firma con las letras desparramadas. */
.sc-marca-txt {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}
.sc-marca-lb {
    font-size: .52em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    opacity: .72;
    margin-top: .18em;
}

@media (max-width: 991.98px) {
    /* Con tres elementos la fila no entra en pantalla angosta. La identidad
       pasa a una linea propia y centrada: es lo que mas se mira de la
       cabecera, asi que se queda; lo que cede es el ancho, no la presencia.
       El corte va en 992 y no en 768 porque con las imagenes grandes los
       tres elementos empiezan a chocar bastante antes. */
    .sc-cabecera-marca {
        grid-template-columns: 1fr auto;
        row-gap: .75rem;
    }
    .sc-cabecera-identidad {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        --sc-identidad-alto: 34px;
        padding: .4rem 1rem;
        gap: .8rem;
    }
}

/* ==================== ATAJOS DEL PANEL ====================
   Las tarjetas que llevan a un listado se comportan como tales: cambian al
   pasar el mouse y muestran el cursor de enlace. Sin esa senal, un elemento
   clicable que parece un cartel no lo descubre nadie. */
.sc-stat.es-enlace {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sc-stat.es-enlace:hover {
    transform: translateY(-2px);
    box-shadow: var(--sc-shadow-lg);
    border-color: var(--scope-red);
}
/* La flechita aparece al pasar por la tarjeta: indica que lleva a otro lado
   sin competir con la cifra, que es lo que se viene a leer. */
.sc-stat.es-enlace::after {
    content: "›";
    position: absolute;
    top: .7rem;
    right: .9rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--sc-text-faint);
    opacity: 0;
    transition: opacity .12s ease;
}
.sc-stat.es-enlace:hover::after { opacity: 1; }

/* Bajar el detalle de una tarjeta del semaforo.
   Pastillas chicas: la tarjeta se viene a leer, no a operar, asi que los
   botones tienen que estar sin robarle el lugar a la cifra. El position
   relative no es decorativo -- los sube por encima del stretched-link. */
.sc-stat-bajar {
    position: relative;
    z-index: 2;
    display: flex;
    gap: .35rem;
    margin-top: .7rem;
}
.sc-bajar-mini {
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    padding: .1rem .5rem;
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    background: var(--sc-surface);
    color: var(--sc-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.sc-bajar-mini:hover,
.sc-bajar-mini:focus-visible {
    border-color: var(--scope-red);
    color: var(--scope-red);
}

/* Flecha para ir del desglose por seccional a su listado de votantes */
.sc-ir-listado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: .35rem;
    vertical-align: middle;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text-muted);
}
.sc-ir-listado:hover {
    color: #fff;
    background: var(--scope-red);
    border-color: var(--scope-red);
    text-decoration: none;
}

/* ==================== NOMBRE + USUARIO ====================
   "Ariel Caballero  acaballero". El nombre es como se lo conoce en la
   campana; el de acceso es con el que entra al sistema y hace falta para
   poder ayudarlo cuando algo le falla. Van juntos y jerarquizados: el
   nombre pesa, el usuario acompana.

   Cuando el usuario no tiene cargado su nombre real, la plantilla muestra
   solo el de acceso: repetirlo dos veces no aporta nada. */
.sc-persona-nombre {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .45rem;
    min-width: 0;
}
.sc-persona-nombre .nombre {
    font-weight: 600;
    color: var(--sc-text);
}
.sc-persona-nombre .usuario {
    font-size: .78em;
    color: var(--sc-text-faint);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ALCANCE POR SECCIONAL
   El recuadro donde se le arma el territorio a un Coordinador.
   ============================================================ */

.sc-panel-alcance {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    padding: .9rem 1rem;
    background: var(--sc-surface-2, rgba(255, 255, 255, .02));
}

/* Cuarenta y cinco casillas en una grilla y no en linea: en linea el
   ultimo renglon queda desparejo y cuesta encontrar un numero. Con la
   grilla siempre estan en el mismo lugar. */
.sc-seccionales {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
    gap: .35rem .5rem;
    transition: opacity .15s ease;
}

.sc-seccionales .sc-seccional-item {
    margin: 0;
    padding: .2rem .1rem;
}

.sc-seccionales .form-check-label {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   AUDITORIA
   ============================================================ */

/* La cuenta sin creador registrado no es un error: es lo que hay que
   poder ver. Se marca en gris y en cursiva para que se distinga de un
   nombre real sin gritar. */
.sc-sin-registro {
    color: var(--sc-text-muted, #8a8f98);
    font-style: italic;
}

/* El bloque del Coordinador en el panel: envuelve a sus equipos. */
.sc-bloque-coordinador {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    margin-bottom: .9rem;
    overflow: hidden;
}

.sc-bloque-coordinador > .cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    background: var(--sc-surface-2, rgba(255, 255, 255, .03));
    border-bottom: 1px solid var(--sc-border);
}

.sc-bloque-coordinador > .cabecera .nombre {
    font-weight: 600;
}

.sc-bloque-coordinador > .cuerpo {
    padding: .6rem .9rem .9rem;
}

/* ============================================================
   BOTONES DESHABILITADOS
   Bootstrap los atenua con opacity .65, que sobre el tema
   oscuro casi no se distingue: el boton sigue pareciendo
   pulsable. En un telefono, el dia de la eleccion, eso es un
   toque perdido y una duda. Se los apaga de verdad y se marca
   el cursor.
   ============================================================ */

.btn:disabled,
.btn.disabled {
    opacity: .38;
    cursor: not-allowed;
    filter: grayscale(.6);
}

/* ============ DESHACER EL SEMAFORO ============
   Deliberadamente apagado: es la salida para el error de dedo, no una
   opcion mas del semaforo. Si compitiera visualmente con Verde o Rojo,
   se terminaria usando como un estado. */
.sc-deshacer {
    font-size: .78rem;
    text-decoration: none;
    border: 0;
    /* Alto de clic sin peso visual. Antes llevaba .p-0 en la plantilla y
       quedaba en 19px: se ve bien y se acierta mal. */
    padding: .2rem .15rem;
}

.sc-deshacer:hover {
    color: var(--scope-red) !important;
    text-decoration: underline;
}

/* En el telefono la fila es una tarjeta y el enlace pegado al borde es
   dificil de acertar: se le da alto de dedo sin volverlo un boton. */
@media (max-width: 768px) {
    .sc-deshacer { padding: .35rem 0 !important; font-size: .85rem; }
}

/* ============ IR A LA COLA DE UN OPERADOR ============
   Enlace dentro de una tabla de numeros. Sin subrayado permanente para
   no ensuciar el cuadro, pero con color de enlace: una celda que se
   puede tocar y no se distingue de una que no, no se toca nunca. */
.sc-ver-cola {
    color: inherit;
    text-decoration: none;
}

.sc-ver-cola:hover,
.sc-ver-cola:focus-visible {
    color: var(--scope-red);
    text-decoration: underline;
}

/* El nombre del operador es el enlace principal: ahi si conviene que se
   note de entrada, porque es por donde se entra. */
td .sc-ver-cola .nombre { text-decoration: underline dotted; text-underline-offset: .2em; }
/* El .nombre trae color propio de .sc-persona-nombre, que le gana al
   heredado del enlace: el hover hay que pintarlo sobre el span. */
td .sc-ver-cola:hover .nombre,
td .sc-ver-cola:focus-visible .nombre {
    color: var(--scope-red);
    text-decoration: underline;
}

/* ============ OBSERVACION DEL PROPONENTE ============
   La nota que quien cargo al votante le dejo a quien lo va a llamar.
   Puede haber hasta tres, una por proponente, asi que cada una lleva
   su autor: sin eso, dos notas seguidas se leen como una sola. */
.sc-obs {
    font-size: .82rem;
    line-height: 1.35;
    padding: .3rem .5rem;
    margin-bottom: .3rem;
    border-left: 2px solid var(--sc-border);
    background: rgba(128, 128, 128, .06);
    border-radius: 0 .25rem .25rem 0;
}

.sc-obs:last-child { margin-bottom: 0; }

.sc-obs .texto {
    display: block;
    font-style: italic;
}

.sc-obs .autor {
    display: block;
    font-size: .74rem;
    color: var(--sc-text-faint);
}

.sc-obs .autor::before { content: "\2014\00a0"; }


/* ============ GUARDAR DE LAS CELDAS CON FORMULARIO ============
   En Mi lista hay dos formularios por fila -- el celular y la
   observacion -- y dos botones que dicen "Guardar" se comian el ancho
   que necesitaban los campos: la fila terminaba pasandose del
   contenedor y el boton de Quitar quedaba fuera de la pantalla.

   En la tabla queda solo el tilde. En el telefono, donde cada fila es
   una tarjeta y sobra lugar, vuelve la palabra: ahi el icono suelto se
   confunde con "marcar como hecho". */
.sc-btn-guardar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding-inline: .5rem;
    /* Del alto de la casilla que tiene al lado. Con el alto propio, el
       boton del tilde quedaba cuatro pixeles mas bajo: poco para notarlo
       de entrada y suficiente para que la fila se vea despareja. */
    align-self: stretch;
}

.sc-solo-movil { display: none; }

@media (max-width: 767.98px) {
    .sc-solo-movil { display: inline; }
    .sc-btn-guardar { padding-inline: .75rem; }
}


/* ============ CELDA CON DOS FORMULARIOS APILADOS ============
   En Mi lista, el celular y la observacion comparten columna. Cada uno
   guarda por su cuenta -- el celular es del votante y lo comparten los
   proponentes, la nota es de uno solo -- asi que son dos formularios y
   hace falta decir cual es cual sin gastar una cabecera por campo. */
.sc-celda-doble { min-width: 19rem; }

.sc-mini-etiqueta {
    flex: none;
    width: 2.1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}

.sc-celda-doble .form-control { flex: 1 1 auto; min-width: 0; }

/* En el telefono la fila ya es una tarjeta a lo ancho: las etiquetitas
   sobran porque cada campo tiene lugar de sobra, pero se dejan porque
   sin ellas dos casillas iguales una encima de la otra no se
   distinguen. */
@media (max-width: 767.98px) {
    .sc-celda-doble { min-width: 0; }
    .sc-celda-doble form + form { margin-top: .4rem !important; }
}

/* ============ A QUE LISTA SE CARGA ============
   Solo aparece para el Administrador, dentro del buscador del padron.
   Ancho acotado: es una eleccion que se hace una vez, no el campo
   principal de la pantalla, y a lo ancho competiria con la busqueda. */
.sc-buscador-destino {
    margin-top: .6rem;
    max-width: 22rem;
}

.sc-buscador-destino .form-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}

@media (max-width: 767.98px) {
    .sc-buscador-destino { max-width: none; }
}

/* ============ EL DETALLE DENTRO DEL MODAL ============
   El cuerpo del modal desplaza en vertical y .table-responsive en
   horizontal: son ejes distintos y conviven bien. No hay que sacarle el
   overflow a la tabla para "evitar dos barras" -- se probo, y con nueve
   columnas la tabla se sale del modal y se dibuja sobre la pagina. */

/* En el telefono cada votante es una tarjeta y ya trae su propio margen:
   el modal solo aporta un respiro contra el borde. */
@media (max-width: 767.98px) {
    #modalVotantesCuerpo .sc-detalle-votantes { padding: .6rem; }
}

/* ============ IMPORTAR VOTANTES ============ */

/* Los pasos del "como funciona": renglones separados, que se lean de un
   vistazo mientras se elige el archivo. */
.sc-pasos-importar li { margin-bottom: .55rem; line-height: 1.45; }
.sc-pasos-importar li:last-child { margin-bottom: 0; }

/* Las cedulas que no se encontraron. Van corridas y no en una tabla:
   pueden ser dos o doscientas, y lo unico que se hace con ellas es
   leerlas o copiarlas. */
.sc-cedulas-sueltas {
    max-height: 11rem;
    overflow-y: auto;
    font-size: .82rem;
    line-height: 1.7;
    padding: .6rem .75rem;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    word-break: break-word;
}

/* ============ ENLACE QUE SALE DEL SISTEMA ============
   El simulador del TSJE no es una pantalla de SCOPE: es una pagina del
   organismo electoral. La flechita lo dice antes de tocarlo, que es
   cuando importa. */
.sc-enlace-externo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.sc-enlace-externo svg { opacity: .55; }
.sc-enlace-externo:hover svg { opacity: 1; }

/* En la barra de abajo el icono es el del modulo y no la flecha: ahi
   todos los items se ven igual y una flecha de 11px no se distingue. */
.sc-nav-inferior .sc-enlace-externo { gap: 0; }
.sc-nav-inferior .sc-enlace-externo svg { opacity: 1; }

/* Una llamada de una tanda anterior: fecha, resultado y quien la hizo.
   En una sola linea para que tres de ellas no estiren la fila. */
.sc-llamada-previa {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}
.sc-llamada-previa:last-child { margin-bottom: 0; }

/* La tarjeta del listado que ya se puede cerrar: un borde verde
   alcanza para encontrarla entre varias sin tener que leerlas todas. */
.sc-tarjeta-listado.sc-listo {
    border-color: var(--scope-verde);
}


/* ============ REPARTO AGRUPADO POR ARBOL ============
   La tabla de listados dejo de ser una lista plana: ahora va agrupada
   por Coordinador y Referente, porque para repartir hace falta saber de
   quien depende cada Puntero -- la gente de un mismo Referente se
   conoce entre si y conviene que la llame el mismo operador.

   La cabecera de rama es una fila mas de la misma tabla y no una tabla
   por equipo: con tablas separadas cada una calcula sus anchos por su
   cuenta y las columnas dejan de alinearse entre ramas. */
.sc-fila-rama > td {
    background: var(--sc-border-soft);
    border-top: 2px solid var(--sc-border);
    padding: .4rem .75rem;
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* La cabecera de rama: el nombre del equipo y, al lado, el informe de todo
   el equipo. El flex va en un div adentro del td y no en el td: un td con
   display:flex se sale de la tabla y pierde el ancho de la fila.

   Los botones van pegados al nombre y no contra el borde derecho. Contra el
   borde quedaban en la columna Informe pero corridos unos pixeles de los de
   cada fila -- la celda de la fila los alinea a la izquierda de sus 8rem y
   la cabecera al final de las once columnas, asi que nunca iban a coincidir
   del todo. Al lado del titulo no hay nada con que desalinearse, y ademas se
   lee de una que ese informe es del grupo y no de la fila siguiente. En
   pantalla angosta, donde esta tabla scrollea de costado, es lo unico que
   funciona: contra el borde derecho habia que arrastrar mil pixeles para
   descubrirlos. */
/* ==================== EL ARBOL DEL PANEL ====================
   Donde termina un equipo tiene que verse. Antes, con los integrantes
   desplegados, las filas de dos equipos seguidos se pegaban y no habia
   forma de saber de quien era cada Puntero: por eso se dudaba de si el
   arbol estaba bien armado cuando en realidad lo estaba. */

/* Cada equipo es un tbody. La linea gruesa de abajo lo cierra. */
.sc-equipo {
    border-bottom: 2px solid var(--sc-border);
}
.sc-equipo:last-child {
    border-bottom: 0;
}
/* Y una barra de color a la izquierda de la cabecera, para que el ojo
   agarre el principio del equipo sin tener que leer. */
.sc-equipo-cabecera > td:first-child {
    border-left: 3px solid var(--scope-red);
}
.sc-equipo-cabecera > td {
    background: var(--sc-border-soft);
}

/* El renglon que cierra el desglose. Dice de quien era el equipo que
   acaba de terminar: con quince integrantes, para cuando se llega abajo
   ya no se acuerda uno de a quien pertenecian. */
.sc-fin-equipo {
    padding: .35rem .9rem .6rem;
    font-size: .74rem;
    color: var(--sc-text-faint);
    text-align: right;
    border-top: 1px dashed var(--sc-border);
}

/* La lista propia del Coordinador, en su cabecera. Es su lista, no un
   equipo suyo, y por eso va arriba y no adentro. */
.sc-lista-propia {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .35rem .12rem .55rem;
    border: 1px dashed var(--sc-border);
    border-radius: 999px;
    font-size: .78rem;
}
.sc-lista-propia .etiqueta {
    color: var(--sc-text-faint);
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .06em;
}

/* Un renglon, no un parrafo: es una aclaracion de borde y ocupaba mas que
   la informacion de los Coordinadores que si tienen equipos. */
.sc-sin-equipos {
    padding: .3rem .9rem .55rem;
    font-size: .74rem;
    color: var(--sc-text-faint);
}

/* ==================== EQUIPOS PLEGABLES (REPARTO) ====================
   Los listados se esconden solo si hay JavaScript. Con la clase puesta por
   el propio documento antes de pintar la tabla no hay parpadeo, y si el JS
   no corre la pantalla se ve entera como antes en vez de quedar vacia. */
.sc-con-js tr.sc-fila-listado[data-de-rama] { display: none; }
.sc-con-js tr.sc-fila-listado[data-de-rama].esta-abierta { display: table-row; }
.sc-solo-con-js { display: none; }
.sc-con-js .sc-solo-con-js { display: flex; }

/* La cabecera entera es el boton: un area chica para tocar, en una fila de
   tabla y sobre todo en un telefono, se falla mas de lo que se acierta. */
.sc-rama-boton {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .72rem .85rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
    /* Despues de font:inherit, que trae los .8rem del td de la fila. La
       cabecera dejo de ser un rotulo y paso a ser el control principal de
       la pantalla: tiene que leerse y tocarse como tal. */
    font-size: .95rem;
    cursor: pointer;
}
.sc-rama-boton:hover { background: var(--sc-border); }
.sc-rama-boton:focus-visible {
    outline: 2px solid var(--scope-red);
    outline-offset: -2px;
}
.sc-rama-chevron {
    display: inline-block;
    flex: none;
    width: 1.05rem;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--sc-text-faint);
    transition: transform .12s ease;
}
.sc-rama-boton[aria-expanded="true"] .sc-rama-chevron { transform: rotate(90deg); }
.sc-rama-nombre { flex: none; }

/* En Llamadas la cabecera lleva el boton de plegar y, al lado, los dos
   enlaces del informe del equipo. El boton se estira para que toda la
   franja sirva para abrir, menos los enlaces. */
.sc-rama-linea > .sc-rama-boton { flex: 1 1 auto; min-width: 0; }
.sc-rama-linea > .sc-rama-informe { padding-right: .75rem; }

/* Los numeros del grupo cerrado. Van a la derecha y en minuscula: son de
   apoyo, el que manda es el nombre del equipo. */
.sc-rama-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}
.sc-rama-dato {
    font-size: .84rem;
    color: var(--sc-text-muted);
    white-space: nowrap;
}
.sc-rama-dato.es-libre {
    color: var(--scope-verde);
    font-weight: 600;
}
.sc-rama-dato.es-quieto { color: var(--sc-text-faint); }

@media (max-width: 767.98px) {
    /* En pantalla angosta los numeros pasan abajo del nombre: apretados en
       la misma linea, el nombre del equipo se partia letra por letra. */
    .sc-rama-boton { flex-wrap: wrap; }
    .sc-rama-datos { margin-left: 1.45rem; width: 100%; }
}

.sc-rama-linea {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
}
.sc-rama-informe {
    display: inline-flex;
    gap: .25rem;
    flex: none;
    text-transform: none;
    letter-spacing: 0;
}

.sc-rama-coord   { color: var(--sc-text-muted); }
.sc-rama-flecha  { color: var(--sc-text-faint); margin: 0 .15rem; }
.sc-rama-equipo  { font-weight: 600; color: var(--sc-text); }

/* Quien no cuelga de nadie encabeza su propia rama. No es un dato que
   falte, asi que se aclara en vez de dejar el lugar vacio. */
.sc-rama-nota {
    text-transform: none;
    letter-spacing: 0;
    color: var(--sc-text-faint);
    font-style: italic;
    margin-left: .4rem;
}

/* La nota que se le cargo al usuario en su alta. Va debajo del nombre y
   no en una columna propia: casi siempre esta vacia, y una columna vacia
   en veinte filas roba ancho a lo que si se mira. */
.sc-nota-usuario {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    line-height: 1.3;
    font-style: italic;
    color: var(--sc-text-muted);
}


/* ============ QUITAR DE UNA LISTA AJENA (Dia D, Administrador) ============
   La barra se distingue del resto de la pantalla porque lo que hace no se
   deshace: si se lee como un filtro mas, se aprieta sin mirar. */
.sc-quitar {
    border-color: var(--scope-red);
}

.sc-quitar .sc-titulo-seccion {
    color: var(--scope-red);
}

/* La columna de las casillas: lo mas angosta posible, que el ancho lo
   necesitan el nombre y la mesa. */
.sc-col-tilde {
    width: 2.25rem;
    text-align: center;
    vertical-align: middle;
}


/* ============ DESGLOSE POR LISTADO (Resumen del Call Center) ============
   Se abre debajo de la fila del operador. Va con fondo propio y sin
   bordes de tabla para que se lea como un detalle de esa fila y no como
   mas renglones del cuadro. */
.sc-fila-desglose > td {
    background: transparent;
}

.sc-desglose {
    background: var(--sc-border-soft);
    border-left: 3px solid var(--scope-red);
    padding: .6rem .9rem .7rem;
}

.sc-desglose-titulo {
    font-size: .8rem;
    color: var(--sc-text-muted);
    margin-bottom: .35rem;
}

.sc-desglose-tabla > tbody > tr > td,
.sc-desglose-tabla > tr > td {
    background: transparent;
    border: 0;
    padding: .2rem .4rem;
    vertical-align: middle;
}

.sc-desglose-nombre {
    font-weight: 600;
}


/* ============ VERDE CERRADO ============
   El votante sigue en la bandeja porque es contexto de la lista, pero su
   resultado ya no esta en juego. Se distingue del resto con un fondo
   propio: sin eso, una fila sin botones se lee como que la pantalla
   fallo. */
.sc-sellado {
    padding: .4rem .55rem;
    border-left: 3px solid var(--scope-verde);
    background: rgba(128, 128, 128, .06);
    border-radius: 0 .25rem .25rem 0;
}


/* ============ CELDA DE VOTANTES EN REPARTO ============
   Dos bloques apilados y alineados a la derecha: las cifras arriba y el
   boton de "nuevos" abajo. Como celda de texto con text-end, el boton
   quedaba dentro del flujo del parrafo -- heredaba la monoespaciada y su
   linea base no cerraba con la de los numeros. */
.sc-votantes-caja {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}

/* Mismo alto que los otros botones chicos de la tabla, y con la
   tipografia de la interfaz: dentro de una celda monoespaciada, un boton
   en mono se lee como un dato y no como algo que se pueda tocar. */
.sc-btn-nuevos {
    font-family: var(--bs-body-font-family);
    font-size: .75rem;
    line-height: 1.2;
    padding: .2rem .5rem;
    white-space: nowrap;
}

/* La columna de avance: la barra es lo primero que sobra cuando la
   pantalla se angosta, porque el porcentaje de al lado dice lo mismo. */
.sc-celda-avance { min-width: 7rem; }

@media (max-width: 991.98px) {
    .sc-barra-avance { display: none; }
    .sc-celda-avance { min-width: 0; }
    .sc-avance-pct { min-width: 0 !important; }
}

/* ==================== CIFRAS TAPADAS ====================
   Las tres tarjetas del avance del dia le llegan tapadas al
   Administrador. El numero y los puntitos viajan los dos en el HTML y
   el CSS elige cual se ve: alternar una clase en la fila es una sola
   operacion, y destapar no tiene que pedirle nada al servidor.

   El alto lo sigue marcando .sc-stat-valor, asi que al destapar no se
   mueve nada de lugar.
*/
.sc-cifras.esta-tapado .sc-cifra          { display: none; }
.sc-cifras:not(.esta-tapado) .sc-cifra-tapada { display: none; }

.sc-cifra-tapada {
    color: var(--sc-text-faint);
    letter-spacing: .06em;
    user-select: none;
}

/* El ojo. Chico y sin marco, como el de las contrasenas pero sin el
   input-group alrededor: aca no acompana a un campo sino a una fila. */
.sc-cifras-ojo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .35rem;
}
/* ==================== SECCION QUE SE DESPLIEGA ====================
   El titulo pasa a ser el boton: toda la franja es clickeable, que es
   mas facil de acertar que una flecha de dieciseis pixeles. Se dibuja
   como el titulo de seccion de siempre para que, abierta, la pantalla
   se vea igual que antes.
   ================================================================== */
.sc-seccion-plegable {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: .5rem;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}
.sc-seccion-plegable:hover { color: var(--sc-text); }
.sc-seccion-plegable:focus-visible {
    outline: 2px solid var(--scope-red);
    outline-offset: 3px;
    border-radius: 4px;
}
/* La flecha apunta a la derecha cerrada y baja al abrir. */
.sc-seccion-plegable .sc-flecha {
    flex: none;
    transition: transform .15s ease;
}
.sc-seccion-plegable[aria-expanded="true"] .sc-flecha { transform: rotate(90deg); }

/* Cuantas tarjetas hay detras, para que cerrado se sepa que hay algo. */
.sc-seccion-plegable .sc-cuantas {
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    opacity: .75;
}

/* Quien marco el voto y cuando, debajo del chip "Voto". Chico y
   apagado: es el dato de respaldo, no el que se lee de un vistazo. */
.sc-marco-voto {
    margin-top: .25rem;
    font-size: .72rem;
    line-height: 1.25;
    color: var(--sc-text-faint);
}
.sc-marco-voto .sc-cuando {
    display: block;
    font-variant-numeric: tabular-nums;
}

.sc-ojo-cifras {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .45rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-text-muted);
    line-height: 0;
    cursor: pointer;
}
.sc-ojo-cifras:hover  { color: var(--sc-text); border-color: var(--sc-text-faint); }
.sc-ojo-cifras:focus-visible { outline: 2px solid var(--scope-red); outline-offset: 2px; }

/* ==================== LINEA DE TIEMPO DE AUDITORIA ====================
   Una fila por accion, con el punto de color a la izquierda y la hora
   pegada a el. El hilo vertical es un borde del contenedor y no un
   elemento aparte: asi no hay nada que alinear cuando la fila crece
   porque la observacion ocupa dos renglones.
*/
.sc-linea {
    position: relative;
}
.sc-linea-dia {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.1rem 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}
.sc-linea-dia:first-child { margin-top: 0; }
.sc-linea-dia .cuantas {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sc-text-faint);
}

.sc-hecho {
    display: grid;
    grid-template-columns: 1rem 3.2rem minmax(9rem, auto) minmax(10rem, 1fr);
    align-items: baseline;
    gap: .1rem .7rem;
    padding: .3rem 0 .3rem .2rem;
    border-left: 2px solid var(--sc-border);
    margin-left: .45rem;
    padding-left: .9rem;
    font-size: .86rem;
}
.sc-hecho-punto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--sc-text-faint);
    margin-left: -1.22rem;
    align-self: center;
}
.sc-hecho-punto.es-verde { background: var(--scope-verde); }
.sc-hecho-punto.es-marca { background: var(--scope-red); }
.sc-hecho-punto.es-frio  { background: var(--scope-frio); }
.sc-hecho-punto.es-ambar { background: var(--scope-ambar, #d9a406); }
.sc-hecho-punto.es-rojo  { background: var(--scope-red); }
[data-theme="dark"] .sc-hecho-punto.es-rojo { background: var(--scope-red-400); }
.sc-hecho-punto.es-gris  { background: var(--sc-text-faint); }

.sc-hecho-hora   { color: var(--sc-text-faint); font-size: .8rem; }
.sc-hecho-que    { color: var(--sc-text-muted); }
.sc-hecho-sobre  { font-weight: 600; min-width: 0; }
.sc-hecho-cedula { font-weight: 400; font-size: .78em; color: var(--sc-text-faint); }
/* Con la especificidad del padre: el tema oscuro pinta TODOS los <a> de
   rojo con [data-theme="dark"] a, que le gana a una sola clase. Sesenta
   nombres en rojo en una misma pantalla se leen como una alarma. */
.sc-hecho .sc-hecho-enlace {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--sc-border);
}
.sc-hecho .sc-hecho-enlace:hover { color: var(--scope-red); border-bottom-color: currentColor; }
[data-theme="dark"] .sc-hecho .sc-hecho-enlace:hover { color: var(--scope-red-400); }
.sc-hecho-detalle {
    grid-column: 3 / -1;
    font-size: .82rem;
    color: var(--sc-text-muted);
    font-style: italic;
}

/* En el telefono no entran cuatro columnas: cada dato en su renglon. */
@media (max-width: 720px) {
    .sc-hecho { grid-template-columns: 1rem 3.2rem 1fr; }
    .sc-hecho-sobre, .sc-hecho-detalle { grid-column: 2 / -1; }
}

/* Las barritas de actividad por dia. */
.sc-barras-dias {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 54px;
}
.sc-barra-dia {
    flex: 1 1 auto;
    min-width: 3px;
    /* Con un solo dia de actividad, sin tope la barra se estira de lado a
       lado y se lee como un cartel, no como un grafico. */
    max-width: 2.5rem;
    background: var(--scope-red);
    opacity: .75;
    border-radius: 2px 2px 0 0;
}
.sc-barra-dia:hover { opacity: 1; }

/* El nombre de la tabla de auditoria, que abre su historia. */
td .sc-persona-enlace { text-decoration: none; color: inherit; }
td .sc-persona-enlace:hover .nombre { color: var(--scope-red); text-decoration: underline; }
[data-theme="dark"] td .sc-persona-enlace:hover .nombre { color: var(--scope-red-400); }

/* ==================== ELEGIR EN UNA LISTA LARGA ====================
   El buscador que reemplaza al desplegable de "cargar a la lista de".
   Lo arma scope-elegir.js a partir del <select>, que queda escondido
   adentro de .sc-elegir y es el que se envia.
*/
.sc-elegir {
    position: relative;
}
.sc-elegir-campo {
    /* Espacio a la derecha para el chevron dibujado con el fondo. */
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .8rem;
}

.sc-elegir-lista {
    /* fixed y no absolute: el buscador del padron esta dentro de un
       contenedor con overflow:hidden y ahi una lista absolute se corta.
       La ubica scope-elegir.js. */
    position: fixed;
    z-index: 1060;
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.sc-elegir-opcion {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .45rem;
    padding: .38rem .55rem;
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-size: .88rem;
}
.sc-elegir-opcion .nombre  { font-weight: 600; color: var(--sc-text); }
.sc-elegir-opcion .usuario {
    font-size: .78em;
    color: var(--sc-text-faint);
    font-variant-numeric: tabular-nums;
}
.sc-elegir-opcion .sc-chip { margin-left: auto; }

.sc-elegir-opcion:hover,
.sc-elegir-opcion.es-marcada { background: var(--sc-hover, rgba(127, 127, 127, .12)); }

.sc-elegir-vacio {
    position: fixed;
    z-index: 1060;
    padding: .7rem .8rem;
    font-size: .85rem;
    color: var(--sc-text-muted);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

/* ==================== LO QUE FALTA EN ESTA TANDA ====================
   Un votante llamado en una vuelta anterior llega con su color puesto y
   en pantalla se ve igual que uno ya trabajado; el operador sigue de
   largo y despues el listado no cierra. La franja y el aviso son para
   que eso se vea sin tener que leer la hora del ultimo llamado.
*/
.sc-fila-pendiente > td:first-child {
    box-shadow: inset 3px 0 0 var(--scope-ambar, #d9a406);
}
.sc-fila-pendiente > td { background: rgba(217, 164, 6, .05); }

.sc-falta-aviso {
    display: block;
    margin-top: .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--scope-ambar, #d9a406);
}

/* En el telefono la tabla se apila y no hay primera celda que pintar. */
@media (max-width: 720px) {
    .sc-fila-pendiente > td:first-child { box-shadow: none; }
    .sc-fila-pendiente { box-shadow: inset 3px 0 0 var(--scope-ambar, #d9a406); }
}