/* ============================================================
   KAESER · DESIGN SYSTEM v3.1
   File: global.css
   Purpose: Design tokens, base reset, typography, spacing,
            charts palette, dark mode and accessibility roots.

   Author : Senior Frontend Architect / UX-UI
   Cambios v3.1:
     · Dark mode con contraste AA (textos blancos legibles)
     · Estados semánticos más visibles en dark
     · Tokens nuevos para sidebar layout (ancho colapsado)
     · Tokens de elevación y glow para gear-loader
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS  (Light theme = default)
   ------------------------------------------------------------
   Todos los valores reutilizables del sistema viven como CSS
   custom properties dentro de :root. Nunca hardcodear hex,
   tamaños o sombras fuera de aquí.
   ============================================================ */
:root{

  /* ---------- 1.1 BRAND CORE — KAESER identity ---------- */
  --k-yellow         : #FFCC00;   /* Primary brand */
  --k-yellow-700     : #B38F00;   /* Hover / pressed */
  --k-yellow-500     : #FFD633;   /* Mid tint */
  --k-yellow-100     : #FFF7CC;   /* Soft fills, notes */

  --k-black          : #111418;   /* Brand black */
  --k-black-900      : #0B0D10;
  --k-black-800      : #1A1F25;

  --k-petrol         : #328095;   /* Secondary brand (petrol) */
  --k-petrol-700     : #22586A;
  --k-petrol-500     : #3D9AB1;
  --k-petrol-100     : #E6F1F5;

  --k-anth           : #363C42;   /* Anthracite (corporate gray) */
  --k-anth-600       : #4A5158;
  --k-anth-300       : #C4CACF;
  --k-anth-100       : #EDEFF1;


  /* ---------- 1.2 PRIMARY / SECONDARY / TERTIARY ---------- */
  /* Aliases semánticos que apuntan a la paleta de marca, para
     que los componentes nunca dependan del nombre del color. */
  --color-primary       : var(--k-yellow);
  --color-primary-hover : var(--k-yellow-700);
  --color-primary-soft  : var(--k-yellow-100);
  --color-on-primary    : var(--k-black);   /* Texto sobre primario */

  --color-secondary       : var(--k-black);
  --color-secondary-hover : var(--k-anth);
  --color-on-secondary    : #FFFFFF;

  --color-tertiary       : var(--k-petrol);
  --color-tertiary-hover : var(--k-petrol-700);
  --color-tertiary-soft  : var(--k-petrol-100);
  --color-on-tertiary    : #FFFFFF;


  /* ---------- 1.3 SURFACE / TEXT / BORDERS ---------- */
  --bg-canvas    : #F5F6F7;   /* Fondo de página (fuera del card) */
  --bg-surface   : #FFFFFF;   /* Superficies/cards */
  --bg-surface-2 : #FAFBFC;   /* Filas alternadas, headers tabla */
  --bg-surface-3 : #EDEFF1;   /* Hover muy sutil */

  --fg-default : #1A1F25;     /* Texto principal */
  --fg-strong  : #0B0D10;     /* Titulares */
  --fg-muted   : #6B7280;     /* Texto auxiliar */
  --fg-subtle  : #9AA3AD;     /* Placeholders, hints */
  --fg-on-dark : #E6E8EB;     /* Texto sobre fondo oscuro */

  --border-default : #E6E8EB;
  --border-strong  : #D7DBDF;
  --border-subtle  : #F0F1F3;


  /* ---------- 1.4 SEMANTIC STATES ---------- */
  --color-success    : #2E7D32;
  --color-success-bg : #E7F4E8;
  --color-success-bd : #B7DEBA;

  --color-warning    : #B7791F;
  --color-warning-bg : #FFF4DE;
  --color-warning-bd : #F3D98A;

  --color-error      : #B00020;
  --color-error-bg   : #FDECEE;
  --color-error-bd   : #F2B9C0;

  --color-info       : #0B7285;
  --color-info-bg    : #E6F1F5;
  --color-info-bd    : #A5CAD3;

  /* Alias coherentes para errores/peligro (algunos templates los usan) */
  --k-danger         : var(--color-error);
  --k-success        : var(--color-success);
  --k-warning        : var(--color-warning);
  --k-info           : var(--color-info);


  /* ---------- 1.5 CHART PALETTE (24 colores) ----------
     Paleta para gráficos basada en la identidad KAESER
     (amarillo + petróleo + neutros) extendida con tonos
     analógicos y complementarios accesibles para charts.
     Diseñada para ser distinguible incluso en daltonismo. */
  --chart-01 : #FFCC00;   /* Yellow brand     */
  --chart-02 : #328095;   /* Petrol brand     */
  --chart-03 : #B38F00;   /* Dark yellow      */
  --chart-04 : #22586A;   /* Dark petrol      */
  --chart-05 : #363C42;   /* Anthracite       */
  --chart-06 : #2E7D32;   /* Green            */
  --chart-07 : #B00020;   /* Red              */
  --chart-08 : #0B7285;   /* Info blue        */
  --chart-09 : #B7791F;   /* Amber dark       */
  --chart-10 : #6A4C93;   /* Purple           */
  --chart-11 : #1B998B;   /* Teal             */
  --chart-12 : #E07A5F;   /* Coral            */
  --chart-13 : #3D5A80;   /* Slate blue       */
  --chart-14 : #98C1D9;   /* Soft sky         */
  --chart-15 : #EE6C4D;   /* Vermillion       */
  --chart-16 : #81B29A;   /* Sage             */
  --chart-17 : #F2CC8F;   /* Sand             */
  --chart-18 : #5C677D;   /* Gunmetal         */
  --chart-19 : #7D5BA6;   /* Soft purple      */
  --chart-20 : #C44536;   /* Brick            */
  --chart-21 : #4F8A8B;   /* Muted teal       */
  --chart-22 : #FFB100;   /* Mango            */
  --chart-23 : #6D6875;   /* Deep mauve       */
  --chart-24 : #00A6A6;   /* Cyan-teal        */


  /* ---------- 1.6 BORDER RADIUS ---------- */
  --radius-xs   : 2px;
  --radius-sm   : 4px;
  --radius-md   : 8px;
  --radius-lg   : 12px;
  --radius-xl   : 16px;
  --radius-2xl  : 24px;
  --radius-pill : 999px;


  /* ---------- 1.7 SHADOWS ---------- */
  --shadow-xs : 0 1px 2px rgba(17,20,24,.05);
  --shadow-sm : 0 1px 2px rgba(17,20,24,.06), 0 1px 1px rgba(17,20,24,.04);
  --shadow-md : 0 6px 18px rgba(17,20,24,.08), 0 2px 6px rgba(17,20,24,.05);
  --shadow-lg : 0 24px 60px rgba(17,20,24,.18), 0 8px 24px rgba(17,20,24,.10);
  --shadow-focus : 0 0 0 3px rgba(50,128,149,.30);   /* Focus ring (petrol) */
  --shadow-focus-yellow : 0 0 0 3px rgba(255,204,0,.45);

  /* Glow industrial — usado por gear-loader, iconos hover, KPI */
  --glow-yellow : 0 0 24px rgba(255,204,0,.55);
  --glow-petrol : 0 0 24px rgba(50,128,149,.55);


  /* ---------- 1.8 TYPOGRAPHY ---------- */
  --font-sans  : 'Inter','Helvetica Neue',Arial,system-ui,sans-serif;
  --font-cond  : 'Barlow Condensed','Arial Narrow','Helvetica Condensed',Impact,sans-serif;
  --font-mono  : 'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;

  /* Tamaños tipográficos (escala modular 1.200) */
  --fs-xs    : 11px;
  --fs-sm    : 12px;
  --fs-base  : 14px;   /* Base UI */
  --fs-md    : 15px;
  --fs-lg    : 17px;
  --fs-xl    : 20px;
  --fs-2xl   : 24px;
  --fs-3xl   : 30px;
  --fs-4xl   : 36px;
  --fs-5xl   : 48px;
  --fs-6xl   : 64px;

  /* Pesos */
  --fw-regular  : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;
  --fw-bold     : 700;
  --fw-black    : 900;

  /* Line-heights */
  --lh-tight   : 1.10;
  --lh-snug    : 1.30;
  --lh-normal  : 1.55;
  --lh-relaxed : 1.70;

  /* Letter-spacing */
  --ls-tight   : -0.01em;
  --ls-normal  : 0;
  --ls-wide    : 0.04em;
  --ls-wider   : 0.10em;
  --ls-widest  : 0.22em;


  /* ---------- 1.9 SPACING SCALE (4px base) ---------- */
  --sp-0  : 0;
  --sp-1  : 4px;
  --sp-2  : 8px;
  --sp-3  : 12px;
  --sp-4  : 16px;
  --sp-5  : 20px;
  --sp-6  : 24px;
  --sp-7  : 32px;
  --sp-8  : 40px;
  --sp-9  : 48px;
  --sp-10 : 64px;
  --sp-11 : 80px;
  --sp-12 : 96px;
  --sp-16 : 128px;


  /* ---------- 1.10 MOTION ---------- */
  --ease-out   : cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast   : 120ms;
  --dur-base   : 180ms;
  --dur-slow   : 280ms;
  --dur-slower : 480ms;


  /* ---------- 1.11 LAYOUT ---------- */
  --topbar-h        : 64px;     /* topbar interno (sidebar layout) */
  --header-h        : 64px;     /* alias legacy */
  --sidebar-w       : 264px;    /* sidebar expandido */
  --sidebar-w-mini  : 76px;     /* sidebar colapsado (icon-only) */
  --container-max   : 1280px;
  --container-pad   : 24px;

  /* Breakpoints (referencia / no se usan directamente en CSS) */
  --bp-sm  : 640px;
  --bp-md  : 768px;
  --bp-lg  : 1024px;
  --bp-xl  : 1280px;
  --bp-2xl : 1536px;


  /* ---------- 1.12 Z-INDEX ---------- */
  --z-base    : 1;
  --z-dropdown: 100;
  --z-sticky  : 200;
  --z-sidebar : 300;
  --z-drawer  : 700;
  --z-overlay : 800;
  --z-modal   : 900;
  --z-toast   : 1000;
}


