/* ===== ESTILOS SISTEMA CONTROL ELECTORAL ===== */
:root {
    --primary: #1a3a5c;
    --primary-light: #2c5282;
    --accent: #e8b830;
    --accent-hover: #d4a520;
    --success: #38a169;
    --danger: #e53e3e;
    --danger-hover: #c53030;
    --bg: #f0f4f8;
    --card-bg: #ffffff;
    --text: #2d3748;
    --text-light: #718096;
    --border: #e2e8f0;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ===== HEADER ===== */
.header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header h1 span {
    color: var(--accent);
}

/* Botón menú hamburguesa */
.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
    line-height: 1;
}

.menu-toggle:hover {
    background: rgba(255,255,255,0.15);
}

/* ===== SIDEBAR / MENÚ LATERAL ===== */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh; /* fallback */
    height: 100dvh; /* viewport real en móvil (respetando barras del navegador) */
    max-height: 100dvh;
    background: var(--card-bg);
    z-index: 300;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease;
    overscroll-behavior: contain;
}

.sidebar.active {
    left: 0;
}

/* En móviles muy bajos el pie (Cerrar Sesión) debe ser siempre alcanzable:
   si el contenido no cabe, el footer queda fijo y el menú hace scroll interno. */
.sidebar-menu {
    list-style: none;
    padding: 0.75rem 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
}

.sidebar-header h2 {
    font-size: 1rem;
    font-weight: 700;
}

.sidebar-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.sidebar-close:hover { opacity: 1; }

.sidebar-menu {
    list-style: none;
    padding: 0.75rem 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-menu li {
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.88rem;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: #ebf4ff;
    color: var(--primary);
    border-left-color: var(--accent);
}

.sidebar-icon {
    font-size: 1rem;
    width: 1.4rem;
    text-align: center;
    align-self: flex-start;
    margin-top: 0.1rem;
}

/* Texto de dos líneas en enlaces del menú (título + descripción) */
.sidebar-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.sidebar-titulo {
    font-weight: 500;
    font-size: 0.88rem;
}
.sidebar-desc {
    font-size: 0.68rem;
    color: var(--text-light);
    font-weight: 400;
    margin-top: 0.1rem;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 1rem;
}

.sidebar-label {
    padding: 0.3rem 1.25rem 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

.sidebar-user-icon {
    font-size: 1.1rem;
}

.sidebar-user-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    color: var(--danger) !important;
}

.sidebar-logout:hover {
    background: #fff5f5 !important;
    border-left-color: var(--danger) !important;
}

.sidebar-footer {
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card-bg);
}

/* El botón de cerrar sesión siempre visible: subirlo si hay poco alto */
.sidebar-footer .sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    transition: margin-left 0.3s ease;
}

/* ===== MENÚ SIEMPRE VISIBLE en escritorio; solo se colapsa en móvil/tablet ===== */
@media (min-width: 1025px) {
    .menu-toggle { display: none; }        /* sin hamburguesa: el menú ya está fijo */
    .sidebar-close { display: none; }
    .sidebar-overlay { display: none; }
    /* El menú empieza DEBAJO del header (que ocupa todo el ancho) para no taparlo.
       --header-h lo calcula el JS de base.html. */
    .sidebar {
        left: 0;
        top: var(--header-h, 3.25rem);
        height: calc(100dvh - var(--header-h, 3.25rem));
        max-height: calc(100dvh - var(--header-h, 3.25rem));
        box-shadow: 1px 0 14px rgba(0,0,0,0.06);
    }
    .sidebar-header { display: none; }      /* el header principal ya está arriba */
    .main-content {
        margin-left: 280px;
        margin-right: auto;
        max-width: 1600px;
        padding: 2rem 1.75rem;
    }
    .footer { margin-left: 280px; }
}

/* ===== MENSAJES ===== */
.messages-container {
    margin-bottom: 1.5rem;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-success {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #c6f6d5;
}

.alert-error {
    background: #fff5f5;
    color: #9b2c2c;
    border: 1px solid #fed7d7;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ===== BARRA DE ACCIONES ===== */
.acciones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.acciones-header h2 {
    font-size: 1.75rem;
    color: var(--primary);
}

/* ===== BOTONES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); }

.btn-success {
    background: var(--success);
    color: white;
}
.btn-success:hover { background: #2f855a; transform: translateY(-1px); }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { background: var(--danger-hover); transform: translateY(-1px); }

.btn-warning {
    background: var(--accent);
    color: var(--primary);
}
.btn-warning:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--border);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

/* ===== GRID DE CANDIDATOS ===== */
.grid-candidatos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .grid-candidatos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .grid-candidatos { grid-template-columns: 1fr; }
}

/* ===== TARJETA DE CANDIDATO ===== */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.card-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #e2e8f0;
}

.card-foto-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255,255,255,0.6);
}

.card-body {
    padding: 1.25rem;
}

