/* =========================================================
   DSS – ADMIN PRO (BLANCO + PRIMARIO #093743)
   - Topbar distinguible con sombra suave (sin bordes de color)
   - Sidebar minimalista
   - Cards KPI (small-box) estilo plantilla Pro
   - Tipografía y espaciado tipo Material/Pro
   - Override agresivo con !important
========================================================= */

:root{
  --primary:#093743;
  --primary-2:#0b4b5b;
  --text:#0f172a;
  --muted:#64748b;
  --white:#ffffff;
  --body:#a8a8a8;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.10);
  --radius:16px;
  --radius-sm:12px;
}

/* Por defecto (desktop + tablet): ocultar toggle */
a.sidebar-toggle.nav-link[data-toggle="push-menu"]{
  display: none !important;
}

/* Móvil: mostrar toggle */
@media (max-width: 767px){
  a.sidebar-toggle.nav-link[data-toggle="push-menu"]{
    display: flex !important;      /* o inline-block si prefieres */
    align-items: center !important;
    justify-content: center !important;
  }
}

#btn-scroll-up{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.skin-blue-light .sidebar-form {
    border-radius: 3px;
    border: 1px solid #d2d6de;
    margin: 10px;
    display: none !important;
}

a {
    color: var(--primary);
    text-decoration: none;
    background-color: transparent;
}

/* =========================
   BASE + TIPOGRAFÍA PRO
========================= */
html, body{height:100% !important;}

body{
  background:var(--body) !important;
  color:var(--text) !important;
  font-family:"Inter","Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.65 !important;
  letter-spacing:.15px !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
}

/* elimina el gris que tienes en body original */
body{ background-color: var(--body) !important; }

/* =========================
   TOPBAR / HEADER (QUE SE DISTINGA)
   - Todo blanco, pero con sombra y altura consistente
========================= */
.main-header,
.main-header .navbar{
  background:var(--white) !important;
  border:0 !important;
}

.main-header{
  position:sticky !important;
  top:0 !important;
  z-index:1030 !important;
  box-shadow: var(--shadow-1) !important; /* separación sin bordes */
}

.main-header .navbar{
  min-height:64px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 16px !important;
  box-shadow:none !important;
}

.main-header .logo{
  background:var(--white) !important;
  color:var(--primary) !important;
  font-weight:0 !important;
  letter-spacing:.4px !important;
  border:0 !important;
  height:64px !important;
  line-height:64px !important;
}

/* Botón hamburguesa */
.main-header .sidebar-toggle{
  color:var(--text) !important;
  background:transparent !important;
  border:0 !important;
  padding:10px 12px !important;
  border-radius:12px !important;
}
.main-header .sidebar-toggle:hover{
  color:var(--primary) !important;
  background:transparent !important;
}

/* Menú derecho */
.main-header .navbar .nav > li > a{
  color:var(--text) !important;
  font-weight:700 !important;
  padding:10px 12px !important;
  border-radius:12px !important;
}
.main-header .navbar .nav > li > a:hover{
  color:var(--primary) !important;
  background:transparent !important;
}

/* =========================
   CONTENT WRAPPER + ESPACIADO PRO
========================= */
.content-wrapper,
.wrapper,
.content{
  background:var(--white) !important;
}

.content-wrapper{
  padding-top: 14px !important;
}

.content{
  padding: 18px 22px !important; /* más aire como template */
}

/* Breadcrumb más limpio */
.content-header{
  background:var(--white) !important;
  padding: 10px 22px 6px 22px !important;
  border:0 !important;
}
.content-header > h1{
  font-size:24px !important;
  font-weight:0 !important;
  margin:0 !important;
  color:var(--text) !important;
}
.content-header > h1 small{
  color:var(--muted) !important;
  font-weight:700 !important;
}
.breadcrumb{
  background:transparent !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
}
.breadcrumb > li,
.breadcrumb > li a{
  color:var(--muted) !important;
  font-weight:700 !important;
}
.breadcrumb > li.active{
  color:var(--primary) !important;
}

/* =========================
   SIDEBAR – MINIMAL PRO
========================= */
.main-sidebar,
.left-side,
.sidebar{
  background:var(--white) !important;
  border:0 !important;
  box-shadow:none !important;
}

.sidebar .sidebar-shortcuts,
.sidebar .sidebar-shortcuts-large,
.sidebar .sidebar-shortcuts-mini{
  display:none !important;
}

