/* ==========================================================
   MAYRÁN ERP
   Design System v2.0
========================================================== */

:root{

    /* ======================================================
       COLORES
    ====================================================== */

    --primary:#0F4C81;
    --primary-light:#1565A9;
    --primary-dark:#093252;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#0EA5E9;

    /* ======================================================
       GRISES
    ====================================================== */

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --gray-900:#111827;

    /* ======================================================
       FONDOS
    ====================================================== */

    --background:#F4F7FB;

    --surface:#FFFFFF;

    --surface-hover:#F8FAFC;

    /* ======================================================
       TEXTOS
    ====================================================== */

    --text-primary:var(--gray-800);

    --text-secondary:var(--gray-500);

    --text-light:#FFFFFF;

    /* ======================================================
       BORDES
    ====================================================== */

    --border-color:#E5E7EB;

    /* ======================================================
       SOMBRAS
    ====================================================== */

    --shadow-xs:0 1px 2px rgba(0,0,0,.05);

    --shadow-sm:0 2px 6px rgba(0,0,0,.06);

    --shadow-md:0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:0 18px 40px rgba(0,0,0,.12);

    /* ======================================================
       RADIOS
    ====================================================== */

    --radius-xs:6px;

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:30px;

    /* ======================================================
       ESPACIADOS
    ====================================================== */

    --space-xs:4px;

    --space-sm:8px;

    --space-md:16px;

    --space-lg:24px;

    --space-xl:32px;

    --space-2xl:48px;

    /* ======================================================
       TIPOGRAFÍA
    ====================================================== */

    --font-family:
        "Segoe UI",
        Inter,
        Roboto,
        sans-serif;

    --font-xs:12px;

    --font-sm:14px;

    --font-md:16px;

    --font-lg:20px;

    --font-xl:28px;

    --font-2xl:36px;

    /* ======================================================
       TRANSICIONES
    ====================================================== */

    --transition:.25s ease;

}

