/* ==========================================================================
   Tema "petroleo" — identidad BluConecta (by Bluunit). PROPIO DE ESTA COPIA:
   no existe en la fuente, así que el sync no lo pisa.
   Decisión y tokens de origen: diseno_temas/DECISION_TEMA.md.

   Se activa con QR_THEME=petroleo en el settings.ini (admin y consola del agente: la consola tiene
   esta COPIA en agente/static/themes/; si se cambia uno, se recopia el otro con las rutas de fuentes ajustadas). Dos modos, mismo archivo:
     - Petróleo claro     → :root[data-qr-theme="petroleo"]
     - Petróleo profundo  → html:root[data-qr-theme="petroleo"][data-coreui-theme="dark"]
       (0,3,1: gana a la sección 6 de qr_tokens.css, que es 0,2,1). El modo lo pone
       el selector del menú (templates/sidebars/riel_bluconecta.html) o la consola.

   Regla del sistema: acá SÓLO tokens (y las @font-face de la marca).
   ========================================================================== */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/bluconecta/saira-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/bluconecta/saira-latin-wght-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/bluconecta/dosis-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/bluconecta/dosis-latin-wght-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   PETRÓLEO CLARO
   -------------------------------------------------------------------------- */
:root[data-qr-theme="petroleo"] {
    /* Tipografía: interfaz en Saira (reemplazo libre de Eurostile), títulos y cifras en Dosis. */
    --qr-font-sans:           "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
    --qr-font-sans-variable:  "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
    --qr-font-display:        "Dosis", "Saira", system-ui, sans-serif;

    /* Primario: escala petróleo. 600 = #0e4f49 (acción del manual). */
    --qr-primary-25:  #f4faf9;
    --qr-primary-50:  #e6f2ef;
    --qr-primary-100: #d2e8e3;
    --qr-primary-125: #cde2dd;
    --qr-primary-150: #c3dcd6;
    --qr-primary-175: #b7d4cd;
    --qr-primary-200: #a3cbc2;
    --qr-primary-300: #72b1a6;
    --qr-primary-400: #3d9387;
    --qr-primary-500: #177a6f;
    --qr-primary-600: #0e4f49;
    --qr-primary-700: #0b413c;
    --qr-primary-800: #083530;
    --qr-primary-900: #052925;
    --qr-primary-950: #031a17;
    --qr-primary-rgb:       14, 79, 73;
    --qr-primary-dark-rgb:  8, 53, 48;
    --qr-primary-light-rgb: 23, 122, 111;
    --qr-primary-400-rgb:   61, 147, 135;
    --qr-primary-soft:      var(--qr-primary-50);
    --qr-primary-subtle:    #dff0ec;

    /* Texto */
    --qr-text:           #0e1f1d;
    --qr-text-emphasis:  #16302c;
    --qr-text-strong:    #2f4b47;
    --qr-text-body:      #3e5753;
    --qr-text-secondary: #4f6561;
    --qr-text-muted:     #748a86;
    --qr-text-faint:     #b9cbc8;
    --qr-text-ghost:     #d9e3e1;
    --qr-text-rgb:       14, 31, 29;
    --qr-text-muted-rgb: 116, 138, 134;

    /* Superficies y bordes (neutros con sesgo petróleo, nunca gris puro) */
    --qr-body-bg:          #eef3f2;
    --qr-surface:          #ffffff;
    --qr-surface-2:        #f5f8f7;
    --qr-surface-3:        #eaf1ef;
    --qr-surface-sunken:   #e3ecea;
    --qr-surface-strong:   #d9e3e1;
    --qr-surface-stronger: #cddad7;
    --qr-surface-inverse:  #0e1f1d;
    --qr-surface-inverse-2:#16302c;
    --qr-border:           #d9e3e1;
    --qr-border-strong:    #b9cbc8;
    --qr-border-soft:      #e4ecea;
    --qr-border-emphasis:  #8fa7a3;
    --qr-control-off:      #b9cbc8;
    --qr-control-off-hover:#a3b9b5;
    --qr-dot-idle:         #b9cbc8;
    --qr-dot-muted:        #8fa7a3;
    --qr-code-bg:          #0e1f1d;
    --qr-code-text:        #d9e3e1;

    /* Estados (validados sobre blanco ≥ 4,5:1 como texto) */
    --qr-success: #3f7f14;  --qr-success-rgb: 63, 127, 20;
    --qr-warning: #d99a1e;  --qr-warning-rgb: 217, 154, 30;
    --qr-danger:  #b3263b;  --qr-danger-rgb:  179, 38, 59;
    --qr-info:    #1f6f8b;  --qr-info-rgb:    31, 111, 139;
    --qr-ok-bg:   #eef6e6;  --qr-ok-border:   #cfe5bb;  --qr-ok-text:   #3f7f14;
    --qr-warn-bg: #fbf3e2;  --qr-warn-border: #efd9a6;  --qr-warn-text: #8a5a00;
    --qr-bad-bg:  #fbecee;  --qr-bad-border:  #f1c6cd;  --qr-bad-text:  #a3223a;
    --qr-info-bg: #e8f2f6;  --qr-info-border: #c6dde7;  --qr-info-text: #1f6f8b;
    --qr-danger-600: #9e2134; --qr-danger-700: #861c2c;
    /* Rampa info: de azul Tailwind a azul petróleo (KPIs, links de tablero, avisos). */
    --qr-info-50:  #eef6f9;  --qr-info-100: #d8eaf1;  --qr-info-200: #b3d5e2;
    --qr-info-300: #82b9cd;  --qr-info-400: #4f98b3;  --qr-info-500: #2b7f9c;
    --qr-info-600: #1f6f8b;  --qr-info-700: #195a71;  --qr-info-800: #144859;
    --qr-info-900: #0f3643;
    --qr-success-solid-hover:  #356c11;
    --qr-success-solid-active: #2c5a0e;
    --qr-success-ink:          #3f7f14;
    --qr-info-solid:           #1f6f8b;
    --qr-info-solid-hover:     #1a5e76;
    --qr-info-solid-active:    #154d61;
    --qr-neutral-solid:        #4f6561;
    --qr-neutral-solid-hover:  #3e5753;
    --qr-neutral-solid-active: #2f4b47;

    /* Links y foco */
    --qr-link:           #0e6d64;
    --qr-link-hover:     #0b413c;
    --qr-link-rgb:       14, 109, 100;
    --qr-focus-border:   #109b8c;
    --qr-focus-ring-color: rgba(16, 155, 140, .28);
    --qr-field-border:       #c9d7d4;
    --qr-field-border-hover: #9fb5b1;
    --qr-field-focus:        #109b8c;
    --qr-field-focus-ring:   rgba(16, 155, 140, .22);
    --qr-field-placeholder:  #7f9591;

    /* Menú lateral y barra de reportes: siempre oscuros (degradé petróleo del manual) */
    --qr-sidebar-bg:          #052925;
    --qr-sidebar-bg-mid:      #0f3a35;
    --qr-sidebar-accent:      #90b73b;
    --qr-sidebar-text:        #cfe5e1;
    --qr-sidebar-text-hover:  #ffffff;
    --qr-sidebar-text-active: #ffffff;
    --qr-sidebar-title:       #9cc3be;
    --qr-sidebar-hover-bg:    rgba(255, 255, 255, .08);
    --qr-sidebar-active-bg:   rgba(255, 255, 255, .14);
    --qr-sidebar-border:      rgba(255, 255, 255, .09);

    /* Banda de tabs de los editores */
    --qr-band-bg:                 #0a332f;
    --qr-band-text:               #cfe6e2;
    --qr-band-rgb:                10, 51, 47;
    --qr-band-soft:               #dff0ec;
    --qr-band-soft-border:        #b9d6d1;
    --qr-band-strip-bg:           #0a332f;
    --qr-band-tab-active-text:    #0e4f49;
    --qr-band-tab-n-active-bg:    #0e4f49;

    /* Reportes: el acento pasa a petróleo y el CTA naranja al primario */
    --qr-report-accent:       #109b8c;
    --qr-report-accent-soft:  #dff0ec;
    --qr-report-ink:          #0e1f1d;
    --qr-report-muted:        #4f6561;
    --qr-report-faint:        #7f9591;
    --qr-report-cta:          #0e4f49;
    --qr-report-cta-hover:    #0b413c;
    --qr-report-cta-soft:     #e6f2ef;
    --qr-report-cta-soft-bd:  #b9d6d1;
    --qr-report-thead:        #eaf1ef;
    --qr-report-thead-ink:    #1d3431;
    --qr-report-thead-bd:     #d0dedb;
    --qr-report-row-hover:    #f5f9f8;

    /* Series de gráficos (validadas con dataviz sobre #ffffff): Voz, Chat, WhatsApp, Bots.
       Los de estado (green/amber/red) quedan para estados: no se remapean. */
    --qr-chart-blue:    #109b8c;  --qr-chart-blue-2:   #3d9387;
    --qr-chart-violet:  #3355b5;  --qr-chart-violet-2: #29458f;
    --qr-chart-indigo:  #3355b5;
    --qr-chart-cyan:    #629101;
    --qr-chart-pink:    #b44a72;
    --qr-chart-teal:    #1f6f8b;  --qr-chart-teal-2:   #0e4f49;
    --qr-chart-slate:   #4f6561;  --qr-chart-muted:    #8fa7a3;
    --qr-chart-grid:    rgba(14, 31, 29, .06);

    /* Forma: controles un poco más altos y redondeados, botones con peso 600 */
    --qr-radius-sm:            6px;
    --qr-control-height-md:    36px;
    --qr-control-radius:       8px;
    --qr-control-padding-x:    .7rem;
    --qr-btn-font-weight:      600;
    --qr-btn-radius:           8px;
    --qr-btn-radius-xs:        6px;
    --qr-btn-padding-x-md:     .9rem;
    --qr-btn-padding-x-sm:     .7rem;
    --qr-card-radius:          12px;
    --qr-card-header-padding-x:1.1rem;
    --qr-modal-radius:         14px;
    --qr-modal-control-radius: 8px;
    --qr-picker-radius:        10px;
    --qr-table-row-height:     44px;
    --qr-table-header-font-weight: 700;
    --qr-shadow-rgb:           5, 41, 37;
    --qr-header-shadow:        0 1px 0 #d9e3e1;
    --qr-sidebar-width:        310px;   /* riel 78 + submenú 232 */
}