.card-body h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.card-tipo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent);
    color: var(--primary);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-partido {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #ebf4ff;
    color: var(--primary-light);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.card-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ===== GRID DE PARROQUIAS ===== */
.grid-parroquias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.parroquia-card .card-body {
    text-align: center;
}

.parroquia-icono {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.parroquia-card h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.parroquia-detalles {
    text-align: center;
    margin-bottom: 0.5rem;
}

.parroquia-detalles p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.parroquia-detalles p span {
    font-size: 1.1rem;
}

/* ===== GRID DE RECINTOS ===== */
.grid-recintos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.recinto-card .card-body {
    text-align: center;
}

.recinto-icono {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.recinto-card h3 {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

.recinto-detalles {
    text-align: left;
    margin-bottom: 0.5rem;
}

.recinto-detalles p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    color: var(--text);
    font-size: 0.95rem;
}

.recinto-detalles p span {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

.recinto-detalles .recinto-desc {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    color: var(--text-light);
    font-style: italic;
    font-size: 0.9rem;
}

/* ===== INDICADOR DE CAPACIDAD ===== */
.capacidad-indicador {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    background: #f0fff4;
    border: 1px solid #c6f6d5;
}

.capacidad-indicador.excede {
    background: #fff5f5;
    border-color: #fed7d7;
}

.capacidad-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.capacidad-fill {
    display: block;
    height: 100%;
    background: var(--success);
    border-radius: 4px;
    transition: width 0.3s;
}

.excede .capacidad-fill {
    background: var(--danger);
}

.capacidad-alerta {
    color: var(--danger);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== FILTROS ===== */
.filtros-bar {
    display: flex;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.filtro-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 200px;
}

.filtro-grupo label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.filtro-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ===== Layout de 2 columnas: contenido + columna DERECHA (resumen/filtros) ===== */
.layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 320px);
    gap: 1.25rem;
    align-items: start;
}
.layout-2col > .col-main { min-width: 0; }  /* evita que las tablas anchas desborden */
.layout-2col > .col-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 84px;
}

/* Tarjeta de la columna derecha (resumen, filtros…) */
.panel-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.pc-titulo {
    margin: 0;
    font-size: 0.95rem;
    color: var(--primary);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
}
.panel-card .filtro-grupo { min-width: 0; }
.panel-card .filtro-select { width: 100%; }
.pc-nota {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-light);
    line-height: 1.35;
}

/* ===== VENTANA MODAL (crear/editar usuario, etc.) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
    z-index: 500;
}
.modal-overlay.activo { display: flex; }
.modal-caja {
    background: var(--card-bg);
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: modalEntra 0.18s ease-out;
}
@keyframes modalEntra {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
}
.modal-cabecera h3 { margin: 0; font-size: 1.05rem; }
.modal-cerrar {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
}
.modal-cerrar:hover { background: rgba(255, 255, 255, 0.18); }
.modal-cuerpo { padding: 1.25rem; }
.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
    .modal-overlay { padding: 1rem; }
    .modal-cuerpo { padding: 1rem; }
}

/* ===== Tabla de usuarios: columna de acciones y de asignaciones ===== */
/* La columna de acciones se ajusta a su contenido y NUNCA se parte en varias
   filas (antes se comprimía y los botones salían apilados). */
.resultados-tabla th.col-acciones,
.resultados-tabla td.col-acciones {
    width: 1%;
    white-space: nowrap;
}
.acciones-fila {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
}
.acciones-fila .btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    gap: 0.25rem;
    flex: 0 0 auto;
}
/* Recintos/mesas: MÁXIMO 2 líneas por asignación. Si el texto es más largo se
   recorta con … (el texto completo se ve al pasar el ratón, por el title). */
.celda-asignaciones {
    font-size: 0.8rem;
}
.celda-asignaciones .asig-linea {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 340px;
    margin-bottom: 0.15rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.7em;   /* respaldo si el navegador no soporta line-clamp */
}

/* Las cifras del resumen se apilan dentro de la columna derecha */
.col-aside .dash-foot {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.col-aside .dash-foot .dash-sep { display: none; }
.col-aside .stats-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}
.col-aside .stat-mini { padding: 0.5rem 0.6rem; }
.col-aside .stat-mini .n { font-size: 1.05rem; }
.col-aside .stat-mini .l { font-size: 0.58rem; }

@media (max-width: 800px) {
    .layout-2col { grid-template-columns: 1fr; }
    /* Solo en pantallas muy estrechas la columna derecha sube arriba */
    .layout-2col > .col-aside { position: static; order: -1; }
}

/* ===== GRID DE MESAS ===== */
.grid-mesas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .grid-mesas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .grid-mesas { grid-template-columns: 1fr; }
}

.mesa-card {
    border-radius: 12px;
}

.mesa-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.mesa-numero {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    line-height: 1;
    gap: 1px;
}

.mesa-numero.masculino {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}

