/* ============================================================
 * Presupuestalo · main.css
 *
 * Núcleo de design tokens del proyecto. Igual para todos los
 * dominios; cada país sobreescribe lo que necesite en
 *   themes/<slug>/assets/css/theme.css
 *
 * Orden de carga recomendado:
 *   1) vendor (bootstrap, select2, …)
 *   2) main.css                      ← este archivo
 *   3) themes/<slug>/assets/css/theme.css
 *   4) CSS específico de página (login, dashboard-particular, …)
 *
 * Convenciones:
 *   --color-*       paleta semántica (primario, secundario, acento, neutros)
 *   --bg-*          fondos
 *   --text-*        tipografías y colores de texto
 *   --radius-*      esquinas
 *   --shadow-*      sombras
 *   --space-*       espaciado vertical/horizontal
 *   --font-*        familia y tamaños
 *   --gradient-*    gradientes reutilizables
 *
 * Las variables que ya existían en assets/styles.css se redefinen
 * aquí con sus mismos valores para que ese archivo siga viéndose
 * igual; el theme.css del país las sobreescribe sin pelear con
 * styles.css.
 * ============================================================ */

:root {
    /* === Paleta semántica (los valores reales se mueven al theme.css) === */
    --color-primary: #005F73;
    --color-primary-dark: #004A59;
    --color-secondary: #94D2BD;
    --color-accent: #EE9B00;
    --color-accent-dark: #d68900;

    /* Estados */
    --color-success: #198754;
    --color-warning: #ffb600;
    --color-danger: #dc3545;
    --color-info: #0dcaf0;

    /* Neutros */
    --color-text: #2c3e50;
    --color-text-muted: #6c757d;
    --color-text-inverse: #ffffff;
    --color-border: #e1e8ed;
    --color-border-strong: #cfd8e0;

    /* Fondos */
    --bg-page: #f4f4f4;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Compatibilidad con assets/styles.css (mismo nombre/valor) */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-dark);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-accent);
    --accent-hover: var(--color-accent-dark);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --background-light: var(--bg-page);
    --background-neutral: var(--bg-surface-alt);
    --border-light: var(--color-border);
    --white: var(--color-text-inverse);

    /* Tipografía */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-family-heading: var(--font-family-base);
    --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;
    --line-height-tight: 1.25;
    --line-height-base: 1.6;

    /* Esquinas */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Espaciado (escala 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;

    /* Layout */
    --container-max: 1200px;
    --container-padding: 1rem;

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-accent));

    /* Z-index estandarizado */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1050;
    --z-toast: 1080;
}

/* ============================================================
 * NOTA: Este archivo solo declara tokens; los componentes y
 * layouts se mantienen en assets/styles.css y en los CSS por
 * página (login.css, dashboard-particular.css, …) hasta que se
 * vayan migrando a consumir estas variables.
 *
 * El theme.css de cada país solo redefine las variables del
 * `:root` que cambian. Ejemplo mínimo:
 *
 *   :root {
 *     --color-primary: #c60b1e;
 *     --color-primary-dark: #8c0717;
 *     --font-family-base: 'Inter', system-ui, sans-serif;
 *   }
 * ============================================================ */