/* =========================================================
   FACON v2 - global.css
   Paleta, layout base, navbar/topbar, rail (sidebar),
   gutters, login, charts y componentes auxiliares.
   ========================================================= */

/* ---------- Variables globales ---------- */
:root{
  /* Paleta corporativa */
  --color-primary:   #2d4b80;
  --color-secondary: #3f83c0;
  --color-accent:    #91c4f1;

  /* Bootstrap overrides (para bg-primary, btn-primary, etc.) */
  --bs-primary:      #2d4b80;
  --bs-primary-rgb:  45, 75, 128;

  /* Layout */
  --rail-w:    88px;   /* ancho del rail lateral */
  --topbar-h:  56px;   /* alto de la barra superior */
  --footer-h:  40px;   /* alto del footer */
  --flyout-w:  260px;
  --flyout-gap: 6px;

  /* Gutter lateral del contenido */
  --page-gutter: 24px;
}

@media (min-width: 1200px){
  :root{ --page-gutter: 32px; }
}

/* ---------- Reseteos / base ---------- */
html, body{
  height:100%;
  overflow-x:hidden;
  background:#f5f7fb;
}

/* ---------- Navbar (topbar) ---------- */
.navbar.fixed-top{ height:var(--topbar-h); }

/* Asegurar topbar con el color primario sobrescribiendo Bootstrap */
.navbar.bg-primary{ background-color: var(--bs-primary) !important; }

/* Contenedor de la navbar con gutter simétrico */
.navbar .container-fluid{
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Búsqueda centrada geométricamente (columna central en grid) */
.navbar .nav-search{
  justify-self: center;
  width: min(680px, 60vw);
}
@media (max-width: 767.98px){
  .navbar .nav-search{ display:none !important; }
}

/* Tabs: activo en color corporativo */
.nav-tabs .nav-link.active{
  border-color: var(--bs-primary) var(--bs-primary) transparent;
  color: var(--bs-primary);
  font-weight: 600;
}

/* ---------- Footer ---------- */
.footer{
  position:fixed; bottom:0; left:0; right:0;
  height:var(--footer-h);
  background:#fff;
  display:flex; align-items:center;
}

/* ---------- Rail (sidebar) ---------- */
.nav-rail{
  position:fixed; top:var(--topbar-h); bottom:var(--footer-h); left:0;
  width:var(--rail-w);
  background:#fff;
  border-right:1px solid #e5e8f0;
  display:flex; flex-direction:column;
  z-index:1030;
}

.rail{ overflow-y:auto; padding:8px 6px; display:grid; grid-auto-rows:min-content; gap:8px; }
.rail-item{ position:relative; outline:none; }

.rail-btn, .rail-switch{
  width:100%; height:76px; border:0; background:transparent;
  border-radius:12px; color:#263143; text-decoration:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 4px; transition:background .15s ease;
}
.rail-btn:hover, .rail-btn:focus,
.rail-switch:hover, .rail-switch:focus{ background:#f2f5fb; }

.rail-icon{ font-size:22px; margin-bottom:4px; color:var(--color-primary); }
.rail-label{ font-size:11px; line-height:1.1; text-align:center; color:#2b3341; }
.rail-footer{ margin-top:auto; padding:8px 6px; border-top:1px solid #eef1f6; }

/* Rail responsive (off-canvas simple) */
@media (max-width: 991.98px){
  .nav-rail{ left:-280px; width:260px; transition:left .2s ease; }
  .nav-rail.open{ left:0; }
}

/* ---------- Área de contenido ---------- */
/* El main deja hueco al rail y respeta topbar/footer */
main.app-content{
  margin-top: var(--topbar-h);
  margin-bottom: var(--footer-h);
  margin-left: var(--rail-w);
}

/* Wrapper interno con gutter simétrico (úsalo en las vistas: .page-container) */
.page-container{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Card estética ligera */
.card{ border:1px solid #e9edf5; }

/* ---------- Login ---------- */
.login-page{
  background: var(--color-primary);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}
.login-card{ width:100%; max-width:520px; }
.login-logo{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.login-subtitle{ color:#7b8aa3; font-size:14px; }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:8px; }

/* ---------- Gráficos (Chart.js) ---------- */
.card .chart-box{ height:240px; }        /* barras/lineas */
.card .chart-box--sm{ height:180px; }    /* donuts/mini-gráficos */

@media (max-width: 1199.98px){
  .card .chart-box{ height:200px; }
  .card .chart-box--sm{ height:160px; }
}

/* ---------- Utilidades ---------- */
/* Evitar flyout visible en mobile (se usa hover) */
@media (max-width: 991.98px){
  .flyout{ display:none !important; }
}

/* Flyout (submenús del rail) */
.flyout{
  position:fixed; min-width:var(--flyout-w);
  background:#fff; border:1px solid #e5e8f0;
  box-shadow:0 8px 30px rgba(26,33,52,.08);
  border-radius:12px; padding:8px; display:none; z-index:1035;
}
.flyout a{
  display:block; padding:8px 10px; border-radius:8px;
  color:#2b3341; text-decoration:none; font-size:14px;
}
.flyout a:hover{ background:#f2f5fb; color:var(--color-primary); }

.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer .bi { font-size: 1rem; line-height: 1; }

/* Opcional: hover más marcado en el listado del modal */
#empResults .list-group-item:hover{
  background: #f2f5fb;
}

/* Color del check en inputs de selección */
.form-check-input{
  accent-color: var(--bs-primary);
}

/* Estado activo en el rail (igual que hover, pero permanente) */
.rail-btn.active,
.rail-btn[aria-current="page"]{
  background:#f2f5fb;
  box-shadow: inset 0 0 0 1px #e5e8f0;
}

/* Opción: una “guideline” a la izquierda para reforzar el activo */
.rail-btn.active::before,
.rail-btn[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:3px;
  background: var(--color-primary);
}

/* Si el activo es un grupo con flyout, también marca el botón principal */
.rail-item.active > .rail-btn{
  background:#f2f5fb;
  box-shadow: inset 0 0 0 1px #e5e8f0;
}

/* Botón primario exactamente con tu --bs-primary */
.btn-primary{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary:hover{ filter: brightness(.95); }

/* Toggle/filtros activos en el toolbar con color de marca */
.btn-outline-secondary.show,
.btn-outline-secondary[aria-expanded="true"],
.btn-outline-secondary:focus{
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(45,75,128,.2) !important; /* 45,75,128 = tu primary */
}

/* Checks azules → color de marca */
.form-check-input{ accent-color: var(--bs-primary); }
.dropdown-menu .form-check-input:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Paginación DataTables con tu marca */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link{
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Enlaces/estado activo dentro de flyouts por consistencia */
.flyout a.active{
  background:#f2f5fb;
  color: var(--bs-primary);
  font-weight: 600;
}