/**
 * MIGRASOFT V4 - LÍNEA GRÁFICA INSTITUCIONAL SEGÚN MANUAL DE MARCA AYUDA EN ACCIÓN
 * 
 * PALETA PRINCIPAL:
 *  - Naranja Ayuda (Pantone 2024 C - 60% uso): #F87C56
 *  - Amarillo Ayuda (Pantone 135 C - 30% uso): #FFC658
 *  - Naranja Brillante (Pantone 7410 C - 10% uso): #FEAD77
 *  - Naranja Fuerte (Pantone 2348 C - 10% uso): #E5554F
 * 
 * PALETA DE APOYO (Gráficas, Badges y Métricas Secundarias):
 *  - Turquesa Fuerte (Pantone 2238 C): #006776
 *  - Turquesa Medio (Pantone 3285 C): #009681
 *  - Verde Brillante (Pantone 2248 C): #6CB690
 *  - Color de Trazo / Texto (Pantone 440 C): #372E2C
 * 
 * FONDOS Y VACÍOS:
 *  - Blanco Puro: #FFFFFF
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* PALETA PRINCIPAL (Predominante en UI) */
  --aea-naranja-ayuda: #F87C56;     /* 60% uso */
  --aea-amarillo-ayuda: #FFC658;    /* 30% uso */
  --aea-naranja-brillante: #FEAD77; /* 10% uso */
  --aea-naranja-fuerte: #E5554F;    /* 10% uso / Botones primarios */
  
  --aea-naranja-light: #FFF5F2;
  --aea-naranja-tint: rgba(248, 124, 86, 0.12);
  
  /* PALETA DE APOYO (Gráficas y Datos Secundarios) */
  --aea-turquesa-fuerte: #006776;
  --aea-turquesa-medio: #009681;
  --aea-verde-brillante: #6CB690;
  
  --aea-turquesa-light: #EBF7F8;
  --aea-verde-light: #F0F9F5;

  /* TEXTO Y NEUTROS */
  --aea-charcoal: #372E2C;          /* Pantone 440 C */
  --aea-gray-muted: #6B6260;
  --aea-gray-light: #F8FAFC;
  --aea-gray-border: #E2E8F0;
  --aea-white: #FFFFFF;
  
  --aea-shadow-sm: 0 2px 8px rgba(55, 46, 44, 0.04);
  --aea-shadow-md: 0 4px 16px rgba(55, 46, 44, 0.08);
  --aea-shadow-lg: 0 10px 28px rgba(55, 46, 44, 0.12);
  --aea-radius-sm: 8px;
  --aea-radius-md: 12px;
  --aea-radius-lg: 16px;
  --aea-radius-pill: 50px;
}

/* =========================================================
   ESTILOS GENERALES Y FONDOS BLANCOS
   ========================================================= */
body, .institucional-body, .content-wrapper {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--aea-charcoal) !important;
  background-color: #FFFFFF !important; /* Fondo blanco puro para vacíos */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--aea-charcoal) !important;
  letter-spacing: -0.02em;
}

/* Top Navbar Superior */
.main-header.navbar, .institutional-navbar {
  background: var(--aea-white) !important;
  border-bottom: 3px solid var(--aea-naranja-ayuda) !important;
  box-shadow: var(--aea-shadow-sm) !important;
  padding: 0.65rem 1.25rem !important;
}

.main-header .navbar-nav .nav-link {
  color: var(--aea-charcoal) !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--aea-radius-sm);
  transition: all 0.2s ease;
}

.main-header .navbar-nav .nav-link:hover {
  background-color: var(--aea-naranja-light);
  color: var(--aea-naranja-fuerte) !important;
}

/* Sidebar Lateral (Naranja Ayuda Focalizado) */
.main-sidebar, .institutional-sidebar {
  background: linear-gradient(180deg, #372E2C 0%, #251E1D 100%) !important;
  box-shadow: 2px 0 16px rgba(55, 46, 44, 0.15) !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.sidebar-collapse) .main-sidebar {
  width: 250px !important;
}

body.sidebar-collapse .main-sidebar,
body.sidebar-collapse .main-sidebar::before {
  width: 4.6rem !important;
}

body.sidebar-collapse .main-sidebar .brand-link .brand-text,
body.sidebar-collapse .main-sidebar .brand-link small,
body.sidebar-collapse .main-sidebar .user-panel .info {
  display: none !important;
}

body.sidebar-collapse .main-sidebar .brand-link {
  padding: 0.85rem 0.5rem !important;
}

body.sidebar-collapse .main-sidebar .brand-link img {
  max-height: 32px !important;
  margin: 0 auto !important;
}

.main-sidebar .brand-link, .institutional-brand {
  background: #251E1D !important;
  border-bottom: 2px solid var(--aea-naranja-ayuda) !important;
  padding: 1.25rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.main-sidebar .brand-link .brand-text {
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
}

.main-sidebar .brand-link small {
  font-size: 0.72rem !important;
  color: var(--aea-naranja-ayuda) !important;
  margin-top: 3px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.sidebar .nav-pills .nav-link {
  color: #E2E8F0 !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1rem !important;
  border-radius: var(--aea-radius-sm) !important;
  margin: 0.2rem 0;
  transition: all 0.2s ease;
}

.sidebar .nav-pills .nav-link i {
  color: var(--aea-naranja-ayuda);
  margin-right: 0.6rem;
  font-size: 1.1rem;
}

.sidebar .nav-pills .nav-link:hover {
  background: rgba(248, 124, 86, 0.15) !important;
  color: #FFFFFF !important;
}

.sidebar .nav-pills .nav-link.active {
  background: var(--aea-naranja-fuerte) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(229, 85, 79, 0.4) !important;
}

.sidebar .nav-pills .nav-link.active i {
  color: #FFFFFF !important;
}

/* Tarjetas y Contenedores con Fondo Blanco */
.card, .card-institucional {
  border: 1px solid var(--aea-gray-border) !important;
  border-radius: var(--aea-radius-md) !important;
  box-shadow: var(--aea-shadow-sm) !important;
  background: #FFFFFF !important; /* Fondo blanco puro */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--aea-shadow-md) !important;
}

.card-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--aea-gray-border) !important;
  padding: 1rem 1.25rem !important;
}

/* KPIs con los colores de la paleta principal */
.kpi-card {
  background: #FFFFFF;
  border-radius: var(--aea-radius-md);
  border: 1px solid var(--aea-gray-border);
  padding: 1.35rem 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--aea-shadow-sm);
  transition: all 0.25s ease;
  margin-bottom: 1.25rem;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--aea-shadow-md);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.kpi-card.kpi-primary::before, .kpi-card.kpi-coral::before { background: var(--aea-naranja-ayuda); }
