@font-face {
    font-family: 'Inter';
    src: url('../../fonts/Inter-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    /* ============================================================
       01. TIPOGRAFÍA
       ============================================================ */
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-desktop: clamp(18px, 1.2vw + 14px, 18px);
    --font-size-mobile: 18px;

    /* ============================================================
       02. PALETA GLOBAL DEL FRONTEND
       ============================================================ */
    --color-bg: #ffffff;
    --color-bg-card: var(--color-bg);
    --color-text-main: #1c1c1c;
    --color-input-txt: #727272;
    --color-input-bg: #f5f5f7;
    --color-border-soft: #cccccc;
    --color-divider: #e8e8e8;
    --color-primary: #007bff;
    --color-navbar-hover: #5454e3;
    --color-summary-bg: #fffbe5;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-black: #000000;
    --color-loader-accent: #808080;

    /* Alias conservado para componentes o plantillas anteriores */
    --primary-color: var(--color-navbar-hover);

    /* ============================================================
       03. FORMAS, CONTROLES, SOMBRAS Y TRANSICIONES
       ============================================================ */
    --radius-sm: 6px;
    --radius-input: 10px;
    --radius-card: 12px;
    --radius-pill: 999px;

    --control-height: 50px;

    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 4px 10px rgba(0, 0, 0, 0.3);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* ============================================================
       04. NAVBAR
       ============================================================ */
    --nav-height: 80px;
    --nav-transition-duration: 0.3s;
    --nav-transition-easing: ease;
    --nav-translate-closed: -8px;
    --nav-transition-collapse:
        max-height var(--nav-transition-duration) var(--nav-transition-easing),
        opacity var(--nav-transition-duration) var(--nav-transition-easing),
        transform var(--nav-transition-duration) var(--nav-transition-easing);

    /* ============================================================
       05. PANEL DE ADMINISTRACIÓN
       Mantiene una paleta propia, pero reutiliza tokens globales
       cuando su significado visual coincide.
       ============================================================ */
    --admin-color-page: #f6f7f9;
    --admin-color-surface: var(--color-bg);
    --admin-color-surface-soft: #f9fafb;
    --admin-color-surface-muted: #f3f4f6;
    --admin-color-section-header: var(--color-divider);
    --admin-color-table-head: #fafafa;
    --admin-color-table-row-odd: #f1f3f5;
    --admin-color-table-row-hover: #e1e5ea;

    --admin-color-border: #e5e7eb;
    --admin-color-border-soft: #eef0f3;
    --admin-color-border-control: #d1d5db;
    --admin-color-border-hover: #9ca3af;
    --admin-color-border-separator: #cbd5e1;

    --admin-color-text: #111827;
    --admin-color-text-secondary: #374151;
    --admin-color-text-muted: #4b5563;
    --admin-color-text-soft: #6b7280;
    --admin-color-ink: var(--color-text-main);
    --admin-color-black: var(--color-black);
    --admin-color-overlay: rgba(17, 24, 39, 0.45);

    /* Administración: identidad y foco */
    --admin-color-focus: #b11f24;
    --admin-focus-ring: rgba(177, 31, 36, 0.18);
    --admin-focus-ring-strong: rgba(177, 31, 36, 0.22);

    /* Administración: estados */
    --admin-color-success-bg: #ecfdf5;
    --admin-color-success-border: #bbf7d0;
    --admin-color-success-text: #047857;
    --admin-color-success-text-dark: #166534;
    --admin-color-success-alert-bg: #f0fdf4;

    --admin-color-warning-bg: #fffbeb;
    --admin-color-warning-border: #fde68a;
    --admin-color-warning-text: #92400e;
    --admin-color-warning-text-strong: #b45309;

    --admin-color-danger-bg: #fef2f2;
    --admin-color-danger-border: #fecaca;
    --admin-color-danger-text: #b91c1c;
    --admin-color-danger-text-dark: #991b1b;
    --admin-color-danger-highlight: #ffb0b0;

    --admin-color-info-bg: #eef2ff;
    --admin-color-info-border: #c7d2fe;
    --admin-color-info-text: #3730a3;
    --admin-color-blue-bg: #eff6ff;
    --admin-color-blue-text: #1d4ed8;

    /* Administración: gráficas */
    --admin-color-chart-single: var(--admin-color-info-text);
    --admin-color-chart-recurring: #f75316;
    --admin-color-chart-recurring-soft: #ffe0af;
    --admin-color-chart-single-ring: rgba(55, 48, 163, 0.12);
    --admin-color-chart-recurring-ring: rgba(247, 83, 22, 0.12);
    --admin-color-chart-single-ring-soft: rgba(55, 48, 163, 0.1);
    --admin-color-chart-recurring-ring-soft: rgba(247, 83, 22, 0.08);

    /* Administración: tipografía */
    --admin-font-size-xs: 12px;
    --admin-font-size-sm: 13px;
    --admin-font-size-md: 14px;
    --admin-font-size-lg: 15px;
    --admin-font-size-xl: 16px;
    --admin-font-size-title-sm: 18px;
    --admin-font-size-title-md: 22px;
    --admin-font-size-title-lg: 28px;

    --admin-font-weight-normal: 400;
    --admin-font-weight-medium: 700;
    --admin-font-weight-semibold: 750;
    --admin-font-weight-bold: 800;
    --admin-font-weight-heavy: 850;

    /* Administración: controles, formas y sombras */
    --admin-control-height: 40px;
    --admin-control-height-lg: 46px;
    --admin-radius-sm: 4px;
    --admin-radius-md: var(--radius-sm);
    --admin-radius-lg: 8px;
    --admin-radius-xl: var(--radius-input);
    --admin-radius-pill: var(--radius-pill);

    --admin-shadow-login: 0 18px 50px rgba(17, 24, 39, 0.08);
    --admin-shadow-modal: 0 22px 60px rgba(17, 24, 39, 0.18);
    --admin-shadow-float: 0 14px 30px rgba(17, 24, 39, 0.16);
    --admin-shadow-tooltip: 0 8px 18px rgba(17, 24, 39, 0.22);
    --admin-shadow-mobile-sidebar: 0 10px 22px rgba(15, 23, 42, 0.08);
    --admin-shadow-mobile-menu: 0 18px 40px rgba(15, 23, 42, 0.16);

    --admin-transition-tooltip: opacity 120ms ease, transform 120ms ease;
}