/* ============================================================
   SISTEMA DE DISENO UNIFICADO - TOKENS CSS
   Inventario TX
   ============================================================
   Este archivo centraliza TODOS los colores, sombras,
   transiciones y radios usados en el proyecto.
   Incluir en cada pagina HTML despues de Bootstrap.
   ============================================================ */

:root {
    /* ── PALETA DE COLORES ─────────────────────────────── */
    /* Acciones */
    --color-esmeralda:         #059669;
    --color-esmeralda-hover:   #047857;
    --color-esmeralda-light:   #d1fae5;
    --color-rubi:              #e11d48;
    --color-rubi-hover:        #be123c;
    --color-rubi-light:        #ffe4e6;
    --color-primary:           #3b82f6;
    --color-primary-hover:     #2563eb;
    --color-primary-light:     #dbeafe;
    --color-warning:           #f59e0b;
    --color-warning-hover:      #d97706;
    --color-warning-light:      #fef3c7;
    --color-info:              #06b6d4;
    --color-info-hover:        #0891b2;
    --color-info-light:         #cffafe;

    /* Superficies */
    --color-bg:                #f1f5f9;
    --color-surface:           #ffffff;
    --color-header:            #1e293b;
    --color-header-text:       #f8fafc;

    /* Texto */
    --color-text:              #334155;
    --color-text-heading:      #1e293b;
    --color-muted:             #64748b;
    --color-border:            #e2e8f0;

    /* Gradientes */
    --gradient-hero:           linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --gradient-confirmar:       linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-cancelar:       linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    --gradient-primary:        linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-warning:        linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-info:           linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

    /* ── SOMBRAS ───────────────────────────────────────── */
    --shadow-none:             0 0 0 0 transparent;
    --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:               0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:               0 12px 36px rgba(0, 0, 0, 0.15);
    --shadow-button:           0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-card-hover:       0 8px 24px rgba(0, 0, 0, 0.14);
    --shadow-modal:            0 16px 48px rgba(0, 0, 0, 0.18);
    --shadow-toast:            0 8px 32px rgba(0, 0, 0, 0.20);

    /* ── BORDER RADIUS ─────────────────────────────────── */
    --radius-none:             0;
    --radius-sm:               6px;
    --radius-md:               8px;
    --radius-lg:               12px;
    --radius-xl:               16px;
    --radius-2xl:              24px;
    --radius-full:             9999px;

    /* ── TRANSICIONES ──────────────────────────────────── */
    --transition-fast:         0.15s ease;
    --transition-normal:       0.3s ease;
    --transition-slow:         0.5s ease;
    --transition-bounce:       0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── TIPOGRAFIA ────────────────────────────────────── */
    --font-family:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-xs:            0.75rem;
    --font-size-sm:            0.875rem;
    --font-size-base:          1rem;
    --font-size-lg:            1.125rem;
    --font-size-xl:            1.25rem;
    --font-size-2xl:           1.5rem;
    --font-size-3xl:           1.875rem;
    --font-size-4xl:           2.25rem;

    /* ── ESPACIADO ─────────────────────────────────────── */
    --space-xs:                0.25rem;
    --space-sm:                0.5rem;
    --space-md:                1rem;
    --space-lg:                1.5rem;
    --space-xl:                2rem;
    --space-2xl:               3rem;
    --space-3xl:               4rem;

    /* ── Z-INDEX ───────────────────────────────────────── */
    --z-dropdown:              100;
    --z-sticky:                200;
    --z-fixed:                 300;
    --z-modal-backdrop:        400;
    --z-modal:                 500;
    --z-toast:                 600;
    --z-tooltip:               700;

    /* ── LISTAS ────────────────────────────────────────── */
    --lista-max-altura:        400px;
    --lista-item-padding:      0.75rem 1rem;
    --lista-item-gap:          0.25rem;
    --lista-skeleton-color:    #e2e8f0;
}

/* ── RESET BASE CONSISTENTE ──────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}