/* ==========================================================
   Portal Monagas — Gestor visual definitivo de menús / overlays
   2026-08-13 rev.3
   Esta hoja se carga al final y unifica navegación, búsqueda,
   bot y drawer administrativo sin mezclar modelos antiguos.
   ========================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%}
body.portal-overlay-open{overflow:hidden!important;overscroll-behavior:none!important}

/* Barra superior limpia: conserva información útil y elimina iconografía decorativa. */
.topbar .topbar-left>span,
.topbar .topbar-right>a,
.topbar .topbar-right>.top-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
}
.topbar .topbar-left i,
.topbar .topbar-right i{display:none!important}

@media (max-width:900px){
  .topbar .topbar-right>a,
  .topbar .topbar-right>.top-link{font-size:.68rem!important;min-width:0!important;white-space:nowrap!important}
}

/* Contextos de pintura previsibles. */
.topbar{isolation:isolate;z-index:41000!important}
.header{isolation:isolate;z-index:40900!important}
#chatAssistant{isolation:isolate}

/* ==========================================================
   NAVEGACIÓN PÚBLICA
   ========================================================== */
@media (max-width:1240px){
  .main-nav{
    position:fixed!important;
    z-index:43020!important;
    top:calc(var(--portal-fixed-header-height,110px) + 8px)!important;
    right:8px!important;
    bottom:8px!important;
    left:auto!important;
    display:flex!important;
    width:min(390px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--portal-fixed-header-height,110px) - 16px)!important;
    flex:0 0 auto!important;
    flex-direction:column!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(115,191,229,.30)!important;
    border-radius:22px!important;
    background:#f9fcfe!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:0 24px 70px rgba(5,31,48,.30)!important;
    transform:translate3d(calc(100% + 24px),0,0)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .16s ease,visibility 0s linear .22s!important;
    contain:layout paint!important;
    overscroll-behavior:contain!important;
  }
  body.mobile-nav-open .main-nav,
  .main-nav.is-open{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .16s ease,visibility 0s!important;
  }

  body.mobile-nav-open::before{display:none!important}
  body.mobile-nav-open::after{
    content:""!important;
    position:fixed!important;
    z-index:43000!important;
    inset:var(--portal-fixed-header-height,110px) 0 0 0!important;
    display:block!important;
    background:rgba(3,20,32,.36)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    backdrop-filter:blur(2px)!important;
    pointer-events:auto!important;
  }

  .mobile-nav-head{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-height:62px!important;
    padding:11px 13px!important;
    border-bottom:1px solid #e1edf4!important;
    background:#f5fafe!important;
  }
  .mobile-nav-head>div{min-width:0!important}
  .mobile-nav-head strong{display:block!important;color:#0d5f91!important;font-size:.95rem!important;line-height:1.2!important}
  .mobile-nav-head span{display:block!important;margin-top:2px!important;color:#6f818d!important;font-size:.72rem!important;line-height:1.2!important}
  .mobile-nav-close{
    display:grid!important;
    place-items:center!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid #d9e8f0!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#0d5f91!important;
    box-shadow:none!important;
  }

  #nav.nav,#nav.nav.open{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    flex:1 1 auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:6px!important;
    margin:0!important;
    padding:10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
  }
  #nav li{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
  #nav .nav-link{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    padding:11px 13px!important;
    border-radius:13px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-align:left!important;
  }
  #nav .nav-link i{display:inline-flex!important;flex:0 0 20px!important;width:20px!important;justify-content:center!important}
  #nav .nav-link span{min-width:0!important;overflow-wrap:anywhere!important}

  .mobile-nav-tools{
    display:grid!important;
    flex:0 0 auto!important;
    gap:8px!important;
    padding:10px 11px max(11px,env(safe-area-inset-bottom))!important;
    border-top:1px solid #e1edf4!important;
    background:#fff!important;
  }
  .mobile-nav-tools .btn{width:100%!important;min-height:44px!important;justify-content:center!important}

  #hambBtn,#searchOpen{position:relative!important;z-index:43100!important}
}

