@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Paleta — Modo CLARO (default).
       El modo oscuro hereda los tokens estructurales (radios, espaciado,
       tipos, animaciones) y solo reasigna las variables de color en
       `body.dark-mode`. Esto permite que las Fases 1-3 funcionen igual
       de bien en claro y en oscuro sin escribir reglas por tema. */
    --bg-base: #F1F5F9;
    --surface-1: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #E2E8F0;
    --border-sutil: #E2E8F0;
    --border-activo: #CBD5E1;
    --border: var(--border-sutil);

    --accent: #10B981;
    --accent-hover: #047857;
    --accent-deep: #059669;
    --accent-glow: rgba(16, 185, 129, 0.18);
    --accent-glow-strong: rgba(16, 185, 129, 0.28);
    /* Texto que va encima de fondo accent (botones primarios, badges,
       etiquetas en pills verdes). Constante en ambos temas porque
       blanco da el mejor contraste sobre el verde marca. */
    --accent-fg: #FFFFFF;

    --success: #16A34A;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #2563EB;

    --success-rgb: 22, 163, 74;
    --warning-rgb: 217, 119, 6;
    --danger-rgb: 220, 38, 38;
    --info-rgb: 37, 99, 235;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-disabled: #CBD5E1;

    /* Tipografia */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-ui: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 26px;
    --text-3xl: 34px;
    --text-4xl: 44px;
    --text-5xl: 58px;

    --text-btn: 14px;
    --text-btn-lg: 16px;

    --letter-spacing-label: 0.8px;
    --letter-spacing-badge: 0.5px;
    --letter-spacing-metric: -0.5px;

    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Espaciado (multiplos de 8px) */
    --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;
    --space-16: 64px;
    --space-20: 80px;

    --btn-height: var(--space-10);
    --btn-height-lg: var(--space-12);
    --btn-padding-inline: var(--space-5);
    --btn-lg-padding-inline: 28px;
    --btn-translate-hover: -1px;

    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Bordes y opacidad */
    --border-width: 1px;
    --border-width-lg: 2px;
    --border-width-xl: 4px;
    --opacity-disabled: 0.4;
    --opacity-tooltip-shadow: 0.5;
    --badge-bg-opacity: 0.15;

    /* Sombras — calibradas para fondo claro (default). Las
       variantes oscuras se sobrescriben en `body.dark-mode`. */
    --shadow-card-line: rgba(15, 23, 42, 0.06);
    --shadow-card-ambient: rgba(15, 23, 42, 0.08);
    --shadow-card-offset-y: var(--space-1);
    --shadow-card-blur: var(--space-6);
    --shadow-card: 0 0 0 var(--border-width) var(--shadow-card-line),
        0 var(--shadow-card-offset-y) var(--shadow-card-blur) var(--shadow-card-ambient);
    --shadow-input: 0 0 0 var(--border-width) var(--border);
    --shadow-focus: 0 0 0 var(--border-width-lg) var(--accent),
        0 0 0 var(--border-width-xl) var(--accent-glow);
    --shadow-glow: 0 0 var(--space-8) var(--accent-glow);
    --shadow-glow-hover: 0 0 var(--space-8) var(--accent-glow-strong);
    --shadow-glow-active: 0 0 var(--space-4) var(--accent-glow);
    --shadow-tooltip: 0 var(--space-1) var(--space-2) rgba(0, 0, 0, var(--opacity-tooltip-shadow));

    /* Animacion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --animation-delay-1: 0.1s;
    --animation-delay-2: 0.2s;
    --animation-delay-3: 0.3s;
    --animation-shimmer-duration: 1.5s;
    --animation-progress-duration: 1s;
    --fade-translate-y: var(--space-3);
    --skeleton-gradient-stop: 25%;
    --skeleton-gradient-mid: 50%;
    --skeleton-gradient-end: 75%;
    --skeleton-bg-size: 200%;

    /* Breakpoints */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* ============================================================
   THEME: DARK MODE
   El JS de tema legacy añade la clase `.dark-mode` al <body>.
   Aqui re-mapeamos solo las variables de color manteniendo
   intactos espaciado, tipografia, animaciones, etc.
   ============================================================ */