.sidebar-menu{
  background:var(--white) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

.sidebar-menu > li.header{
  background:transparent !important;
  color:var(--muted) !important;
  font-weight:0 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  padding: 10px 16px !important;
  margin: 8px 0 6px 0 !important;
}

/* Quita triángulos y barras heredadas */
.sidebar-menu > li.active::after,
.sidebar-menu > li > a::after,
.sidebar-menu > li > a::before{
  display:none !important;
  content:none !important;
}

.sidebar-menu > li > a{
  background:transparent !important;
  color:var(--text) !important;
  border:0 !important;
  box-shadow:none !important;

  margin: 2px 12px !important;
  padding: 11px 12px !important;
  border-radius: 14px !important;

  display:flex !important;
  align-items:center !important;
  gap: 10px !important;

  font-weight:0 !important;
  letter-spacing:.1px !important;
}

/* Iconos alineados */
.sidebar-menu > li > a i,
.sidebar-menu > li > a .fa,
.sidebar-menu > li > a .glyphicon{
  width:18px !important;
  min-width:18px !important;
  text-align:center !important;
  color:var(--muted) !important;
  font-size:14px !important;
}

/* Hover (solo primario, sin fondos grises) */
.sidebar-menu > li:hover > a{
  background:transparent !important;
  color:var(--primary) !important;
}
.sidebar-menu > li:hover > a i,
.sidebar-menu > li:hover > a .fa{
  color:var(--primary) !important;
}

/* Activo estilo “pill” muy sutil con tinte primario (no gris, no borde) */
.sidebar-menu > li.active > a{
  background: rgba(9,55,67,.06) !important;
  color:var(--primary) !important;
  font-weight:0 !important;
}
.sidebar-menu > li.active > a i,
.sidebar-menu > li.active > a .fa{
  color:var(--primary) !important;
}

/* Submenú */
.treeview-menu{
  background:transparent !important;
  border:0 !important;
  padding: 4px 0 6px 0 !important;
  margin: 0 12px !important;
}
.treeview-menu > li > a{
  background:transparent !important;
  color:var(--muted) !important;
  padding: 10px 12px 10px 40px !important;
  border-radius: 14px !important;
  font-weight:0 !important;
}
.treeview-menu > li:hover > a{
  color:var(--primary) !important;
  background: rgba(9,55,67,.05) !important;
}

/* Sidebar search – estilo pro */
.sidebar-form{
  border:0 !important;
  margin: 10px 12px 6px 12px !important;
  padding: 0 !important;
}
.sidebar-form .input-group{
  background:var(--white) !important;
  border-radius: 5px !important;
  box-shadow: var(--shadow-1) !important;
  overflow:hidden !important;
}
.sidebar-form input[type="text"]{
  border:0 !important;
  background:var(--white) !important;
  padding: 12px 12px !important;
  font-weight:0 !important;
  color:var(--text) !important;
}
.sidebar-form .btn{
  border:0 !important;
  background:var(--white) !important;
  color:var(--primary) !important;
  padding: 10px 12px !important;
}

/* =========================
   KPI CARDS (small-box) – COMO TEMPLATE PRO
   Quita el “bloque gris” y deja tarjeta blanca con icono
========================= */
.small-box{
  background:var(--white) !important;
  color:var(--text) !important;
  border:0 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
  overflow:hidden !important;
  min-height: 120px !important;
  position: relative !important;
}

.small-box:hover{
  box-shadow: var(--shadow-2) !important;
}

/* contenido */
.small-box .inner{
  padding: 18px 18px 14px 18px !important;
}
.small-box .inner h3{
  font-size: 26px !important;
  font-weight: 1000 !important;
  margin: 0 0 6px 0 !important;
  color: var(--text) !important;
}
.small-box .inner p{
  margin: 0 !important;
  color: var(--muted) !important;
  font-weight: 0 !important;
}

/* icono: círculo con tinte primario (pro) */
.small-box .icon{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  width:46px !important;
  height:46px !important;
  border-radius: 14px !important;
  background: rgba(9,55,67,.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* Asegura que el icono no sea gigante gris */
.small-box .icon > i{
  font-size: 22px !important;
  color: var(--primary) !important;
  opacity:1 !important;
}

/* footer link */
.small-box-footer{
  background: transparent !important;
  color: var(--primary) !important;
  font-weight: 0 !important;
  padding: 10px 18px 14px 18px !important;
}
.small-box-footer:hover{
  color: var(--primary-2) !important;
  background: transparent !important;
}

/* =========================
   BOX / PANEL / CARDS GENERALES
========================= */
.box,
.panel,
.info-box{
  background:var(--white) !important;
  border:0 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}


.box-header,
.panel-heading{
  background:var(--white) !important;
  border:0 !important;
  padding: 16px 18px !important;
}
.box-title,
.panel-title{
  font-size:16px !important;
  font-weight: 950 !important;
  color: var(--text) !important;
}
.box-body,
.panel-body{
  padding: 18px !important;
}

.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(16, 74, 97, 0.26);
}

/* =========================
   BOTONES / INPUTS – PRO
========================= */
.btn{
  border-radius: 999px !important;
  font-weight: 0 !important;
  padding: 10px 16px !important;
  border:0 !important;
  box-shadow:none !important;
}
.btn-primary{
  background:var(--primary) !important;
  color:var(--white) !important;
}
.btn-primary:hover{
  background:var(--primary-2) !important;
}

.form-control,
input, select, textarea{
  background:var(--white) !important;
  border:0 !important;
  border-radius: 5px !important;
  box-shadow: var(--shadow-1) !important;
  padding: 12px 14px !important;
  font-weight: 0 !important;
  color:var(--text) !important;
}
.form-control:focus,
input:focus, select:focus, textarea:focus{
  outline:none !important;
  box-shadow: 0 0 0 4px rgba(9,55,67,.14) !important;
}

/* =========================
   TABLAS – LIMPIAS PRO
========================= */
.table{
  background:var(--white) !important;
}
.table > thead > tr{
  background:var(--white) !important;
}
.table > thead > tr > th{
  border:1 !important;
  padding: 14px 12px !important;
  font-weight: 600 !important;
  color:var(--text) !important;
  text-align: center;
  background-color: #03516431 !important;
}
.table > tbody > tr > td{
  border:1 !important;
  border-color: rgb(214, 214, 214) !important;
  padding: 14px 12px !important;
  color: var(--muted) !important;
  font-weight: 1 !important;
  text-align: center;
}
.table > tbody > tr:hover{
  background: rgba(55, 86, 94, 0.04) !important;
}

/* Header de tablas con primario (si lo usas) */
.table-header,
div.table-header{
  background:var(--primary) !important;
  color:var(--white) !important;
  border:0 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  line-height: 46px !important;
  padding-left: 16px !important;
  font-weight: 600 !important;
}

/* Si tienes .text-right en los <th>, lo anulamos en el tfoot */
table tfoot .text-right{
  text-align: center !important;
}

/* Si tienes .text-right en los <th>, lo anulamos en el tfoot */
table tbody .text-right{
  text-align: center !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 767px){
  .content{ padding: 14px 12px !important; }
  .content-header{ padding: 10px 12px 6px 12px !important; }
  .content-header > h1{ font-size: 20px !important; }
}


/* =========================================================
   CONTRASTE PRO: FONDO GRIS SUAVE + CARDS MÁS DEFINIDAS
   Pegar al FINAL del CSS
========================================================= */

:root{
  --layout-bg: #f3f6f9;                 /* gris muy suave tipo Admin Pro */
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, .06); /* borde casi invisible */
  --card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --card-shadow-hover: 0 2px 6px rgba(0,0,0,.08), 0 14px 38px rgba(0,0,0,.10);
}

/* 1) Fondo general gris suave (para contraste) */
html, body{
  background: var(--layout-bg) !important;
  background-color: var(--layout-bg) !important;
}

/* 2) Que el wrapper use ese gris (y las cards “floten”) */
.wrapper,
.content-wrapper,
.right-side{
  background: var(--layout-bg) !important;
}

/* 3) El contenido interno sigue blanco SOLO cuando sea tarjeta/box,
      así el “lienzo” queda gris y todo se distingue */
.content{
  background: transparent !important;
}

/* 4) Cards/boxes con borde sutil + sombra pro */
.box,
.panel,
.info-box,
.small-box{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}


/* 6) Ajuste extra: separaciones para que respire más */
.box,
.panel,
.info-box,
.small-box{
  margin-bottom: 18px !important;
}

/* 7) Corrige tus font-weight=0 (eso “aplana” todo visualmente) */
.sidebar-menu > li.header{
  font-weight: 0 !important;
}
.sidebar-menu > li > a{
  font-weight: 0 !important;
}
.treeview-menu > li > a{
  font-weight: 0 !important;
}
.sidebar-form input[type="text"]{
  font-weight: 100 !important;
}
.small-box .inner p{
  font-weight: 0 !important;
}
.table > tbody > tr > td{
  font-weight: 650 !important;
}
input, select, textarea, .form-control{
  font-weight: 100 !important;
}

/* 8) Opcional: que el content-header no sea un bloque plano */
.content-header{
  background: transparent !important;
}


/* =========================================================
   FILTROS – MATERIAL COMPACT PRO (más pequeño y profesional)
   Pegar al FINAL del CSS
========================================================= */

:root{
  --primary:#093743;
  --primary-2:#0b4b5b;
  --text:#0f172a;
  --muted:#64748b;
  --ring: rgba(9,55,67,.16);
  --border: rgba(15,23,42,.10);
  --border-2: rgba(15,23,42,.16);
}

/* Tipografía/espaciado general del panel */
.box-body, .panel-body{
  padding: 14px !important;
}

/* Títulos dentro del panel */
.box-title, .panel-title{
  font-size: 14px !important;
  font-weight: 100 !important;
}

/* Separaciones más compactas */
.form-group, .radio, .checkbox{
  margin-bottom: 8px !important;
}
hr{
  margin: 10px 0 !important;
  background: rgba(15,23,42,.07) !important;
}

/* Labels más compactos */
label{
  font-size: 12.5px !important;
  font-weight: 100 !important;
  letter-spacing: .12px !important;
  line-height: 1.25 !important;
}

/* ====== Radios/Checkbox compactos ====== */
input[type="radio"],
input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;

  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--border-2) !important;
  background: #fff !important;

  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
  cursor: pointer !important;

  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease !important;
}
input[type="radio"]{ border-radius: 999px !important; }
input[type="checkbox"]{ border-radius: 5px !important; }

