/* ============================================================
   BASE.CSS — Reset, variables CSS y tipografía
   Cúbica ERP · Tema Zabbix-inspired
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Paleta principal */
    --color-sidebar-bg: #1d2535;
    --color-sidebar-hover: #2c3a52;
    --color-sidebar-active: #0071c1;
    --color-sidebar-text: #b0bec5;
    --color-sidebar-text-dim: #607d8b;
    --color-sidebar-brand: #ffffff;

    --color-topbar-bg: #ffffff;
    --color-topbar-border: #e0e4ea;

    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-border: #dde1e9;
    --color-border-light: #eef0f4;

    --color-text-primary: #1a202c;
    --color-text-secondary: #4a5568;
    --color-text-muted: #718096;

    --color-accent: #0071c1;
    --color-accent-hover: #005fa3;
    --color-accent-light: #e8f2fc;

    /* Estados */
    --color-success: #27ae60;
    --color-success-bg: #eafaf1;
    --color-warning: #f39c12;
    --color-warning-bg: #fef9ec;
    --color-danger: #e74c3c;
    --color-danger-bg: #fdedec;
    --color-info: #2980b9;
    --color-info-bg: #eaf4fc;
    --color-neutral: #95a5a6;
    --color-neutral-bg: #f2f3f4;

    /* Métricas */
    --color-metric-blue: #0071c1;
    --color-metric-blue-bg: #e8f2fc;
    --color-metric-green: #27ae60;
    --color-metric-green-bg: #eafaf1;
    --color-metric-yellow: #e67e22;
    --color-metric-yellow-bg: #fef5e7;
    --color-metric-red: #e74c3c;
    --color-metric-red-bg: #fdedec;

    /* Tipografía */
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Bordes y sombras */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);

    /* Layout */
    --sidebar-width: 220px;
    --topbar-height: 48px;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
}