/* ============================================================
 * Motorea — design tokens (BRAND.md §1–§4)
 *
 * Fuente única de variables CSS, en tres niveles:
 *   1. Primitivos: valores crudos sin significado (--orange-700).
 *   2. Semánticos: para qué sirve el color (--brand-600, --danger).
 *      Las pantallas usan ESTOS, nunca un hex.
 *   3. Puente: nombres de Bootstrap y de la plantilla apuntando a (2).
 * tests/smoke_marca.php mide el contraste de cada par de este archivo.
 *
 * NO usar #ffffff como fondo de página. NO usar morado/violeta de acento.
 * ============================================================ */

:root {
    /* ===== 1 · Primitivos ===== */
    /* Tailwind orange — 700 = botones, 800 = hover, 50 = tintes */
    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;
    /* Tailwind stone — neutros cálidos */
    --stone-50:  #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-500: #78716c;
    --stone-700: #44403c;
    /* Carbón */
    --charcoal-900: #16191d;
    --charcoal-800: #1f2328;
    --charcoal-700: #2d3239;
    --warm-gray:    #f7f7f5;

    /* ===== 2 · Semánticos ===== */
    /* Marca. Los nombres --brand-N se conservan: 6 mil usos los referencian. */
    --brand-900: var(--charcoal-800);  /* tinta: sidebar, encabezados */
    --brand-800: var(--charcoal-700);  /* hover sobre fondo oscuro */
    --brand-600: var(--orange-700);    /* PRIMARIO: botones, links, menú activo (blanco encima 5.18:1) */
    --brand-500: var(--orange-600);    /* ACENTO: logo, charts, focus ring. Forma, nunca texto ni botón con texto blanco (3.56:1) */
    --brand-400: var(--orange-400);
    --brand-300: var(--orange-300);
    --brand-200: var(--orange-200);    /* pills, badges */
    --brand-50:  var(--orange-50);     /* tintes, filas resaltadas */
    --brand-bg:  var(--warm-gray);     /* fondo de página */
    --brand-100: var(--stone-200);     /* bordes, divisores */

    /* Superficies y texto */
    --surface-50:  var(--stone-50);
    --surface-100: var(--warm-gray);
    --surface-200: var(--stone-100);
    --surface-300: var(--stone-300);
    --surface-500: var(--stone-500);
    --surface-700: var(--stone-700);
    --surface-800: var(--charcoal-700);
    --surface-900: var(--charcoal-800);
    --surface-950: var(--charcoal-900);

    /* Estados: iguales en toda la familia (BRAND.md §4). Fondo sólido = texto BLANCO. */
    --success: #15803d;  --success-subtle: #f0fdf4;
    --warning: #b45309;  --warning-subtle: #fffbeb;
    --danger:  #b91c1c;  --danger-subtle:  #fef2f2;
    --info:    #0369a1;  --info-subtle:    #f0f9ff;
    /* Nombres antiguos, mismos valores */
    --success-500: var(--success);   /* guardar / confirmar */
    --accent-500:  var(--warning);   /* ámbar: exportar PDF, avisos */
    --accent-700:  #92400e;
    --danger-500:  var(--danger);    /* eliminar / cancelar / error */
    --info-400:    var(--info);
    --info-bg:     var(--info-subtle);

    --focus-ring: var(--brand-500);

    /* ===== 3 · Puente (Bootstrap / plantilla) ===== */
    --primary:        var(--brand-600);
    --primary-hover:  var(--orange-800);
    --primary-light:  var(--brand-50);
    --primary-text:   #ffffff;

    /* ---------- Sidebar ---------- */
    --sidebar-bg:      var(--brand-900);
    --sidebar-hover:   var(--brand-800);
    --sidebar-active:  var(--brand-600);
    --sidebar-text:    #ffffff;
    --sidebar-text-muted: rgba(255,255,255,0.55);
    --sidebar-divider: rgba(255,255,255,0.08);
    --sidebar-width:   260px;

    /* ---------- Page ---------- */
    --body-bg:    var(--brand-bg);
    --body-text:  var(--surface-900);

    /* ---------- Cards / borders ---------- */
    --card-bg:        #ffffff;
    --card-border:    var(--brand-100);
    --card-radius:    14px;
    --card-shadow:    0 12px 40px -16px rgba(31,35,40,0.18);

    /* ---------- Typography ---------- */
    --font-ui:      'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* ---------- Spacing / motion ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-fast: 120ms ease;
    --transition-med:  220ms ease;

    /* ---------- Brand gradient (hero del login y del dashboard) ----------
       700→800: lleva texto blanco encima (500→600 no pasa AA). */
    --brand-gradient: linear-gradient(135deg, var(--orange-700) 0%, var(--orange-800) 100%);
}