input[type="radio"]:hover,
input[type="checkbox"]:hover{
  border-color: rgba(9,55,67,.40) !important;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus{
  box-shadow: 0 0 0 3px var(--ring) !important;
  border-color: rgba(9,55,67,.55) !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked{
  border-color: var(--primary) !important;
}

/* Punto interno del radio (más pequeño) */
input[type="radio"]:checked{
  background:
    radial-gradient(circle at 50% 50%, var(--primary) 0 42%, transparent 45% 100%) !important;
}

/* Check del checkbox (compacto) */
input[type="checkbox"]:checked{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  position: relative !important;
}
input[type="checkbox"]:checked::after{
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 3px !important;
  height: 7px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Alineación limpia en filas */
.radio, .checkbox{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ====== Select compacto Material ====== */
select,
select.form-control,
.form-control select{
  -webkit-appearance: none !important;
  appearance: none !important;

  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;

  padding: 6px 36px 6px 15px !important;
  font-size: 12.5px !important;
  font-weight: 1 !important;
  color: var(--text) !important;

  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
  transition: box-shadow .15s ease, border-color .15s ease !important;
}

/* Flecha compacta */
select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent) !important;
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%,
    0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

select:focus{
  border-color: rgba(9,55,67,.55) !important;
  box-shadow: 0 0 0 3px var(--ring), 0 1px 2px rgba(0,0,0,.05) !important;
  outline: none !important;
}

/* ====== Botón compacto ====== */
.btn, button{
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  font-weight: 100 !important;
  border-radius: 999px !important;
}

.btn-primary{
  background: var(--primary) !important;
  border: 0 !important;
  box-shadow: 0 8px 16px rgba(9,55,67,.18) !important;
}
.btn-primary:hover{
  background: var(--primary-2) !important;
  box-shadow: 0 12px 22px rgba(9,55,67,.22) !important;
}

/* Si el panel tiene demasiado “aire” arriba/abajo */
.box-header, .panel-heading{
  padding: 12px 14px !important;
}


/* =========================================================
   FORCE COMPACT RADIOS + BTN FULL WIDTH (último override)
========================================================= */

:root{
  --primary:#093743;
  --primary-2:#0b4b5b;
  --ring: rgba(9,55,67,.14);
  --border-2: rgba(15,23,42,.16);
}

/* 1) Radios MUY compactos (y elimina cualquier escala/zoom heredado) */
input[type="radio"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;

  border: 2px solid var(--border-2) !important;
  border-radius: 999px !important;
  background: #fff !important;

  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  line-height: 0 !important;

  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Estado checked: punto interno pequeño */
input[type="radio"]:checked{
  border-color: var(--primary) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--primary) 0 40%, transparent 43% 100%) !important;
}

/* Focus ring (más pequeño) */
input[type="radio"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* 2) Si tu HTML envuelve radios con .radio/.iradio_* (plugins tipo iCheck), forzar contenedor */
.iradio_flat,
.iradio_square,
.iradio_minimal,
.iradio_line,
.icheckbox_flat,
.icheckbox_square,
.icheckbox_minimal,
.icheckbox_line{
  transform: scale(.78) !important;
  transform-origin: left center !important;
}

/* 3) Texto más compacto y alineado */
label{
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 1 !important;
}
.radio, .checkbox{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

/* 4) Quita “aire” del panel para que no se vea gigante */
.box-body, .panel-body{
  padding: 12px !important;
}
hr{
  margin: 8px 0 !important;
}

/* =========================================================
   BOTÓN APLICAR FULL WIDTH (100%)
========================================================= */
.btn,
button,
.btn-primary{
  width: 100% !important;
  display: block !important;
}

/* Si el botón está dentro de un contenedor centrado */
.box-body .btn,
.panel-body .btn,
.box-body button,
.panel-body button{
  margin-top: 10px !important;
}

/* Mantiene el look pro */
.btn-primary{
  background: var(--primary) !important;
  border: 0 !important;
  border-radius: 14px !important;      /* full-width pero elegante */
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 20px rgba(9,55,67,.18) !important;
}
.btn-primary:hover{
  background: var(--primary-2) !important;
  box-shadow: 0 14px 26px rgba(9,55,67,.22) !important;
}


/* =========================================================
   SIDEBAR PRO – DSS (estructura real: #menus_list > li.menu-item)
   - Distribución armónica
   - Íconos y textos alineados
   - Flecha (arrow) consistente
   - Submenú limpio y compacto
   - Activo/hover elegante (sin barras raras)
   Pegar AL FINAL
========================================================= */

:root{
  --primary:#093743;
  --primary-2:#0b4b5b;
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --soft: rgba(44,145,171,.18);
  --soft-2: rgba(44,145,171,.18);
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --radius: 14px;
}

/* Contenedor sidebar */
.main-sidebar,
.main-sidebar .sidebar{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Ajusta el layout del sidebar (aire y orden) */
.main-sidebar .sidebar{
  padding: 10px 10px 14px 10px !important;
}

/* Header “MENÚ DE OPCIONES” */
#menus_list.sidebar-menu > li.header{
  background: transparent !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
  font-weight: 1 !important;
  padding: 10px 12px !important;
  margin: 6px 8px 10px 8px !important;
  text-align: center !important; /* si quieres centrado cambia a center */
}

/* Elimina decoraciones heredadas (triángulos/barras) */
#menus_list.sidebar-menu > li.active::after,
#menus_list.sidebar-menu > li > a::after,
#menus_list.sidebar-menu > li > a::before{
  display:none !important;
  content:none !important;
}

/* Enlaces principales (padres) */
#menus_list.sidebar-menu > li.menu-item > a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  margin: 2px 6px !important;
  padding: 11px 12px !important;
  border-radius: var(--radius) !important;

  display:flex !important;
  align-items:center !important;
  gap: 10px !important;

  color: var(--text) !important;
  font-weight: 1 !important;
  letter-spacing: .1px !important;
  line-height: 1.2 !important;

  position: relative !important;
}

/* Icono izquierda */
#menus_list.sidebar-menu > li.menu-item > a > i.menu-icon{
  width: 18px !important;
  min-width: 18px !important;
  text-align:center !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

/* Texto */
#menus_list.sidebar-menu > li.menu-item > a > span.menu-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

/* Flecha derecha (arrow) alineada y discreta */
#menus_list.sidebar-menu > li.menu-item > a > span.arrow{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
}
#menus_list.sidebar-menu > li.menu-item > a > span.arrow i{
  font-size: 14px !important;
  color: var(--muted-2) !important;
  transition: transform .15s ease, color .15s ease !important;
}

