/* V116 - Header y navegacion compacta tipo texto.
   Solo estetica: conserva los mismos botones, ids, data-tab y eventos. */
:root{
  --v116-navy:#062b5f;
  --v116-blue:#006fc9;
  --v116-red:#df2335;
  --v116-line:#d7e7f8;
}

/* Titulo en dos lineas para que nunca quede cortado como "Portal Op...". */
.browser-bar.compact-header{
  min-height:72px!important;
  padding:10px 20px!important;
  gap:14px!important;
}
.browser-bar.compact-header .header-left{
  width:146px!important;
  min-width:146px!important;
  flex:0 0 146px!important;
  height:58px!important;
  justify-content:flex-start!important;
}
.browser-bar.compact-header .top-logo,
.brand-logo.top-logo{
  width:126px!important;
  min-width:126px!important;
  max-width:126px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.browser-bar.compact-header .browser-title{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:0!important;
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
  margin:0 4px 0 0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.02!important;
  font-size:15px!important;
  letter-spacing:-.015em!important;
  color:var(--v116-navy)!important;
}
.browser-bar.compact-header .browser-title span{
  display:block!important;
}

/* Acciones superiores: menos ovaladas y mas compactas, sin cambiar eventos. */
.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:34px!important;
  height:34px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:none!important;
  background:#fff!important;
  border:1px solid var(--v116-line)!important;
}
.browser-bar.compact-header .portal-user-chip{
  padding:0 10px!important;
  max-width:210px!important;
}
.browser-bar.compact-header .header-actions{
  gap:8px!important;
  flex-wrap:nowrap!important;
}

/* Navegacion principal: una sola linea tipo texto moderno, sin botones ovalados ni scroll interno. */
.tabs[role="tablist"]{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  padding:8px 18px!important;
  min-height:44px!important;
  background:linear-gradient(180deg,#f8fcff,#eef7ff)!important;
  border-top:1px solid rgba(7,87,174,.08)!important;
  border-bottom:1px solid rgba(7,87,174,.14)!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  scrollbar-width:none!important;
}
.tabs[role="tablist"]::-webkit-scrollbar{display:none!important;}
.tabs[role="tablist"] .tab-btn,
.tabs[role="tablist"] .tab-clientes-prioridad{
  position:relative!important;
  flex:0 1 auto!important;
  min-width:0!important;
  min-height:30px!important;
  height:30px!important;
  padding:0 9px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--v116-navy)!important;
  font-size:12px!important;
  line-height:30px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transform:none!important;
}
.tabs[role="tablist"] .tab-btn:hover{
  background:rgba(0,111,201,.07)!important;
  color:var(--v116-blue)!important;
  box-shadow:none!important;
}
.tabs[role="tablist"] .tab-btn.active,
.tabs[role="tablist"] .tab-btn[aria-selected="true"],
.tabs[role="tablist"] .tab-clientes-prioridad.active,
.tabs[role="tablist"] .tab-clientes-prioridad[aria-selected="true"]{
  color:var(--v116-blue)!important;
  background:rgba(0,111,201,.08)!important;
  border:0!important;
  box-shadow:none!important;
}
.tabs[role="tablist"] .tab-btn.active::after,
.tabs[role="tablist"] .tab-btn[aria-selected="true"]::after{
  content:""!important;
  position:absolute!important;
  left:9px!important;
  right:9px!important;
  bottom:2px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--v116-blue),var(--v116-red))!important;
}

/* Ajuste para pantallas medianas: se mantiene una linea reduciendo espacios. */
@media(max-width:1220px){
  .browser-bar.compact-header{padding-left:16px!important;padding-right:16px!important;gap:10px!important;}
  .browser-bar.compact-header .header-left{width:124px!important;min-width:124px!important;flex-basis:124px!important;}
  .browser-bar.compact-header .top-logo,.brand-logo.top-logo{width:112px!important;min-width:112px!important;max-width:112px!important;}
  .browser-bar.compact-header .browser-title{width:72px!important;min-width:72px!important;max-width:72px!important;font-size:14px!important;}
  .browser-bar.compact-header .header-actions{gap:6px!important;}
  .browser-bar.compact-header .portal-action-btn,
  .browser-bar.compact-header .portal-logout-btn,
  .browser-bar.compact-header .portal-user-chip{height:32px!important;min-height:32px!important;padding:0 9px!important;font-size:11px!important;border-radius:10px!important;}
  .tabs[role="tablist"]{gap:2px!important;padding:7px 12px!important;}
  .tabs[role="tablist"] .tab-btn{height:28px!important;min-height:28px!important;line-height:28px!important;padding:0 6px!important;font-size:11px!important;}
}

@media(max-width:980px){
  .tabs[role="tablist"] .tab-btn{font-size:10px!important;padding:0 4px!important;}
}