/* ============================================================
   SIDE — Sistema de Inteligencia y Decisión Electoral
   Campaña Santiago, N.L. 2027
   Sistema de identidad visual propio.

   Concepto: "Cuarto de mando", no dashboard SaaS genérico.
   Fondo oscuro tipo sala de operaciones, acentos guinda/dorado
   (colores institucionales de campaña detectados en el organigrama:
   guinda #5C1A2B para autoridad/candidato, dorado #C9A227 para
   jerarquía/mando, gris carbón para la base neutra de datos). Ver
   COLOR_INSTITUCIONAL_PRIMARIO/ACENTO en config/database.php.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --carbon-900: #14161a;
    --carbon-800: #1c1f26;
    --carbon-700: #262a33;
    --carbon-600: #343943;
    --carbon-border: #3a3f4b;
    /* --guinda/--guinda-bright: valores guinda originales de SIDE.
       NO editar por instancia — este archivo es idéntico en todas.
       Cada página los sobrescribe con COLOR_INSTITUCIONAL_PRIMARIO de
       config/database.php vía estilosColoresInstancia()
       (includes/colores_instancia.php), impreso después del <link>. */
    --guinda: #5C1A2B;
    --guinda-bright: #8c2841;
    --dorado: #C9A227;
    --dorado-soft: #e0c15c;
    --texto-alto: #f2f0ec;
    --texto-medio: #b7bac2;
    --texto-bajo: #7a7e88;
    --verde-ok: #3fa66a;
    --amarillo-alerta: #d9a441;
    --rojo-riesgo: #c1443a;

    --font-display: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ---------- TEMA CLARO ----------
   Mismo sistema de variables, reasignadas para fondo claro. La
   jerarquía de superficies se invierte (carbon-900 pasa de ser el
   fondo más oscuro a "el texto más oscuro" conceptualmente no aplica
   igual — aquí carbon-900 sigue siendo la superficie MÁS ALEJADA del
   primer plano, solo que ahora es la más clara, no la más oscura).
   guinda/dorado se mantienen casi igual, ya que ambos ya tenían
   suficiente contraste para funcionar sobre blanco. */
[data-tema="claro"] {
    --carbon-900: #f4f2ec;
    --carbon-800: #ffffff;
    --carbon-700: #faf8f2;
    --carbon-600: #ece8dc;
    --carbon-border: #e0dccf;
    /* Mismo criterio que el bloque :root de arriba: --guinda y
       --guinda-bright se sobrescriben desde config/database.php. */
    --guinda: #5C1A2B;
    --guinda-bright: #7a2438;
    --dorado: #b3891f;
    --dorado-soft: #8f6d18;
    --texto-alto: #262420;
    --texto-medio: #5c584d;
    --texto-bajo: #8b8677;
    --verde-ok: #2f8a56;
    --amarillo-alerta: #b3811f;
    --rojo-riesgo: #a83a30;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--carbon-900);
    color: var(--texto-alto);
    margin: 0;
}