/* Hover */
#menus_list.sidebar-menu > li.menu-item:hover > a{
  background: rgba(9,55,67,.04) !important;
  color: var(--primary) !important;
}
#menus_list.sidebar-menu > li.menu-item:hover > a > i.menu-icon{
  color: var(--primary) !important;
}
#menus_list.sidebar-menu > li.menu-item:hover > a > span.arrow i{
  color: var(--primary) !important;
}

/* Activo (padre) */
#menus_list.sidebar-menu > li.menu-item.active > a,
#menus_list.sidebar-menu > li.menu-item.menu-open > a{
  background: var(--soft) !important;
  color: var(--primary) !important;
  font-weight: 100 !important;
}
#menus_list.sidebar-menu > li.menu-item.active > a > i.menu-icon,
#menus_list.sidebar-menu > li.menu-item.menu-open > a > i.menu-icon{
  color: var(--primary) !important;
}

/* Rotación flecha cuando está abierto */
#menus_list.sidebar-menu > li.menu-item.menu-open > a > span.arrow i,
#menus_list.sidebar-menu > li.menu-item.active.menu-open > a > span.arrow i{
  transform: rotate(-90deg) !important; /* angle-left -> queda “abierto” */
  color: var(--primary) !important;
}

/* =========================
   SUBMENÚ (treeview-menu)
========================= */
#menus_list.sidebar-menu ul.treeview-menu{
  background: transparent !important;
  border: 0 !important;

  margin: 6px 6px 8px 6px !important;
  padding: 6px 0 !important;

  border-radius: var(--radius) !important;
}

