/* ════════════════════════════════════════════════════════════════════════════
   TOKENS DE PALETA — Este archivo es el único punto de verdad para los
   colores del sistema. Se carga en TODAS las páginas (autenticadas y no).
   Para cambiar la paleta completa: editar los bloques :root y
   [data-theme="dark"] en dark-mode.css.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta principal (Emerald Green — default) ───────────────────────── */
    --c-primary:          #059669;        /* emerald-600 */
    --c-primary-dark:     #047857;        /* emerald-700 — hover */
    --c-primary-darker:   #065f46;        /* emerald-800 — active */
    --c-primary-medium:   #10b981;        /* emerald-500 */
    --c-primary-accent:   #34d399;        /* emerald-400 — primary en dark mode */
    --c-primary-accent2:  #6ee7b7;        /* emerald-300 — hover en dark mode */
    --c-primary-light:    #ecfdf5;        /* emerald-50  — fondos sutiles */
    --c-primary-border:   #a7f3d0;        /* emerald-200 — bordes sutiles */
    --c-primary-rgb:      5, 150, 105;    /* para rgba(var(--c-primary-rgb), alpha) */

    /* ── Sidebar (siempre oscuro, independiente del modo) ─────────────────── */
    --sidebar-bg:          #064e3b;       /* emerald-900 */
    --sidebar-accent:      #34d399;       /* borde/ícono activo */
    --sidebar-accent-rgb:  52, 211, 153;  /* para rgba(var(--sidebar-accent-rgb), alpha) */
    --sidebar-flyout-bg:   #053d2e;       /* panel flyout colapsado */
    --sidebar-toggle-bg:   #0a3d2e;       /* botón toggle */

    /* ── Acción / WhatsApp ────────────────────────────────────────────────── */
    --c-action:            #1a9e6a;       /* botones de acción principales */
    --c-action-hover:      #158a5c;       /* hover de acción */
    --c-action-rgb:        26, 158, 106;  /* para rgba() */

    /* ── Colores semánticos ───────────────────────────────────────────────── */
    --c-secondary:      #253858;
    --c-secondary-dark: #172b4d;
    --c-bg:             #f0f4f1;
    --c-surface:        #ffffff;
    --c-text:           #172b4d;
    --c-text-muted:     #5e6c84;
    --c-border:         #dfe1e6;
    --c-success:        #006644;
    --c-success-light:  #e3fcef;
    --c-danger:         #de350b;
    --c-danger-light:   #ffebe6;
    --c-warning:        #ff991f;
    --c-warning-light:  #fffae6;

    /* ── Bootstrap token overrides ────────────────────────────────────────── */
    --bs-primary:               var(--c-primary);
    --bs-primary-rgb:           var(--c-primary-rgb);
    --bs-primary-bg-subtle:     var(--c-primary-light);
    --bs-primary-border-subtle: var(--c-primary-border);
    --bs-primary-text-emphasis: var(--c-primary-dark);
    --bs-link-color:            var(--c-primary);
    --bs-link-color-rgb:        var(--c-primary-rgb);
    --bs-link-hover-color:      var(--c-primary-dark);
    --bs-body-bg:               var(--c-bg);
    --bs-body-color:            var(--c-text);
    --bs-secondary-color:       var(--c-text-muted);
    --bs-border-color:          var(--c-border);
    --bs-success:               var(--c-success);
    --bs-success-rgb:           0, 102, 68;
    --bs-danger:                var(--c-danger);
    --bs-danger-rgb:            222, 53, 11;
}

/* ── Paleta Índigo / Violeta ────────────────────────────────────────────── */
[data-palette="indigo"] {
    --c-primary:          #4f46e5;
    --c-primary-dark:     #4338ca;
    --c-primary-darker:   #3730a3;
    --c-primary-medium:   #6366f1;
    --c-primary-accent:   #818cf8;
    --c-primary-accent2:  #a5b4fc;
    --c-primary-light:    #eef2ff;
    --c-primary-border:   #c7d2fe;
    --c-primary-rgb:      79, 70, 229;
    --sidebar-bg:         #312e81;
    --sidebar-accent:     #818cf8;
    --sidebar-accent-rgb: 129, 140, 248;
    --sidebar-flyout-bg:  #27236b;
    --sidebar-toggle-bg:  #251e6e;
    --c-action:           #4f46e5;
    --c-action-hover:     #4338ca;
    --c-action-rgb:       79, 70, 229;
    --bs-primary:         var(--c-primary);
    --bs-primary-rgb:     var(--c-primary-rgb);
}