body.dark-mode {
    color-scheme: dark;

    --bg-base: #0B0E16;
    --surface-1: #131720;
    --surface-2: #1C2030;
    --surface-3: #242840;
    --border-sutil: #2A2F45;
    --border-activo: #3D4460;

    --accent-hover: #0D9E6E;
    --accent-glow: rgba(16, 185, 129, 0.15);
    --accent-glow-strong: rgba(16, 185, 129, 0.30);

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    --success-rgb: 34, 197, 94;
    --warning-rgb: 245, 158, 11;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 59, 130, 246;

    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #4B5675;
    --text-disabled: #2E3347;

    --shadow-card-line: rgba(255, 255, 255, 0.05);
    --shadow-card-ambient: rgba(0, 0, 0, 0.30);
}

/* ============================================================
   THEME: HIGH CONTRAST MODE
   Versión accesibilidad — bordes blancos sobre negro puro.
   Mantiene el verde marca aunque el legacy use amarillo neon,
   porque los acentos del dashboard ya tienen suficiente contraste.
   ============================================================ */
body.high-contrast-mode {
    color-scheme: dark;

    --bg-base: #000000;
    --surface-1: #000000;
    --surface-2: #0A0A0A;
    --surface-3: #1A1A1A;
    --border-sutil: #FFFFFF;
    --border-activo: #FFFFFF;

    --accent-hover: #0D9E6E;
    --accent-glow: rgba(16, 185, 129, 0.30);
    --accent-glow-strong: rgba(16, 185, 129, 0.50);

    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;
    --info: #60A5FA;

    --success-rgb: 34, 197, 94;
    --warning-rgb: 250, 204, 21;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 96, 165, 250;

    --text-primary: #FFFFFF;
    --text-secondary: #E2E8F0;
    --text-muted: #CBD5E1;
    --text-disabled: #4B5563;

    --shadow-card-line: rgba(255, 255, 255, 0.40);
    --shadow-card-ambient: rgba(0, 0, 0, 0.80);
}

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

html,
body {
    width: 100%;
    min-height: 100vh;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Botones — base compartida */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--text-btn);
    font-weight: var(--font-weight-medium);
    height: var(--btn-height);
    padding: 0 var(--btn-padding-inline);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    border: none;
    outline: none;
}

.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-primary[disabled],
.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-ghost:disabled,
.btn-ghost[disabled] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* 1. Boton primario */
.btn-primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--accent-fg);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(var(--btn-translate-hover));
    box-shadow: var(--shadow-glow-hover);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-glow-active);
}

.btn-lg,
.btn-primary.btn-lg {
    font-size: var(--text-btn-lg);
    height: var(--btn-height-lg);
    padding: 0 var(--btn-lg-padding-inline);
}

/* 2. Boton secundario */
.btn-secondary {
    background: transparent;
    border: var(--border-width) solid var(--border-activo);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--surface-2);
}

/* 3. Boton ghost */
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

/* 4. Input base */
.input {
    background: var(--surface-2);
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-md);
    height: var(--btn-height);
    padding: 0 var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    width: 100%;
    transition: all var(--transition-fast);
    outline: none;
    box-shadow: var(--shadow-input);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

.input-number {
    font-family: var(--font-mono);
}

.input-label {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* 5. Card base */
.card {
    background: var(--surface-1);
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
}

.card-sm {
    padding: var(--space-4);
}

.card-highlight {
    border-color: var(--accent);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

/* 6. Badge / Chip */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-badge);
}

.badge-success {
    background: rgba(var(--success-rgb), var(--badge-bg-opacity));
    color: var(--success);
}

.badge-warning {
    background: rgba(var(--warning-rgb), var(--badge-bg-opacity));
    color: var(--warning);
}

.badge-danger {
    background: rgba(var(--danger-rgb), var(--badge-bg-opacity));
    color: var(--danger);
}

.badge-info {
    background: rgba(var(--info-rgb), var(--badge-bg-opacity));
    color: var(--info);
}

