/* ========================================================================
   MEJORAS DE LAYOUT - PAMEH (Versión Compatible)
   ======================================================================== */

/* Variables de colores existentes */
:root {
  --sefin-primary: #19438c;
  --sefin-secondary: #234f9f;
  --sefin-gold: #ad8411;
  --header-bg: #ffffff;
  --header-text: var(--sefin-primary);
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.12);
}

/* ========================================================================
   HEADER ESTILOS - Blanco con letras azules (Compatible)
   ======================================================================== */

/* Forzar header a blanco manteniendo estructura */
.navbar-toolbar {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* Header left - logo */
/* #header .header-left {
  background-color: var(--header-bg) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 15px !important;
} */

#header .navbar-header {
  background-color: var(--sefin-primary) !important;
}

/* Header right - navegación */
#header .header-right {
  background-color: var(--header-bg) !important;
}

/* Título y breadcrumb en el header */
.header-title-section {
  display: flex !important;
  flex-direction: column !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.header-title-section h2 {
  color: var(--header-text) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.header-title-section h2 span {
  color: var(--sefin-secondary) !important;
  font-weight: 500 !important;
}

.header-title-section .breadcrumb-wrapper {
  background-color: rgba(25, 67, 140, 0.05) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-top: 2px !important;
  border: 1px solid rgba(25, 67, 140, 0.1) !important;
}

.header-title-section .breadcrumb-wrapper .label {
  color: var(--sefin-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-right: 5px !important;
}

.header-title-section .breadcrumb {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header-title-section .breadcrumb li,
.header-title-section .breadcrumb li a {
  color: var(--sefin-secondary) !important;
  font-size: 11px !important;
}

.header-title-section .breadcrumb li.active {
  color: var(--sefin-primary) !important;
}

/* Menú hamburguesa */
/* .navbar-minimize-mobile.left {
  background-color: var(--sefin-primary) !important;
  color: #ffffff !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  margin-right: 10px !important;
}

.navbar-minimize-mobile.left:hover {
  background-color: var(--sefin-secondary) !important;
} */

/* Logo centrado */
#header .navbar-header div {
  text-align: center !important;
}

/* #header .navbar-header img {
  max-height: 35px !important;
  width: auto !important;
} */

/* Textos del header en azul */
#header .site-title,
#header .site-title a,
#header .site-title a:hover,
#header .site-title a:active {
  color: var(--header-text) !important;
}

/* Navbar toolbar items */
.navbar-toolbar .navbar-left .navbar-minimize a {
  background-color: var(--header-bg) !important;
  color: var(--sefin-primary) !important;
}

.navbar-toolbar .navbar-left .navbar-minimize a,
.navbar-toolbar .navbar-left .navbar-minimize a {
  background-color: rgba(25, 67, 140, 0.05) !important;
}

/* Navbar right items */
.navbar-toolbar .navbar-right .dropdown > a {
  color: var(--header-text) !important;
}

.navbar-toolbar .navbar-right .dropdown > a:hover,
.navbar-toolbar .navbar-right .dropdown > a:focus {
  color: var(--sefin-secondary) !important;
  background-color: rgba(25, 67, 140, 0.05) !important;
}

.navbar-toolbar .navbar-right .dropdown > a > i {
  color: var(--header-text) !important;
}

/* Perfil dropdown */
.navbar-toolbar .navbar-right .navbar-profile .meta .text {
  color: var(--header-text) !important;
}

/* Dropdown menus */
.navbar-toolbar .navbar-right .dropdown-menu {
  background-color: var(--header-bg) !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 4px 12px var(--shadow-medium) !important;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-header {
  background-color: #f8f9fa !important;
  color: var(--header-text) !important;
}

.navbar-toolbar .navbar-right .dropdown-menu .dropdown-footer {
  background-color: #f8f9fa !important;
}

.navbar-toolbar .navbar-right .dropdown-menu li a {
  color: #333 !important;
}

.navbar-toolbar .navbar-right .dropdown-menu li a:hover {
  background-color: rgba(25, 67, 140, 0.05) !important;
  color: var(--header-text) !important;
}

/* Botón de login */
.btn-login {
  background-color: var(--sefin-gold) !important;
  border-color: var(--sefin-gold) !important;
  color: #ffffff !important;
}

.btn-login:hover {
  opacity: 90% !important;
}

/* ========================================================================
   SIDEBAR ESTILOS - Mantener estructura existente
   ======================================================================== */

/* El sidebar mantiene su estilo original, solo mejoras sutiles */
#sidebar-left {
  box-shadow: 2px 0 8px var(--shadow-light) !important;
}

/* ========================================================================
   CONTENIDO CENTRAL - Efecto levitación mejorado
   ======================================================================== */

#page-content {
  background-color: #f5f6fa !important;
}

/* Header content */
#page-content .header-content {
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 20px !important;
  padding: 15px 20px !important;
}

