/* ============================================================
   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).
   ============================================================ */

@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: #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;
}

* { 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, #23131a 0%, var(--carbon-900) 65%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.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 rgba(0,0,0,0.5);
}
.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;
}

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