.mesa-numero.femenino {
    background: linear-gradient(135deg, #db2777, #be185d);
    box-shadow: 0 3px 10px rgba(219, 39, 119, 0.3);
}

.txt-masculino { color: #2563eb; font-weight: 600; }
.txt-femenino { color: #db2777; font-weight: 600; }

.mesa-info {
    width: 100%;
}

.mesa-info .mesa-recinto {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mesa-info .mesa-parroquia {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.mesa-info .mesa-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.mesa-info .mesa-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mesa-card .card-acciones {
    display: flex;
    gap: 0.5rem;
    margin: 0.25rem 0 0 0;
    padding: 0.75rem 0 0 0;
    border-top: 1px solid var(--border);
    width: 100%;
    justify-content: center;
}

.mesa-card .card-acciones .btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

/* ===== TABLA DE MESAS DENTRO DE RECINTO ===== */
.recinto-mesas {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.recinto-mesas h4 {
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.mesas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.mesas-table th {
    background: var(--bg);
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 2px solid var(--border);
}

.mesas-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.sin-mesas {
    color: var(--text-light);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.25rem 0;
}

/* ===== FORMULARIO ===== */
.form-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.form-card h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent);
}

/* Formulario ancho (usa todo el espacio lateral) */
.form-card-wide {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.form-card-wide h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent);
}

/* Rejilla de 2 columnas dentro de un formulario */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}

@media (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Caja de asignaciones */
.asignacion-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}

.asignacion-box .form-control[multiple] {
    min-height: 170px;
    font-size: 0.88rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
}

.form-control-file {
    padding: 0.5rem 0;
}

/* ===== FOTO ACTUAL EN FORMULARIO ===== */
.foto-actual {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.foto-miniatura {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.foto-actual small {
    color: var(--text-light);
    font-size: 0.8rem;
}

.form-acciones {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ===== CONFIRMAR ELIMINAR ===== */
.delete-card {
    max-width: 500px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
}

.delete-card .icono {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.delete-card h2 {
    color: var(--danger);
    margin-bottom: 1rem;
}

.delete-card p {
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.delete-card .candidato-info {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.delete-card .candidato-info strong {
    color: var(--danger);
}

.delete-acciones {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===== DASHBOARD INICIO ===== */
.home-dashboard {
    max-width: 900px;
    margin: 0 auto;
}

.welcome-card {
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

.welcome-card h2 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.welcome-card p {
    opacity: 0.9;
    font-size: 1.05rem;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.home-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.home-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.home-card h3 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.home-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex: 1;
}

.home-card-btn {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    border: 2px solid var(--primary);
    border-radius: 6px;
    transition: all 0.2s;
}

.home-card:hover .home-card-btn {
    background: var(--primary);
    color: white;
}

/* Tarjeta de "Poner todo en 0" */
.home-card-danger {
    border: 2px solid #fed7d7;
    background: #fff5f5;
}

.home-card-danger h3 {
    color: var(--danger);
}

.home-card-danger .home-card-btn {
    border-color: var(--danger);
    color: var(--danger);
}

.home-card-danger:hover {
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.18);
    border-color: var(--danger);
}

.home-card-danger:hover .home-card-btn {
    background: var(--danger);
    color: white;
}

/* ===== VACÍO ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.empty-state .icono {
    font-size: 5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* ===== FOOTER ===== */
.footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ===== SECCIÓN DE VOTOS ===== */
.voto-seccion-titulo {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
}

/* ===== INGRESO DE VOTOS (TABLA) ===== */
.votos-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.votos-tabla th {
    background: var(--primary);
    color: white;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
}

.votos-tabla td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.votos-tabla tbody tr:hover {
    background: #f7fafc;
}

.voto-foto-cell {
    width: 44px;
}

.voto-foto-tabla {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: block;
}

.voto-foto-placeholder-tabla {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
}

.voto-input-cell {
    width: 130px;
}

.voto-input-cell input {
    width: 110px;
    text-align: center;
}

/* Partido bajo el nombre (tabla de ingreso de votos) */
.voto-partido {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.25;
    margin-top: 0.1rem;
    overflow-wrap: anywhere;
}

/* Tabla de ingreso de votos: 3 columnas (foto | candidato+partido | votos).
   En pantallas pequeñas se fija el ancho de columnas para que nunca desborde. */
.votos-tabla-ingreso th:nth-child(1) { width: 48px; }
.votos-tabla-ingreso .voto-input-cell { width: 120px; }

@media (max-width: 560px) {
    .votos-tabla-ingreso { table-layout: fixed; }
    .votos-tabla-ingreso th:nth-child(1) { width: 40px; }
    .votos-tabla-ingreso .voto-foto-cell { width: 40px; }
    .votos-tabla-ingreso td { padding: 0.5rem 0.4rem; }
    .votos-tabla-ingreso .voto-foto-tabla,
    .votos-tabla-ingreso .voto-foto-placeholder-tabla { width: 32px; height: 32px; font-size: 0.85rem; }
    .votos-tabla-ingreso .voto-input-cell { width: 92px; }
    .votos-tabla-ingreso .voto-input-cell input { width: 80px; padding: 0.5rem 0.3rem; font-size: 0.95rem; }
    .votos-tabla-ingreso th:nth-child(2),
    .votos-tabla-ingreso td:nth-child(2) { overflow-wrap: anywhere; }
}

/* ===== BARRA DE TOTAL EN VIVO ===== */
.votos-total-bar {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.votos-total-info {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.votos-total-info span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.votos-progress-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.votos-progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 5px;
    transition: width 0.3s, background 0.3s;
    min-width: 0;
}

.votos-alerta {
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff5f5;
    color: var(--danger);
    border: 1px solid #fed7d7;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== RESULTADOS ===== */
.resultado-parroquia {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.resultado-parroquia h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

/* ── Ranking por parroquia (visible para Alcalde y Prefecto) ── */
.bloque-parroquias { margin-top: 1.5rem; }
.bp-head { margin-bottom: 1rem; }
.bp-head h3 {
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.2rem;
}
.bp-head span { font-size: 0.85rem; color: var(--text-light); }

.parroquias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
    gap: 1.25rem;
}
.parroquias-grid .resultado-parroquia {
    margin-bottom: 0;              /* el grid ya separa las tarjetas */
    padding: 1.1rem 1.25rem;
}

/* Cabecera compacta de cada parroquia */
.rp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--accent);
}
.rp-head h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.02rem;
    color: var(--primary);
}
.rp-ganador {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tabla más compacta dentro de las tarjetas de parroquia */
.parroquias-grid .ranking-tabla { font-size: 0.85rem; }
.parroquias-grid .ranking-tabla th,
.parroquias-grid .ranking-tabla td { padding: 0.4rem 0.5rem; }
.parroquias-grid .ranking-foto { width: 22px; height: 22px; }

.resultado-resumen {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.resumen-item {
    padding: 0.75rem 1.25rem;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.9rem;
}

.resumen-item strong {
    font-size: 1.1rem;
    color: var(--primary);
}

.resumen-item.ausentismo strong {
    color: var(--danger);
}

/* ===== DASHBOARD ===== */
.dash-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.dash-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    border: 1px solid #e8ecf1;
    border-left: 4px solid transparent;
    transition: box-shadow .2s, border-color .2s;
}

.dash-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.dash-alcalde { border-left-color: #2563eb; }
.dash-concejal { border-left-color: #7c3aed; }
.dash-prefecto { border-left-color: #b45309; }
.dash-alcalde.dash-active { border-color: #2563eb; border-left-width: 4px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.dash-concejal.dash-active { border-color: #7c3aed; border-left-width: 4px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.dash-prefecto.dash-active { border-color: #b45309; border-left-width: 4px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid; box-shadow: 0 0 0 3px rgba(180,83,9,.1); }

.dash-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dash-icon { font-size: 1.8rem; line-height: 1; }
.dash-title { font-size: 1rem; font-weight: 700; color: #1e293b; }
.dash-sub { font-size: .75rem; color: #94a3b8; }
.dash-pct {
    margin-left: auto;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -.5px;
}

.dash-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dash-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s ease;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.dash-fill-alcalde { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.dash-fill-concejal { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.dash-fill-prefecto { background: linear-gradient(90deg, #b45309, #f59e0b); }

/* Colores dinámicos según posición de la tarjeta (dignidades no fijas) */
.dash-row .dash-card:nth-child(1) { border-left-color: #2563eb; }
.dash-row .dash-card:nth-child(2) { border-left-color: #7c3aed; }
.dash-row .dash-card:nth-child(3) { border-left-color: #b45309; }
.dash-row .dash-card:nth-child(4) { border-left-color: #059669; }
.dash-row .dash-card:nth-child(5) { border-left-color: #db2777; }
.dash-row .dash-card:nth-child(6) { border-left-color: #0d9488; }
.dash-row .dash-card:nth-child(7) { border-left-color: #ca8a04; }
.dash-row .dash-card:nth-child(8) { border-left-color: #4f46e5; }
.dash-row .dash-card:nth-child(1) .dash-fill { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.dash-row .dash-card:nth-child(2) .dash-fill { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.dash-row .dash-card:nth-child(3) .dash-fill { background: linear-gradient(90deg, #b45309, #f59e0b); }
.dash-row .dash-card:nth-child(4) .dash-fill { background: linear-gradient(90deg, #059669, #10b981); }
.dash-row .dash-card:nth-child(5) .dash-fill { background: linear-gradient(90deg, #db2777, #f472b6); }
.dash-row .dash-card:nth-child(6) .dash-fill { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.dash-row .dash-card:nth-child(7) .dash-fill { background: linear-gradient(90deg, #ca8a04, #eab308); }
.dash-row .dash-card:nth-child(8) .dash-fill { background: linear-gradient(90deg, #4f46e5, #6366f1); }

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.dash-stat {
    text-align: center;
    padding: 6px 4px;
}

.ds-num {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.ds-ok  { color: #16a34a; }
.ds-nul { color: #ea580c; }
.ds-bla { color: #2563eb; }
.ds-emi { color: #1e293b; }
.ds-aus { color: #dc2626; }

.ds-lbl {
    display: block;
    font-size: .68rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 3px;
}

.dash-foot {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    border: 1px solid #e8ecf1;
    font-size: .85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.dash-foot b { color: #1e293b; }
.dash-sep { color: #cbd5e1; }

@media (max-width: 768px) {
    .dash-row { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* En el panel de tiempo real cada tarjeta solo muestra 3 cifras (el ausentismo va global) */
.dash-stats-3 { grid-template-columns: repeat(3, 1fr) !important; }
.dash-foot .dash-ausentes { color: #dc2626; font-weight: 600; }
.dash-foot .dash-ausentes b { color: #dc2626; font-size: 1.05rem; }

.resultados-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.resultados-tabla th {
    background: var(--primary);
    color: white;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.resultados-tabla td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.resultados-tabla tbody tr:hover {
    background: #f7fafc;
}

.recinto-fila {
    background: #f0f4f8 !important;
    border-top: 2px solid var(--primary);
}

.recinto-fila td {
    padding: 0.6rem 0.75rem !important;
}

.mesa-fila td:first-child {
    padding-left: 1.5rem !important;
    font-size: 0.82rem;
    color: var(--text-light);
}

.resultados-tabla tfoot {
    background: #ebf4ff;
    font-weight: 700;
}

.voto-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.voto-num.ausente {
    color: var(--danger);
}

/* ===== GANADOR BANNER ===== */
.ganador-banner {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: 0 3px 12px rgba(245,158,11,0.3);
}

.ranking-tabla td {
    vertical-align: middle;
}

.ranking-ganador {
    background: #fffbeb !important;
}

.ranking-ganador td:first-child {
    color: #d97706;
    font-size: 1.1rem;
}

.ranking-foto {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
    border: 2px solid var(--border);
}

/* ===== ESCAÑOS ===== */
.escanos-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-top: 2rem;
}

.escanos-section h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.escanos-subtitulo {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.escanos-tabla th:last-child {
    min-width: 200px;
}

.escanos-num {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
}

.electo-badge {
    display: inline-block;
    background: #f0fff4;
    color: #276749;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin: 0.15rem 0;
    border: 1px solid #c6f6d5;
}

/* ===== GRÁFICOS EN TIEMPO REAL ===== */
.graficos-header {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.graficos-header h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    text-align: center;
}

.graficos-resumen {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.resumen-card {
    padding: 0.6rem 1.25rem;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.resumen-card strong { color: var(--primary); font-size: 1.1rem; }
.resumen-card.ausente strong { color: var(--danger); }

.progress-bar-total {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
}

.progress-fill-total {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #48bb78);
    border-radius: 6px;
    transition: width 0.5s;
}

.graficos-grid {
    display: grid;
    /* minmax(0, 1fr) y NO "1fr": un 1fr equivale a minmax(auto, 1fr), así que un
       nombre de lista/alianza largo ensancha la columna y DESBORDA la tarjeta.
       Con minmax(0, …) las columnas se encogen y el texto se recorta con "…". */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .graficos-grid { grid-template-columns: minmax(0, 1fr); }
}

.grafico-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    min-width: 0;   /* impide que el contenido empuje la rejilla y desborde */
}

.grafico-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.grafico-titulo > span:first-child {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.ganador-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}

.ganador-badge small {
    font-weight: 400;
    opacity: 0.9;
}

.grafico-barras {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.barra-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.barra-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    min-width: 0;
    flex-wrap: nowrap;   /* el candidato SIEMPRE ocupa una sola línea */
}

.barra-foto {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.barra-foto-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}

.barra-posicion {
    background: var(--primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.barra-nombre {
    font-weight: 600;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-partido {
    color: var(--text-light);
    font-size: 0.78rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;      /* los nombres largos de lista/alianza se recortan con … */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-votos {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.barra-contenedor {
    height: 24px;
    background: var(--bg);
    border-radius: 6px;
    overflow: hidden;
}

.barra-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s;
    min-width: 0;        /* con 0 votos la barra queda vacía (antes salía un cuadrito) */
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.barra-fill.alcalde {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.barra-fill.prefecto {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}

.barra-fill.concejal {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
}

/* Variar color de barras según la tarjeta (dignidades dinámicas) */
.grafico-card:nth-child(2) .barra-fill { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.grafico-card:nth-child(3) .barra-fill { background: linear-gradient(90deg, #b45309, #f59e0b); }
.grafico-card:nth-child(4) .barra-fill { background: linear-gradient(90deg, #059669, #10b981); }
.grafico-card:nth-child(5) .barra-fill { background: linear-gradient(90deg, #db2777, #f472b6); }
.grafico-card:nth-child(6) .barra-fill { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.grafico-card:nth-child(7) .barra-fill { background: linear-gradient(90deg, #ca8a04, #eab308); }
.grafico-card:nth-child(8) .barra-fill { background: linear-gradient(90deg, #4f46e5, #6366f1); }

.barra-valor {
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    padding-right: 0.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== Tira de datos compactos dentro de una tarjeta de gráfico ===== */
.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.9rem;
}
.mini-stats b { color: var(--text); font-weight: 700; }

.graficos-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    color: var(--text-light);
}

/* ===== RESULTADOS: ámbito GLOBAL vs POR PARROQUIA ===== */
.dignidad-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    margin-left: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
}
.dignidad-chip.global { background: #e0f2fe; color: #0369a1; }
.dignidad-chip.parroquial { background: #fef3c7; color: #b45309; }
.tab-btn .dignidad-chip { margin-left: 0.2rem; }

.encabezado-dignidad {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-left: 5px solid var(--primary);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    margin: 1.25rem 0 0.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.encabezado-dignidad .ed-icono { font-size: 2rem; }
.encabezado-dignidad h3 { margin: 0; color: var(--primary); font-size: 1.35rem; }
.encabezado-dignidad .ed-desc { width: 100%; color: var(--text-light); font-size: 0.9rem; margin-top: 0.15rem; }
.encabezado-dignidad.parroquial { border-left-color: #b45309; }

.stats-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
    margin: 1rem 0;
}
.stat-mini {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-left: 4px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.stat-mini .n { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: #1e293b; font-variant-numeric: tabular-nums; }
.stat-mini .l { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; font-weight: 600; margin-top: 3px; }
.stat-mini.ok  { border-left-color: #16a34a; } .stat-mini.ok .n  { color: #16a34a; }
.stat-mini.nul { border-left-color: #ea580c; } .stat-mini.nul .n { color: #ea580c; }
.stat-mini.bla { border-left-color: #2563eb; } .stat-mini.bla .n { color: #2563eb; }
.stat-mini.emi { border-left-color: #7c3aed; } .stat-mini.emi .n { color: #7c3aed; }
.stat-mini.aus { border-left-color: #dc2626; } .stat-mini.aus .n { color: #dc2626; }
.stat-mini.ele { border-left-color: #0d9488; } .stat-mini.ele .n { color: #0d9488; }
.stat-mini.mes { border-left-color: #64748b; } .stat-mini.mes .n { color: #334155; }

.aviso-global {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    margin: 1rem 0;
    font-size: 0.92rem;
}
.aviso-global.parroquial { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.detalle-box { margin-top: 1.75rem; }
.detalle-box summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
    padding: 0.8rem 1.1rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    list-style: none;
    user-select: none;
}
.detalle-box summary::-webkit-details-marker { display: none; }
.detalle-box summary:hover { background: #eff6ff; }
.detalle-box[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 2px solid var(--accent); }
.detalle-box .detalle-contenido { padding-top: 1.1rem; }

/* ===== ACTUALIZACIÓN EN VIVO ===== */
.auto-refresh-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin: 0.9rem 0;
    font-size: 0.85rem;
    font-weight: 600;
}
.auto-refresh-bar.paused { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
.auto-refresh-bar .punto {
    width: 9px; height: 9px; border-radius: 50%;
    background: #10b981; display: inline-block; margin-right: 0.35rem;
    animation: latido 1.4s infinite;
}
.auto-refresh-bar.paused .punto { background: #94a3b8; animation: none; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.auto-refresh-bar .boton-en-vivo { margin-left: auto; }

/* Panel que se actualiza vía AJAX (fade suave, sin recargar página) */
.panel-ajax { transition: opacity 0.25s ease; }
.panel-ajax.updating { opacity: 0.45; pointer-events: none; }

/* Estado "en espera" discreto en tarjetas de gráficos (sin anillo naranja) */
.chip-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #eef2f7;
    color: #64748b;
    border: 1px solid #dbe2ea;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.grafico-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.6rem 1rem;
    text-align: center;
    color: var(--text-light);
}
.grafico-vacio .gv-icono { font-size: 2.3rem; opacity: 0.45; line-height: 1; }
.grafico-vacio p { margin: 0; font-size: 0.95rem; font-weight: 500; }

/* ===== RESPONSIVE / PREVENIR DESBORDES EN MÓVIL ===== */
/* Contenedor para tablas anchas: permite scroll horizontal solo si es necesario */
.tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabla-scroll table { min-width: 0; }

/* Resumen de conteos (inspección) responsivo */
.resumen-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.resumen-stat {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.25rem 0.5rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.resumen-stat .rs-icono { font-size: 2rem; margin-bottom: 0.5rem; }
.resumen-stat .rs-num { font-size: 1.5rem; font-weight: 700; }
.resumen-stat .rs-lbl { color: var(--text-light); font-size: 0.85rem; }

@media (max-width: 768px) {
    .main-content { padding: 1.25rem 0.9rem; }
    .acciones-header h2 { font-size: 1.35rem; }
    .filtro-grupo { min-width: 100%; }
    .filtros-bar { gap: 0.6rem; }
    .form-card, .form-card-wide { padding: 1.25rem; }
    .resultado-parroquia { padding: 1rem; }
    .dash-card { padding: 16px 18px; }
    .grafico-card { padding: 1.1rem; }
    .form-acciones { flex-direction: column; align-items: stretch; }
    .form-acciones .btn { justify-content: center; }
    .btn { white-space: normal; }
}
@media (max-width: 480px) {
    .acciones-header { flex-direction: column; align-items: flex-start; }
    .auto-refresh-bar .boton-en-vivo { margin-left: 0; }
}

/* ===== PESTAÑAS ===== */
.tabs-bar {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    flex: 1 0 auto;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    min-width: max-content;
    white-space: nowrap;
}

.tab-btn:hover {
    background: #f7fafc;
    color: var(--text);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
    background: #ebf4ff;
}

/* ===== CHECKBOX EN FORMULARIO ===== */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

/* ===== PERMISOS ===== */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.rol-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border);
}

.rol-card-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rol-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.admin-card .rol-card-header {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.rol-card-body {
    padding: 0.75rem 1.25rem;
}

.rol-modulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}

.rol-modulo:last-child {
    border-bottom: none;
}

.rol-modulo-nombre {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    min-width: 80px;
}

.rol-acciones {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rol-accion {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    color: var(--text-light);
    background: var(--bg);
    white-space: nowrap;
}

.rol-accion.tiene {
    color: #276749;
    background: #f0fff4;
}

.rol-sin {
    opacity: 0.5;
}

/* ===== ROL BADGE ===== */
.rol-badge {
    display: inline-block;
    background: #ebf4ff;
    color: var(--primary-light);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .header h1 { font-size: 1.2rem; }
    .container { padding: 1rem; }
    .grid-candidatos { grid-template-columns: 1fr; }
    .form-card { padding: 1.5rem; }
    .acciones-header { flex-direction: column; align-items: stretch; }
    .acciones-header .btn { justify-content: center; }
}

/* ===== Tarjetas de candidatos COMPACTAS (solo .grid-candidatos-sm) ===== */
.grid-candidatos-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}
@media (max-width: 992px) { .grid-candidatos-sm { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid-candidatos-sm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .grid-candidatos-sm { grid-template-columns: 1fr 1fr; } }

.grid-candidatos-sm .card { border-radius: 10px; }
.grid-candidatos-sm .card-foto,
.grid-candidatos-sm .card-foto-placeholder { aspect-ratio: 1 / 1; }
.grid-candidatos-sm .card-body { padding: .45rem .55rem .55rem; }
.grid-candidatos-sm .card-body h3 {
    font-size: .82rem;
    line-height: 1.12;
    margin-bottom: .25rem;
    overflow-wrap: anywhere;
}
.grid-candidatos-sm .card-tipo {
    font-size: .58rem;
    padding: .08rem .4rem;
    margin-bottom: .25rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid-candidatos-sm .card-partido {
    font-size: .68rem;
    padding: .12rem .45rem;
    margin-bottom: .35rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid-candidatos-sm .card-acciones {
    gap: .3rem;
    margin-top: .3rem;
    padding-top: .35rem;
}
.grid-candidatos-sm .card-acciones .btn {
    font-size: .68rem;
    padding: .12rem .4rem;
}
.grid-candidatos-sm .card-numero {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: .72rem !important;
}

/* ===== Barras de progreso ANIMADAS ===== */
.dash-fill,
.barra-fill,
.votos-progress-fill,
.progress-fill-total {
    transform-origin: left center;
    animation: barraCrecer 1s cubic-bezier(.22, 1, .36, 1);
}
@keyframes barraCrecer {
    from { transform: scaleX(0); }
}

/* Refresco en vivo: NO repetir la animación de crecer en cada actualización
   (esto evita que las barras "parpadeen" al recibir ráfagas de cambios). */
.graficos-body.sin-anim .barra-fill,
.sin-anim .barra-fill {
    animation: none !important;
}

/* ===== Página Candidatos: más separación entre tipos y menos alto vertical ===== */
.seccion-dignidad + .seccion-dignidad {
    border-top: 1px dashed var(--border);
    padding-top: 1.5rem;
    margin-top: .5rem;
}
.grid-candidatos-sm { gap: .55rem; }
.grid-candidatos-sm .card-foto,
.grid-candidatos-sm .card-foto-placeholder {
    height: 84px;
    aspect-ratio: auto;
    object-fit: cover;
}
.grid-candidatos-sm .card-foto-placeholder { font-size: 2rem; }
.grid-candidatos-sm .card-body { padding: .35rem .45rem .45rem; }
.grid-candidatos-sm .card-body h3 { font-size: .75rem; }
.grid-candidatos-sm .card-numero {
    width: 1.35rem !important;
    height: 1.35rem !important;
    font-size: .65rem !important;
    top: .3rem !important;
    left: .3rem !important;
}

/* ===== Corrección visual: fotos correctas y tarjetas con aire (2026-09-07) ===== */
.grid-candidatos-sm {
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.grid-candidatos-sm .card-foto,
.grid-candidatos-sm .card-foto-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.grid-candidatos-sm .card-foto-placeholder { font-size: 2.6rem; }
.grid-candidatos-sm .card-body h3 { font-size: .8rem; }
.seccion-dignidad + .seccion-dignidad { border-top: none; padding-top: 0; margin-top: 0; }
.seccion-dignidad { margin-bottom: 2.2rem !important; }

/* ===== Página Candidatos v2: 5 columnas, cabecera fina, tarjeta mínima ===== */
.grid-candidatos-sm { grid-template-columns: repeat(5, 1fr); gap: .9rem; }
@media (max-width: 1150px) { .grid-candidatos-sm { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px)  { .grid-candidatos-sm { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .grid-candidatos-sm { grid-template-columns: repeat(2, 1fr); } }

.encabezado-lista {
    padding: .4rem .9rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 10px;
}
.encabezado-lista .ed-icono { font-size: 1.05rem; }
.encabezado-lista h3 { font-size: 1rem; }
.encabezado-lista .btn { padding: .18rem .55rem !important; font-size: .72rem !important; }

.card-candidato { cursor: pointer; }
.card-body-mini { padding: .4rem .5rem .5rem; }
.card-body-mini h3 {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .3rem;
}
.card-candidato .card-acciones { margin-top: .2rem; padding-top: .3rem; }
.card-candidato .card-acciones .btn { font-size: .7rem; padding: .12rem .42rem; }

/* ===== Página Candidatos v3: sin recorte de rostros, píldora en alianzas, color bien visible ===== */
.grid-candidatos-sm .card-foto,
.grid-candidatos-sm .card-foto-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;            /* rellena TODO el marco (sin bordes) */
    object-position: center 25%;  /* conserva el rostro (recorta más abajo) */
    background: #ffffff;
}
.grid-candidatos-sm .card-foto-placeholder {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    font-size: 3rem;
}
.card-candidato .card-numero {
    position: absolute;
    top: .45rem !important;
    left: .45rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 .1rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: .76rem !important;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    border: 2px solid #fff;
}
.card-numero-alianza {
    border-radius: 999px !important;
    padding: 0 .55rem !important;
}

/* ===== Sugerencia de tamaño de foto (4:3) en formularios ===== */
.ayuda-foto {
    display: block;
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .78rem;
}
.foto-aviso {
    display: none;
    margin-top: .4rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    font-size: .8rem;
    line-height: 1.3;
}
.foto-aviso.ok  { background: #e8f5e9; color: #1b5e20; border: 1px solid #81c784; }
.foto-aviso.warn{ background: #fff8e1; color: #795548; border: 1px solid #ffd54f; }

/* ===== Vista previa de foto + ajuste automático 4:3 ===== */
.foto-preview-grande {
    display: none;
    margin-top: .5rem;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
}
.foto-preview-fila {
    display: none;
    margin-top: .35rem;
    max-height: 56px;
    border-radius: 6px;
    border: 1px solid var(--border);
    vertical-align: top;
}

/* ===== Página Dignidades: tarjetas limpias y organizadas ===== */
/* Ancho mínimo por tarjeta: así los botones siempre caben en UNA sola fila */
.grid-dignidades {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.1rem;
}
.card-dignidad { padding: 1rem 1.1rem .9rem; }
.card-dignidad .dignidad-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .7rem;
}
.card-dignidad h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.25;
}
.dignidad-codigo {
    display: block;
    font-size: .6rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: .15rem;
}
.dignidad-estado {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dignidad-estado.activa { background: #dcfce7; color: #15803d; }
.dignidad-estado.inactiva { background: #eef2f7; color: #64748b; }
.dignidad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .8rem;
}
.dignidad-chip2 {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: 20px;
    white-space: nowrap;
}
.dignidad-chip2.cantonal { background: #e0f2fe; color: #0369a1; }
.dignidad-chip2.parroquial { background: #fef3c7; color: #b45309; }
.dignidad-chip2.neutro { background: #f1f5f9; color: #475569; }
.dignidad-acciones {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;          /* todos los botones en la misma línea */
    border-top: 1px solid var(--border);
    padding-top: .7rem;
}
.dignidad-acciones .btn {
    font-size: .7rem;
    padding: .22rem .45rem;
    gap: .28rem;                /* separación icono–texto más corta */
    white-space: nowrap;
    flex: 0 0 auto;
}
.dignidad-acciones .btn-danger { margin-left: auto; }

/* ===== Corrección en Inspección (campos numéricos) ===== */
.input-voto-corr {
    width: 74px;
    text-align: center;
    padding: .3rem .35rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    background: #fff;
}
.input-voto-corr:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }

/* ===== Inspección: columna del acta fija a la izquierda para comparar ===== */
@media (min-width: 769px) {
    .form-grid-2 > .col-acta-sticky {
        position: sticky;
        top: 1.1rem;
        align-self: start;
        max-height: calc(100vh - 2.2rem);
        overflow-y: auto;
    }
}

/* ===== Vista previa del color del partido en formulario de candidatos ===== */
.vista-previa-color {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .6rem;
    padding: .55rem .75rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed var(--border);
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    min-width: 0;
}
.chip-vista-color {
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.chip-vista-color.pill {
    border-radius: 999px;
    padding: 0 .55rem;
    min-width: auto;
}
.vista-previa-color .vp-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* ===== Lista de USUARIOS: resumen, búsqueda rápida y tabla ===== */
.stats-usuarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.1rem;
}
.stat-usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.75rem 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid #94a3b8;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform .15s, box-shadow .15s;
}
.stat-usuario:hover { transform: translateY(-2px); }
.stat-usuario .su-n {
    font-size: 1.4rem; font-weight: 800; line-height: 1.1;
    color: #334155; font-variant-numeric: tabular-nums;
}
.stat-usuario .su-l {
    font-size: 0.64rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .4px;
}
.stat-usuario.activo { box-shadow: 0 0 0 2px var(--primary), var(--shadow); }
.stat-usuario[data-filtro="todos"]     { border-left-color: #0d9488; }
.stat-usuario[data-filtro="todos"] .su-n     { color: #0d9488; }
.stat-usuario[data-filtro="activos"]   { border-left-color: #16a34a; }
.stat-usuario[data-filtro="activos"] .su-n   { color: #16a34a; }
.stat-usuario[data-filtro="inactivos"] { border-left-color: #dc2626; }
.stat-usuario[data-filtro="inactivos"] .su-n { color: #dc2626; }
.stat-usuario[data-filtro="con-asig"]  { border-left-color: #2563eb; }
.stat-usuario[data-filtro="con-asig"] .su-n  { color: #2563eb; }
.stat-usuario[data-filtro="sin-asig"]  { border-left-color: #ea580c; }
.stat-usuario[data-filtro="sin-asig"] .su-n  { color: #ea580c; }

/* Buscador rápido de la tabla */
.buscador-tabla {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.buscador-caja {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.buscador-caja .bc-icono {
    position: absolute; left: 0.75rem; top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem; opacity: .6; pointer-events: none;
}
.buscador-caja input {
    width: 100%;
    padding: 0.6rem 2.3rem 0.6rem 2.3rem;
    font-size: 0.92rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}
.buscador-caja input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.buscador-caja .bc-limpiar {
    position: absolute; right: 0.45rem; top: 50%;
    transform: translateY(-50%);
    border: none; background: transparent; cursor: pointer;
    font-size: 0.95rem; color: #94a3b8; padding: 0.2rem 0.4rem; border-radius: 50%;
    display: none;
}
.buscador-caja .bc-limpiar:hover { color: #dc2626; background: #fee2e2; }
.buscador-caja .bc-limpiar.visible { display: block; }
.contador-filtrado {
    font-size: 0.85rem; font-weight: 600; color: var(--text-light);
    white-space: nowrap;
}
.contador-filtrado b { color: var(--primary); }

/* Tabla de usuarios */
.tabla-dt { width: 100%; }
.tabla-dt th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla-dt th.ordenable:hover { color: var(--primary); }
.tabla-dt th.ordenable::after { content: " ↕"; opacity: .35; font-size: .8em; }
.tabla-dt th.ordenable.asc::after  { content: " ▲"; opacity: 1; }
.tabla-dt th.ordenable.desc::after { content: " ▼"; opacity: 1; }
.tabla-dt tbody tr.fila-dato td { vertical-align: middle; }
.tabla-dt tbody tr.fila-dato.inactivo { background: #fef2f2; }
.tabla-dt tbody tr.fila-dato.inactivo:hover { background: #fee2e2; }
.tabla-dt tbody tr.oculto { display: none; }
.tabla-dt .celda-usuario { white-space: nowrap; }
.tabla-dt .celda-nombre { overflow-wrap: anywhere; }
.tabla-dt .sin-resultados td {
    text-align: center; padding: 2.5rem 1rem;
    color: var(--text-light); font-size: 0.95rem;
}
.tabla-dt .punto-estado {
    display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
    margin-right: .35rem; vertical-align: middle;
}
.tabla-dt .punto-estado.on  { background: #16a34a; }
.tabla-dt .punto-estado.off { background: #dc2626; }

@media (max-width: 800px) {
    .stats-usuarios { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: .55rem; }
    .stat-usuario { padding: .6rem .7rem; }
    .stat-usuario .su-n { font-size: 1.15rem; }
    .buscador-caja { flex: 1 1 100%; }
}

/* Fila recién editada (se resalta al volver del modal) */
.tabla-dt tbody tr.fila-dato.destacada {
    box-shadow: inset 4px 0 0 var(--warning, #f59e0b);
    background: #fffbeb;
}

/* Pequeño respiro entre el emoji y el texto de las etiquetas */
.stat-usuario .su-l { word-spacing: .22em; }

/* ===== Usuarios: avatar, filas alternas, pie de tabla y paginación ===== */
.avatar-usuario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #0d9488);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}
.celda-usuario .cu-caja { display: flex; align-items: center; gap: 0.6rem; }
.celda-usuario .cu-datos { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.celda-usuario .cu-sub {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-light);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.celda-login { font-size: 0.84rem; color: #475569; font-variant-numeric: tabular-nums; }
.celda-login .cl-hora { margin-left: 0.35rem; font-size: 0.78rem; color: var(--text-light); }
.celda-login .cl-nunca { color: var(--text-light); font-style: italic; }

/* Filas alternas (respetando inactivas y destacadas) */
.tabla-dt tbody tr.fila-dato:nth-child(even):not(.inactivo):not(.destacada) {
    background: #f8fafc;
}

/* Pie de tabla: contador + filas por página + paginador */
.pie-tabla {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.pie-izq { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.por-pagina {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
}
.por-pagina select { padding: 0.3rem 0.5rem; font-size: 0.85rem; width: auto; }

.paginador { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pag-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: #475569;
    transition: border-color .15s, color .15s, background .15s;
}
.pag-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pag-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pag-btn.num.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.pag-puntos { padding: 0 0.15rem; color: var(--text-light); }

/* En esta página la columna lateral puede ser algo más estrecha */
.layout-2col.side-estrecho { grid-template-columns: minmax(0, 1fr) clamp(210px, 20%, 250px); }
@media (max-width: 800px) {
    .pie-tabla { justify-content: center; }
    .celda-usuario .cu-sub { max-width: 130px; }
}

/* Separación entre emoji y texto en las celdas de la tabla de usuarios */
.tabla-dt td.celda-asignaciones,
.tabla-dt td.celda-login,
.tabla-dt td.celda-estado,
.tabla-dt .rol-badge { word-spacing: .2em; }

/* ===== Tabla de usuarios con aspecto DataTables ===== */
.dt-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.dt-length label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #495057;
}
.dt-select {
    padding: 0.32rem 0.55rem;
    font-size: 0.86rem;
    font-family: inherit;
    color: #212529;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    cursor: pointer;
}
.dt-search { display: flex; align-items: center; gap: 0.45rem; }
.dt-search > label {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}
.dt-search .buscador-caja { min-width: 230px; }
.dt-search .buscador-caja input {
    padding: 0.42rem 1.9rem 0.42rem 0.7rem;
    font-size: 0.87rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}
.dt-search .buscador-caja input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

/* Marco de la tabla */
.tabla-scroll.dt-borde {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
}
.tabla-dt { border-collapse: collapse; width: 100%; }
.tabla-dt thead th {
    background: #f8f9fa;
    color: #212529;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.7rem 0.85rem;
    border-top: 0;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    vertical-align: middle;
}
.tabla-dt tbody td {
    padding: 0.62rem 0.85rem;
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}
.tabla-dt tbody tr.fila-dato { transition: background .12s; }
.tabla-dt tbody tr.fila-dato:hover { background: #f1f3f5; }
.tabla-dt tbody tr.fila-dato.inactivo:hover { background: #fee2e2; }
.tabla-dt tbody tr.fila-dato.destacada:hover { background: #fffbeb; }

/* Pie: información + paginación */
.dt-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}
.dt-info { font-size: 0.86rem; color: #495057; }
.dt-info b { color: #212529; font-variant-numeric: tabular-nums; }
.dt-info .dt-filtrado { margin-left: 0.35rem; font-size: 0.8rem; color: #6c757d; }

/* Paginación estilo DataTables / Bootstrap */
.pag-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 0.375rem;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #0d6efd;
    font-size: 0.86rem;
}
.pag-btn:hover:not(:disabled) { background: #e9ecef; border-color: #dee2e6; color: #0a58ca; }
.pag-btn:disabled { opacity: 0.45; }
.pag-btn.num.activo { background: #0d6efd; border-color: #0d6efd; color: #fff; }

@media (max-width: 800px) {
    .dt-controles, .dt-pie { justify-content: center; }
    .dt-search .buscador-caja { min-width: 0; flex: 1 1 auto; }
}

/* Botones de acción de la tabla: iconos uniformes */
.tabla-dt .acciones-fila {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    justify-content: flex-end;
}
.tabla-dt .acciones-fila .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}
.tabla-dt .celda-asignaciones .asig-linea { max-width: 260px; }

/* Separación entre emoji y texto en las etiquetas del panel lateral */
.panel-card .pc-titulo,
.filtro-grupo label,
.stats-usuarios .su-l,
.stats-mini .l { word-spacing: .22em; }

/* Ajuste fino para que la tabla de usuarios no desborde */
.tabla-dt td.col-acciones,
.tabla-dt th.col-acciones { padding-left: 0.5rem; padding-right: 0.5rem; }
.tabla-dt .celda-asignaciones .asig-linea { max-width: 215px; }

/* Estado + Último acceso en una sola celda */
.celda-estado-login { vertical-align: middle; }
.cel-multilinea {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
    white-space: nowrap;
}
.cel-multilinea .celda-estado { font-size: 0.85rem; font-weight: 600; color: #334155; }
.cel-multilinea .celda-login { font-size: 0.79rem; }

/* Las tarjetas de resumen ya no son filtros: solo informan */
.stats-usuarios .stat-usuario { cursor: default; }
.stats-usuarios .stat-usuario:hover { transform: none; }

/* Sin columna lateral hay más sitio para los recintos */
.tabla-dt .celda-asignaciones .asig-linea { max-width: 330px; }

/* Combobox de filtros junto a la búsqueda */
.dt-derecha { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.dt-filtros { display: flex; align-items: center; gap: 0.45rem; }
.dt-filtros > label {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}
.dt-filtros .dt-select { max-width: 240px; }
@media (max-width: 800px) {
    .dt-derecha { width: 100%; justify-content: center; }
    .dt-filtros .dt-select { max-width: none; }
}

/* ===== Asignaciones: celda de ubicación y modales anchos ===== */
.celda-ubicacion { vertical-align: middle; }
.celda-ubicacion .cel-multilinea { gap: 0.1rem; }
.celda-ubicacion .ub-parroquia { font-size: 0.85rem; font-weight: 600; color: #334155; }
.celda-ubicacion .ub-recinto { font-size: 0.83rem; color: #475569; }
.celda-ubicacion .ub-mesa { font-size: 0.83rem; font-weight: 600; color: #0d6efd; }
.celda-ubicacion .ub-todas { font-size: 0.83rem; color: #94a3b8; font-style: italic; }

.celda-fecha { font-size: 0.84rem; color: #475569; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-hora { margin-left: 0.35rem; font-size: 0.78rem; color: var(--text-light); }

.modal-caja-ancha { max-width: min(720px, 94vw); }

.tabla-dt .acciones-fila .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

/* Aviso de disponibilidad del formulario de asignación */
#avisoDisponibles .av-oculto { color: #64748b; }
.tt-oculto { color: var(--text-light); font-size: 0.78rem; }