/* #page-content .header-content h2 {
  color: var(--sefin-primary) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

#page-content .header-content h2 span {
  color: var(--sefin-secondary) !important;
} */

/* Breadcrumb */
.breadcrumb-ruta-container .breadcrumb-wrapper {
  /* background-color: var(--header-bg) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  box-shadow: 0 2px 8px var(--shadow-light) !important; */
  /* margin-top: 15px !important; */
  margin-left: 15px !important;
}

.breadcrumb-ruta-container .breadcrumb {
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumb-ruta-container .breadcrumb li,
.breadcrumb-ruta-container .breadcrumb li a {
  color: #666 !important;
}

.breadcrumb-ruta-container .breadcrumb li.active {
  color: var(--sefin-primary) !important;
}

/* Contenedor principal del contenido */
.body-content-app {
  padding: 20px !important;
}

/* Panel principal con efecto de levitación */
.body-content-app .panel-app {
  min-height: 85vh;
  background-color: var(--header-bg) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px var(--shadow-light) !important;
  margin-bottom: 25px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

/* .body-content .panel:hover {
  box-shadow: 0 8px 30px var(--shadow-medium) !important;
} */

/* Panel heading */
.body-content-app .panel-app .panel-heading-app {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 20px 25px !important;
}

/* Panel body */
.body-content-app .panel-app .panel-body-app {
  padding: 25px !important;
  background-color: var(--header-bg) !important;
}

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */
@media (max-width: 768px) {
  #page-content {
    margin-left: 0 !important;
    margin-top: 50px !important;
  }

  .body-content-app {
    padding: 15px !important;
  }

  .body-content-app .panel-app {
    border-radius: 8px !important;
    margin-bottom: 15px !important;
  }

  .body-content-app .panel-app .panel-heading-app,
  .body-content-app .panel-app .panel-body-app {
    padding: 15px !important;
  }

  /* Header responsive */
  #header .header-left {
    flex-wrap: wrap !important;
    padding: 5px 10px !important;
  }

  .header-title-section {
    order: 3 !important;
    width: 100% !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
  }

  .header-title-section h2 {
    font-size: 14px !important;
  }

  .header-title-section .breadcrumb-wrapper {
    display: none !important;
  }

  #header .navbar-header {
    order: 2 !important;
    flex: 1 !important;
  }

  .navbar-minimize-mobile.left {
    order: 1 !important;
    margin-right: 10px !important;
  }

  .navbar-minimize-mobile.right {
    order: 4 !important;
  }
}

@media (max-width: 480px) {
  .body-content-app {
    padding: 10px !important;
  }

  .body-content-app .panel-app .panel-heading-app,
  .body-content-app .panel-app .panel-body-app {
    padding: 12px !important;
  }

  #page-content .header-content h2 {
    font-size: 20px !important;
  }

  /* Header mobile pequeño */
  .header-title-section h2 {
    font-size: 12px !important;
  }

  /* #header .navbar-header img {
    max-height: 25px !important;
  } */
}

.navbar-primary .navbar-left .navbar-minimize a i,
.navbar-primary .navbar-left .navbar-minimize a i,
.navbar-primary .navbar-left .navbar-minimize a i {
  color: var(--sefin-primary);
}

.navbar-primary .navbar-left .navbar-minimize a:hover i,
.navbar-primary .navbar-left .navbar-minimize a:focus i,
.navbar-primary .navbar-left .navbar-minimize a:active i {
  color: var(--sefin-primary);
}

.app-name-container {
  margin-top: 15px !important;
}

.app-name {
  color: var(--sefin-primary) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.app-name span {
  color: var(--sefin-secondary) !important;
  font-size: 14px !important;
  font-style: italic !important;
}

.app-separator {
  margin-top: 18px !important;
  margin-left: 10px !important;
}

.app-separator span {
  color: var(--sefin-primary) !important;
}

.navbar-primary .navbar-right .navbar-profile > a .meta .text,
.navbar-primary .navbar-right .navbar-profile > a .meta .caret {
  color: var(--sefin-primary) !important;
}

/* ========================================================================
   TRANSICIONES SUAVES
   ======================================================================== */
.body-content-app .panel-app,
.navbar-toolbar .navbar-right .dropdown > a {
  transition: all 0.2s ease !important;
}

/* Evitar animaciones excesivas según solicitud */
body.page-sidebar-minimize #sidebar-left:hover .sidebar-menu,
body.page-sidebar-minimize-auto #sidebar-left:hover .sidebar-menu {
  transition: none !important;
}