/* ═══════════════════════════════════════════════════════════════════════════
   ESTILOS ELECTORALES - Electoral Rincón
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cargo-P-color: #0d6efd;      /* Azul - Presidente */
  --cargo-V1-color: #198754;     /* Verde - Vocal 1 */
  --cargo-V2-color: #0f5132;     /* Verde oscuro - Vocal 2 */
  --cargo-PS1-color: #6f42c1;    /* Púrpura - Suplente P1 */
  --cargo-PS2-color: #6f42c1;    /* Púrpura - Suplente P2 */
  --cargo-V1S1-color: #20c997;   /* Teal - Suplente V1-1 */
  --cargo-V1S2-color: #20c997;   /* Teal - Suplente V1-2 */
  --cargo-V2S1-color: #fd7e14;   /* Naranja - Suplente V2-1 */
  --cargo-V2S2-color: #fd7e14;   /* Naranja - Suplente V2-2 */

  --estado-N-color: #198754;     /* Verde - Positivo */
  --estado-EAN-color: #0dcaf0;   /* Cyan - Excusa notificada */
  --estado-DN-color: #0dcaf0;    /* Cyan - Devolución notificada */
  --estado-EDN-color: #dc3545;   /* Rojo - Excusa denegada */
  --estado-EPJ-color: #ffc107;   /* Amarillo - En JEZ */
  --estado-SA-color: #6c757d;    /* Gris - Sin actuación */
  --estado-EAP-color: #ffc107;   /* Amarillo - Pendiente */
  --estado-AV1-color: #ffc107;   /* Amarillo - Aviso */
  --estado-AV2-color: #ffc107;   /* Amarillo - Aviso */
  --estado-AV1-N-color: #198754; /* Verde - Positiva tras aviso */
  --estado-AV2-N-color: #198754; /* Verde - Positiva tras aviso */
  --estado-NAYTO-color: #0d6efd; /* Azul - Notificado Ayto */
  --estado-NPOL-color: #0d6efd;  /* Azul - Notificado Policía */
}

/* GENERAL */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
}

code {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.table-hover tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.05);
}

/* BADGES PARA CARGOS */
.badge-cargo {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

/* ALERTAS AUTO-DISMISS */
.alert {
  animation: slideIn 0.3s ease-in-out;
}

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

/* TARJETAS */
.card {
  border: none;
  border-radius: 8px;
}

.card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 0 0;
}

/* TABLAS */
.table thead {
  background-color: #f8f9fa;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.table-sm td {
  vertical-align: middle;
}

/* NAVBAR */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-size: 1.5rem;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15ª-235 — NAVBAR: TODOS LOS ITEMS VISIBLES A ZOOM 100 %
   El menú superior tiene ~20 entradas. En navbar-expand-lg (≥992 px) Bootstrap
   las coloca en UNA sola fila sin envolver: se desbordaban por la derecha y,
   con el overflow-x:hidden del body, quedaban CORTADAS (solo se veían todas
   bajando el zoom del navegador al 67 %). Solución: permitir que la barra
   expandida envuelva en varias filas + compactar padding y fuente de cada
   enlace para que quepan más por fila. Así son TODAS visibles por defecto.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* La fila expandida puede ocupar varias líneas en vez de recortarse. */
  .navbar-expand-lg > .container-fluid,
  .navbar-expand-lg .navbar-collapse {
    flex-wrap: wrap;
  }
  .navbar-expand-lg .navbar-nav {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }
  /* Enlaces más compactos: menos padding lateral y fuente algo menor para
     ganar sitio horizontal sin perder legibilidad. */
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 0.9rem;
  }
}

/* MODALES */
.modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-content {
  border-radius: 8px;
  border: none;
}

/* FOOTER */
footer {
  margin-top: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .navbar-nav {
    padding-top: 1rem;
  }

  .card {
    margin-bottom: 1.5rem;
  }

  .table {
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15ª-76 — ADAPTABILIDAD RESPONSIVA Y AJUSTE AUTOMÁTICO
   El usuario tenía que hacer Ctrl+- en el navegador para que cupiera todo.
   Estas reglas hacen que ELECTOR@-E aproveche todo el ancho disponible
   sin scroll horizontal en el body, manteniendo el scroll-x SOLO dentro
   de la tabla principal y los filtros que se reorganicen automáticamente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Body: nunca scroll horizontal accidental — todas las páginas dentro
      del viewport. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 2. container-fluid: márgenes mínimos para aprovechar pantalla ancha. */
body > .container-fluid,
.container-fluid.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
  max-width: 100%;
}

/* 3. La tabla de la Hoja Principal vive dentro de #tabla-wrapper que ya
      tiene overflow-x:scroll. Garantizamos que ese wrapper NUNCA exceda
      el ancho del viewport (si lo hiciese, el scroll quedaría enterrado
      a la derecha y el usuario tendría que hacer Ctrl+- para verlo). */
#tabla-wrapper, #top-scroll {
  max-width: 100%;
  width: 100%;
}

/* 4. Filtros y barras de botones que envuelven cuando no caben.
      Aplica a las cabeceras típicas de Hoja Principal/Excusas/etc. */
.barra-filtros,
.d-flex.align-items-center.gap-3.mb-3,
.d-flex.flex-wrap {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 5. Tablas DataTable internas (Excusas, Suplentes, etc.) responsive
      con scroll-x en su propio wrapper, no en el body. */
.dataTables_wrapper {
  overflow-x: auto;
  max-width: 100%;
}

/* 6. Min-widths inteligentes para celdas de DNI/nombre — no se aplastan
      pero permiten que las de check/estados se compriman. */
td.dni-col, th.dni-col { min-width: 110px; }
td.nombre-col, th.nombre-col { min-width: 220px; }

/* 7. Media queries específicas para resoluciones estándar. */
/* 7a. Pantallas portátiles típicas (1366×768): comprimir un pelín fonts
       en tablas para que más columnas quepan. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #tablaPrincipal {
    font-size: 0.7rem !important;
  }
  #tablaPrincipal th, #tablaPrincipal td {
    padding: 0.25rem 0.4rem !important;
  }
}

/* 7b. Full HD (1920×1080+): más espacio, fuente cómoda. */
@media (min-width: 1600px) {
  #tablaPrincipal {
    font-size: 0.78rem;
  }
}

/* 7c. 4K (3840+): escalar ligeramente la UI sin obligar al usuario
       a usar zoom del SO. */
@media (min-width: 2400px) {
  body {
    font-size: 1.05rem;
  }
  .navbar-brand img {
    height: 56px !important;
  }
  #tablaPrincipal {
    font-size: 0.95rem;
  }
}

/* 8. Gráficas con flexbox: que se reposicionen sin desbordar. */
.card-body canvas {
  max-width: 100%;
  height: auto !important;
}

/* 9. Cap defensivo: si una imagen o tabla se le va el ancho, no rompe el
      layout de la pestaña entera — la encierra en su contenedor. */
img {
  max-width: 100%;
  height: auto;
}

/* IMPRESIÓN */
@media print {
  .navbar, footer, .btn, .form-control, .alert {
    display: none !important;
  }

  body {
    background: white;
  }

  .card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
  }
}