/* ============================================================
   tokens.css — DuMan design tokens
   Fase 2 (2026-03-30): CSS custom properties centralizadas.
   Todos los valores de color, layout y z-index del sistema
   viven aquí. Los demás archivos CSS consumen estas variables.
   ============================================================ */

:root {
    /* ── Acento de marca — agua apagada, opción "más cómoda" ──
         (probado: latón #c9a44d / antes teal genérico #4fd1c5 de DUMAN.
         Este acento da ~5:1 de contraste con texto blanco — el latón y
         el teal, usados como fondo de botón con texto blanco, no llegan
         a AA. Ver docs/PLAN_CNVC.md para el resto de la propuesta.) ── */
    --fm-accent:        #1f7a8c;
    --fm-accent-dark:   #175f6e;   /* hover / foco */
    --fm-accent-ink:    #ffffff;   /* texto sobre --fm-accent — este acento
                                       es suficientemente oscuro para blanco */

    /* ── Variantes alpha — se recalculan automáticamente cuando
         JS cambia --fm-accent via setProperty() ─────────────── */
    --fm-accent-lo: color-mix(in srgb, var(--fm-accent)  8%, transparent);
    --fm-accent-md: color-mix(in srgb, var(--fm-accent) 18%, transparent);
    --fm-accent-hi: color-mix(in srgb, var(--fm-accent) 38%, transparent);

    /* ── Paleta dark shell (navbar + sidebar) — navy de guardia
         nocturna en vez del azul-pizarra genérico anterior ──── */
    --fm-shell-900: #081420;   /* navbar bg */
    --fm-shell-800: #0f2436;   /* sidebar bg */
    --fm-shell-700: #14314a;   /* sidebar item hover bg */
    --fm-shell-600: #1a3c57;   /* dropdown bg */
    --fm-shell-500: #22506f;   /* hover bg genérico / texto oscuro */
    --fm-shell-400: #2b5a78;   /* bordes, scrollbar thumb */
    --fm-shell-300: #0b1d2c;   /* divisor entre items de sidebar */

    /* ── Texto sobre fondo oscuro ──────────────────────────── */
    --fm-text-bright:    #ffffff;   /* activo / hover */
    --fm-text-base:      #cccccc;   /* navbar links */
    --fm-text-tertiary:  #aaaaaa;   /* panel headings */
    --fm-text-secondary: #999999;   /* sidebar nav links */
    --fm-text-muted:     #888888;   /* labels, stat card secundario */
    --fm-text-dim:       #666666;   /* iconos en reposo */

    /* ── Colores semánticos (stat cards) ───────────────────── */
    --fm-success: #5cb85c;
    --fm-warning: #f0ad4e;
    --fm-danger:  #d9534f;

    /* ── Acento cálido "cabo" (dirección "Bitácora", 2026-09-17) —
         uso puntual: badges destacados, anillos, endpoint de gráfico.
         No reemplaza --fm-accent ni se usa en texto de cuerpo: valida
         AA solo en superficies grandes / texto ≥18px / fills de ícono. ── */
    --fm-accent-cabo:      #b9741f;
    --fm-accent-cabo-dark: #8f5914;

    /* ── Radios y sombras — sistema "más moderno" (2026-08-10):
         capas de sombra en vez de solo borde plano, radios más
         generosos en cards/botones/tablas. ─────────────────── */
    --fm-r-sm: 8px;
    --fm-r-md: 12px;
    --fm-r-lg: 16px;
    --fm-sh-xs: 0 1px 2px rgba(15,25,35,.05);
    --fm-sh-sm: 0 2px 8px rgba(15,25,35,.07), 0 1px 2px rgba(15,25,35,.05);
    --fm-sh-md: 0 10px 28px rgba(15,25,35,.10), 0 2px 6px rgba(15,25,35,.06);
    --fm-sh-ac: 0 6px 16px color-mix(in srgb, var(--fm-accent) 30%, transparent);

    /* ── Curva de movimiento "swell" (dirección "Bitácora") — un leve
         overshoot en vez de ease por defecto, reusada en botones primarios,
         tarjetas de KPI y tarjetas del Portal: un solo lugar para ajustarla. ── */
    --fm-ease-swell: cubic-bezier(.22, .85, .35, 1.15);

    /* ── Layout ────────────────────────────────────────────── */
    --fm-navbar-h:  56px;
    --fm-sidebar-w: 250px;

    /* ── Z-index ────────────────────────────────────────────── */
    --fm-z-sidebar:  1000;
    --fm-z-overlay:   999;
    --fm-z-navbar:   1010;
}

/* ── Dark mode: overrides para componentes custom ──────────────────────────
   Bootstrap 5.3+ aplica automáticamente dark theme a sus componentes
   (card, table, form-control, modal, etc.) cuando data-bs-theme="dark"
   está en <html>. Solo se sobreescriben aquí los componentes propios.
   ─────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .stat-card {
    background-color: #2d3748;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .stat-card .stat-value {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .stat-card .stat-label {
    color: #a0aec0;
}

/* ── Dark mode: overrides puntuales de componentes propios ─────────────────
   Limpieza 2026-09-17 (dirección "Bitácora", etapa 2): este bloque tenía
   tokens --prov-*/--cli-*/--pin-*/--ppto-*/--pag-*/--suc-* heredados de
   DUMAN (Proveedores/Clientes/Pinturas/Presupuestos/Pagos/Sucursales) sin
   ningún selector real de CNVC que los consumiera — confirmado por grep en
   toda la solución. Sacados; queda solo lo que sí se usa.
   ─────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .fm-sortable:hover {
    background: rgba(255, 255, 255, .06) !important;
}

/* ── Modal de personalización de tema ───────────────────────────────────────
   Siempre oscuro (#0f1e2e), independiente del tema activo.
   ─────────────────────────────────────────────────────────────────────────── */
.fm-theme-modal-content {
    background-color: #0f1e2e;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    color: #dde8f5;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.fm-theme-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 14px 16px 12px;
}

.fm-theme-modal-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f0f6ff;
    letter-spacing: -0.01em;
    margin: 0;
}

.fm-theme-modal-title i { color: #60a5fa; }

.fm-theme-modal-body { padding: 12px 16px 16px; }

.fm-theme-section { margin-bottom: 16px; }
.fm-theme-section:last-child { margin-bottom: 0; }

.fm-theme-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(148, 180, 220, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.fm-appearance-row { display: flex; gap: 6px; }

.fm-appearance-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(176, 200, 230, 0.7);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.15s;
}

.fm-appearance-btn:hover {
    background-color: rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
}

.fm-appearance-btn.active {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.fm-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.fm-color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background-color: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.12s;
    color: rgba(220, 232, 248, 0.8);
}

.fm-color-btn:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.fm-color-btn.active {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
}

.fm-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: block;
}

.fm-color-label { font-size: 0.6875rem; font-weight: 500; }