/* ============================================================
   SIDE — Sistema de Inteligencia y Decisión Electoral
   Campaña Juárez, N.L. 2027 — candidato de Movimiento Ciudadano (MC)
   Sistema de identidad visual propio.

   Concepto: "Cuarto de mando", no dashboard SaaS genérico.
   Fondo oscuro tipo sala de operaciones, acentos naranja/dorado
   (naranja #F58025 = color oficial de MC, usado aquí como color
   institucional del panel — autoridad/candidato; dorado #C9A227 para
   jerarquía/mando, sin cambio, 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/--dorado/--dorado-soft (aquí y en el
       bloque [data-tema="claro"] de abajo) son la ÚNICA parte de este
       archivo que varía por instancia — deben coincidir siempre con
       COLOR_INSTITUCIONAL_PRIMARIO/ACENTO de config/database.php de
       ESTA MISMA instancia (ver el comentario de esas constantes).
       Este CSS es estático y no puede leer PHP, así que es sincronía
       manual, no automática. Santiago = guinda/dorado originales. */
    --guinda: #F58025;
    --guinda-bright: #F8A360;
    --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: valor único por
       instancia, sincronizado a mano con config/database.php. */
    --guinda: #F58025;
    --guinda-bright: #F7964B;
    --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 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-bajo);
    padding: 16px 12px 6px;
}
.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); }

.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;
}

.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; }
}