/* ==========================================================================
   SAO Logistics · Esquemas de color por empresa
   --------------------------------------------------------------------------
   El SuperAdministrador asigna a cada empresa un esquema (tbl_company.theme) y el panel lo aplica
   con <html data-theme="..."> (general.js → applyTheme). Cada esquema solo redefine las variables
   que usa custom.css; el resto del diseño es el mismo. El esquema por defecto (sao_blue, el azul del
   panel SAO OCR) está definido en custom.css (:root).

   Variables:
     --so-blue      color principal (títulos, botones primarios, enlaces)
     --so-blue-2    principal claro (hover, barras)
     --so-blue-soft fondo suave del principal (píldoras, filas activas)
     --so-cyan      acento (iconos activos, bordes de foco, degradados)
     --so-cyan-soft fondo suave del acento
     --so-navy      fondo del menú lateral
     --so-navy-2    botones del menú lateral
     --so-side-text texto del menú lateral
     --so-side-icon iconos del menú lateral
     --so-bg        fondo de la página
   ========================================================================== */

/* Océano: azul petróleo con acento aguamarina */
:root[data-theme="ocean"] {
    --so-blue: #035388; --so-blue-2: #0a6ea8; --so-blue-soft: #e3f1f9;
    --so-cyan: #2cb1bc; --so-cyan-soft: #ddf5f7;
    --so-navy: #0b2545; --so-navy-2: #13335c; --so-side-text: #d6e6f5; --so-side-icon: #7fc4e8;
    --so-bg: #f1f6f9; --so-shadow: 0 6px 24px rgba(3, 83, 136, 0.08);
}

/* Esmeralda: verde bosque con acento menta */
:root[data-theme="emerald"] {
    --so-blue: #065f46; --so-blue-2: #047857; --so-blue-soft: #e4f5ee;
    --so-cyan: #34d399; --so-cyan-soft: #dcfbee;
    --so-navy: #042f2e; --so-navy-2: #0b403f; --so-side-text: #d7f0e9; --so-side-icon: #7ddbb6;
    --so-bg: #f2f7f5; --so-shadow: 0 6px 24px rgba(6, 95, 70, 0.08);
}

/* Grafito: gris carbón con acento ámbar */
:root[data-theme="graphite"] {
    --so-blue: #374151; --so-blue-2: #4b5563; --so-blue-soft: #eceff3;
    --so-cyan: #f59e0b; --so-cyan-soft: #fff3dc;
    --so-navy: #111827; --so-navy-2: #1f2937; --so-side-text: #e5e7eb; --so-side-icon: #9ca3af;
    --so-bg: #f4f5f7; --so-shadow: 0 6px 24px rgba(17, 24, 39, 0.08);
}

/* Atardecer: naranja terracota con acento melocotón */
:root[data-theme="sunset"] {
    --so-blue: #c2410c; --so-blue-2: #ea580c; --so-blue-soft: #feeede;
    --so-cyan: #fb923c; --so-cyan-soft: #ffedd5;
    --so-navy: #431407; --so-navy-2: #5c1f0c; --so-side-text: #fde8d8; --so-side-icon: #fdba74;
    --so-bg: #faf5f1; --so-shadow: 0 6px 24px rgba(194, 65, 12, 0.08);
}

/* Violeta: púrpura profundo con acento lavanda */
:root[data-theme="violet"] {
    --so-blue: #5b21b6; --so-blue-2: #7c3aed; --so-blue-soft: #efe9fb;
    --so-cyan: #a78bfa; --so-cyan-soft: #ede9fe;
    --so-navy: #2e1065; --so-navy-2: #3f1a85; --so-side-text: #e9e2fa; --so-side-icon: #c4b5fd;
    --so-bg: #f5f3fa; --so-shadow: 0 6px 24px rgba(91, 33, 182, 0.08);
}

/* Carmesí: granate con acento rosa */
:root[data-theme="crimson"] {
    --so-blue: #9f1239; --so-blue-2: #be123c; --so-blue-soft: #fde8ee;
    --so-cyan: #fb7185; --so-cyan-soft: #ffe4e6;
    --so-navy: #4c0519; --so-navy-2: #6b0a26; --so-side-text: #fbe2e8; --so-side-icon: #fda4af;
    --so-bg: #faf3f5; --so-shadow: 0 6px 24px rgba(159, 18, 57, 0.08);
}

/* Turquesa: verde azulado con acento turquesa claro */
:root[data-theme="teal"] {
    --so-blue: #0f766e; --so-blue-2: #0d9488; --so-blue-soft: #e0f4f2;
    --so-cyan: #2dd4bf; --so-cyan-soft: #ccfbf1;
    --so-navy: #042f2e; --so-navy-2: #0f4544; --so-side-text: #d6f1ee; --so-side-icon: #5eead4;
    --so-bg: #f0f7f6; --so-shadow: 0 6px 24px rgba(15, 118, 110, 0.08);
}

/* Ámbar: marrón tostado con acento dorado */
:root[data-theme="amber"] {
    --so-blue: #92400e; --so-blue-2: #b45309; --so-blue-soft: #fbeedd;
    --so-cyan: #fbbf24; --so-cyan-soft: #fef3c7;
    --so-navy: #451a03; --so-navy-2: #5f2a0a; --so-side-text: #fbe9d2; --so-side-icon: #fcd34d;
    --so-bg: #faf6f0; --so-shadow: 0 6px 24px rgba(146, 64, 14, 0.08);
}

/* Medianoche: azul noche con acento cielo */
:root[data-theme="midnight"] {
    --so-blue: #1e293b; --so-blue-2: #334155; --so-blue-soft: #e8edf4;
    --so-cyan: #38bdf8; --so-cyan-soft: #e0f2fe;
    --so-navy: #020617; --so-navy-2: #0f172a; --so-side-text: #dbe4f2; --so-side-icon: #7dd3fc;
    --so-bg: #f2f4f8; --so-shadow: 0 6px 24px rgba(30, 41, 59, 0.1);
}

/* Muestras de color (selector de esquema del superusuario) */
.so-swatch { display: inline-flex; gap: 2px; vertical-align: middle; }
.so-swatch i { display: inline-block; width: var(--sw-size, 14px); height: var(--sw-size, 14px); border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.so-theme-option { border: 2px solid var(--so-border); border-radius: .8rem; padding: .75rem .9rem; cursor: pointer; display: flex; align-items: center; gap: .75rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.so-theme-option:hover { border-color: var(--so-cyan); }
.so-theme-option.active { border-color: var(--so-blue-2); box-shadow: 0 0 0 .2rem var(--so-blue-soft); }
.so-theme-option .so-theme-name { font-weight: 600; font-size: .9rem; }
.so-theme-option .so-theme-preview { width: 64px; height: 40px; border-radius: .5rem; overflow: hidden; display: grid; grid-template-columns: 22px 1fr; border: 1px solid var(--so-border); flex: 0 0 auto; }
.so-theme-option .so-theme-preview i { display: block; }