/* ============================================================
   SPM Tool — Design System
   Variables CSS con tokens de color, tipografia, spacing, etc.
   Inspirado en la propuesta grafica de template/ (Claude Design).
   ============================================================ */

:root {
    /* -----  Color: base navy scale ----- */
    --color-navy-900: #0f1e3d;       /* texto principal, fondos dark */
    --color-navy-800: #172554;       /* fondos enfasis (total row) */
    --color-navy-700: #1e40af;       /* primario / acento / botones */
    --color-navy-600: #2a3a6b;       /* logo gradiente */

    /* -----  Color: neutrals ----- */
    --color-gray-50:  #f7f8fa;       /* fondo app */
    --color-gray-100: #fafbfc;       /* fondos sutiles (sidebar, header tabla) */
    --color-gray-150: #f4f5f8;       /* divider muy leve */
    --color-gray-200: #f1f3f8;       /* hairline */
    --color-gray-250: #eef1f6;       /* selected/hover bg */
    --color-gray-300: #eceef2;       /* borde tarjetas */
    --color-gray-350: #e5e7ee;       /* borde inputs */
    --color-gray-400: #d9dce5;       /* borde fuerte */
    --color-gray-500: #c8ccd6;       /* muted */
    --color-gray-600: #9098aa;       /* placeholder, labels */
    --color-gray-700: #8a90a2;       /* secondary text */
    --color-gray-800: #6b7386;       /* body secondary */
    --color-gray-850: #4a5063;       /* body default */

    /* -----  Color: semanticos ----- */
    --color-success:     #2b9d5f;
    --color-success-bg:  #e8f3ec;
    --color-success-fg:  #146c3e;

    --color-warning:     #d89a2b;
    --color-warning-bg:  #fff6e5;
    --color-warning-fg:  #8a5a00;

    --color-danger:      #a8323a;
    --color-danger-bg:   #fbe9eb;
    --color-danger-fg:   #8a1e26;

    --color-info:        #1e40af;
    --color-info-bg:     #eef1f6;
    --color-info-fg:     #1e40af;

    --color-accent:      #d89a2b;    /* mustard para destacar UPL, etc */

    /* -----  Color: team palette ----- */
    --color-team-admin:        #344054;
    --color-team-gender:       #8a4a7a;
    --color-team-gob:          #1f4d3a;
    --color-team-sdg:          #c97a2a;
    --color-team-inclu-growth: #2a5a8a;
    --color-team-drr:          #8a3a3a;
    --color-team-health:       #2a8a7a;
    --color-team-hiv:          #c92a5a;
    --color-team-energy:       #b8832a;
    --color-team-consolidated: #6b7386;

    /* -----  Tipografia ----- */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-caps:     10.5px;           /* uppercase labels */
    --fs-xs:       11px;
    --fs-sm:       12px;
    --fs-md:       12.5px;
    --fs-base:     13px;             /* cuerpo default */
    --fs-lg:       14px;
    --fs-xl:       16px;
    --fs-2xl:      20px;             /* KPI value medio */
    --fs-3xl:      26px;             /* KPI value grande, titulo pagina */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:    1.2;
    --lh-normal:   1.5;

    --letter-tight:   -0.5px;
    --letter-caps:    0.6px;

    /* -----  Spacing (escala 4px) ----- */
    --space-1:   4px;
    --space-2:   6px;
    --space-3:   8px;
    --space-4:   10px;
    --space-5:   12px;
    --space-6:   14px;
    --space-7:   16px;
    --space-8:   18px;
    --space-9:   20px;
    --space-10:  24px;
    --space-11:  28px;
    --space-12:  32px;

    /* -----  Radios ----- */
    --radius-xs:  3px;
    --radius-sm:  5px;
    --radius-md:  6px;
    --radius-lg:  8px;
    --radius-xl:  10px;
    --radius-full: 9999px;

    /* -----  Sombras ----- */
    --shadow-subtle: 0 1px 2px rgba(13, 18, 32, 0.06);
    --shadow-sm:     0 1px 2px rgba(13, 18, 32, 0.08);
    --shadow-md:     0 4px 12px rgba(13, 18, 32, 0.08);
    --shadow-drawer: -10px 0 30px rgba(13, 18, 32, 0.08);

    /* -----  Transiciones ----- */
    --transition-fast:  120ms ease;
    --transition-base:  200ms ease;

    /* -----  Z-index ----- */
    --z-sticky:   10;
    --z-overlay:  100;
    --z-drawer:   101;
    --z-modal:    200;
}

/* ============================================================
   Reset base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    background: var(--color-gray-50);
    color: var(--color-navy-900);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
canvas,
video,
table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

main,
section,
aside,
header,
footer,
.main-content,
.ds-card,
.card,
.toolbar,
.form-group,
.table-wrapper {
    min-width: 0;
}

.table-wrapper {
    max-width: 100%;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Utilidades tipograficas
   ============================================================ */
.ds-mono       { font-family: var(--font-mono); }
.ds-caps       { text-transform: uppercase; letter-spacing: var(--letter-caps); font-size: var(--fs-caps); color: var(--color-gray-700); font-weight: var(--fw-medium); }
.ds-muted      { color: var(--color-gray-800); }
.ds-subtle     { color: var(--color-gray-700); }
.ds-primary    { color: var(--color-navy-900); }