/* ---------- LOGIN ---------- */
.login-body {
    background: radial-gradient(ellipse at top, var(--login-glow, #23131a) 0%, var(--carbon-900) 65%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-tema="claro"] .login-body {
    --login-glow: #f0dde2;
}
.login-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.login-card {
    background: var(--carbon-800);
    border: 1px solid var(--carbon-border);
    border-radius: 10px;
    padding: 40px 32px;
    box-shadow: 0 20px 60px var(--login-shadow, rgba(0,0,0,0.5));
}
[data-tema="claro"] .login-card {
    --login-shadow: rgba(20,15,10,0.12);
}
.login-header { text-align: center; margin-bottom: 28px; }
.login-header i {
    font-size: 2.5rem;
    color: var(--dorado);
}
.login-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin: 8px 0 2px;
    color: var(--texto-alto);
}
.login-header p {
    color: var(--texto-bajo);
    font-size: 0.85rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-subtitulo-side {
    color: var(--dorado-soft) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
    margin-bottom: 4px !important;
}
.login-card .form-label { color: var(--texto-medio); font-size: 0.85rem; }
.login-card .form-control {
    background: var(--carbon-700);
    border: 1px solid var(--carbon-border);
    color: var(--texto-alto);
}
.login-card .form-control:focus {
    background: var(--carbon-700);
    color: var(--texto-alto);
    border-color: var(--dorado);
    box-shadow: 0 0 0 0.2rem rgba(201,162,39,0.25);
}
.btn-danger {
    background: var(--guinda);
    border-color: var(--guinda);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.btn-danger:hover { background: var(--guinda-bright); border-color: var(--guinda-bright); }

/* ---------- SHELL PRINCIPAL ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--carbon-800);
    border-right: 1px solid var(--carbon-border);
    display: flex;
    flex-direction: column;
}
.sidebar-brand {
    padding: 24px 20px;
    border-bottom: 1px solid var(--carbon-border);
}
.sidebar-brand i { color: var(--dorado); font-size: 1.4rem; }
.sidebar-brand span {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.05rem;
    display: block;
    margin-top: 4px;
    color: var(--texto-alto);
}
.sidebar-brand small {
    color: var(--texto-bajo);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-toggle-tema {
    background: transparent;
    border: 1px solid var(--carbon-border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dorado);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.btn-toggle-tema:hover {
    background: var(--carbon-700);
    border-color: var(--texto-bajo);
}
.btn-toggle-tema i { font-size: 0.95rem; }

.sidebar-nav { list-style: none; padding: 16px 10px; margin: 0; flex-grow: 1; }
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--texto-medio);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: var(--carbon-700); color: var(--texto-alto); }
.sidebar-nav a.active {
    background: var(--guinda);
    color: #fff;
}
.sidebar-nav a i { width: 18px; text-align: center; }

.nav-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-bajo);
    padding: 16px 12px 6px;
    transition: color 0.15s;
}
.nav-section-label:hover { color: var(--texto-medio); }
.nav-section-chevron { font-size: 0.65rem; transition: transform 0.15s; }
.nav-section-label[aria-expanded="true"] .nav-section-chevron { transform: rotate(90deg); }
.nav-section-body { list-style: none; margin: 0; padding: 0; }
/* Chevron genérico para cualquier botón de acordeón Bootstrap
   (data-bs-toggle="collapse") — reutilizable fuera del sidebar, ej.
   el detalle por zona de Resultados Históricos. */
button[data-bs-toggle="collapse"] .bi-chevron-down { transition: transform 0.15s; }
button[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.nav-section-body[hidden] { display: none; }
.nav-disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--carbon-600);
    font-size: 0.9rem;
}
.nav-disabled i { width: 18px; text-align: center; }

.main-area { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: var(--carbon-800);
    border-bottom: 1px solid var(--carbon-border);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-title h1 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: var(--texto-alto);
}
.topbar-user .btn-light {
    background: var(--carbon-700);
    border-color: var(--carbon-border);
    color: var(--texto-alto);
    font-size: 0.85rem;
}

.content-area {
    padding: 28px;
    flex-grow: 1;
    background: var(--carbon-900);
}

/* ---------- COMPONENTES: TARJETAS DE DATOS ---------- */
.card-oscura {
    background: var(--carbon-800);
    border: 1px solid var(--carbon-border);
    border-radius: 8px;
    padding: 20px;
}

.kpi-card {
    background: var(--carbon-800);
    border: 1px solid var(--carbon-border);
    border-left: 4px solid var(--dorado);
    border-radius: 8px;
    padding: 18px 20px;
}
.kpi-card .kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-bajo);
    margin-bottom: 6px;
}
.kpi-card .kpi-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--texto-alto);
    line-height: 1;
}
.kpi-card .kpi-meta {
    font-size: 0.78rem;
    color: var(--texto-medio);
    margin-top: 4px;
}

/* Semáforo de avance */
.progreso-track {
    height: 8px;
    background: var(--carbon-700);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}
.progreso-fill { height: 100%; border-radius: 4px; }
.progreso-fill.ok { background: var(--verde-ok); }
.progreso-fill.alerta { background: var(--amarillo-alerta); }
.progreso-fill.riesgo { background: var(--rojo-riesgo); }