/* ============================================================
   2. DARK THEME OVERRIDES
   ------------------------------------------------------------
   Activa con [data-theme="dark"] en <html>. Mantiene la
   identidad KAESER (amarillo se preserva como primario)
   pero invierte superficies, textos y bordes.
   FIX v3.1:
     · Texto principal forzado a blanco real (#FFFFFF) para
       cumplir contraste AA.
     · Estados semánticos repintados con tonos vibrantes para
       que NO desaparezcan en dark.
   ============================================================ */
[data-theme="dark"]{
  --bg-canvas    : #0B0D10;
  --bg-surface   : #161A1F;
  --bg-surface-2 : #1F242B;
  --bg-surface-3 : #2A2F36;

  --fg-default : #F1F3F5;     /* texto principal — casi blanco */
  --fg-strong  : #FFFFFF;     /* titulares — blanco puro */
  --fg-muted   : #B7BCC2;     /* secundario — antes era 9AA3AD, sube a AA */
  --fg-subtle  : #8A9098;
  --fg-on-dark : #F1F3F5;

  --border-default : #2A2F36;
  --border-strong  : #3F454D;
  --border-subtle  : #1F242B;

  /* Estados — versiones vibrantes para dark (no se pierden) */
  --color-success    : #4ADE80;
  --color-success-bg : rgba(74,222,128,.14);
  --color-success-bd : rgba(74,222,128,.45);

  --color-warning    : #FBBF24;
  --color-warning-bg : rgba(251,191,36,.14);
  --color-warning-bd : rgba(251,191,36,.45);

  --color-error      : #F87171;
  --color-error-bg   : rgba(248,113,113,.14);
  --color-error-bd   : rgba(248,113,113,.50);

  --color-info       : #60A5FA;
  --color-info-bg    : rgba(96,165,250,.14);
  --color-info-bd    : rgba(96,165,250,.45);

  --shadow-sm : 0 1px 2px rgba(0,0,0,.40);
  --shadow-md : 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg : 0 24px 60px rgba(0,0,0,.55);

  /* Glow más visible en oscuro */
  --glow-yellow : 0 0 28px rgba(255,204,0,.65);
  --glow-petrol : 0 0 28px rgba(61,154,177,.65);
}


