/* =========================================================
   Qil Perú · Admin Template
   Design tokens derived from brand logo
   ========================================================= */
:root{
  --qp-navy:        #153F7D;
  --qp-navy-dark:   #0E2C59;
  --qp-navy-darker: #0A2044;
  --qp-navy-light:  #2E5DA6;
  --qp-navy-soft:   #EAF0F9;
  --qp-gray:        #505050;
  --qp-gray-light:  #8A9FBE;
  --qp-bg:          #F3F5F9;
  --qp-card-radius: .6rem;
  --qp-accent:      #F5A623;   /* logistics amber — used sparingly for calls to action */
  --qp-success:     #1E8E5A;
  --qp-danger:      #D8443C;
  --qp-info:        #2E85C7;
  --qp-font:        'Roboto Variable', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bs-primary: var(--qp-navy);
  --bs-primary-rgb: 21,63,125;
}

html, body{ height:100%; }
body{
  background: var(--qp-bg);
  font-family: var(--qp-font);
  color:#2b2f36;
}

a{ text-decoration:none; }

/* ---------- Utility ---------- */
.text-navy{ color:var(--qp-navy) !important; }
.bg-navy{ background-color: var(--qp-navy) !important; }
.bg-navy-dark{ background-color: var(--qp-navy-dark) !important; }
.bg-qp-soft{ background-color: var(--qp-navy-soft) !important; }
.fw-600{ font-weight:600; }
.fw-700{ font-weight:700; }
.fw-800{ font-weight:800; }
.letter-tight{ letter-spacing:-.01em; }

/* Buttons */
.btn-navy{
  background-color: var(--qp-navy);
  border-color: var(--qp-navy);
  color:#fff;
}
.btn-navy:hover, .btn-navy:focus{
  background-color: var(--qp-navy-dark);
  border-color: var(--qp-navy-dark);
  color:#fff;
}
.btn-outline-navy{
  color: var(--qp-navy);
  border-color: var(--qp-navy);
}
.btn-outline-navy:hover{
  background-color: var(--qp-navy);
  color:#fff;
}
.btn-accent{
  background-color: var(--qp-accent);
  border-color: var(--qp-accent);
  color:#1c1c1c;
  font-weight:600;
}
.btn-accent:hover{
  background-color:#e2960f;
  border-color:#e2960f;
  color:#1c1c1c;
}

/* ================= TOP BAR ================= */
.qp-topbar{
  background: var(--qp-navy-darker);
  height:44px;
  font-size:.8rem;
}
.qp-topbar .qp-topbar-link{
  color: rgba(255,255,255,.75);
  padding: 0 .75rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  height:44px;
}
.qp-topbar .qp-topbar-link:hover{ color:#fff; }

/* ================= BRAND NAVBAR ================= */
.qp-navbar{
  background: #fff;
  border-bottom: 1px solid #e6e9ef;
  min-height: 68px;
}
.qp-navbar .navbar-brand img{ height: 34px; }
.qp-navbar .qp-search{
  max-width: 360px;
}
.qp-navbar .qp-search .form-control{
  border-right:0;
  background:#F5F7FA;
}
.qp-navbar .qp-search .btn{
  border-left:0;
  background:#F5F7FA;
  border-color:#dee2e6;
  color:#8a94a6;
}
.qp-icon-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#495468;
  position:relative;
  font-size:1.05rem;
  transition: background .15s ease;
}
.qp-icon-btn:hover{ background:#F0F3F8; color:var(--qp-navy); }
.qp-icon-btn .badge{
  position:absolute; top:-2px; right:-2px;
  font-size:.58rem;
  min-width:16px; height:16px;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.qp-user-chip{
  display:flex; align-items:center; gap:.55rem;
  padding:.25rem .5rem .25rem .25rem;
  border-radius:2rem;
}
.qp-user-chip:hover{ background:#F0F3F8; }
.qp-avatar{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--qp-navy), var(--qp-navy-light));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem;
}

/* ================= HORIZONTAL MEGA MENU ================= */
.qp-menu{
  background: var(--qp-navy);
}
.qp-menu .nav-link{
  color: rgba(255,255,255,.88);
  font-size:.875rem;
  font-weight:500;
  padding: .85rem 1.1rem;
  display:flex; align-items:center; gap:.4rem;
  border-bottom: 3px solid transparent;
}
.qp-menu .nav-link i{ font-size:1rem; }
.qp-menu .nav-item.active > .nav-link,
.qp-menu .nav-link:hover{
  color:#fff;
  background: rgba(255,255,255,.08);
  border-bottom-color: var(--qp-accent);
}
.qp-menu .dropdown-menu{
  border:0;
  border-radius:0 0 .5rem .5rem;
  box-shadow: 0 12px 28px rgba(10,20,50,.18);
  padding:.6rem;
  margin-top:0;
}
.qp-menu .dropdown-item{
  border-radius:.4rem;
  padding:.5rem .7rem;
  font-size:.875rem;
  display:flex; align-items:center; gap:.6rem;
  color:#333;
}
.qp-menu .dropdown-item i{
  color: var(--qp-navy);
  font-size:1rem;
  width:20px;
  text-align:center;
}
.qp-menu .dropdown-item:hover{
  background: var(--qp-navy-soft);
  color: var(--qp-navy);
}
.qp-menu .dropdown-item:hover i{ color:var(--qp-navy); }

/* Mega panel (multi-column dropdown) */
.qp-mega{
  min-width: 560px;
  padding:1rem;
}
.qp-mega .mega-col-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--qp-gray-light);
  font-weight:700;
  padding: .3rem .7rem;
}

