/* ============================================================
   HEADER UNIFICADO — Aplica el estilo del hero de /ventas a TODAS
   las vistas que aún usan el patrón legacy:
     <section class="content-header dashboard-header">
       <div class="box container-fluid">
         <div class="col-lg-12">
           <div class="col-md-3"><button>...</button></div>
           <div class="col-md-9 btns-dash"><a>...</a><a>...</a></div>
         </div>
       </div>
     </section>
   Sin tocar HTML — solo CSS.
   ============================================================ */

:root {
  --hu-primary: #0ea5e9;
  --hu-primary-dark: #0284c7;
}

body.skin-blue .content-header.dashboard-header {
  background: var(--hu-primary) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin: 12px 14px 14px 14px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12) !important;
  display: block !important;
}

/* El box interno: convertir en flex */
.content-header.dashboard-header > .box.container-fluid {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.content-header.dashboard-header > .box.container-fluid > .col-lg-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Bloque del título (col-md-3) */
.content-header.dashboard-header .col-lg-12 > .col-md-3,
.content-header.dashboard-header .col-lg-12 > .col-md-2 {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
}
.content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child,
.content-header.dashboard-header .col-lg-12 > .col-md-2 > button:first-child {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap;
}
.content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child > i,
.content-header.dashboard-header .col-lg-12 > .col-md-2 > button:first-child > i {
  background: rgba(255, 255, 255, .25);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Bloque de acciones (col-md-9 con .btns-dash) */
.content-header.dashboard-header .col-lg-12 > .col-md-9,
.content-header.dashboard-header .col-lg-12 > .col-md-10,
.content-header.dashboard-header .col-lg-12 > .btns-dash {
  width: auto !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
.content-header.dashboard-header .btns-dash {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}

/* Botones de acciones — estilo unificado */
.content-header.dashboard-header .btns-dash a,
.content-header.dashboard-header .btns-dash button,
.content-header.dashboard-header .btns-dash .btn {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap;
  transition: transform .15s, background .15s, box-shadow .15s !important;
}
.content-header.dashboard-header .btns-dash a:hover,
.content-header.dashboard-header .btns-dash button:hover,
.content-header.dashboard-header .btns-dash .btn:hover {
  background: rgba(255, 255, 255, .26) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2) !important;
  color: #fff !important;
}
.content-header.dashboard-header .btns-dash a i,
.content-header.dashboard-header .btns-dash button i,
.content-header.dashboard-header .btns-dash .btn i {
  font-size: 13px !important;
  margin: 0 !important;
}
/* Primer botón = acción primaria → fondo blanco */
.content-header.dashboard-header .btns-dash a:first-of-type:not(.btn-default),
.content-header.dashboard-header .btns-dash > .btn-success,
.content-header.dashboard-header .btns-dash > .btn-primary {
  background: #fff !important;
  color: var(--hu-primary) !important;
  border-color: #fff !important;
}
.content-header.dashboard-header .btns-dash a:first-of-type:not(.btn-default):hover,
.content-header.dashboard-header .btns-dash > .btn-success:hover,
.content-header.dashboard-header .btns-dash > .btn-primary:hover {
  background: #fff !important;
  color: var(--hu-primary-dark) !important;
}

/* Eliminar el "pull-right" / "pull-left" que ya no aplica */
.content-header.dashboard-header .pull-right,
.content-header.dashboard-header .pull-left {
  float: none !important;
}

/* Quitar márgenes y wrappers extra de botones específicos */
.content-header.dashboard-header .btns-dash a[style*="margin-left"] {
  margin-left: 0 !important;
}

/* ============================================================
   PATRÓN SIMPLE: <section class="content-header">
                    <h1><i></i> Título</h1>
                    <p class="text-muted">Descripción</p>
                  </section>
   (sin .dashboard-header — usado en SIRE, contabilidad, dashboards
   secundarios, módulos admin, etc.)
   ============================================================ */
body.skin-blue .content-header:not(.dashboard-header) {
  background: var(--hu-primary) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 12px 14px 14px 14px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12) !important;
  min-height: 0 !important;
}
body.skin-blue .content-header:not(.dashboard-header) > h1 {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap;
}
body.skin-blue .content-header:not(.dashboard-header) > h1 > i:first-child {
  background: rgba(255, 255, 255, .22);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}
body.skin-blue .content-header:not(.dashboard-header) > h1 > small {
  color: rgba(255, 255, 255, .85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-left: 6px;
}
body.skin-blue .content-header:not(.dashboard-header) > h1 .label,
body.skin-blue .content-header:not(.dashboard-header) > h1 .badge {
  background: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}
body.skin-blue .content-header:not(.dashboard-header) > p,
body.skin-blue .content-header:not(.dashboard-header) > .text-muted {
  color: rgba(255, 255, 255, .9) !important;
  margin: 6px 0 0 48px !important;
  font-size: 13px !important;
}
body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb {
  background: transparent !important;
  padding: 4px 0 0 48px !important;
  margin: 4px 0 0 0 !important;
  position: static !important;
  float: none !important;
}
body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb > li,
body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb > li > a,
body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb > li.active {
  color: rgba(255, 255, 255, .85) !important;
}
body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb > li + li:before {
  color: rgba(255, 255, 255, .55) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  body.skin-blue .content-header:not(.dashboard-header) {
    padding: 12px 14px !important;
    margin: 8px 6px 10px 6px !important;
    border-radius: 12px !important;
  }
  body.skin-blue .content-header:not(.dashboard-header) > h1 {
    font-size: 17px !important;
  }
  body.skin-blue .content-header:not(.dashboard-header) > p,
  body.skin-blue .content-header:not(.dashboard-header) > .text-muted,
  body.skin-blue .content-header:not(.dashboard-header) > .breadcrumb {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  body.skin-blue .content-header.dashboard-header {
    padding: 12px !important;
    margin: 8px 6px 10px 6px !important;
    border-radius: 12px !important;
  }
  .content-header.dashboard-header > .box.container-fluid > .col-lg-12 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .content-header.dashboard-header .col-lg-12 > .col-md-3,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .content-header.dashboard-header .col-lg-12 > .col-md-9,
  .content-header.dashboard-header .col-lg-12 > .col-md-10,
  .content-header.dashboard-header .col-lg-12 > .btns-dash,
  .content-header.dashboard-header .btns-dash {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    justify-content: stretch !important;
  }
  .content-header.dashboard-header .btns-dash a,
  .content-header.dashboard-header .btns-dash button {
    padding: 8px 4px !important;
    font-size: 10.5px !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 50px !important;
    justify-content: center !important;
  }
}