/* V114 - Encabezado y navegacion modernos. Solo estetica: no cambia ids, eventos ni logica. */
:root{
  --v114-navy:#062b5f;
  --v114-blue:#0767c7;
  --v114-blue-dark:#004a99;
  --v114-line:#cfe0f4;
  --v114-soft:#f6fbff;
}

/* Header principal: dejamos de simular ventana/browser y usamos una barra corporativa limpia. */
.browser-bar.compact-header{
  min-height:74px!important;
  padding:12px 22px!important;
  gap:18px!important;
  align-items:center!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(7,87,174,.14)!important;
  box-shadow:0 10px 24px rgba(6,43,95,.045)!important;
}

/* Los tres puntos tipo navegador ya no aportan a un portal operativo moderno. */
.browser-bar.compact-header .window-dots{
  display:none!important;
}

.browser-bar.compact-header .header-left{
  min-width:158px!important;
  width:158px!important;
  height:56px!important;
  flex:0 0 158px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  padding:0!important;
  overflow:visible!important;
}

/* Logo/marca: avion en un espacio rectangular amplio, sin circulo, sin recorte y sin texto montado. */
.browser-bar.compact-header .top-logo,
.brand-logo.top-logo{
  content:url('../assets/aviacargoexpress-avion-clean-v72.png')!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  flex:0 0 132px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 10px 16px rgba(6,43,95,.10))!important;
  margin:0!important;
  padding:0!important;
}

.browser-bar.compact-header .operational-review-mini-alert{
  margin-left:6px!important;
  flex:0 0 auto!important;
}

.browser-bar.compact-header .header-actions{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

.browser-bar.compact-header .browser-title{
  margin-right:auto!important;
  color:var(--v114-navy)!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* Chips y acciones superiores: estilo actual de producto, no botones pesados tipo pestaña vieja. */
.browser-bar.compact-header .portal-user-chip,
.browser-bar.compact-header .portal-action-btn,
.browser-bar.compact-header .portal-logout-btn,
.portal-action-btn,
.portal-logout-btn{
  min-height:38px!important;
  border-radius:999px!important;
  border:1px solid rgba(7,87,174,.18)!important;
  background:linear-gradient(180deg,#ffffff,#f7fbff)!important;
  color:var(--v114-navy)!important;
  box-shadow:0 8px 18px rgba(6,43,95,.055)!important;
  font-weight:850!important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease!important;
}
.browser-bar.compact-header .portal-action-btn,
.browser-bar.compact-header .portal-logout-btn,
.portal-action-btn,
.portal-logout-btn{
  padding:0 16px!important;
  font-size:13px!important;
}
.browser-bar.compact-header .portal-user-chip{
  padding:0 14px!important;
  font-size:12px!important;
}
.browser-bar.compact-header .portal-action-btn:hover,
.browser-bar.compact-header .portal-logout-btn:hover,
.portal-action-btn:hover,
.portal-logout-btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 12px 24px rgba(6,43,95,.09)!important;
  background:#fff!important;
}

/* Navegacion de modulos: cambia de pestanas antiguas a barra de pills moderna, manteniendo los mismos botones y data-tab. */
.tabs[role="tablist"]{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 18px!important;
  background:linear-gradient(180deg,#f7fbff,#eef7ff)!important;
  border-bottom:1px solid rgba(7,87,174,.14)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
}
.tabs[role="tablist"] .tab-btn{
  flex:0 0 auto!important;
  min-height:38px!important;
  padding:0 16px!important;
  border:1px solid rgba(7,87,174,.18)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.88)!important;
  color:var(--v114-navy)!important;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:0!important;
  box-shadow:0 6px 14px rgba(6,43,95,.045)!important;
  transform:none!important;
}
.tabs[role="tablist"] .tab-btn:hover{
  background:#fff!important;
  border-color:rgba(7,87,174,.30)!important;
  box-shadow:0 10px 20px rgba(6,43,95,.075)!important;
}
.tabs[role="tablist"] .tab-btn.active,
.tabs[role="tablist"] .tab-btn[aria-selected="true"]{
  color:#fff!important;
  background:linear-gradient(135deg,var(--v114-blue),var(--v114-blue-dark))!important;
  border-color:transparent!important;
  box-shadow:0 12px 24px rgba(0,87,174,.20)!important;
}

/* El tab de Clientes deja de verse como alerta naranja; queda integrado al sistema visual. */
.tabs[role="tablist"] .tab-clientes-prioridad{
  border-color:rgba(7,87,174,.18)!important;
  color:var(--v114-navy)!important;
}
.tabs[role="tablist"] .tab-clientes-prioridad.active,
.tabs[role="tablist"] .tab-clientes-prioridad[aria-selected="true"]{
  color:#fff!important;
}

@media(max-width:1050px){
  .browser-bar.compact-header{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .browser-bar.compact-header .header-left{
    width:138px!important;
    min-width:138px!important;
    flex-basis:138px!important;
  }
  .browser-bar.compact-header .top-logo,.brand-logo.top-logo{
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    flex-basis:116px!important;
  }
  .browser-bar.compact-header .header-actions{
    justify-content:flex-start!important;
  }
  .browser-bar.compact-header .browser-title{
    margin-right:8px!important;
  }
}

@media(max-width:720px){
  .browser-bar.compact-header{padding:10px 14px!important;gap:10px!important;}
  .browser-bar.compact-header .header-left{width:120px!important;min-width:120px!important;flex-basis:120px!important;height:48px!important;}
  .browser-bar.compact-header .top-logo,.brand-logo.top-logo{width:104px!important;min-width:104px!important;max-width:104px!important;height:46px!important;min-height:46px!important;max-height:46px!important;flex-basis:104px!important;}
  .browser-bar.compact-header .browser-title{font-size:14px!important;}
  .tabs[role="tablist"]{padding:8px 12px!important;gap:7px!important;}
  .tabs[role="tablist"] .tab-btn{min-height:36px!important;padding:0 13px!important;font-size:12px!important;}
}

/* V115 - Correccion de scrolls internos creados por la navegacion moderna.
   Solo estetica: conserva los mismos botones, ids, data-tab y eventos. */
.browser-bar.compact-header{
  overflow:visible!important;
}
.browser-bar.compact-header .header-actions{
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.browser-bar.compact-header .portal-action-btn,
.browser-bar.compact-header .portal-logout-btn,
.browser-bar.compact-header .portal-user-chip{
  flex:0 0 auto!important;
}
.tabs[role="tablist"]{
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  flex-wrap:wrap!important;
  align-content:flex-start!important;
  min-height:auto!important;
  row-gap:8px!important;
  scrollbar-width:none!important;
}
.tabs[role="tablist"]::-webkit-scrollbar{
  display:none!important;
}
.tabs[role="tablist"] .tab-btn{
  white-space:nowrap!important;
}
.main-shell,
.portal-shell,
.tab-panel{
  overflow-x:hidden!important;
}
@media(max-width:1180px){
  .browser-bar.compact-header .header-actions{
    flex-wrap:wrap!important;
  }
}