/* ============================================================
   3. RESET + BASE
   ------------------------------------------------------------
   Reset moderno mínimo. Pensado para coexistir con Bootstrap 5
   sin sobrescribirlo agresivamente.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

html,body{ margin:0; padding:0 }

body{
  font-family       : var(--font-sans);
  font-size         : var(--fs-base);
  line-height       : var(--lh-normal);
  color             : var(--fg-default);
  background        : var(--bg-canvas);
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering    : optimizeLegibility;
  transition        : background var(--dur-base) var(--ease-out),
                      color      var(--dur-base) var(--ease-out);
}

img,svg,video{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:var(--color-tertiary); text-decoration:none }
a:hover{ text-decoration:underline }


/* ============================================================
   4. TYPOGRAPHY  (utility classes + base headings)
   ------------------------------------------------------------
   H1-H6 con jerarquía visual clara. Las clases .ds-*
   pueden aplicarse a cualquier elemento (NO crashea con
   Bootstrap porque usan prefijo ds-).
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-3);
  color:var(--fg-strong);
  font-family:var(--font-cond);
  font-weight:var(--fw-black);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  text-transform:uppercase;
}
h1{ font-size: var(--fs-5xl) }
h2{ font-size: var(--fs-4xl) }
h3{ font-size: var(--fs-2xl) }
h4{ font-size: var(--fs-xl)  }
h5{ font-size: var(--fs-lg)  }
h6{ font-size: var(--fs-md); letter-spacing: var(--ls-widest) }

p{ margin:0 0 var(--sp-3); line-height:var(--lh-normal) }
small,.ds-small{ font-size: var(--fs-sm); color: var(--fg-muted) }

/* Display heading (hero) */
.ds-display{
  font-family: var(--font-cond);
  font-size  : var(--fs-6xl);
  font-weight: var(--fw-black);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

/* Kicker / overline */
.ds-kicker{
  font-family: var(--font-cond);
  font-size  : var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-tertiary);
}

