@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono&display=swap');

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #3c3d37; border-radius: 10px; }

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

/* Solo aplica transición de tema durante el cambio, no siempre */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 220ms ease-in-out, color 220ms ease-in-out, border-color 220ms ease-in-out, box-shadow 220ms ease-in-out, fill 220ms ease-in-out !important;
}
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

:root {
    /* ===== FUENTES ===== */
    --font-body: 'Inter', sans-serif;
    --font-headline: 'Space Grotesk', sans-serif;
    --font-label: 'Inter', sans-serif;

    /* ===== SURFACE (design tokens) ===== */
    --surface: #fbf9f4;
    --on-surface: #1F2937;
    --surface-container: #F3F4F6;
    --on-surface-variant: #4B5563;
    --outline-variant: #D1D5DB;
    --on-primary: #ffffff;

    /* ===== COLOR PRINCIPAL: ÁMBAR ===== */
    --primary: #F59E0B; /* Ámbar 500 - Color principal para botones, badges, iconos */
    --primary-hover: #D97706; /* Ámbar 600 - Estados hover */
    --primary-light: #FEF3C7; /* Ámbar 100 - Fondos suaves */
    --primary-dark: #B45309; /* Ámbar 700 - Textos sobre fondos claros */
    /* ===== MODO CLARO ===== */
    --bg: #FFFFFF; /* Fondo principal */
    --bg-secondary: #F9FAFB; /* Gris 50 - Fondos alternativos, cards */
    --bg-tertiary: #F3F4F6; /* Gris 100 - Hover states, áreas deshabilitadas */

    --text: #1F2937; /* Gris 800 - Texto principal */
    --text-secondary: #4B5563; /* Gris 600 - Texto secundario */
    --text-muted: #6B7280; /* Gris 500 - Texto deshabilitado, placeholders */

    --border: #E5E7EB; /* Gris 200 - Bordes generales */
    --border-strong: #D1D5DB; /* Gris 300 - Bordes enfatizados */
    /* ===== MODO OSCURO ===== */
    --bg-dark: #111827; /* Gris 900 - Fondo principal oscuro */
    --bg-secondary-dark: #1F2937; /* Gris 800 - Fondos alternativos oscuros */
    --bg-tertiary-dark: #374151; /* Gris 700 - Hover states oscuros */

    --surface-dark: #0F172A; /* Slate 950 - Fondo de página oscuro */
    --surface-container-dark: #1F2937; /* Gris 800 - Contenedores oscuros */
    --on-surface-dark: #F9FAFB; /* Gris 50 - Texto principal oscuro */
    --on-surface-variant-dark: #9CA3AF; /* Gris 400 - Texto secundario oscuro */
    --outline-variant-dark: #374151; /* Gris 700 - Bordes outline oscuros */

    --text-dark: #F9FAFB; /* Gris 50 - Texto principal oscuro */
    --text-secondary-dark: #E5E7EB; /* Gris 200 - Texto secundario oscuro */
    --text-muted-dark: #9CA3AF; /* Gris 400 - Texto deshabilitado oscuro */

    --border-dark: #374151; /* Gris 700 - Bordes generales oscuros */
    --border-strong-dark: #4B5563; /* Gris 600 - Bordes enfatizados oscuros */
    /* ===== NIVELES DE SEVERIDAD ===== */
    --severity-critical: #EF4444; /* Rojo 500 - CRITICAL */
    --severity-critical-bg: #FEE2E2; /* Rojo 100 - Fondo claro CRITICAL */
    --severity-critical-bg-dark: #7F1D1D; /* Rojo 900 - Fondo oscuro CRITICAL */

    --severity-error: #F59E0B; /* Ámbar 500 - ERROR (color principal) */
    --severity-error-bg: #FEF3C7; /* Ámbar 100 - Fondo claro ERROR */
    --severity-error-bg-dark: #78350F; /* Ámbar 900 - Fondo oscuro ERROR */

    --severity-warning: #F59E0B; /* Ámbar 500 - WARNING (mismo que ERROR) */
    --severity-warning-bg: #FFFBEB; /* Ámbar 50 - Fondo claro WARNING (más suave) */
    --severity-warning-bg-dark: #451A03; /* Ámbar 950 - Fondo oscuro WARNING */
    /* ===== ESTADOS SEMÁNTICOS ===== */
    --success: #10B981; /* Verde Esmeralda 500 */
    --success-bg: #D1FAE5; /* Verde 100 */
    --success-bg-dark: #065F46; /* Verde 800 */

    --info: #3B82F6; /* Azul 500 */
    --info-bg: #DBEAFE; /* Azul 100 */
    --info-bg-dark: #1E40AF; /* Azul 700 */
    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    /* ===== TRANSICIONES ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    /* ===== RADIOS DE BORDE ===== */
    --radius-sm: 0.25rem; /* 4px */
    --radius: 0.375rem; /* 6px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem; /* 16px */
    --radius-full: 9999px; /* Circular */
}