.kpi-card.kpi-strong::before { background: var(--aea-naranja-fuerte); }
.kpi-card.kpi-yellow::before { background: var(--aea-amarillo-ayuda); }
.kpi-card.kpi-turquesa::before { background: var(--aea-turquesa-fuerte); }

.kpi-card .kpi-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--aea-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.kpi-primary .kpi-icon-box, .kpi-coral .kpi-icon-box { background: var(--aea-naranja-light); color: var(--aea-naranja-ayuda); }
.kpi-strong .kpi-icon-box { background: #FFEBEA; color: var(--aea-naranja-fuerte); }
.kpi-yellow .kpi-icon-box { background: #FFFDF0; color: #D99B00; }
.kpi-turquesa .kpi-icon-box { background: var(--aea-turquesa-light); color: var(--aea-turquesa-fuerte); }

.kpi-card .kpi-value {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--aea-charcoal);
  margin-top: 0.5rem;
  letter-spacing: -0.03em;
}

.kpi-card .kpi-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--aea-gray-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* BOTONES PRINCIPALES (Focalizados en Naranja Fuerte / Naranja Ayuda) */
.btn-institucional-coral, .btn-primary {
  background-color: var(--aea-naranja-fuerte) !important;
  border-color: var(--aea-naranja-fuerte) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
  border-radius: var(--aea-radius-sm);
  box-shadow: 0 2px 8px rgba(229, 85, 79, 0.25);
  transition: all 0.2s ease;
}

.btn-institucional-coral:hover, .btn-primary:hover {
  background-color: #D8433D !important;
  border-color: #D8433D !important;
  box-shadow: 0 4px 14px rgba(229, 85, 79, 0.35);
  transform: translateY(-1px);
}

.btn-institucional-orange {
  background-color: var(--aea-naranja-ayuda) !important;
  border-color: var(--aea-naranja-ayuda) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: var(--aea-radius-sm);
}

.btn-institucional-orange:hover {
  background-color: #E86B45 !important;
  border-color: #E86B45 !important;
}

/* Badges con los colores del Manual */
.badge-coral {
  background-color: var(--aea-naranja-fuerte) !important;
  color: #FFFFFF !important;
}

.badge-orange {
  background-color: var(--aea-naranja-ayuda) !important;
  color: #FFFFFF !important;
}

.badge-yellow {
  background-color: var(--aea-amarillo-ayuda) !important;
  color: var(--aea-charcoal) !important;
}

.badge-turquesa {
  background-color: var(--aea-turquesa-fuerte) !important;
  color: #FFFFFF !important;
}

.badge-verde {
  background-color: var(--aea-verde-brillante) !important;
  color: #FFFFFF !important;
}

/* Footer con Fondo Blanco */
.main-footer, .institutional-footer {
  background: #FFFFFF !important;
  border-top: 1px solid var(--aea-gray-border) !important;
  color: var(--aea-gray-muted) !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.85rem;
}

/* Force white text on institutional coral buttons */
.btn-institucional-coral, 
.btn-institucional-coral:hover, 
.btn-institucional-coral:focus, 
.btn-institucional-coral:active,
.btn-institucional-coral i,
.btn-institucional-coral span {
  color: #FFFFFF !important;
}


/* =========================================================
   SIDEBAR COLLAPSE NO-HOVER EXPAND & PERSISTENCE OVERRIDES
   ========================================================= */
body.sidebar-collapse .main-sidebar,
body.sidebar-collapse .main-sidebar:hover,
body.sidebar-collapse .main-sidebar.sidebar-focused {
  width: 4.6rem !important;
}

body.sidebar-collapse .main-sidebar:hover .brand-link .brand-text,
body.sidebar-collapse .main-sidebar:hover .brand-link small,
body.sidebar-collapse .main-sidebar:hover .user-panel .info,
body.sidebar-collapse .main-sidebar:hover .sidebar .nav-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar:hover .sidebar .nav-header {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.sidebar-collapse .main-sidebar:hover .sidebar .nav-link {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

body.sidebar-collapse .main-sidebar:hover .sidebar .nav-link i {
  margin-right: 0 !important;
}