@media (min-width:1241px){
  body.mobile-nav-open{overflow-y:auto!important}
  body.mobile-nav-open::before,body.mobile-nav-open::after{display:none!important}
  .main-nav{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:1 1 auto!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    contain:none!important;
  }
  #nav.nav,#nav.nav.open{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    max-height:none!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  .mobile-nav-head,.mobile-nav-tools{display:none!important}
}

/* ==========================================================
   BÚSQUEDA — modal único, siempre dentro del viewport
   ========================================================== */
.search-modal{
  position:fixed!important;
  z-index:60000!important;
  inset:0!important;
  display:grid!important;
  place-items:start center!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  background:rgba(3,20,32,.58)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .16s ease,visibility 0s linear .16s!important;
  isolation:isolate!important;
}
.search-modal.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity .16s ease,visibility 0s!important;
}
.search-panel{
  position:relative!important;
  inset:auto!important;
  width:min(680px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 36px)!important;
  margin:min(14vh,110px) auto 0!important;
  padding:20px!important;
  overflow:auto!important;
  border:1px solid rgba(112,190,228,.25)!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#163345!important;
  box-shadow:0 28px 80px rgba(1,22,37,.34)!important;
  transform:translateY(-8px) scale(.985)!important;
  opacity:.98!important;
  transition:transform .16s ease,opacity .16s ease!important;
}
.search-modal.open .search-panel{transform:translateY(0) scale(1)!important;opacity:1!important}
.search-panel .modal-title-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
.search-panel .modal-title-row h2{min-width:0!important;margin:0!important;line-height:1.2!important}
#searchClose{flex:0 0 auto!important;white-space:nowrap!important}
.search-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
.search-row input{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
}
.search-row button{min-height:48px!important;white-space:nowrap!important}
body.portal-search-open{overflow:hidden!important}

@media (max-width:620px){
  .topbar-right>a,.topbar-right>.top-link{font-size:.66rem!important;padding:6px 7px!important;min-width:0!important}
  .topbar-right>a{max-width:136px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .search-modal{padding:10px!important;place-items:start stretch!important}
  .search-panel{width:100%!important;margin:max(8px,env(safe-area-inset-top)) 0 0!important;padding:15px!important;border-radius:17px!important;max-height:calc(100dvh - 20px)!important}
  .search-panel .modal-title-row{align-items:flex-start!important}
  #searchClose{min-width:42px!important;width:42px!important;height:42px!important;padding:0!important;font-size:0!important}
  #searchClose i{font-size:1rem!important}
  .search-row{grid-template-columns:1fr!important}
  .search-row button{width:100%!important}
}

/* ==========================================================
   BOT — panel dentro de viewport y sin desbordes entre categorías
   ========================================================== */
#chatAssistant .chat-window{box-sizing:border-box!important;overscroll-behavior:contain!important}
#chatAssistant .chat-action-groups,#chatAssistant .chat-body{min-width:0!important;scrollbar-gutter:stable}
#chatAssistant .chat-action-group,#chatAssistant .chat-suggestions,#chatAssistant .chat-suggestion{min-width:0!important;max-width:100%!important}
#chatAssistant .chat-suggestion{overflow:hidden!important}
#chatAssistant .chat-suggestion i{flex-shrink:0!important}
@media (min-width:721px){
  #chatAssistant .chat-window.bot-auto-position{position:fixed!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
  #chatAssistant .chat-action-groups{overflow-x:hidden!important;overflow-y:auto!important}
}
@media (max-width:720px){
  #chatAssistant .chat-window,
  #chatAssistant .chat-window.bot-auto-position{
    position:fixed!important;
    z-index:50020!important;
    inset:8px 8px max(8px,env(safe-area-inset-bottom)) 8px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(100dvh - 16px)!important;
    margin:0!important;
    transform:none!important;
  }
  #chatAssistant .chat-window.open{display:flex!important;flex-direction:column!important}
  #chatAssistant .chat-action-groups{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.chat-mobile-open::after{
    content:"";
    position:fixed;
    z-index:49990;
    inset:0;
    background:rgba(3,20,32,.30);
    pointer-events:none;
  }
}