/* Items del submenú */
#menus_list.sidebar-menu ul.treeview-menu > li.menu-item > a{
  background: transparent !important;
  border: 0 !important;

  margin: 2px 6px !important;
  padding: 9px 9px 9px 22px !important; /* indent real */
  border-radius: 12px !important;

  display:flex !important;
  align-items:center !important;
  gap: 10px !important;

  color: var(--muted) !important;
  font-weight: 100 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Icono caret-right del submenú más pequeño y sutil */
#menus_list.sidebar-menu ul.treeview-menu > li.menu-item > a > i.menu-icon.fa-caret-right{
  font-size: 12px !important;
  color: var(--muted-2) !important;
  width: 14px !important;
  min-width: 14px !important;
}

/* Hover submenú */
#menus_list.sidebar-menu ul.treeview-menu > li.menu-item:hover > a{
  background: rgba(9,55,67,.05) !important;
  color: var(--primary) !important;
}
#menus_list.sidebar-menu ul.treeview-menu > li.menu-item:hover > a > i.menu-icon{
  color: var(--primary) !important;
}

/* Activo submenú */
#menus_list.sidebar-menu ul.treeview-menu > li.menu-item.active > a{
  background: rgba(44,145,171,.18) !important;
  color: var(--primary) !important;
  font-weight: 100 !important;
}

