/*
 Minaya AgroFresh · Fase 32.15 · Presentación profesional
 Capa visual final: compacta el encabezado, ordena la navegación y unifica
 pestañas, tarjetas y ventanas sin modificar lógica, datos ni permisos.
*/

:root{
  --maf-shell-shadow:0 10px 30px rgba(10,55,33,.065);
  --maf-card-shadow:0 6px 20px rgba(10,55,33,.055);
  --maf-card-shadow-hover:0 12px 30px rgba(10,55,33,.085);
}

/* Encabezado de trabajo: una sola fila cuando existe espacio. */
#app main>header{
  display:grid!important;
  grid-template-columns:minmax(230px,270px) minmax(0,1fr)!important;
  align-items:center!important;
  min-height:84px!important;
  padding:12px clamp(18px,2vw,28px)!important;
  box-shadow:var(--maf-shell-shadow)!important;
}
.header-left{min-width:0!important}
.header-left h2{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-actions{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
  justify-content:flex-end!important;
  gap:9px!important;
}
.header-actions #helpHeaderBtn{display:none!important}
.header-actions .global-search{
  flex:1 1 320px!important;
  width:auto!important;
  min-width:190px!important;
  max-width:560px!important;
}
.header-actions .connection-badge,
.header-actions .notification-center,
.header-actions .date-box,
.header-actions #backupBtn{flex:0 0 auto}
.header-actions .date-box{padding:6px 10px!important}
.header-actions #backupBtn{min-height:44px!important;padding-inline:13px!important}

/* Iconos de navegación con una forma constante y más fácil de reconocer. */
#sidebar .nav-btn{gap:11px!important}
#sidebar .nav-icon{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.075)!important;
  color:#d8f0e2!important;
  font-size:.9rem!important;
  line-height:1!important;
}
#sidebar .nav-btn:hover .nav-icon,
#sidebar .nav-btn.active .nav-icon{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
}

/* Pestañas de módulos: una sola línea desplazable, sin botones aislados. */
#content .sales-tabs{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  max-width:100%!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:2px 2px 9px!important;
  margin-bottom:18px!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
#content .sales-tabs .sales-tab{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  min-height:43px!important;
  padding:9px 14px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Compras comparte la misma jerarquía visual de los módulos principales. */
#content .purchase-hero271{
  position:relative!important;
  overflow:hidden!important;
  padding:26px 28px!important;
  border-color:rgba(255,255,255,.08)!important;
  background:linear-gradient(125deg,#063b24 0%,#075b32 62%,#16804b 100%)!important;
  box-shadow:var(--maf-shell-shadow)!important;
}
#content .purchase-hero271::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  top:-140px;
  right:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(184,204,66,.22),rgba(184,204,66,0) 70%);
  pointer-events:none;
}
#content .purchase-hero271>*{position:relative;z-index:1}
#content .purchase-hero271 h3{color:#fff!important}
#content .purchase-hero271 p{color:#dcefe4!important}
#content .purchase-hero271 .eyebrow{color:#cde88a!important}

/* Tarjetas con profundidad discreta y consistente. */
#content .purchase-kpi271,
#content .warehouse-card254,
#content .dashboard-kpi,
#content .card,
#content .panel{box-shadow:var(--maf-card-shadow)!important}
#content .purchase-kpi271:hover,
#content .warehouse-card254:hover,
#content .dashboard-kpi:hover,
#content .card:hover{box-shadow:var(--maf-card-shadow-hover)!important}

/* Cierres de ventanas siempre visibles y accesibles. */
.modal-head{position:relative!important;padding-right:50px!important}
.modal-card .modal-close,
.modal-card>.close,
#closeModal{
  position:absolute!important;
  top:12px!important;
  right:14px!important;
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #dbe6df!important;
  border-radius:11px!important;
  background:#f7faf8!important;
  color:#294c39!important;
  font-size:1.35rem!important;
  line-height:1!important;
  z-index:3!important;
}
.modal-card .modal-close:hover,
.modal-card>.close:hover,
#closeModal:hover{background:#eaf5ee!important;color:#075b32!important}

/* Estados vacíos más claros en tablas y listas. */
#content td[colspan],
#content .empty-state,
#content [class*="-empty"]{color:#667a6e!important}
#content td[colspan]{padding-block:30px!important}

@media(max-width:1180px){
  #app main>header{grid-template-columns:minmax(190px,225px) minmax(0,1fr)!important}
  .header-actions .date-box{display:none!important}
}

@media(max-width:900px){
  #app main>header{grid-template-columns:minmax(170px,210px) minmax(0,1fr)!important}
  .header-actions #backupBtn{display:none!important}
}

@media(max-width:720px){
  #app main>header{
    display:flex!important;
    min-height:68px!important;
    padding:10px 12px!important;
    gap:9px!important;
  }
  .header-left{flex:1 1 auto!important;gap:9px!important}
  .header-left h2{max-width:none!important;font-size:1.05rem!important}
  .header-left p{display:none!important}
  .header-actions{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    margin-left:auto!important;
    gap:7px!important;
  }
  .header-actions .connection-badge{display:none!important}
  .header-actions .global-search{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
  }
  .global-search-icon,
  .notification-bell{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:12px!important;
  }
  .global-search-results{top:70px!important}
  #content .purchase-hero271{padding:21px!important}
  #content .purchase-hero-actions271{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  #content .purchase-hero-actions271 .btn{width:100%!important}
  .modal-head{padding-right:44px!important}
  .modal-card .modal-close,
  .modal-card>.close,
  #closeModal{top:10px!important;right:10px!important}
  .context-help-fab{
    right:12px!important;
    width:46px!important;
    height:46px!important;
    font-size:1.2rem!important;
  }
}

@media print{
  #app main>header{display:none!important}
  #content .sales-tabs{display:none!important}
}