/* --------------------------------------------------------------------------
   PETRÓLEO PROFUNDO (oscuro)
   Redefine la paleta literal de la sección 6 (`--qr-dk-*`): los semánticos del
   modo oscuro del sistema la leen, así que todo lo que ya era oscuro sigue solo.
   -------------------------------------------------------------------------- */
html:root[data-qr-theme="petroleo"][data-coreui-theme="dark"],
html:root[data-qr-theme="petroleo"][data-bs-theme="dark"] {
    color-scheme: dark;

    --qr-dk-bg:         #061715;
    --qr-dk-line:       #1d3a36;
    --qr-dk-surface:    #0c2320;
    --qr-dk-surface-2:  #0f2926;
    --qr-dk-text:       #e6f2f0;
    --qr-dk-text-2:     #a9c3bf;
    --qr-dk-text-3:     #7f9d98;
    /* `.form-label` (login incluido) y el estado "inactivo" de reportes usan --qr-report-idle, que el
       sistema sólo define en claro (slate-600): en oscuro quedaba ilegible. 06/10/2026. */
    --qr-report-idle:   var(--qr-dk-text-2);
    /* Los navy/slate/violeta del oscuro base, llevados a la gama petróleo */
    --qr-dk-navy-800:   #16302c;
    --qr-dk-slate-690:  #2d524c;
    --qr-dk-slate-890:  #16362c;
    --qr-dk-violet-870: #1b3b33;
    --qr-dk-slate-795:  #0f2a33;
    --qr-dk-slate-815:  #071a18;
    --qr-dk-cyan-900:   #1d4a55;
    --qr-dk-sky-310:    #9fd0cb;
    --qr-dk-navy-755:   #15352f;
    --qr-dk-navy-670:   #2d524c;
    --qr-dk-navy-705:   #24463f;

    /* Primario en oscuro: el verde "Blu" como acción, con tinta oscura encima */
    --qr-primary-25:  #f9fcf3;
    --qr-primary-50:  #f4f9e8;
    --qr-primary-100: #ebf5d5;
    --qr-primary-125: #e6f2ca;
    --qr-primary-150: #e1f0c0;
    --qr-primary-175: #dcedb5;
    --qr-primary-200: #cfe9a0;
    --qr-primary-300: #c6e18a;
    --qr-primary-400: #b5d86a;
    --qr-primary-500: #a3c655;
    --qr-primary-600: #90b73b;
    --qr-primary-700: #7a9e2c;
    --qr-primary-800: #5f7d20;
    --qr-primary-900: #465d17;
    --qr-primary-950: #2a380d;
    --qr-primary-rgb:       144, 183, 59;
    --qr-primary-dark-rgb:  95, 125, 32;
    --qr-primary-light-rgb: 181, 216, 106;
    --qr-primary-400-rgb:   181, 216, 106;
    --qr-primary:        #90b73b;
    --qr-primary-hover:  #a3c655;
    --qr-primary-light:  #90b73b;
    --qr-primary-soft:   #16362c;
    --qr-primary-subtle: #1b3b33;
    --qr-primary-border-subtle: #2d524c;
    --qr-primary-ink:    #cfe9a0;
    --qr-on-primary:     #0d1a04;
    /* "Inverso" en oscuro = tinta oscura sobre sólidos claros (botones, tooltips) */
    --qr-text-inverse:     #0d1a04;
    --qr-text-inverse-rgb: 13, 26, 4;
    --qr-surface-inverse:  #e6f2f0;
    --qr-surface-inverse-2:#cfe5e1;
    --qr-code-bg:          #03110f;
    --qr-code-text:        #cfe5e1;
    --qr-text-faint:       #4a6964;
    --qr-text-ghost:       #24463f;
    --qr-text-rgb:         230, 242, 240;
    --qr-border-emphasis:  #3d6a63;
    --qr-control-off:      #2d524c;
    --qr-control-off-hover:#3d6a63;
    --qr-dot-idle:         #2d524c;
    --qr-dot-muted:        #4a6964;

    /* Estados en oscuro: tonos claros, todos con tinta oscura en botón */
    --qr-success: #8fca5a;  --qr-success-rgb: 143, 202, 90;
    --qr-warning: #e6b54a;  --qr-warning-rgb: 230, 181, 74;
    --qr-danger:  #ff7a8a;  --qr-danger-rgb:  255, 122, 138;
    --qr-info:    #79b4af;  --qr-info-rgb:    121, 180, 175;
    --qr-ok-bg:   #12301c;  --qr-ok-border:   #2a5a2c;  --qr-ok-text:   #a6d67a;
    --qr-warn-bg: #2e2510;  --qr-warn-border: #5a4419;  --qr-warn-text: #eac578;
    --qr-bad-bg:  #33141b;  --qr-bad-border:  #5c2a33;  --qr-bad-text:  #ff9aa6;
    --qr-info-bg: #0f2a33;  --qr-info-border: #1d4a55;  --qr-info-text: #9fd0cb;
    --qr-danger-600: #ff95a2; --qr-danger-700: #ffadb7;
    --qr-info-400: #9fd0cb;  --qr-info-500: #8fc2bd;  --qr-info-600: #79b4af;  --qr-info-700: #9fd0cb;
    --qr-success-solid-hover:  #a3d575;
    --qr-success-solid-active: #b5de8f;
    --qr-success-ink:          #a6d67a;
    --qr-info-solid:           #79b4af;
    --qr-info-solid-hover:     #8fc2bd;
    --qr-info-solid-active:    #a6cfcb;
    --qr-neutral-solid:        #a9c3bf;
    --qr-neutral-solid-hover:  #bcd4d0;
    --qr-neutral-solid-active: #cfe5e1;

    --qr-link:           #b5d86a;
    --qr-link-hover:     #cfe9a0;
    --qr-link-rgb:       181, 216, 106;
    --qr-focus-border:   #90b73b;
    --qr-focus-ring-color: rgba(144, 183, 59, .32);
    --qr-field-focus:      #90b73b;
    --qr-field-focus-ring: rgba(144, 183, 59, .28);

    --qr-sidebar-bg:        #03110f;
    --qr-sidebar-bg-mid:    #071a18;
    --qr-sidebar-accent:    #b5d86a;
    --qr-sidebar-active-bg: #12312d;

    --qr-band-bg:                 #071a18;
    --qr-band-text:               #cfe5e1;
    --qr-band-rgb:                7, 26, 24;
    --qr-band-soft:               #15352f;
    --qr-band-soft-border:        #2d524c;
    --qr-band-strip-bg:           #071a18;
    --qr-band-tab-active-text:    #b5d86a;
    --qr-band-tab-n-active-bg:    #b5d86a;
    --qr-band-tab-n-active-text:  #0d1a04;

    /* Series de gráficos (validadas con dataviz sobre #0d2522) */
    --qr-chart-blue:    #139b8b;  --qr-chart-blue-2:   #3fb3a5;
    --qr-chart-violet:  #5673d1;  --qr-chart-violet-2: #7a92de;
    --qr-chart-indigo:  #5673d1;
    --qr-chart-cyan:    #6e9e0d;
    --qr-chart-pink:    #c65084;
    --qr-chart-teal:    #79b4af;  --qr-chart-teal-2:   #9fd0cb;
    --qr-chart-green:   #8fca5a;  --qr-chart-amber:    #e6b54a;  --qr-chart-red: #ff7a8a;
    --qr-chart-slate:   #a9c3bf;  --qr-chart-muted:    #7f9d98;
    --qr-chart-grid:    rgba(230, 242, 240, .07);

    --qr-shadow-rgb:    0, 0, 0;
    --qr-header-shadow: 0 1px 0 #1d3a36;
    --qr-backdrop:      rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   PETRÓLEO PROFUNDO en REPORTES
   Los reportes usan su propia paleta oscura ("Midnight", azul marino) en `--rd-*`, que se enciende
   con data-theme="dark" (qr_tokens.css sección 5). Acá se la lleva a la gama petróleo.
   -------------------------------------------------------------------------- */
html:root[data-qr-theme="petroleo"][data-theme="dark"],
html:root[data-qr-theme="petroleo"] [data-theme="dark"] {
    --rd-bg:          #061715;
    --rd-surface:     #0c2320;
    --rd-surface-2:   #0f2926;
    --rd-field:       #061715;
    --rd-cardhd:      #0f2926;
    --rd-cardhd-ink:  #cfe5e1;
    --rd-ink:         #e6f2f0;
    --rd-muted:       #a9c3bf;
    --rd-faint:       #7f9d98;
    --rd-line:        #1d3a36;
    --rd-line-2:      #16302c;
    --rd-accent:      #79b4af;
    --rd-accent-soft: #15352f;
    --rd-cta:         #90b73b;
    --rd-cta-hover:   #a3c655;
    --rd-cta-soft:    #16362c;
    --rd-cta-soft-bd: #2d524c;
    --rd-thead:       #0f2926;
    --rd-thead-2:     #0c2320;
    --rd-thead-ink:   #cfe5e1;
    --rd-thead-bd:    #1d3a36;
    --rd-zebra:       #0c2320;
    --rd-hover:       #12312d;
    --rd-grp:         #1d3a36;
    --rd-grp-hd:      #2d524c;
    --rd-check-bd:    #2d524c;
}