/* ============================================
   APLICACIÓN DE MODO OSCURO
   ============================================ */

/* Clase para activar modo oscuro */
.dark-mode {
    /* Surface tokens */
    --surface: var(--surface-dark);
    --surface-container: var(--surface-container-dark);
    --on-surface: var(--on-surface-dark);
    --on-surface-variant: var(--on-surface-variant-dark);
    --outline-variant: var(--outline-variant-dark);
    /* Background tokens */
    --bg: var(--bg-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    /* Text tokens */
    --text: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-muted: var(--text-muted-dark);
    /* Border tokens */
    --border: var(--border-dark);
    --border-strong: var(--border-strong-dark);
    /* Shadows */
    --shadow-sm: var(--shadow-dark-sm);
    --shadow: var(--shadow-dark);
    --shadow-md: var(--shadow-dark-md);
    --shadow-lg: var(--shadow-dark-lg);
    /* Severity backgrounds */
    --severity-critical-bg: var(--severity-critical-bg-dark);
    --severity-error-bg: var(--severity-error-bg-dark);
    --severity-warning-bg: var(--severity-warning-bg-dark);
    --success-bg: var(--success-bg-dark);
    --info-bg: var(--info-bg-dark);
    /* Primary variants */
    --primary-light: rgba(245, 158, 11, 0.12);
    --primary-dark: var(--primary);
}


/* ============================================
   EJEMPLOS DE USO
   ============================================ */


  .btn-primary1 {
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius);
    transition: background-color var(--transition-base);
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
  }


  BADGE DE SEVERIDAD:
  -------------------
  .badge-critical {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    border: 1px solid var(--severity-critical);
  }
  
  .badge-error {
    background-color: var(--severity-error-bg);
    color: var(--severity-error);
    border: 1px solid var(--severity-error);
  }


  CARD:
  -----
  .card {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  
  .card-secondary {
    background-color: var(--bg-secondary);
  }


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


  ACTIVAR MODO OSCURO:
  --------------------
  // JavaScript
  document.body.classList.add('dark-mode');
  
  // Blazor
  <body class="@(modoOscuro ? "dark-mode" : "")">
*/


/* ============================================
   ALTERNATIVAS (COMENTADAS)
   ============================================ */

/*
  OPCIÓN 2: VERDE SALVIA
  ----------------------
  --primary: #10B981;        (Esmeralda 500)
  --primary-hover: #059669;  (Esmeralda 600)
  --primary-light: #D1FAE5;  (Esmeralda 100)
  --primary-dark: #047857;   (Esmeralda 700)
*/

/*
  OPCIÓN 3: SLATE + CORAL
  -----------------------
  --primary: #64748B;        (Slate 500)
  --accent: #FB923C;         (Naranja 400)
  --bg-dark: #0F172A;        (Slate 950)
  --bg-secondary-dark: #1E293B; (Slate 900)
*/