:root[data-tema="claro"] { --primary:#009B4D; --primary-light:#16A34A; --primary-dark:#006B35; }
:root[data-tema="oscuro"] { --primary:#00A651; --primary-light:#22C55E; --primary-dark:#006B35; --gray-50:#111827; --gray-100:#1F2937; --gray-200:#374151; --gray-900:#F9FAFB; }

:root[data-tema="claro"] body,
:root[data-tema="claro"] .content,
:root[data-tema="claro"] .main,
:root[data-tema="claro"] .topbar,
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .dashboard-card,
:root[data-tema="claro"] .modal-contenido { background:#fff; color:#111827; }

:root[data-tema="oscuro"] body,
:root[data-tema="oscuro"] .content,
:root[data-tema="oscuro"] .main,
:root[data-tema="oscuro"] .topbar,
:root[data-tema="oscuro"] .card,
:root[data-tema="oscuro"] .dashboard-card,
:root[data-tema="oscuro"] .modal-contenido,
:root[data-tema="oscuro"] .tabla-container { background:#111827; color:#f9fafb; }

:root[data-tema="oscuro"] h1,
:root[data-tema="oscuro"] h2,
:root[data-tema="oscuro"] h3,
:root[data-tema="oscuro"] p,
:root[data-tema="oscuro"] label,
:root[data-tema="oscuro"] td,
:root[data-tema="oscuro"] th { color:#f9fafb; }

:root[data-tema="oscuro"] .form-control { background:#1f2937; color:#fff; border-color:#4b5563; }
:root[data-tema="oscuro"] .sidebar { background:#071b32; }
:root[data-tema="oscuro"] .usuario-info,
:root[data-tema="oscuro"] .usuario-info span,
:root[data-tema="oscuro"] .usuario-info small,
:root[data-tema="oscuro"] .menu-usuario,
:root[data-tema="oscuro"] .menu-usuario button { background:#111827; color:#f9fafb; }

:root[data-tema="oscuro"] .page,
:root[data-tema="oscuro"] .modulo,
:root[data-tema="oscuro"] #contenido-principal,
:root[data-tema="oscuro"] .modulo .card { background:#111827 !important; color:#f9fafb !important; }

:root[data-tema="oscuro"] .topbar,
:root[data-tema="oscuro"] .topbar h2 { background:#111827 !important; color:#f9fafb !important; border-color:#374151 !important; }

:root[data-tema="oscuro"] .usuario-info span,
:root[data-tema="oscuro"] .usuario-info small,
:root[data-tema="oscuro"] .flecha,
:root[data-tema="oscuro"] .icon-button .material-symbols-rounded { color:#f9fafb !important; }

:root[data-tema="oscuro"] .usuario-btn:hover,
:root[data-tema="oscuro"] .icon-button:hover { background:#1f2937 !important; }

:root[data-tema="oscuro"] .modulo h1,
:root[data-tema="oscuro"] .modulo h2,
:root[data-tema="oscuro"] .modulo h3,
:root[data-tema="oscuro"] .modulo p { color:#f9fafb !important; }

:root[data-tema="oscuro"] .cards .card,
:root[data-tema="oscuro"] .dashboard-card,
:root[data-tema="oscuro"] .financial-item,
:root[data-tema="oscuro"] .indicator-item,
:root[data-tema="oscuro"] .status-item,
:root[data-tema="oscuro"] .activity-item,
:root[data-tema="oscuro"] .alert-item,
:root[data-tema="oscuro"] .chart-placeholder,
:root[data-tema="oscuro"] .dashboard-table,
:root[data-tema="oscuro"] .dashboard-table th,
:root[data-tema="oscuro"] .dashboard-table td { background:#111827 !important; color:#f9fafb !important; border-color:#374151 !important; }

:root[data-tema="oscuro"] .dashboard-card-header,
:root[data-tema="oscuro"] .page-header,
:root[data-tema="oscuro"] .modulo-header,
:root[data-tema="oscuro"] .modulo-footer { background:#111827 !important; color:#f9fafb !important; border-color:#374151 !important; }

:root[data-tema="oscuro"] .card-title,
:root[data-tema="oscuro"] .card-value,
:root[data-tema="oscuro"] .financial-label,
:root[data-tema="oscuro"] .system-item,
:root[data-tema="oscuro"] .system-item span,
:root[data-tema="oscuro"] .system-item strong,
:root[data-tema="oscuro"] .subtitulo-modulo { color:#d1d5db !important; }

:root[data-tema="oscuro"] .dashboard-table tr:nth-child(even),
:root[data-tema="oscuro"] .tabla tr:nth-child(even) { background:#1f2937 !important; }

:root[data-tema="oscuro"] .tabla,
:root[data-tema="oscuro"] .tabla tbody,
:root[data-tema="oscuro"] .tabla tbody tr,
:root[data-tema="oscuro"] .tabla tbody tr:nth-child(odd),
:root[data-tema="oscuro"] .tabla tbody tr:nth-child(even),
:root[data-tema="oscuro"] .tabla tbody td { background:#111827 !important; color:#f9fafb !important; border-color:#374151 !important; }

:root[data-tema="oscuro"] .tabla tbody tr:nth-child(even),
:root[data-tema="oscuro"] .tabla tbody tr:nth-child(even) td { background:#1f2937 !important; }

:root[data-tema="oscuro"] .tabla thead th { background:#166534 !important; color:#fff !important; }
:root[data-tema="oscuro"] .badge-success { background:#dcfce7 !important; color:#166534 !important; }

:root[data-tema="oscuro"] .dashboard-section,
:root[data-tema="oscuro"] .dashboard-buttons,
:root[data-tema="oscuro"] .acciones-modulo { background:#111827 !important; color:#f9fafb !important; border-color:#374151 !important; }

:root[data-tema="oscuro"] .dashboard-section h2,
:root[data-tema="oscuro"] .dashboard-section h2 * { color:#f9fafb !important; }

:root[data-tema="oscuro"] .dashboard-buttons .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) { background:#1f2937 !important; color:#f9fafb !important; border:1px solid #4b5563 !important; }

:root[data-tema="oscuro"] .dashboard-buttons .btn-warning,
:root[data-tema="oscuro"] .dashboard-buttons .btn-info { color:#111827 !important; }

:root[data-tema="oscuro"] .cards .card,
:root[data-tema="oscuro"] .dashboard-card,
:root[data-tema="oscuro"] .dashboard-section,
:root[data-tema="oscuro"] .modulo .card {
    border:1px solid rgba(148,163,184,.28) !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
}

:root[data-tema="oscuro"] .cards .card:hover,
:root[data-tema="oscuro"] .dashboard-card:hover {
    border-color:rgba(34,197,94,.65) !important;
    transform:translateY(-2px);
    transition:all .2s ease;
}

:root[data-tema="oscuro"] #panelSoporte,
:root[data-tema="oscuro"] #respuestaSoporte { background:#111827 !important; color:#f9fafb !important; }
:root[data-tema="oscuro"] #panelSoporte input { background:#1f2937 !important; color:#fff !important; border-color:#4b5563 !important; }