@media (max-width: 991.98px){
  .qp-mega{ min-width: 100%; }
}

/* ================= BREADCRUMB BAR ================= */
.qp-page-header{
  padding: 1.1rem 0;
}
.qp-page-header h1{
  font-size:1.35rem;
  font-weight:700;
  color:#1d2635;
  margin:0;
}
.qp-breadcrumb{
  font-size:.8rem;
}
.qp-breadcrumb .breadcrumb-item a{ color: var(--qp-gray); }
.qp-breadcrumb .breadcrumb-item.active{ color: var(--qp-navy); font-weight:600; }

/* ================= CARDS ================= */
.card{
  border:0;
  border-radius: var(--qp-card-radius);
  box-shadow: 0 1px 3px rgba(20,30,60,.06), 0 1px 2px rgba(20,30,60,.08);
}
.card-header{
  background:#fff;
  border-bottom:1px solid #eef0f4;
  font-weight:600;
  color:#1d2635;
}

/* ================= CHOSEN (selects buscables) =================
   Overrides para que el widget de Chosen combine con el look de
   Bootstrap 5 / tema navy del proyecto en vez de su estilo por defecto. */
.chosen-container{
  font-family: var(--qp-font);
  font-size: .95rem;
  width: 100% !important;
}
.chosen-container-single .chosen-single{
  height: 38px;
  line-height: 36px;
  padding: 0 0 0 .75rem;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  background: #fff;
  box-shadow: none;
}
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-single .chosen-single:hover{
  border-color: var(--qp-navy-light);
}
.chosen-container-active .chosen-single{
  border-color: var(--qp-navy);
  box-shadow: 0 0 0 .25rem rgba(21,63,125,.15);
}
.chosen-container .chosen-drop{
  border-color: var(--qp-navy);
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}
.chosen-container .chosen-results li.highlighted{
  background: var(--qp-navy);
  color: #fff;
}
.chosen-container .chosen-results li.active-result{
  padding: .45rem .75rem;
}
.chosen-container-single .chosen-search input[type="text"]{
  border-radius: .375rem;
  border-color: #dee2e6;
}
.chosen-container-single .chosen-single div b{
  background: none;
  position: relative;
}
.chosen-container-single .chosen-single div b::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid #6c757d;
  border-bottom: 2px solid #6c757d;
  transform: translate(-50%,-65%) rotate(45deg);
}
.chosen-container-single .chosen-single abbr{
  top: 12px;
}
.chosen-disabled{ opacity: .65; }
/* El ancho se fija en JS con chosen({ width: '100%' }) para que no
   dependa de medir un contenedor oculto (panel EXPAND colapsado). */
.qp-expand-panel .chosen-container{ max-width: 100%; }

/* ================= PANEL EXPAND (patrón estándar de mantenimientos) =================
   Panel colapsable que reemplaza al modal para crear/editar registros.
   Colapsado: solo header + tabla. Expandido: header + este panel + tabla. */
.qp-expand-panel{
  background: var(--qp-navy-soft);
}
.qp-expand-panel .qp-expand-title{
  font-size:1rem;
  font-weight:700;
  color: var(--qp-navy);
}