/* ============================================================
 * Dark mode — content area only.
 * El sidebar SIEMPRE permanece charcoal (BRAND.md "Sidebar").
 * Toggle: data-menu-color="dark" en <html> (ver theme_init.php).
 * ============================================================ */
:root[data-menu-color="dark"] {
    --body-bg:     #0f1a14;   /* deep charcoal-green per BRAND.md */
    --body-text:   #e5e7e3;
    --card-bg:     #1a2620;
    --card-border: #2a3a32;
    --surface-100: #0f1a14;
    --surface-200: #2a3a32;
    --surface-800: #d6d8d2;
    --surface-900: #f1f2ec;
}

/* ============================================================
 * Reset mínimo + body texture (BRAND.md "Background Texture")
 * ============================================================ */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    /* !important overrides Modernize styles.css `body{font-family:"Plus Jakarta Sans"…!important}`.
       Without it the vendor rule wins and body text renders in the (now-removed) CDN font's
       generic `sans-serif` fallback instead of our brand Inter. */
    font-family: var(--font-ui) !important;
    color: var(--body-text);
    background-color: var(--body-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sólo la fuente: el color de los títulos lo siguen decidiendo las reglas de abajo y de cada pantalla. */
h1, h2, h3, h4 { font-family: var(--font-heading); }
h1, h2 {
    font-weight: 600;
    color: var(--surface-900);
}
h5, h6 { font-family: var(--font-ui); }
h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--surface-900);
}

/* brand-600 y no brand-500: el acento mide 3.56:1 sobre blanco y no pasa AA
   para texto normal; brand-600 mide 5.18:1. */
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ============================================================
 * App layout shell
 * ============================================================ */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}
.app-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

/* ============================================================
 * Sidebar component
 * NOTA: cuando exista app.css este bloque debe migrar allí.
 * Vive aquí temporalmente para que sidebar.php no se vea roto.
 * ============================================================ */
.app-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--sidebar-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    overflow: hidden;
}
.sidebar-brand-link {
    display: block;
    line-height: 0;
}
/* SVG horizontal con padding interno → margenes negativos compensan */
.sidebar-brand-logo {
    height: 110px;
    width: auto;
    margin: -32px -20px;
    display: block;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-menu-item + .sidebar-menu-item { margin-top: 2px; }

a.sidebar-menu-link,
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: var(--sidebar-text);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-left: 3px solid transparent;
}
a.sidebar-menu-link:hover,
.sidebar-menu-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    text-decoration: none;
}
a.sidebar-menu-link.is-active,
.sidebar-menu-item.is-active > a.sidebar-menu-link {
    background: var(--sidebar-active);
    border-left-color: #ffffff;
    color: #ffffff;
}
.sidebar-menu-icon {
    width: 18px;
    text-align: center;
    color: var(--sidebar-text-muted);
}
.sidebar-menu-link:hover .sidebar-menu-icon,
.sidebar-menu-link.is-active .sidebar-menu-icon { color: #ffffff; }

.sidebar-menu-empty {
    padding: 18px;
    color: var(--sidebar-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Footer del sidebar — usuario + toggle de tema */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-divider);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-600);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--sidebar-text-muted);
    text-transform: capitalize;
}

.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--sidebar-divider);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-theme-toggle:hover {
    background: var(--sidebar-hover);
    border-color: rgba(255,255,255,0.18);
}
.sidebar-theme-toggle .theme-icon-dark { display: none; }
.sidebar-theme-toggle .theme-icon-light { display: inline-block; }
:root[data-menu-color="dark"] .sidebar-theme-toggle .theme-icon-dark { display: inline-block; }
:root[data-menu-color="dark"] .sidebar-theme-toggle .theme-icon-light { display: none; }

/* ── Dark mode: content area ──────────────────────────────────── */
:root[data-menu-color="dark"] .app-content { background: var(--body-bg); }
:root[data-menu-color="dark"] body { background-color: var(--body-bg); color: var(--body-text); }
:root[data-menu-color="dark"] h1,:root[data-menu-color="dark"] h2,
:root[data-menu-color="dark"] h3,:root[data-menu-color="dark"] h4,
:root[data-menu-color="dark"] h5,:root[data-menu-color="dark"] h6 { color: var(--surface-900); }
:root[data-menu-color="dark"] p,:root[data-menu-color="dark"] span,
:root[data-menu-color="dark"] label { color: var(--body-text); }

/* ── Dark mode: cards ─────────────────────────────────────────── */
:root[data-menu-color="dark"] .card,:root[data-menu-color="dark"] .card-app {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 0 0 1px rgba(254,215,170,.06);
}
:root[data-menu-color="dark"] .card-header,
:root[data-menu-color="dark"] .card-header-gradient { border-bottom-color: var(--card-border); }