/* ==========================================================
   ADMIN — un solo drawer móvil
   ========================================================== */
@media (max-width:1000px){
  .admin-page .sidebar{
    position:fixed!important;
    z-index:62020!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(330px,calc(100vw - 22px))!important;
    max-width:calc(100vw - 22px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translate3d(calc(-100% - 18px),0,0)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .16s ease,visibility 0s linear .22s!important;
    contain:layout paint!important;
    overscroll-behavior:contain!important;
  }
  .admin-page.admin-menu-open .sidebar,
  .admin-page .sidebar.is-open{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .16s ease,visibility 0s!important;
  }
  .admin-sidebar-backdrop{
    position:fixed!important;
    z-index:62000!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    background:rgba(3,20,32,.40)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .16s ease,visibility 0s linear .16s!important;
  }
  .admin-page.admin-menu-open .admin-sidebar-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:opacity .16s ease,visibility 0s!important;
  }
  .admin-page.admin-menu-open{overflow:hidden!important}
  .admin-page .sidebar-nav,.admin-page .sidebar-group,.admin-page .sidebar a{min-width:0!important;max-width:100%!important}
  .admin-page .sidebar a span{min-width:0!important;overflow-wrap:anywhere!important}
  .admin-page .admin-mobile-bar{position:relative!important;z-index:100!important}
}
@media (min-width:1001px){
  .admin-page .sidebar{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .admin-sidebar-backdrop{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .main-nav,.search-modal,.search-panel,.admin-page .sidebar,.admin-sidebar-backdrop{transition:none!important}
}

/* ==========================================================
   CELULARES — el viewport comienza directamente en el header.
   La topbar institucional se conserva en tablet/PC, pero en
   teléfonos se oculta COMPLETA (iconos + textos + espacio).
   ========================================================== */
@media (max-width:720px){
  .topbar{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .header{
    top:0!important;
  }
}

/* ==========================================================
   REV.3 — MÓVIL: capas corregidas + drawers visibles
   Corrige el stacking context del header: el backdrop nunca
   puede volver a quedar por encima de las opciones del menú.
   ========================================================== */
.header{z-index:45000!important}
@media (max-width:1240px){
  body.mobile-nav-open::after{
    z-index:44000!important;
  }
  .main-nav{
    z-index:20!important;
  }
  body.mobile-nav-open .main-nav,
  .main-nav.is-open{
    isolation:isolate!important;
  }
  body.mobile-nav-open #nav,
  body.mobile-nav-open #nav.nav,
  body.mobile-nav-open #nav.nav.open,
  .main-nav.is-open #nav{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  body.mobile-nav-open #nav>li,
  .main-nav.is-open #nav>li{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.mobile-nav-open #nav .nav-link,
  .main-nav.is-open #nav .nav-link{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    color:#163345!important;
    background:#fff!important;
    border:1px solid #e3eef4!important;
  }
  body.mobile-nav-open #nav .nav-link.active,
  .main-nav.is-open #nav .nav-link.active{
    color:#0b6699!important;
    background:#edf8fd!important;
    border-color:#cde9f6!important;
  }
}

/* En celular la topbar no existe: el drawer empieza justo debajo del header real. */
@media (max-width:720px){
  .main-nav{
    top:calc(var(--portal-header-height,72px) + 6px)!important;
    right:8px!important;
    bottom:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--portal-header-height,72px) - 14px)!important;
    border-radius:18px!important;
  }
  body.mobile-nav-open::after{
    inset:var(--portal-header-height,72px) 0 0 0!important;
  }
  #nav.nav,#nav.nav.open{
    padding:8px!important;
    gap:5px!important;
  }
  #nav .nav-link{
    min-height:46px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    font-size:.9rem!important;
  }
  .mobile-nav-head{
    min-height:56px!important;
    padding:8px 10px!important;
  }
  .mobile-nav-tools{
    padding:8px 9px max(9px,env(safe-area-inset-bottom))!important;
  }
}