/* KPI cards */
.kpi-card{
  position:relative;
  overflow:hidden;
}
.kpi-card .kpi-icon{
  width:52px; height:52px;
  border-radius:.65rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  color:#fff;
}
.kpi-card .kpi-value{
  font-size:1.7rem;
  font-weight:700;
  color:#1d2635;
  letter-spacing:-.02em;
}
.kpi-card .kpi-label{
  font-size:.8rem;
  color: var(--qp-gray);
}
.kpi-trend-up{ color: var(--qp-success); font-weight:600; }
.kpi-trend-down{ color: var(--qp-danger); font-weight:600; }

/* Status badges (logistics states) */
.badge-soft-success{ background: rgba(30,142,90,.12); color:var(--qp-success); font-weight:600; }
.badge-soft-danger{ background: rgba(216,68,60,.12); color:var(--qp-danger); font-weight:600; }
.badge-soft-warning{ background: rgba(245,166,35,.16); color:#a3670a; font-weight:600; }
.badge-soft-info{ background: rgba(46,133,199,.12); color:var(--qp-info); font-weight:600; }
.badge-soft-navy{ background: var(--qp-navy-soft); color:var(--qp-navy); font-weight:600; }
.badge-soft-secondary{ background:#eef0f4; color:#5a6473; font-weight:600; }

/* Table tweaks */
.table thead th{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--qp-gray);
  border-bottom-width:1px;
  white-space:nowrap;
}
table.dataTable{ font-size:.875rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  border-radius:.4rem;
  border:1px solid #dde1e8;
  padding:.3rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--qp-navy) !important;
  border-color: var(--qp-navy) !important;
  color:#fff !important;
  border-radius:.35rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:.35rem;
}
.dataTables_wrapper .dataTables_info{
  font-size:.72rem;
  color: var(--qp-gray-light);
}
/* Bootstrap le pone su propio font-size a .page-link vía variable CSS
   (--bs-pagination-font-size), así que hay que sobreescribirlo en el
   propio elemento — poner font-size en el contenedor padre no alcanza
   porque .page-link declara el suyo explícitamente. */
.dataTables_wrapper .dataTables_paginate .page-link{
  font-size:.8rem;
  padding:.3rem .55rem;
}
.dt-buttons .btn{
  border-radius:.4rem;
  font-size:.8rem;
}

/* Row action icons */
.action-icon{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.4rem;
  color: var(--qp-gray);
  transition: all .12s ease;
  border:1px solid transparent;
}
.action-icon:hover{ background:var(--qp-navy-soft); color:var(--qp-navy); }
.action-icon.text-danger:hover{ background:rgba(216,68,60,.1); color:var(--qp-danger) !important; }

/* ================= FOOTER ================= */
.qp-footer{
  border-top:1px solid #e6e9ef;
  font-size:.8rem;
  color: var(--qp-gray);
  padding: 1rem 0;
}

/* ================= LOGIN ================= */
.qp-login-wrap{
  min-height:100vh;
  display:flex;
}
.qp-login-aside{
  background: linear-gradient(160deg, var(--qp-navy-darker) 0%, var(--qp-navy) 55%, var(--qp-navy-light) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.qp-login-aside::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.08) 0, transparent 40%),
                     radial-gradient(circle at 85% 80%, rgba(255,255,255,.08) 0, transparent 40%);
}
.qp-login-aside .content{ position:relative; z-index:1; }
.qp-route-line{
  stroke-dasharray: 8 8;
  animation: qp-dash 22s linear infinite;
}
@keyframes qp-dash{ to{ stroke-dashoffset: -400; } }

.qp-login-card{
  border-radius: 1rem;
  border:0;
  box-shadow: 0 20px 45px rgba(20,30,60,.12);
}
.qp-pass-toggle{
  cursor:pointer;
  background:#fff;
  border-left:0;
}

/* ================= MAINTENANCE / 503 PAGE ================= */
.qp-maint-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 50% 0%, #16407f 0%, #0A2044 70%);
  color:#fff;
  text-align:center;
  padding: 2rem;
}
.qp-maint-code{
  font-size:5rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  background: linear-gradient(135deg,#fff, #9fb8e0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.qp-cone{
  animation: qp-bounce 2.4s ease-in-out infinite;
}
@keyframes qp-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#eef0f4; }
::-webkit-scrollbar-thumb{ background:#c3cbdb; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#a9b4c9; }

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, .nav-link:focus-visible{
  outline: 2px solid var(--qp-navy-light);
  outline-offset:2px;
}