/* Lead paragraph */
.ds-lead{
  font-size: var(--fs-lg);
  color   : var(--fg-muted);
  max-width: 68ch;
  line-height: var(--lh-relaxed);
}

/* Code inline */
code,kbd,samp{
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--bg-surface-2);
  border:1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}


/* ============================================================
   5. ACCESSIBILITY
   ------------------------------------------------------------
   - Focus visible SIEMPRE
   - Reduced motion respetado
   - Visually hidden helper
   ============================================================ */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--k-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.ds-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}


/* ============================================================
   6. SCROLLBAR (sutil, corporativo)
   ============================================================ */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-canvas);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--k-anth-600) }
*::-webkit-scrollbar-track{ background: transparent }


/* ============================================================
   7. SELECTION
   ============================================================ */
::selection{ background: var(--k-yellow); color: var(--k-black) }


/* ============================================================
   8. ANIMACIONES GLOBALES (keyframes reutilizables)
   ------------------------------------------------------------
   Centralizamos los keyframes que usan varios componentes
   para no repetirlos en components.css.
   ============================================================ */
@keyframes ds-spin       { to { transform: rotate(360deg); } }
@keyframes ds-spin-rev   { to { transform: rotate(-360deg); } }
@keyframes ds-fade-in    { from { opacity:0 } to { opacity:1 } }
@keyframes ds-pulse      { 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@keyframes ds-gear-spin  { to { transform: rotate(360deg); } }
@keyframes ds-gear-spin-rev { to { transform: rotate(-360deg); } }


/* ============================================================
   9. UTILIDADES BÁSICAS
   ------------------------------------------------------------
   Mínimo helper set; el grueso vive en layout.css.
   ============================================================ */
.ds-hidden{ display:none !important }
.ds-text-center{ text-align:center }
.ds-text-right{  text-align:right }
.ds-text-mono{   font-family: var(--font-mono) }
.ds-w-full{ width:100% }


/* ============================================================
   10. DARK MODE — FIX TÍTULOS (v3.4)
   ------------------------------------------------------------
   Override defensivo: en dark, todos los headings y títulos
   de componentes deben ser blanco puro para que se lean.
   Sobrepasa estilos inline con color hardcoded.
   ============================================================ */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .ds-display,
[data-theme="dark"] .ds-page-header__title,
[data-theme="dark"] .ds-section__title,
[data-theme="dark"] .ds-card__title,
[data-theme="dark"] .ds-modal__title,
[data-theme="dark"] .ds-topbar__title,
[data-theme="dark"] .t1,
[data-theme="dark"] .t2,
[data-theme="dark"] .t3{
  color: var(--fg-strong) !important;   /* blanco puro */
}

/* Subtítulos / lead que acompañan a los títulos: gris claro legible */
[data-theme="dark"] .ds-page-header__sub,
[data-theme="dark"] .ds-card__sub,
[data-theme="dark"] .ds-section__sub,
[data-theme="dark"] .ds-modal__sub{
  color: var(--fg-muted) !important;
}

/* Excepciones: títulos sobre fondo amarillo deben quedarse en negro */
[data-theme="dark"] .ds-kpi--yellow .ds-kpi__value,
[data-theme="dark"] [style*="background: var(--k-yellow)"] h1,
[data-theme="dark"] [style*="background: var(--k-yellow)"] h2,
[data-theme="dark"] [style*="background: var(--k-yellow)"] h3,
[data-theme="dark"] [style*="background:#FFCC00"] h1,
[data-theme="dark"] [style*="background:#FFCC00"] h2,
[data-theme="dark"] [style*="background:#FFCC00"] h3{
  color: var(--k-black) !important;
}