/* ── Dark mode: tables ────────────────────────────────────────── */
:root[data-menu-color="dark"] .table-app thead th {
    background: #2D3239;
    color: var(--brand-200);
    border-bottom: 2px solid var(--card-border);
    border-top: none;
}
:root[data-menu-color="dark"] .table-app tbody td {
    border-bottom-color: #2D3239;
    color: var(--body-text);
}
:root[data-menu-color="dark"] .table-app tbody tr:hover td { background: #2D3239; }

/* ── Dark mode: DataTables chrome ─────────────────────────────── */
:root[data-menu-color="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-menu-color="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--body-text);
}
:root[data-menu-color="dark"] .dataTables_wrapper .dataTables_info { color: var(--body-text); }
:root[data-menu-color="dark"] .dt-paging .page-link {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--body-text) !important;
}
:root[data-menu-color="dark"] .dt-paging .page-link:hover {
    background: #2D3239 !important;
    border-color: var(--brand-200) !important;
    color: var(--brand-200) !important;
}
:root[data-menu-color="dark"] .dt-paging .page-item.active .page-link,
:root[data-menu-color="dark"] .dt-paging-button.active .page-link {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}

/* ── Dark mode: badges ────────────────────────────────────────── */
:root[data-menu-color="dark"] .badge-activo   { background: rgba(254,215,170,.18); color: var(--brand-200); }
:root[data-menu-color="dark"] .badge-inactivo { background: #2D3239; color: #9aa39d; border-color: #2a3a32; }
:root[data-menu-color="dark"] .badge-amber    { background: rgba(245,158,11,.16); color: #fcd34d; }
:root[data-menu-color="dark"] .badge-cargo    { background: rgba(234,88,12,.18); color: var(--brand-200); border-color: rgba(254,215,170,.3); }
:root[data-menu-color="dark"] .badge-esp      { background: rgba(129,140,248,.18); color: #a5b4fc; }

/* ── Dark mode: forms / inputs ────────────────────────────────── */
:root[data-menu-color="dark"] .form-control,
:root[data-menu-color="dark"] .form-select {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--body-text);
}
:root[data-menu-color="dark"] .form-control:focus,
:root[data-menu-color="dark"] .form-select:focus {
    background: var(--card-bg);
    border-color: var(--brand-500);
    color: var(--body-text);
    box-shadow: 0 0 0 3px rgba(234,88,12,.18);
}
:root[data-menu-color="dark"] .form-control::placeholder { color: #6b7c72; }
:root[data-menu-color="dark"] .select2-container--default .select2-selection--single,
:root[data-menu-color="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--body-text) !important;
}
:root[data-menu-color="dark"] .select2-container--default .select2-selection__rendered { color: var(--body-text) !important; }
:root[data-menu-color="dark"] .select2-dropdown { background: var(--card-bg); border-color: var(--card-border); }
:root[data-menu-color="dark"] .select2-results__option { color: var(--body-text); }
:root[data-menu-color="dark"] .select2-results__option--highlighted { background: var(--brand-600) !important; color: #fff !important; }

/* ── Dark mode: modals ────────────────────────────────────────── */
:root[data-menu-color="dark"] .modal-content {
    background: var(--card-bg);
    color: var(--body-text);
    border-color: var(--card-border);
}
:root[data-menu-color="dark"] .modal-body { background: var(--card-bg); }
:root[data-menu-color="dark"] .modal-footer { border-top-color: var(--card-border); background: var(--card-bg); }
:root[data-menu-color="dark"] .modal-header { border-bottom-color: var(--card-border); }

/* ── Dark mode: FullCalendar ──────────────────────────────────── */
:root[data-menu-color="dark"] .fc-theme-standard td,
:root[data-menu-color="dark"] .fc-theme-standard th,
:root[data-menu-color="dark"] .fc-scrollgrid { border-color: var(--card-border) !important; }
:root[data-menu-color="dark"] .fc,
:root[data-menu-color="dark"] .fc-col-header-cell-cushion,
:root[data-menu-color="dark"] .fc-daygrid-day-number,
:root[data-menu-color="dark"] .fc-timegrid-slot-label-cushion { color: var(--body-text); }
:root[data-menu-color="dark"] .fc-daygrid-day.fc-day-today,
:root[data-menu-color="dark"] .fc-timegrid-col.fc-day-today { background: rgba(234,88,12,.08) !important; }
:root[data-menu-color="dark"] .fc-col-header { background: #2D3239; }
:root[data-menu-color="dark"] .fc-view-harness { background: var(--card-bg); }

/* Responsive: colapsa sidebar a top en mobile */
@media (max-width: 900px) {
    .app-wrapper { flex-direction: column; }
    .app-sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
    }
    .sidebar-nav { max-height: 280px; }
}