.badge-prioridad-alta { background: var(--rojo-riesgo); }
.badge-prioridad-media { background: var(--amarillo-alerta); color: #2a2210; }
.badge-prioridad-baja { background: var(--carbon-600); }

.badge-estatus-pendiente { background: var(--carbon-600); }
.badge-estatus-en_proceso { background: var(--amarillo-alerta); color: #2a2210; }
.badge-estatus-resuelto { background: var(--verde-ok); }
.badge-estatus-cancelado { background: var(--texto-bajo); }
/* En tema claro --carbon-600 es casi blanco: la letra blanca de estas dos no se leía. */
[data-tema="claro"] .badge-prioridad-baja,
[data-tema="claro"] .badge-estatus-pendiente { background: var(--texto-medio); }

.tabla-oscura {
    --bs-table-bg: var(--carbon-800);
    --bs-table-color: var(--texto-alto);
    --bs-table-border-color: var(--carbon-border);
    /* Sin estas 2 líneas, Bootstrap usa su hover claro por defecto:
       el texto gris (.text-muted) queda casi invisible al pasar el
       mouse sobre una fila, dando la sensación de que "desapareció"
       un dato. Fijamos un hover oscuro, ligeramente más claro que
       el fondo base, para mantener el mismo contraste de texto. */
    --bs-table-hover-bg: var(--carbon-700);
    --bs-table-hover-color: var(--texto-alto);
}
.tabla-oscura thead th {
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-bajo);
    border-bottom-width: 2px;
}
/* CORRECCIÓN DE FONDO: Bootstrap define .text-muted con un gris pensado
   para fondo CLARO (--bs-secondary-color). Sin este override, el texto
   se ve negro-sobre-negro en TODO momento (no solo en hover) — el hover
   solo lo hacía visible por casualidad, al aclarar el fondo debajo de un
   texto ya oscuro. Se fija aquí el color base, válido en cualquier
   estado (reposo, hover, dentro o fuera de tablas). */
.text-muted, .tabla-oscura tbody tr .text-muted {
    color: var(--texto-medio) !important;
}
.tabla-oscura tbody tr:hover .text-muted,
.tabla-oscura tbody tr:hover small {
    color: var(--texto-alto) !important;
}

/* Botones "outline" — sin estas reglas, Bootstrap usa su hover por
   defecto (fondo claro), lo que sobre este tema oscuro puede volver
   el texto o el ícono casi invisible según el navegador/estado. */
.btn-outline-light {
    color: var(--texto-alto);
    border-color: var(--carbon-border);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    background: var(--carbon-600);
    border-color: var(--texto-bajo);
    color: var(--texto-alto);
}
.btn-outline-secondary {
    color: var(--texto-medio);
    border-color: var(--carbon-border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--carbon-600);
    border-color: var(--texto-bajo);
    color: var(--texto-alto);
}
.btn-outline-success:hover, .btn-outline-danger:hover {
    color: #fff;
}

/* Controles de paginación de catálogos (Sesión 14 de septiembre de
   2026) — mismo criterio que .tabla-oscura: se fijan las variables
   de Bootstrap en vez de pelear contra sus clases una por una. */
.pagination {
    --bs-pagination-bg: var(--carbon-800);
    --bs-pagination-color: var(--texto-alto);
    --bs-pagination-border-color: var(--carbon-border);
    --bs-pagination-hover-bg: var(--carbon-600);
    --bs-pagination-hover-color: var(--texto-alto);
    --bs-pagination-hover-border-color: var(--carbon-border);
    --bs-pagination-disabled-bg: var(--carbon-800);
    --bs-pagination-disabled-color: var(--texto-bajo);
    --bs-pagination-disabled-border-color: var(--carbon-border);
    --bs-pagination-focus-bg: var(--carbon-600);
    --bs-pagination-focus-color: var(--texto-alto);
    --bs-pagination-focus-box-shadow: none;
}

.dropdown-menu {
    background: var(--carbon-800);
    border: 1px solid var(--carbon-border);
}
.dropdown-item {
    color: var(--texto-medio);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--carbon-700);
    color: var(--texto-alto);
}
.dropdown-item.text-danger:hover {
    color: var(--rojo-riesgo) !important;
}

.modal-content {
    background: var(--carbon-800);
    color: var(--texto-alto);
    border: 1px solid var(--carbon-border);
}
.modal-header, .modal-footer { border-color: var(--carbon-border); }
.form-control, .form-select {
    background: var(--carbon-700);
    border-color: var(--carbon-border);
    color: var(--texto-alto);
}
.form-control:focus, .form-select:focus {
    background: var(--carbon-700);
    color: var(--texto-alto);
    border-color: var(--dorado);
    box-shadow: 0 0 0 0.2rem rgba(201,162,39,0.2);
}
.form-control::placeholder { color: var(--texto-bajo); }

.btn-primario-campana {
    background: var(--guinda);
    border-color: var(--guinda);
    color: #fff;
    font-weight: 600;
}
.btn-primario-campana:hover { background: var(--guinda-bright); border-color: var(--guinda-bright); color: #fff; }

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--texto-alto);
    margin-bottom: 4px;
}
.section-subtitle {
    color: var(--texto-bajo);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .sidebar { display: none; }
    .content-area { padding: 16px; }
}