/* ── Sistema de diseño Biobell ERP — TOKENS ─────────────────────────
   Tema claro minimalista. Legible, practico, sin fatiga visual.
   Inspirado en Notion / Linear: blanco, bordes sutiles, acentos limpios.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ─────────────────────── FONDOS ─────────────────────────────── */
    --color-bg:           #ffffff;
    --color-bg-subtle:    #f8f9fb;
    --color-bg-soft:      #f1f3f6;
    --color-bg-elevated:  #ffffff;

    /* ─────────────────────── BORDES ─────────────────────────────── */
    --color-border:        #e2e8f0;
    --color-border-subtle: #edf2f7;
    --color-border-strong: #cbd5e1;

    /* ─────────────────────── TEXTOS ─────────────────────────────── */
    --color-text:         #475569;
    --color-text-strong:  #0f172a;
    --color-text-muted:   #94a3b8;
    --color-text-faint:   #c1c9d4;

    /* ─────────────────────── PRIMARIO (azul cielo) ──────────────── */
    --color-primary:      #0ea5e9;
    --color-primary-hover:#0284c7;
    --color-primary-soft:  #f0f9ff;
    --color-primary-text:  #0369a1;
    --color-primary-glow:  rgba(14, 165, 233, 0.15);

    /* ─────────────────────── ESTADOS SEMANTICOS ──────────────────── */
    --color-success:       #22c55e;
    --color-success-text:  #15803d;
    --color-success-soft:  #f0fdf4;
    --color-success-border:#bbf7d0;

    --color-warning:       #f59e0b;
    --color-warning-text:  #b45309;
    --color-warning-soft:  #fffbeb;
    --color-warning-border:#fde68a;
    --color-warning-bg:    #fffbeb;

    --color-danger:        #ef4444;
    --color-danger-text:   #b91c1c;
    --color-danger-soft:   #fef2f2;
    --color-danger-border: #fecaca;

    --color-info:          #0ea5e9;
    --color-info-text:     #0369a1;
    --color-info-soft:     #f0f9ff;
    --color-info-border:   #bae6fd;

    /* ─────────────────────── TIPOGRAFIA ──────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

    --text-xs:    0.72rem;
    --text-sm:    0.82rem;
    --text-base:  0.92rem;
    --text-md:    1.00rem;
    --text-lg:    1.20rem;
    --text-xl:    1.50rem;
    --text-2xl:   1.80rem;
    --text-3xl:   2.20rem;

    --font-light:    300;
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    --leading: 1.55;

    /* ─────────────────────── ESPACIADO ───────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ─────────────────────── RADIO DE BORDE ──────────────────────── */
    --radius-sm:  4px;
    --radius:     6px;
    --radius-md:  8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* ─────────────────────── SOMBRAS ─────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);

    /* ─────────────────────── TRANSICIONES ────────────────────────── */
    --transition-fast: 0.12s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.35s ease;

    /* ─────────────────────── OVERRIDES BOOTSTRAP ─────────────────── */
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       14, 165, 233;
    --bs-success:           var(--color-success);
    --bs-success-rgb:       34, 197, 94;
    --bs-danger:            var(--color-danger);
    --bs-danger-rgb:        239, 68, 68;
    --bs-warning:           var(--color-warning);
    --bs-warning-rgb:       245, 158, 11;
    --bs-info:              var(--color-info);
    --bs-info-rgb:          14, 165, 233;
    --bs-body-color:        var(--color-text);
    --bs-body-bg:           var(--color-bg);
    --bs-border-color:      var(--color-border);
    --bs-border-radius:     var(--radius-md);
    --bs-border-radius-sm:  var(--radius);
    --bs-border-radius-lg:  var(--radius-lg);
    --bs-link-color:        var(--color-primary);
    --bs-link-hover-color:  var(--color-primary-hover);
    --bs-secondary-bg:      var(--color-bg-subtle);
    --bs-tertiary-bg:       var(--color-bg-soft);
}

/* ── Reset global ───────────────────────────────────────────────── */
html, body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-strong);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    margin: 0 0 var(--space-3);
}

/* Scrollbar sutil */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

::selection { background: rgba(14, 165, 233, 0.2); color: var(--color-text-strong); }