/* =========================
   SEARCH (sidebar-form) coherente
========================= */
.sidebar-form{
  border: 0 !important;
  margin: 6px 6px 12px 6px !important;
  padding: 0 !important;
}
.sidebar-form .input-group{
  border-radius: 14px !important;
  overflow:hidden !important;
  box-shadow: var(--shadow-1) !important;
  background:#fff !important;
}
.sidebar-form input.form-control.nav-search-input{
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  padding: 11px 12px !important;
  height: 40px !important;
  font-weight: 1 !important;
  color: var(--text) !important;
}
.sidebar-form .input-group-text{
  background:#fff !important;
  border:0 !important;
  color: var(--primary) !important;
}

/* =========================
   RESPONSIVE: compacta un poco en pantallas chicas
========================= */
@media (max-width: 767px){
  .main-sidebar .sidebar{ padding: 8px 8px 12px 8px !important; }
  #menus_list.sidebar-menu > li.menu-item > a{ margin: 2px 4px !important; padding: 10px 10px !important; }
  #menus_list.sidebar-menu ul.treeview-menu > li.menu-item > a{ margin: 2px 4px !important; padding: 8px 10px 8px 34px !important; }
}


/* =========================================================
   FIX: LOGO + NAVBAR EN LA MISMA FILA (MÓVIL) – AdminLTE v2
========================================================= */
@media (max-width: 767px){

  /* Header en una sola fila */
  .main-header{
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1035 !important;
  }

  /* Navbar SOLO para el toggle (columna izquierda) */
  .main-header > .navbar{
    order: 1 !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    float: none !important;
  }

  /* Toggle dentro del navbar */
  .main-header > .navbar .sidebar-toggle{
    position: static !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #093743 !important;
  }

  /* Logo (columna centro) */
  .main-header > .logo{
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    float: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Deja un solo texto (DSS) centrado */
  .main-header > .logo .logo-mini{ display: none !important; }
  .main-header > .logo .logo-lg{
    display: inline-flex !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .4px !important;
    color: #093743 !important;
    line-height: 1 !important;
  }

  /* Como tu navbar-custom-menu está vacío, lo escondemos para que no rompa layout */
  .main-header > .navbar .navbar-custom-menu{
    display: none !important;
  }

  /* Evita salto raro del wrapper en móvil */
  .content-wrapper{
    margin-left: 0 !important;
    padding-top: 10px !important;
  }
}


/* =========================
   MATERIAL DATEPICKER (bootstrap-datepicker)
========================= */

/* Que no quede debajo de header/modales */
.datepicker,
.datepicker-dropdown{
  z-index: 2000 !important;
}

.datepicker-dropdown{
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
  padding: 10px !important;
  font-family: "Inter","Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif !important;
}

/* Encabezado (mes/año + flechas) */
.datepicker table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 6px 6px !important; /* aire tipo material */
}

