@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   PALETA DE COLORES Y ESTILOS CENTRALIZADOS - FUTUREXPLORER
   Modifica únicamente los valores en :root para personalizar cada vista.
   ========================================================================== */

:root {
  /* ========================================================================
     1. VALORES MAESTROS DE LA APP (Fondo general)
     ======================================================================== */
  --fx-global-bg: #F8FAFC;            /* Fondo general claro de toda la aplicación */
  --fx-global-card: #FFFFFF;          /* Base blanca para contenedores y tarjetas */
  --fx-global-text: #1E293B;          /* Color del texto principal (oscuro) */

  /* ========================================================================
     2. CONTENEDORES DE MARCA (BRANDING / LOGOS)
     ======================================================================== */
  --brand-login-bg: #FFFFFF;          /* Fondo del contenedor de logo en Login/Registro */
  --brand-login-border: rgba(226, 232, 240, 0.8); /* Borde sutil del contenedor de logo */

  --brand-sidebar-bg: rgba(255, 255, 255, 0.95);  /* Fondo de la marca en la barra lateral */
  --brand-sidebar-border: rgba(226, 232, 240, 0.8);

  --brand-hero-bg: rgba(255, 255, 255, 0.95);     /* Fondo del logo en la pantalla inicial */
  --brand-hero-border: rgba(255, 255, 255, 0.25);

  /* ========================================================================
     DIMENSIONES Y TAMAÑOS CENTRALIZADOS (TARJETA Y LOGO DE AUTENTICACIÓN)
     ======================================================================== */
  --auth-card-max-width: 28rem;       /* Ancho máximo de la tarjeta de Login/Registro */
  --auth-card-padding: 2.5rem;        /* Relleno interno (padding) de la tarjeta */
  --login-logo-height: 6rem;          /* Altura del logo principal en Login */
  --login-logo-margin-bottom: 1.5rem; /* Separación entre el logo y el título */
  --sidebar-logo-height: 2.25rem;     /* Tamaño del icono/cohete en la barra lateral */

  /* ========================================================================
     3. CONTENEDOR DE LOGO EN NAVEGACIÓN Y SIDEBAR (AJUSTES PERSONALIZABLES)
     ======================================================================== */
  --nav-brand-bg: #FFFFFF;                       /* Fondo del contenedor */
  --nav-brand-border-color: rgba(255, 255, 255, 0.2); /* Borde del contenedor */
  --nav-brand-border-width: 1px;                 /* Grosor del borde */
  --nav-brand-radius: 0.75rem;                  /* Curvatura de las esquinas */
  --nav-brand-padding: 0.5rem 0.5rem;            /* Relleno interno (Arriba/Abajo Izq/Der) */
  --nav-brand-margin: 0.25rem 0rem 0.75rem 0rem;  /* Margen exterior (Top Right Bottom Left) */
  --nav-brand-gap: 0.5rem;                      /* Espacio interno entre elementos */

  /* CONTROL DE TAMAÑO DE IMÁGENES / LOGOS */
  --nav-logo-max-height: 2rem;                /* Altura máxima general del logo en Sidebar */
  --nav-logo-icon-height: 1.8rem;               /* Tamaño si usas Isotipo / Cohete por separado */
  --nav-logo-text-height: 3rem;                 /* Tamaño si usas Logotipo / Texto por separado */

  /* ========================================================================
     4. VISTA: WELCOME / LANDING PAGE INICIAL
     ======================================================================== */
  --welcome-hero-bg: #023BA1;         /* Fondo azul del héroe principal */
  --welcome-hero-title: #FFFFFF;      /* Texto del título principal */
  --welcome-hero-subtitle: #E2E8F0;   /* Texto del subtítulo */
  
  --welcome-btn-primary-bg: #069237;  /* Botón 'Comenzar Aventura' / Registro (Verde) */
  --welcome-btn-primary-text: #FFFFFF;
  --welcome-btn-primary-hover: #046c28;

  --welcome-btn-secondary-bg: #FFFFFF;/* Botón 'Inicia Sesión' (Blanco) */
  --welcome-btn-secondary-text: #023BA1;
  --welcome-btn-secondary-hover: #F1F5F9;

  --welcome-card-bg: #FFFFFF;         /* Tarjetas informativas de la landing */
  --welcome-card-border: rgba(2, 59, 161, 0.12);
  --welcome-card-title: #023BA1;

  /* ========================================================================
     5. VISTA: LOGIN / INICIO DE SESIÓN
     ======================================================================== */
  --login-card-bg: #FFFFFF;           /* Fondo de la tarjeta de inicio de sesión */
  --login-card-border: rgba(2, 59, 161, 0.15);
  --login-title-color: #023BA1;
  --login-subtitle-color: #64748B;

  --login-input-bg: #F1F5F9;          /* Fondo de las cajas de texto (inputs) */
  --login-input-border: #CBD5E1;
  --login-input-text: #1E293B;
  --login-input-focus-border: #023BA1;/* Borde al hacer clic en un input */

  --login-btn-bg: #023BA1;            /* Botón azul 'Ingresar' */
  --login-btn-hover: #012870;
  --login-btn-text: #FFFFFF;

  --login-link-color: #023BA1;        /* Color de enlaces como 'Olvidé mi contraseña' */
  --login-link-hover: #012870;

  /* ========================================================================
     6. VISTA: REGISTRO / NUEVO USUARIO
     ======================================================================== */
  --register-card-bg: #FFFFFF;
  --register-card-border: rgba(2, 59, 161, 0.15);
  --register-title-color: #023BA1;
  --register-subtitle-color: #64748B;

  --register-input-bg: #F1F5F9;
  --register-input-border: #CBD5E1;
  --register-input-text: #1E293B;
  --register-input-focus-border: #023BA1;

  --register-btn-bg: #023BA1;
  --register-btn-hover: #012870;
  --register-btn-text: #FFFFFF;

  --register-link-color: #023BA1;
  --register-link-hover: #012870;

  /* ========================================================================
     7. NAVEGACIÓN: BARRA LATERAL / SIDEBAR
     ======================================================================== */
  --sidebar-bg: #023BA1;              /* Fondo azul de la barra lateral izquierda */
  --sidebar-text: #FFFFFF;            /* Color del texto del menú */
  --sidebar-item-hover: rgba(255, 255, 255, 0.12); /* Fondo al pasar el cursor sobre un menú */
  --sidebar-item-active: rgba(255, 255, 255, 0.22);/* Fondo del menú seleccionado actualmente */

  /* ========================================================================
     8. VISTA: DASHBOARD / MUNDO VOCACIONAL
     ======================================================================== */
  --dash-bg: #F8FAFC;                 /* Fondo de la vista principal del estudiante */
  --dash-card-bg: #FFFFFF;            /* Tarjetas de las áreas de estudio */
  --dash-card-border: rgba(2, 59, 161, 0.12);
  --dash-title-color: #023BA1;        /* Títulos de secciones */
  --dash-subtitle-color: #64748B;
  --dash-xp-color: #EEB902;           /* Color amarillo de los puntos XP */
  --dash-progress-bar: #069237;       /* Verde de la barra de avance */

  /* ========================================================================
     9. VISTA: MAPA DE NIVELES (carrera_niveles)
     ======================================================================== */
  --niveles-bg-overlay: rgba(15, 23, 42, 0.75);
  --niveles-card-complete-bg: rgba(15, 23, 42, 0.90);
  --niveles-card-complete-border: #EEB902;
  --niveles-card-active-bg: rgba(15, 23, 42, 0.95);
  --niveles-card-locked-bg: rgba(2, 6, 23, 0.60);

  /* ========================================================================
     10. VISTA: LOGROS Y RECOMPENSAS
     ======================================================================== */
  --logros-card-bg: #FFFFFF;
  --logros-card-claimed-bg: rgba(6, 146, 55, 0.08);
  --logros-card-locked-bg: #F1F5F9;
  --logros-title-color: #023BA1;

  /* ========================================================================
     11. COMPONENTE: MASCOTA / AVATAR FLOTANTE
     ======================================================================== */
  --avatar-bubble-bg: #FFFFFF;        /* Globo de texto de la mascota */
  --avatar-bubble-border: #023BA1;
  --avatar-bubble-text: #023BA1;
  --avatar-badge-bg: #EEB902;         /* Fondo de la insignia de nivel */

  /* ========================================================================
     12. VISTA: ARMARIO / VESTIDOR DEL AVATAR
     ======================================================================== */
  --wardrobe-bg: #F8FAFC;             /* Fondo general de la vista del armario */
  --wardrobe-stage-bg: radial-gradient(circle, rgba(2, 59, 161, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  --wardrobe-card-bg: #FFFFFF;        /* Fondo blanco de la tarjeta contenedora */
  --wardrobe-card-border: rgba(2, 59, 161, 0.12);

  --wardrobe-tab-active-bg: #023BA1;
  --wardrobe-tab-active-text: #FFFFFF;
  --wardrobe-tab-inactive-bg: #F1F5F9;
  --wardrobe-tab-inactive-text: #64748B;

  --career-btn-bg: #FFFFFF;
  --career-btn-border: #E2E8F0;
  --career-btn-text: #475569;
  --career-btn-active-bg: #023BA1;
  --career-btn-active-text: #FFFFFF;

  --item-card-bg: #FFFFFF;
  --item-card-border: #E2E8F0;
  --item-card-hover-border: #023BA1;
  --item-card-equipped-bg: rgba(6, 146, 55, 0.08);
  --item-card-equipped-border: #069237;
  --item-card-locked-bg: #F8FAFC;
}

/* ==========================================
   PALETA FUTUREXPLORER (FX) - MÓDULO DOCENTE
   ========================================== */

.fx-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #f0e2e2 !important;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.fx-sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fffffffe !important;
}

.fx-sidebar-link-active {
    background-color: #ffffff21 !important;
    color: #f1f1f2 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fx-card-header {
    background: linear-gradient(135deg, #0038a8 0%, #001f5c 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
}

.fx-badge-categoria {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
}

/* ==========================================================================
   ESTILOS DE LOGOS Y CONTENEDORES DE MARCA
   ========================================================================== */

.fx-brand-login-card {
    background-color: var(--brand-login-bg);
    border: 1px solid var(--brand-login-border);
    border-radius: 1.25rem;
    padding: 0.85rem 1.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fx-brand-sidebar-card {
    background-color: var(--brand-sidebar-bg);
    border: 1px solid var(--brand-sidebar-border);
    border-radius: 1rem;
    padding: 0.6rem 0.8rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.fx-brand-sidebar-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.fx-brand-hero-badge {
    background-color: var(--brand-hero-bg);
    border: 1px solid var(--brand-hero-border);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.25rem 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.fx-mark-img {
    max-height: 2.25rem;
    width: auto;
    object-fit: contain;
}

.fx-hero-logo-img {
    max-height: 8rem;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   CLASES DE CONTROL VISUAL Y DIMENSIONES (AUTENTICACIÓN)
   ========================================================================== */

.login-card,
.register-card {
    background-color: var(--login-card-bg);
    border: 1px solid var(--login-card-border);
    max-width: var(--auth-card-max-width) !important;
    padding: var(--auth-card-padding) !important;
    width: 100% !important;
}

.fx-auth-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--login-logo-margin-bottom) !important;
}

.sidebar-logo, .fx-auth-logo {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.fx-sidebar-logo {
    height: var(--sidebar-logo-height) !important;
    width: auto !important;
    object-fit: contain;
}

/* ==========================================================================
   MAPEO DE CLASES A VARIABLES CSS
   ========================================================================== */

.fx-body-bg { background-color: var(--fx-global-bg); }

/* --- REGLAS DE WELCOME --- */
.welcome-hero { background-color: var(--welcome-hero-bg); }
.welcome-hero-title { color: var(--welcome-hero-title); }
.welcome-hero-subtitle { color: var(--welcome-hero-subtitle); }

.welcome-btn-primary { 
  background-color: var(--welcome-btn-primary-bg); 
  color: var(--welcome-btn-primary-text);
  transition: background-color 0.2s ease;
}
.welcome-btn-primary:hover { background-color: var(--welcome-btn-primary-hover) !important; }

.welcome-btn-secondary { 
  background-color: var(--welcome-btn-secondary-bg); 
  color: var(--welcome-btn-secondary-text);
  transition: background-color 0.2s ease;
}
.welcome-btn-secondary:hover { background-color: var(--welcome-btn-secondary-hover) !important; }

.welcome-card { 
  background-color: var(--welcome-card-bg); 
  border: 1px solid var(--welcome-card-border); 
}
.welcome-card-title { color: var(--welcome-card-title); }

/* --- REGLAS DE LOGIN --- */
.login-title { color: var(--login-title-color); }
.login-subtitle { color: var(--login-subtitle-color); }
.login-input { background-color: var(--login-input-bg); border: 1px solid var(--login-input-border); color: var(--login-input-text); transition: all 0.2s ease; }
.login-input:focus { border-color: var(--login-input-focus-border) !important; background-color: #FFFFFF !important; }
.login-btn { background-color: var(--login-btn-bg); color: var(--login-btn-text); transition: background-color 0.2s ease; }
.login-btn:hover { background-color: var(--login-btn-hover) !important; }
.login-link { color: var(--login-link-color); transition: color 0.2s ease; }
.login-link:hover { color: var(--login-link-hover) !important; }

/* --- REGLAS DE REGISTRO --- */
.register-title { color: var(--register-title-color); }
.register-subtitle { color: var(--register-subtitle-color); }
.register-input { background-color: var(--register-input-bg); border: 1px solid var(--register-input-border); color: var(--register-input-text); transition: all 0.2s ease; }
.register-input:focus { border-color: var(--register-input-focus-border) !important; background-color: #FFFFFF !important; }
.register-btn { background-color: var(--register-btn-bg); color: var(--register-btn-text); transition: background-color 0.2s ease; }
.register-btn:hover { background-color: var(--register-btn-hover) !important; }
.register-link { color: var(--register-link-color); transition: color 0.2s ease; }
.register-link:hover { color: var(--register-link-hover) !important; }

/* --- REGLAS DE SIDEBAR --- */
.fx-sidebar { background-color: var(--sidebar-bg); color: var(--sidebar-text); }
.fx-sidebar-item:hover { background-color: var(--sidebar-item-hover); }
.fx-sidebar-item.active { background-color: var(--sidebar-item-active); }

/* --- REGLAS DE DASHBOARD --- */
.dash-card { background-color: var(--dash-card-bg); border: 1px solid var(--dash-card-border); }
.dash-title { color: var(--dash-title-color); }
.dash-subtitle { color: var(--dash-subtitle-color); }
.dash-xp { color: var(--dash-xp-color); }

/* --- REGLAS DE LOGROS Y AVATAR --- */
.logros-card { background-color: var(--logros-card-bg); }
.avatar-bubble { background-color: var(--avatar-bubble-bg); border: 1px solid var(--avatar-bubble-border); color: var(--avatar-bubble-text); }

/* ==========================================================================
   ESTILOS CONTROLADOS DEL CONTENEDOR Y LOGOS DE NAVEGACIÓN
   ========================================================================== */

.fx-nav-brand-container {
    background-color: var(--nav-brand-bg) !important;
    border: var(--nav-brand-border-width) solid var(--nav-brand-border-color) !important;
    border-radius: var(--nav-brand-radius) !important;
    padding: var(--nav-brand-padding) !important;
    margin: var(--nav-brand-margin) !important;
    gap: var(--nav-brand-gap) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

/* Control estricto de las imágenes de logo dentro de la barra */
.fx-nav-brand-container img,
.fx-logo-img {
    max-height: var(--nav-logo-max-height) !important;
    width: auto !important;
    object-fit: contain !important;
}

.fx-nav-logo-icon {
    height: var(--nav-logo-icon-height) !important;
    width: auto !important;
    object-fit: contain !important;
}

.fx-nav-logo-text {
    height: var(--nav-logo-text-height) !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   ESTILOS DE LA VISTA ARMARIO Y FILTROS POR CARRERA
   ========================================================================== */

.fx-wardrobe-stage {
    background: var(--wardrobe-stage-bg);
    border-radius: 2rem;
}

.fx-wardrobe-card {
    background-color: var(--wardrobe-card-bg);
    border: 1px solid var(--wardrobe-card-border);
}

.fx-tab-btn {
    background-color: var(--wardrobe-tab-inactive-bg);
    color: var(--wardrobe-tab-inactive-text);
    transition: all 0.2s ease;
}

.fx-tab-btn.active {
    background-color: var(--wardrobe-tab-active-bg) !important;
    color: var(--wardrobe-tab-active-text) !important;
}

.fx-career-btn {
    background-color: var(--career-btn-bg);
    border: 1px solid var(--career-btn-border);
    color: var(--career-btn-text);
    transition: all 0.2s ease;
}

.fx-career-btn:hover {
    border-color: #023BA1;
    color: #023BA1;
}

.fx-career-btn.active {
    background-color: var(--career-btn-active-bg) !important;
    color: var(--career-btn-active-text) !important;
    border-color: #023BA1 !important;
    box-shadow: 0 4px 6px -1px rgba(2, 59, 161, 0.2);
}

.fx-item-card {
    background-color: var(--item-card-bg);
    border: 2px solid var(--item-card-border);
    transition: all 0.2s ease;
}

.fx-item-card:hover:not(.locked) {
    border-color: var(--item-card-hover-border);
    transform: translateY(-2px);
}

.fx-item-card.equipped {
    background-color: var(--item-card-equipped-bg);
    border-color: var(--item-card-equipped-border);
}

.fx-item-card.locked {
    background-color: var(--item-card-locked-bg);
    opacity: 0.6;
    cursor: not-allowed;
}