/* ── Paleta Teal / Cian ─────────────────────────────────────────────────── */
[data-palette="teal"] {
    --c-primary:          #0d9488;
    --c-primary-dark:     #0f766e;
    --c-primary-darker:   #115e59;
    --c-primary-medium:   #14b8a6;
    --c-primary-accent:   #2dd4bf;
    --c-primary-accent2:  #5eead4;
    --c-primary-light:    #f0fdfa;
    --c-primary-border:   #99f6e4;
    --c-primary-rgb:      13, 148, 136;
    --sidebar-bg:         #134e4a;
    --sidebar-accent:     #2dd4bf;
    --sidebar-accent-rgb: 45, 212, 191;
    --sidebar-flyout-bg:  #0d3b38;
    --sidebar-toggle-bg:  #0a3330;
    --c-action:           #0d9488;
    --c-action-hover:     #0f766e;
    --c-action-rgb:       13, 148, 136;
    --bs-primary:         var(--c-primary);
    --bs-primary-rgb:     var(--c-primary-rgb);
}

/* ── Paleta Púrpura / Violet ────────────────────────────────────────────── */
[data-palette="purple"] {
    --c-primary:          #9333ea;
    --c-primary-dark:     #7e22ce;
    --c-primary-darker:   #6b21a8;
    --c-primary-medium:   #a855f7;
    --c-primary-accent:   #c084fc;
    --c-primary-accent2:  #d8b4fe;
    --c-primary-light:    #faf5ff;
    --c-primary-border:   #e9d5ff;
    --c-primary-rgb:      147, 51, 234;
    --sidebar-bg:         #3b0764;
    --sidebar-accent:     #c084fc;
    --sidebar-accent-rgb: 192, 132, 252;
    --sidebar-flyout-bg:  #2e0554;
    --sidebar-toggle-bg:  #280449;
    --c-action:           #9333ea;
    --c-action-hover:     #7e22ce;
    --c-action-rgb:       147, 51, 234;
    --bs-primary:         var(--c-primary);
    --bs-primary-rgb:     var(--c-primary-rgb);
}

/* ── Paleta Industry (steel-blue) — Fase 1 rediseño OrdenTrabajo ─────────── */
[data-palette="industry"] {
    --c-primary:          #5980a6;
    --c-primary-dark:     #46688a;
    --c-primary-darker:   #35506b;
    --c-primary-medium:   #6d93b8;
    --c-primary-accent:   #86a8c7;
    --c-primary-accent2:  #a3c0da;
    --c-primary-light:    #eef3f8;
    --c-primary-border:   #c9d8e6;
    --c-primary-rgb:      89, 128, 166;
    --sidebar-bg:         #1d2d3d;
    --sidebar-accent:     #86a8c7;
    --sidebar-accent-rgb: 134, 168, 199;
    --sidebar-flyout-bg:  #16232f;
    --sidebar-toggle-bg:  #16232f;
    --c-action:           #5980a6;
    --c-action-hover:     #46688a;
    --c-action-rgb:       89, 128, 166;
    --bs-primary:         var(--c-primary);
    --bs-primary-rgb:     var(--c-primary-rgb);
}

/* ── Radios compartidos — Fase 1 rediseño: esquinas cuadradas en toda la app.
   Ver site.css para el detalle de qué componentes las usan y las excepciones
   (círculos intencionales, gráfico de tarjeta de crédito). ───────────────── */
:root {
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ── Tipografía Industry (Barlow / Barlow Condensed) — Fase 2 rediseño,
   auto-hospedada en wwwroot/fonts/barlow/ (mismo criterio que Courier Prime
   para el PDF de cotización: sin dependencia de Google Fonts en runtime).
   Aplica globalmente, igual que los radios de arriba. ──────────────────── */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/barlow/Barlow-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/barlow/Barlow-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/barlow/Barlow-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/barlow/BarlowCondensed-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow/BarlowCondensed-SemiBold.ttf") format("truetype");
}

:root {
    --font-body:    "Barlow", system-ui, -apple-system, sans-serif;
    --font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
}
