/* ===================================
   BASE.CSS - Variables, Reset y Tipografía
   Estilo: Minimalista + Oscuro
   =================================== */

/* ===================================
   VARIABLES CSS GLOBALES
   =================================== */
:root {
  /* Radios y espaciados */
  --radius: 1.25rem;
  --card-radius: 12px;

  /* Hero y Overlays */
  --hero-overlay-bg: rgba(0, 0, 0, 0.3);

  /* Tipografía */
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* ===================================
   VARIABLES MODO OSCURO
   =================================== */
[data-bs-theme="dark"] {
  /* Hero overlay más intenso */
  --hero-overlay-bg: rgba(0, 0, 0, 0.5);

  /* Tarjetas - Modo Oscuro */
  --dark-card-bg: rgba(255, 255, 255, 0.03);
  --dark-card-header-bg: rgba(255, 255, 255, 0.05);
  --dark-card-border: rgba(255, 255, 255, 0.08);
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #a0aec0;

  --card-bg: var(--dark-card-bg);
  --card-header-bg: var(--dark-card-header-bg);
  --card-border: var(--dark-card-border);

  /* Badges ajustados para dark mode */
  --badge-applicant-bg: #ff8c00;
  --status-waiting-bg: #ffb300;
  --status-pending-bg: #718096;
}

/* ===================================
   RESET Y CONFIGURACIÓN BASE
   =================================== */
html {
  height: 100%;
}

body {
  font-family: var(--bs-font-family, "Montserrat", sans-serif);
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ===================================
   TIPOGRAFÍA GLOBAL
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

h1 {
  font-weight: 800;
}

h2 {
  font-size: 1.8rem;
}

.fw-800 {
  font-weight: 800;
}
.fw-600 {
  font-weight: 600;
}

/* Texto de marca/branding */
.brand-text {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.brand-title,
.brand-tagline {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .brand-title,
[data-bs-theme="dark"] .brand-tagline {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

/* ===================================
   SCROLLBAR PERSONALIZADO
   =================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

/* ===================================
   UTILIDADES GLOBALES
   =================================== */
.icon-large {
  font-size: 3rem;
}