/* AUSAPE V10.2 - Hotfix responsive de titulos y topbar
   Objetivo: impedir titulos verticales/letra a letra cuando la cabecera se queda sin ancho.
   Causa corregida: overflow-wrap:anywhere + topbar con acciones demasiado anchas. */
:root{
  --v102-title-min: 360px;
  --v102-topbar-break: 1480px;
}

html,body{
  max-width:100%;
  overflow-x:hidden;
}

.app{
  grid-template-columns:minmax(260px,290px) minmax(0,1fr)!important;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

.main,
.section,
.card,
.grid,
.table-head,
.section-title,
.topbar,
.topbar > div,
.actions,
.top-actions{
  min-width:0!important;
  max-width:100%;
}

/* Nunca volver a romper titulos por caracteres */
.topbar h1,.topbar h2,.topbar h3,
.section-title h1,.section-title h2,.section-title h3,
.card h1,.card h2,.card h3,
.brand h1,.login-brand h1,
.v90-slide-title h2,
.v82-welcome h2{
  overflow-wrap:normal!important;
  word-break:normal!important;
  white-space:normal!important;
  hyphens:none!important;
  line-height:1.08!important;
  max-width:100%!important;
}

.topbar{
  display:grid!important;
  grid-template-columns:minmax(var(--v102-title-min),1fr) minmax(0,max-content)!important;
  align-items:start!important;
  gap:14px!important;
}

.topbar > div:first-child{
  min-width:var(--v102-title-min)!important;
  max-width:100%!important;
}

.topbar h2{
  font-size:clamp(22px,2.15vw,36px)!important;
  letter-spacing:-.035em!important;
}

.topbar p{
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

.top-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  max-width:min(760px,100%)!important;
}

.top-actions .btn,
.top-actions .mini,
.top-actions .session-card{
  flex:0 1 auto!important;
  min-width:0!important;
}

.session-card{
  max-width:260px!important;
}

.session-card b,
.session-card span{
  max-width:145px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Si el navegador se estrecha, la cabecera baja las acciones; no comprime el titulo. */
@media (max-width:1480px){
  .topbar{
    grid-template-columns:1fr!important;
  }
  .topbar > div:first-child{
    min-width:0!important;
  }
  .top-actions{
    justify-content:flex-start!important;
    max-width:100%!important;
  }
}

/* Vista media: mas aire y botones menos agresivos */
@media (max-width:1180px){
  .app{
    grid-template-columns:minmax(235px,260px) minmax(0,1fr)!important;
  }
  .main{
    padding:18px!important;
  }
  .topbar{
    position:relative!important;
    top:auto!important;
    padding:14px!important;
  }
  .topbar h2{
    font-size:clamp(22px,4vw,32px)!important;
  }
}

/* Vista tablet/movil: sidebar arriba y menu en rejilla. */
@media (max-width:900px){
  .app{
    display:block!important;
    max-width:100vw!important;
  }
  .sidebar{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    max-height:none!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:16px!important;
  }
  .brand,
  .brand-logo-wrap{
    align-items:center!important;
    min-width:0!important;
  }
  .brand h1,
  .brand-logo-wrap h1{
    font-size:clamp(18px,5vw,24px)!important;
  }
  .nav{
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  }
  .main{
    padding:14px!important;
  }
  .top-actions .btn,
  .top-actions .session-card{
    width:auto!important;
    max-width:100%!important;
  }
}

@media (max-width:560px){
  .topbar{
    margin-left:0!important;
    margin-right:0!important;
    border-radius:18px!important;
  }
  .topbar h2{
    font-size:24px!important;
  }
  .top-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .top-actions .btn,
  .top-actions .session-card{
    width:100%!important;
    justify-content:center!important;
  }
  .session-card b,
  .session-card span{
    max-width:180px!important;
  }
}