.datepicker thead tr:nth-child(2) th{
  border-radius: 12px !important;
  padding: 10px 8px !important;
  font-weight: 600 !important;
  color: var(--text, #0f172a) !important;
  background: transparent !important;
}

.datepicker .datepicker-switch{
  font-size: 14px !important;
  letter-spacing: .2px !important;
}

.datepicker .prev,
.datepicker .next{
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  text-align: center !important;
  border-radius: 999px !important;
  color: var(--muted, #64748b) !important;
  transition: background .15s ease, color .15s ease !important;
}

.datepicker .prev:hover,
.datepicker .next:hover{
  background: rgba(9,55,67,.08) !important;
  color: var(--primary, #093743) !important;
}

/* Días de la semana */
.datepicker .dow{
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted, #64748b) !important;
  text-transform: uppercase !important;
  padding: 2px 0 !important;
  background: #619da736 !important;
}

/* Días */
.datepicker td,
.datepicker th{
  border: 0 !important;
}

.datepicker td.day{
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--text, #0f172a) !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}

.datepicker td.day:hover{
  background: rgba(9,55,67,.08) !important;
  color: var(--primary, #093743) !important;
}

/* Hoy */
.datepicker td.today{
  background: transparent !important;
  box-shadow: inset 0 0 0 2px rgba(9,55,67,.22) !important;
  color: var(--primary, #093743) !important;
}

/* Seleccionado */
.datepicker td.active,
.datepicker td.active:hover{
  background: var(--primary, #093743) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(9,55,67,.22) !important;
}

/* Días fuera de mes */
.datepicker td.old,
.datepicker td.new{
  color: rgba(100,116,139,.55) !important;
}

/* Vista meses/años */
.datepicker span.month,
.datepicker span.year,
.datepicker span.decade,
.datepicker span.century{
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 4px !important;
  font-weight: 600 !important;
  color: var(--text, #0f172a) !important;
  transition: background .15s ease, color .15s ease !important;
}

.datepicker span.month:hover,
.datepicker span.year:hover,
.datepicker span.decade:hover,
.datepicker span.century:hover{
  background: rgba(9,55,67,.08) !important;
  color: var(--primary, #093743) !important;
}

.datepicker span.month.active,
.datepicker span.year.active,
.datepicker span.decade.active,
.datepicker span.century.active{
  background: var(--primary, #093743) !important;
  color: #fff !important;
}

/* Disabled days (gris) */
.datepicker td.day.disabled,
.datepicker td.disabled,
.datepicker td.disabled:hover{
  color: rgba(100,116,139,.45) !important;      /* gris */
  background: rgba(15,23,42,.04) !important;   /* fondo gris muy suave */
  cursor: not-allowed !important;
  text-decoration: line-through !important;     /* opcional: quítalo si no lo quieres */
  box-shadow: none !important;
}



.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: #093743 !important;
}


.progress-bar-primary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #366a79 !important;
    transition: width .6s ease;
}

.progress-bar-light-blue, .progress-bar-primary {
    background-color: #366a79 !important;
}

/* Estilos generales para los botones de acción */
.btn-action {
    border-radius: 4px; /* Esquinas ligeramente redondeadas, más serio */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #ffffff !important;
}

/* Efecto Hover general (se oscurecen un poco al pasar el mouse) */
.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    filter: brightness(90%);
}

/* 1. ELABORADO (Verde Bosque) */
.btn-success {
    background-color: #3e5c4a !important; /* Verde sobrio */
}

/* 2. EN TIEMPO DE EJECUCIÓN (Azul Corporativo) */
.btn-info {
    background-color: #093743 !important; /* Tu azul base */
}

/* 3. VENCIDO - PENDIENTE (Rojo Óxido / Ladrillo) */
.btn-danger {
    background-color: #7a3a3a !important; /* Rojo serio, no alarmista */
}

/* 4. VENCIDO - ELABORADO (Ocre / Bronce) */
.btn-warning {
    background-color: #8c7041 !important; /* Amarillo "quemado" tipo moneda */
}

/* Estilo para los botones en bloque para que no se vean tan toscos */
.btn-block {
    padding: 12px 10px;
}

.progress-bar-aqua, 
.progress-bar-info {
    background-color: rgba(16, 74, 97, 0.26) !important;
}

/* =========================================================
   MODAL "Procesando..." – Material Design (AdminLTE/Ace)
   Aplica a tu markup: .modal .modal-dialog .modal-content ...
   Pegar al FINAL del CSS
========================================================= */

:root{
  --primary:#093743;
  --primary-2:#0b4b5b;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --overlay: rgba(15,23,42,.55);
  --shadow-modal: 0 18px 50px rgba(0,0,0,.22);
  --radius-md: 18px;
}

/* Overlay más “material” */
.modal-backdrop.in,
.modal-backdrop.show{
  opacity: 1 !important;
  background: var(--overlay) !important;
}

/* Centrado y tamaño más pro */
.modal{
  z-index: 2000 !important; /* tú ya lo usas */
}
.modal-dialog{
  margin: 10vh auto !important;
  max-width: 520px !important;
  width: calc(100% - 28px) !important;
}

/* Tarjeta del modal */
.modal-content{
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-modal) !important;
  overflow: hidden !important;
}

/* Header tipo Material: limpio, sin borde, buena jerarquía */
.modal-header{
  border: 0 !important;
  background: transparent !important;
  padding: 18px 18px 10px 18px !important;
}
.modal-header h4{
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.25 !important;
}

/* Tu h4 tiene clases (blue bigger), las anulamos para que no pinte azul raro */
.modal-header h4.blue,
.modal-header h4.bigger{
  color: var(--text) !important;
}

/* Icono en “chip” */
.modal-header h4 i.fa{
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(9,55,67,.10) !important;
  color: var(--primary) !important;
  font-size: 16px !important;
}

/* Body más compacto */
.modal-body{
  padding: 10px 18px 18px 18px !important;
}

/* Barra de progreso tipo Material */
.modal .progress{
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.08) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin: 6px 0 0 0 !important;
}

/* Quitar rayas/animaciones “viejas” del striped */
.modal .progress.progress-striped,
.modal .progress.progress-striped .progress-bar{
  background-image: none !important;
}

/* Barra principal */
.modal .progress-bar{
  background: linear-gradient(90deg, var(--primary), var(--primary-2)) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  width: 100% !important;
  animation: md-indeterminate 1.1s ease-in-out infinite !important;
}

/* Si te llega con progress-bar-yellow, lo forzamos igual */
.modal .progress-bar-yellow{
  background: linear-gradient(90deg, var(--primary), var(--primary-2)) !important;
}

/* Animación “material” suave (simula indeterminate, sin JS) */
@keyframes md-indeterminate{
  0%   { transform: translateX(-30%) scaleX(.45); }
  50%  { transform: translateX( 30%) scaleX(.85); }
  100% { transform: translateX(-30%) scaleX(.45); }
}

/* Opcional: evita que el modal “salte” por overflow inline */
.modal[style*="overflow-y: visible"]{
  overflow-y: auto !important;
}

/* Mobile: un poco más alto y centrado */
@media (max-width: 767px){
  .modal-dialog{
    margin: 14vh auto !important;
  }
  .modal-header{
    padding: 16px 16px 8px 16px !important;
  }
  .modal-body{
    padding: 8px 16px 16px 16px !important;
  }
}