/* 7. Divider */
.divider {
    height: var(--border-width);
    background-color: var(--border-sutil);
    width: 100%;
    margin: var(--space-4) 0;
    border: none;
}

.divider-labeled {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-badge);
    margin: var(--space-4) 0;
}

.divider-labeled::before,
.divider-labeled::after {
    content: '';
    flex: 1;
    border-bottom: var(--border-width) solid var(--border-sutil);
}

.divider-labeled::before {
    margin-right: var(--space-3);
}

.divider-labeled::after {
    margin-left: var(--space-3);
}

/* 8. Tooltip (CSS puro) */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after,
.tooltip::before,
.tooltip::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 10;
    pointer-events: none;
}

[data-tooltip]::after,
.tooltip::after {
    content: attr(data-tooltip);
    background: var(--surface-3);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-activo);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    white-space: nowrap;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, calc(var(--space-2) * -1));
    box-shadow: var(--shadow-tooltip);
}

[data-tooltip]::before,
.tooltip::before {
    content: '';
    border-style: solid;
    border-width: var(--space-1) var(--space-1) 0 var(--space-1);
    border-color: var(--border-activo) transparent transparent transparent;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, var(--space-1));
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

[data-tooltip][data-tooltip-pos="bottom"]::after,
.tooltip[data-tooltip-pos="bottom"]::after {
    top: 100%;
    bottom: auto;
    transform: translate(-50%, var(--space-2));
}

[data-tooltip][data-tooltip-pos="bottom"]::before,
.tooltip[data-tooltip-pos="bottom"]::before {
    top: 100%;
    bottom: auto;
    border-width: 0 var(--space-1) var(--space-1) var(--space-1);
    border-color: transparent transparent var(--border-activo) transparent;
    transform: translate(-50%, calc(var(--space-1) * -1));
}

/* 9. Progress bar */
.progress {
    background: var(--surface-2);
    border-radius: var(--radius-full);
    height: var(--space-1);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.progress-lg {
    height: var(--space-2);
}

.progress-fill {
    background: var(--accent);
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: width var(--animation-progress-duration) ease;
    animation: fillProgress var(--animation-progress-duration) forwards;
}

/* 10. Skeleton loader */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) var(--skeleton-gradient-stop),
        var(--surface-3) var(--skeleton-gradient-mid),
        var(--surface-2) var(--skeleton-gradient-end)
    );
    background-size: var(--skeleton-bg-size) 100%;
    animation: shimmer var(--animation-shimmer-duration) infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: var(--text-base);
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton-circle {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-full);
}

.skeleton-rect {
    width: 100%;
    height: var(--space-20);
    border-radius: var(--radius-md);
}

/* Utilidades — tipografia */
.font-display {
    font-family: var(--font-display);
}

.font-mono {
    font-family: var(--font-mono);
}

.text-accent {
    color: var(--accent);
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.metric-value {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-metric);
}

.metric-label {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--text-muted);
}

/* Utilidades — layout */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Utilidades — estados */
.state-success {
    border-color: var(--success) !important;
}

.state-warning {
    border-color: var(--warning) !important;
}

.state-danger {
    border-color: var(--danger) !important;
}

/* Keyframes globales */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--fade-translate-y));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: var(--skeleton-bg-size) 0;
    }
    100% {
        background-position: calc(var(--skeleton-bg-size) * -1) 0;
    }
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: var(--shadow-glow);
    }
    50% {
        box-shadow: var(--shadow-glow-hover);
    }
}

@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(var(--space-1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fillProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Clases de entrada */
.animate-fade-in-up {
    animation: fadeInUp var(--transition-base) forwards;
}

.animate-fade-in {
    animation: fadeIn var(--transition-fast) forwards;
}

.animate-pulse-glow {
    animation: pulse-glow var(--transition-base) infinite;
}

.animate-count-up {
    animation: count-up var(--transition-base) forwards;
}

.animate-delay-1 {
    animation-delay: var(--animation-delay-1);
}

.animate-delay-2 {
    animation-delay: var(--animation-delay-2);
}

.animate-delay-3 {
    animation-delay: var(--animation-delay-3);
}