/* ==========================================================
   REV.3 — BÚSQUEDA MÓVIL
   Se abre debajo del header y no compite con hamburguesa/bot.
   ========================================================== */
@media (max-width:720px){
  .search-modal{
    z-index:60000!important;
    inset:var(--portal-header-height,72px) 0 0 0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:8px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:auto!important;
    background:rgba(3,20,32,.46)!important;
  }
  .search-panel{
    width:100%!important;
    max-width:640px!important;
    max-height:calc(100dvh - var(--portal-header-height,72px) - 16px)!important;
    margin:0!important;
    padding:14px!important;
    overflow:auto!important;
    border-radius:16px!important;
  }
  .search-panel .modal-title-row{
    align-items:center!important;
    margin-bottom:12px!important;
  }
  .search-panel .modal-title-row h2{
    font-size:1.05rem!important;
  }
  .search-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .search-row input,
  .search-row button{
    width:100%!important;
    min-height:46px!important;
  }
}

/* ==========================================================
   REV.3 — ASISTENTE MÓVIL
   Panel estable: sin coordenadas heredadas ni recortes.
   ========================================================== */
@media (max-width:720px){
  #chatAssistant{z-index:52000!important}
  #chatAssistant .chat-window,
  #chatAssistant .chat-window.bot-auto-position,
  #chatAssistant .chat-window.open{
    position:fixed!important;
    z-index:52020!important;
    top:auto!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    height:min(560px,calc(100dvh - var(--portal-header-height,72px) - 16px))!important;
    min-height:360px!important;
    max-height:calc(100dvh - var(--portal-header-height,72px) - 16px)!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:18px!important;
    transform:none!important;
  }
  #chatAssistant.open .chat-window,
  #chatAssistant .chat-window.open{
    display:flex!important;
    flex-direction:column!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  #chatAssistant .chat-head{
    grid-template-columns:36px minmax(0,1fr) 38px!important;
    padding:9px 10px!important;
  }
  #chatAssistant .chat-head img{width:32px!important;height:38px!important}
  #chatAssistant .chat-head strong{font-size:12.5px!important}
  #chatAssistant .chat-head span{font-size:9px!important}
  #chatAssistant .chat-body{
    flex:0 0 auto!important;
    min-height:58px!important;
    max-height:110px!important;
    overflow:auto!important;
    padding:8px 10px!important;
  }
  #chatAssistant .chat-help-text{padding:6px 9px!important}
  #chatAssistant .chat-desktop-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    padding:7px 8px!important;
  }
  #chatAssistant .chat-desktop-tab{
    min-height:38px!important;
    flex-direction:row!important;
    gap:5px!important;
    padding:6px 7px!important;
    font-size:10px!important;
  }
  #chatAssistant .chat-action-groups{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:8px 9px 10px!important;
  }
  #chatAssistant .chat-action-group.is-pc-active{
    display:block!important;
    width:100%!important;
  }
  #chatAssistant .chat-suggestions{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  #chatAssistant .chat-suggestion{
    min-height:42px!important;
    padding:8px 9px!important;
    font-size:10.5px!important;
    overflow:visible!important;
  }
  #chatAssistant.open .chat-btn{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.chat-mobile-open::after{
    z-index:51000!important;
    inset:var(--portal-header-height,72px) 0 0!important;
    background:rgba(3,20,32,.34)!important;
    pointer-events:none!important;
  }
}

@media (max-width:390px){
  #chatAssistant .chat-window,
  #chatAssistant .chat-window.bot-auto-position,
  #chatAssistant .chat-window.open{
    right:5px!important;
    left:5px!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
    min-height:330px!important;
  }
  .main-nav{right:5px!important;left:5px!important;bottom:5px!important}
}

/* El header no puede crear un containing block para el drawer fixed. */
@media (max-width:1240px){
  .header,
  .header.ux-scrolled,
  body.portal-neon-ready .header{
    transform:none!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    animation:none!important;
    contain:none!important;
    will-change:auto!important;
  }
}