/* ==========================================================================
   Archivo: assets/css/style.css
   Descripción: Hoja de estilos personalizada para el Sistema Web Escalable.
   ========================================================================== */

/* ==========================================================================
   VARIABLES GLOBALES
   ========================================================================== */
:root{
  /* Ancho del sidebar (ajústalo a gusto) */
  --sidebar-w: 300px;
}

/* ==========================================================================
   ESTILOS GENERALES DEL SISTEMA
   ========================================================================== */
html,body{height:100%}
body{
  font-size:.875rem;
  background-color:#f8f9fa;
}

/* ==========================================================================
   NAVBAR SUPERIOR
   ========================================================================== */
.navbar{min-height:64px;padding-top:.4rem;padding-bottom:.4rem}
.navbar-dark .navbar-brand{
  font-weight:500;
  padding-top:1.2rem; padding-bottom:1.2rem;
  font-size:1.25rem;
  background-color:rgba(0,0,0,.25);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.25);
}
.navbar .form-control{padding:.75rem 1rem;border-width:0;border-radius:0}
.navbar .navbar-toggler{top:.25rem;right:1rem}
/* Usuario en navbar */
.navbar .user-info{
  color:#e3e6eb !important;font-weight:500;font-size:1rem;gap:.5rem;
  padding-top:.8rem;padding-bottom:.8rem;display:flex;align-items:center
}
.navbar .user-info:hover,.navbar .user-info:focus{color:#e3e6eb !important}
.navbar .user-info i{font-size:1.55rem;line-height:1}
.navbar .nav-item .nav-link{
  color:#e3e6eb;padding-top:1rem;padding-bottom:1rem;font-size:1.3rem;
  display:flex;align-items:center;transition:color .15s
}
.navbar .nav-item .nav-link:hover,.navbar .nav-item .nav-link:focus{color:#fff}

/* ==========================================================================
   SIDEBAR LATERAL (Offcanvas + fijo en desktop)
   ========================================================================== */
.offcanvas.sidebar{
  width:var(--sidebar-w);
  background-color:#fff;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.05);
  overscroll-behavior:contain;
}
@media (min-width:768px){
  .offcanvas.sidebar{
    transform:none !important; visibility:visible !important;
    position:fixed; top:0; bottom:0; left:0; z-index:1030;
    padding-top:56px; overflow-y:auto; border-right:1px solid rgba(0,0,0,.08);
  }
  /* Empuja el contenido principal */
  body>main{ margin-left:var(--sidebar-w); }
}

/* ==========================================================================
   ENLACES DEL SIDEBAR
   (Desktop vuelve "como al principio"; móvil mantiene hit-area cómoda)
   ========================================================================== */
.sidebar .nav-link{
  font-weight:500;
  color:#333;
  padding:.6rem 1rem;
  transition:background-color .1s, color .1s;
  /* SIN width:100% ni min-height aquí para desktop (como al inicio) */
}
.sidebar .nav-link .fa,
.sidebar .nav-link .fas,
.sidebar .nav-link .far{
  margin-right:8px;
  width:16px;
  text-align:center;
}
.sidebar .nav-link.active{
  color:#0d6efd; background-color:rgba(13,110,253,.1);
}
.sidebar .nav-link:hover:not(.active){
  color:#0a58ca; background-color:rgba(0,0,0,.03);
}
.sidebar .nav-item .collapse .nav-link,
.sidebar .nav-item .collapsing .nav-link{
  padding-left:calc(1rem + 16px + 8px); font-size:.85rem; color:#495057;
}
.sidebar .nav-item .collapse .nav-link.active,
.sidebar .nav-item .collapsing .nav-link.active{
  color:#0d6efd; font-weight:500; background-color:rgba(13,110,253,.1);
}
.sidebar .nav-item .collapse .nav-link:hover:not(.active),
.sidebar .nav-item .collapsing .nav-link:hover:not(.active){
  color:#0a58ca; background-color:rgba(0,0,0,.02);
}

/* En móviles, damos un área clicable un poco más alta (solo móvil) */
@media (max-width:767.98px){
  .sidebar .nav-link{ min-height:44px; }
}

/* ==========================================================================
   FLECHA/ÁNGULO DE SUBMENÚ – FIJA A LA DERECHA (igual que móvil)
   ========================================================================== */
/* Primer nivel (toggler del módulo) */
.sidebar .nav > .nav-item > .nav-link[data-bs-toggle="collapse"]{
  position:relative; padding-right:8rem;
}
.sidebar .nav > .nav-item > .nav-link[data-bs-toggle="collapse"]::after{
  content:'\f105'; /* fa-angle-right */
  font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:16px; line-height:1; color:#6c757d; pointer-events:none;
}
.sidebar .nav > .nav-item > .nav-link[aria-expanded="true"]::after{
  content:'\f107'; /* fa-angle-down */
}

/* Niveles internos que también colapsan */
.sidebar .nav .collapse .nav-link[data-bs-toggle="collapse"]{
  position:relative; padding-right:2.5rem;
}
.sidebar .nav .collapse .nav-link[data-bs-toggle="collapse"]::after{
  content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:16px; color:#6c757d; pointer-events:none;
}
.sidebar .nav .collapse .nav-link[aria-expanded="true"]::after{
  content:'\f107';
}

/* Quitar flecha a enlaces deshabilitados */
.sidebar .nav-link.disabled-look::after{ content:none !important; }

/* ==========================================================================
   ÁREA PRINCIPAL DE CONTENIDO
   ========================================================================== */
#main-content-container{ padding-top:1.5rem; }
#main-content{
  background-color:#fff; padding:1.5rem; border-radius:.3rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
  min-height:calc(100vh - 56px - 3rem);
}
#main-content h1,#main-content h2{ color:#343a40; }

/* ==========================================================================
   TABLAS
   ========================================================================== */
.table-responsive{
  background-color:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.04);
  border:1px solid #e9ecef; padding:.25rem; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.table{ width:100%; border-collapse:collapse; margin-bottom:0;
  --bs-table-striped-bg:transparent; --bs-table-hover-bg:#f8f9fa; }
.table td,.table th{ padding:.75rem 1rem; }
.table thead th{
  vertical-align:middle; text-align:left; font-size:.75rem; font-weight:600;
  color:#495057; background-color:#f8f9fa; border-bottom:1px solid #dee2e6;
}
.table tbody td{ vertical-align:middle; color:#495057; font-size:.8rem; border-top:1px solid #f1f3f5; }
.table tbody td:first-child{ font-weight:500; color:#343a40; }
.table .badge{ padding:.3em .6em; font-size:.7rem; font-weight:600; border-radius:4px; vertical-align:middle; }
.table .badge.bg-success{ color:#1c7430; background-color:#d4edda !important; }
.table .badge.bg-primary,.table .badge.bg-info{ color:#0c5460; background-color:#d1ecf1 !important; }
.table th:last-child,.table td:last-child{ text-align:center; }
.table .btn-group{ display:inline-flex; gap:.4rem; }
.table .btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:6px; font-size:.8rem; color:#8898aa;
  background-color:#f1f3f5; border:1px solid #dee2e6; transition:all .15s;
}
.table .btn:hover{ border-color:transparent; color:#fff; }
.table .btn-warning:hover{ background-color:#ffc107; color:#333; }
.table .btn-danger:hover{ background-color:#dc3545; }
.table .btn-success:hover{ background-color:#28a745; }
.table .btn-primary:hover{ background-color:#0d6efd; }
.table-nowrap th,.table-nowrap td{ white-space:nowrap; }
.col-actions{ min-width:110px; }
@media (max-width:576px){
  .col-actions{ position:sticky; right:0; background:#fff; z-index:1;
    box-shadow:-6px 0 4px -4px rgba(0,0,0,.06); }
}

/* ==========================================================================
   FORMULARIOS Y MODALES
   ========================================================================== */
.modal-header{ background-color:#f8f9fa; border-bottom:1px solid #dee2e6; }
.form-label{ font-weight:500; margin-bottom:.3rem; }
.form-control-sm,.form-select-sm{ font-size:.8rem; padding-top:.25rem; padding-bottom:.25rem; }
.form-select-sm{ padding-right:1.5rem; }
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.25); border-color:#86b7fe;
}

/* ==========================================================================
   ÁRBOL DE PERMISOS
   ========================================================================== */
.permissions-tree .card{ border:1px solid #dee2e6; }
.permissions-tree .card-header{ background-color:#f8f9fa; }
.permissions-tree .submodule-group{ border-left:2px solid #e9ecef; }
.permissions-tree .form-check-label.small{ font-size:.8rem; }

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.cursor-pointer{ cursor:pointer; }
.disabled-look{ color:#6c757d !important; pointer-events:none; cursor:default; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:767.98px){
  .sidebar{ padding-top:0; }
  #main-content{ padding:1rem; }
  .navbar.flex-md-nowrap{ align-items:center; }
  .navbar-brand{ order:1; flex-grow:0; flex-shrink:1; width:auto !important; margin-right:auto; }
  .navbar-nav.ms-auto{ order:2; margin-left:0 !important; margin-right:.5rem; }
  .navbar-toggler.d-md-none{
    order:3; position:static; top:auto; right:auto; margin-left:0;
    padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size:var(--bs-navbar-toggler-font-size); border:var(--bs-border-width) solid transparent;
    background-color:transparent; border-color:transparent;
  }
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
body.login-bg{
  background-image:url(../img/fondo.png);
  background-color:#f4f6fb !important; background-size:cover;
  background-repeat:no-repeat; background-position:center;
  min-height:100vh; width:100vw; margin:0; display:flex; align-items:center; justify-content:center; height:100vh;
}
.login-form{
  background:#fff; border-radius:18px; box-shadow:0 2px 20px 2px #d3dae6;
  padding:55px 42px 38px; max-width:500px; width:100%; margin:auto;
}
.login-form h1{ font-size:2.1rem; font-weight:600; letter-spacing:.2px; color:#252846; margin-bottom:38px; }
.login-form .form-control{
  border-radius:14px; border:1.5px solid #ececec; font-size:1.15rem; transition:border-color .2s; background:#f9fafb; min-height:56px;
}
.login-form .form-control:focus{ border-color:#4F8DFD; box-shadow:0 0 0 .09rem #4F8DFD22; background:#fff; }
.login-form .form-floating>label{ color:#adb5bd; font-size:1.12rem; }
.login-form .btn-primary{
  background-color:#4F8DFD; border:none; border-radius:14px; padding:16px 0; font-size:1.18rem; font-weight:600; margin-top:15px;
  box-shadow:0 2px 10px 0 #4F8DFD18; transition:background .2s;
}
.login-form .btn-primary:hover,.login-form .btn-primary:focus{ background-color:#2268d1; }
.login-form .text-muted{ color:#b0b6be !important; font-size:1.08rem; }
#loginError{ font-size:1.06rem; }
@media (max-width:600px){
  .login-form{ padding:20px 6px 12px; max-width:98vw; }
}

/* ==========================================================================
   INPUT TIME: OCULTAR AM/PM EN CHROME/EDGE
   ========================================================================== */
input.solo-tiempo[type="time"]::-webkit-datetime-edit-ampm-field{ display:none; }