/* ========================================
   COOTRANSCARGA - Custom Styles
   Aplicacion Web - Replicada para rediseño
   ======================================== */

/* ---- Base Layout (NiceAdmin template) ---- */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; background: #f6f9ff; color: #444; }

/* Header */
#header {
  transition: all .5s;
  z-index: 997;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
  padding-left: 20px;
}
#header .toggle-sidebar-btn { font-size: 32px; padding-left: 10px; cursor: pointer; color: #012970; }
#header .logo span { font-size: 26px; font-weight: 700; color: #012970; font-family: 'Nunito', sans-serif; }
.dropdown-menu-arrow::before {
  content: "";
  width: 13px; height: 13px;
  background: #fff;
  position: absolute;
  top: -7px; right: 20px;
  transform: rotate(45deg);
  border-top: 1px solid #eaedf1;
  border-left: 1px solid #eaedf1;
}
.dropdown-menu .dropdown-header { text-align: center; font-size: 15px; padding: 10px 25px; }
.dropdown-menu .dropdown-header h6 { font-size: 18px; margin-bottom: 0; font-weight: 600; color: #444; }
.dropdown-menu .dropdown-header span { font-size: 13px; }
.profile .dropdown-menu { min-width: 240px; padding: 10px 0; }
.profile .dropdown-item { font-size: 14px; padding: 10px 15px; transition: 0.2s; }
.profile .dropdown-item i { margin-right: 10px; font-size: 18px; line-height: 0; color: #aaa; }
.profile .dropdown-item:hover { background-color: #f6f9ff; }

/* Sidebar */
#sidebar {
  position: fixed;
  top: 60px; left: 0; bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all .3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}
#sidebar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #fff; }
#sidebar::-webkit-scrollbar-thumb { background-color: #aab7cf; }
@media (max-width: 1199px) { #sidebar { left: -300px; } }
.sidebar-nav { padding: 0; margin: 0; list-style: none; }
.sidebar-nav li { padding: 0; margin: 0; list-style: none; }
.sidebar-nav .nav-item { margin-bottom: 5px; }
.sidebar-nav .nav-link {
  display: flex; align-items: center;
  font-size: 15px; font-weight: 600;
  color: #4154f1; transition: 0.3s;
  background: #f6f9ff;
  padding: 10px 15px; border-radius: 4px;
}
.sidebar-nav .nav-link i { font-size: 16px; margin-right: 10px; color: #4154f1; }
.sidebar-nav .nav-link.collapsed { color: #012970; background: #fff; }
.sidebar-nav .nav-link.collapsed i { color: #899bbd; }
.sidebar-nav .nav-link:hover { color: #4154f1; background: #f6f9ff; }
.sidebar-nav .nav-link:hover i { color: #4154f1; }
.sidebar-nav .dropdown-menu { position: static; border: 0; background: #f6f9ff; padding: 5px 0 5px 25px; }
.sidebar-nav .dropdown-menu .dropdown-item { font-size: 14px; font-weight: 500; color: #012970; padding: 8px 15px; }
.sidebar-nav .dropdown-menu .dropdown-item:hover { color: #4154f1; background: transparent; }

/* Main content */
#main { margin-top: 60px; padding: 20px 30px; transition: all 0.3s; }
@media (min-width: 1200px) { #main { margin-left: 300px; } }

/* Page title */
.pagetitle { margin-bottom: 10px; }
.pagetitle h1 { font-size: 1.4rem; margin-bottom: 0; font-weight: 600; color: #012970; }
.breadcrumb { font-size: 14px; font-weight: 600; color: #899bbd; }
.breadcrumb a { color: #899bbd; }
.breadcrumb .active { color: #012970; }

/* Footer */
#footer { padding: 20px 0; font-size: 14px; border-top: 1px solid #cddfff; text-align: center; }
@media (min-width: 1200px) { #footer { margin-left: 300px; } }
#footer .credits { padding-top: 4px; font-size: 13px; color: #6c757d; }
#footer .credits a { color: #4154f1; }

/* Cards */
.card { margin-bottom: 30px; border: none; border-radius: 5px; box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); }
.card-body { padding: 0 20px 20px 20px; }
.card-header { padding: 15px 20px 0; background: 0 0; border-bottom: 0; }

/* Toggle sidebar on mobile */
body.toggle-sidebar #sidebar { left: 0; }
@media (min-width: 1200px) {
  body.toggle-sidebar #sidebar { left: -300px; }
  body.toggle-sidebar #main { margin-left: 0; }
  body.toggle-sidebar #footer { margin-left: 0; }
}

/* Section */
.section { padding: 10px 0; }

/* ---- Dashboard Cards ---- */
.card.l-bg-green-dark {
  background: linear-gradient(to right, #0ead69, #19d2a5);
  color: #fff;
}
.card.l-bg-orange-dark {
  background: linear-gradient(to right, #f7971e, #ffd200);
  color: #fff;
}
.card.l-bg-cyan {
  background: linear-gradient(to right, #1e90ff, #00bcd4);
  color: #fff;
}
.card.l-bg-blue-dark {
  background: linear-gradient(to right, #0043a4, #1565c0);
  color: #fff;
}
.card.l-bg-morado-dark {
  background: linear-gradient(to right, #7b2ff7, #9c27b0);
  color: #fff;
}
.card.l-bg-gris-dark {
  background: linear-gradient(to right, #546e7a, #90a4ae);
  color: #fff;
}

/* Progress bar colors */
.progress-bar.l-bg-orange { background-color: #f7971e; }
.progress-bar.l-bg-cyan   { background-color: #00bcd4; }
.progress-bar.l-bg-green  { background-color: #0ead69; }
.progress-bar.l-bg-mora   { background-color: #9c27b0; }

/* Card statistic layout */
.card-statistic-3 { position: relative; }
.card-icon.card-icon-large { position: absolute; right: 10px; top: 10px; opacity: 0.15; }
.card-statistic-3 h2 { font-size: 2.2rem; font-weight: 700; }
.card-statistic-3 h4 { font-size: 1rem; font-weight: 600; }

/* ---- Dashboard card hover ---- */
a[href] .card.l-bg-green-dark,
a[href] .card.l-bg-orange-dark,
a[href] .card.l-bg-cyan,
a[href] .card.l-bg-blue-dark,
a[href] .card.l-bg-morado-dark,
a[href] .card.l-bg-gris-dark {
  transition: transform 0.2s, box-shadow 0.2s;
}
a[href] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
a[href] { text-decoration: none; }

/* ---- Sidebar active link ---- */
.sidebar-nav .nav-link:not(.collapsed) {
  color: #4154f1;
  background: #f6f9ff;
}

/* ---- Table styling ---- */
.table-responsive { overflow-x: auto; }
th { white-space: nowrap; }

/* ---- Profile page ---- */
.profile .nav-tabs-bordered { border-bottom: 2px solid #ddd; }
.profile .nav-tabs-bordered .nav-link { border: none; padding: 12px 15px; cursor: pointer; color: #555; }
.profile .nav-tabs-bordered .nav-link.active { color: #4154f1; border-bottom: 2px solid #4154f1; }

/* ---- Select2 Bootstrap 5 fix ---- */
.select2-container--bootstrap-5 .select2-selection {
  min-height: 38px;
}

/* ---- Card header ---- */
.card-header { background: #fff; border-bottom: 1px solid #e9ecef; }
.card-header h5 { margin-bottom: 0; }

/* ---- Back-to-top ---- */
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}
.back-to-top i { font-size: 24px; color: #fff; line-height: 0; }
.back-to-top.active { visibility: visible; opacity: 1; }

/* ---- Modal improvements ---- */
.modal-header { border-bottom: 2px solid #e9ecef; }
.modal-footer { border-top: 2px solid #e9ecef; }

/* ---- Information page ---- */
#information-form img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ---- Voucher detail ---- */
.section.dashboard + .section.dashboard { margin-top: 0; }

/* ---- Breadcrumb ---- */
.pagetitle h1 { font-size: 1.4rem; margin-bottom: 0; }
.pagetitle .breadcrumb { font-size: 0.85rem; }