/* ==========================================================
   Portal Monagas — Paridad PC / Móvil
   Misma identidad visual, mismos efectos y mismas funciones.
   La adaptación móvil cambia distribución, NO elimina la experiencia.
   ========================================================== */

@media (max-width:900px){
  :root{
    --portal-mobile-vh:100dvh;
  }

  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
  }
  body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
    font-family:'Poppins',Arial,sans-serif;
    -webkit-text-size-adjust:100%;
  }

  /* Nunca se usa un overlay de carga bloqueante. */
  #portalLoader,.portal-loader{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html.portal-loading,
  html.portal-loading body{overflow-y:auto!important}
  html.portal-loading body>*{visibility:visible!important}

  .container{
    width:min(100% - 24px,1180px);
    max-width:100%;
    margin-inline:auto;
  }

  img,video,iframe,svg,canvas{
    max-width:100%;
  }
  img,video{height:auto}

  /* Conserva gradientes, sombras, blur, partículas y neón. */
  .portal-particles{
    pointer-events:none!important;
    contain:strict;
  }
  .portal-particles canvas{
    display:block;
    width:100%;
    height:100%;
  }
  .portal-scroll-progress{will-change:transform}
  .neon-section-sweep{pointer-events:none}

  /* Header responsive con la misma estética institucional. */
  .topbar{
    min-height:38px;
    height:auto;
    background:linear-gradient(90deg,#061725,#0b2a40);
  }
  .topbar-inner{
    min-height:38px;
    padding:5px 12px;
    gap:8px;
  }
  .topbar-left{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  .topbar-left>span:first-child{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.68rem;
  }
  .topbar-left>span:nth-child(2){display:none}
  .topbar-right{
    flex:0 0 auto;
    gap:5px;
  }
  .topbar-right a,
  .topbar-right .top-link{
    min-width:34px;
    min-height:30px;
    padding:6px 8px;
    border-radius:10px;
  }
  .topbar-right a{
    font-size:0;
  }
  .topbar-right a i{font-size:.78rem}
  .topbar-right .top-link{
    font-size:0;
  }
  .topbar-right .top-link i{font-size:.78rem}

  .header{
    min-height:72px;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .header-inner{
    min-height:72px;
    padding:8px 12px;
    gap:9px;
    flex-wrap:nowrap;
  }
  .brand{
    min-width:0;
    max-width:min(50vw,205px);
  }
  .brand img{
    width:auto;
    max-width:100%;
    max-height:54px;
    object-fit:contain;
  }
  .header-actions{
    margin-left:auto;
    flex:0 0 auto;
    gap:7px;
  }
  .header-actions .btn{
    min-width:42px;
    min-height:42px;
    padding:9px 11px;
    border-radius:14px;
  }
  .header-actions .header-access{display:none!important}
  #hambBtn,#searchOpen{display:inline-flex!important}

  /* Drawer móvil: mismo contenido, estética del PC y todas las funciones. */
  .main-nav{
    position:fixed!important;
    z-index:40020!important;
    top:var(--portal-fixed-header-height)!important;
    right:10px!important;
    bottom:10px!important;
    left:auto!important;
    display:flex!important;
    width:min(390px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    height:auto!important;
    min-height:0!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:1px solid rgba(135,210,245,.30)!important;
    border-radius:24px!important;
    background:rgba(248,252,255,.96)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    backdrop-filter:blur(16px)!important;
    box-shadow:0 24px 68px rgba(4,32,52,.28),0 0 24px rgba(19,120,185,.08)!important;
    transform:translateX(calc(100% + 24px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility .2s step-end!important;
  }
  body.mobile-nav-open .main-nav{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s ease!important;
  }
  body.mobile-nav-open{overflow:hidden!important}
  body.mobile-nav-open::after{
    content:"";
    position:fixed;
    z-index:39990;
    inset:var(--portal-fixed-header-height) 0 0;
    background:rgba(4,24,38,.28);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .mobile-nav-head{
    display:flex!important;
    flex:0 0 auto;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:62px;
    padding:12px 14px;
    border-bottom:1px solid rgba(19,120,185,.12);
    background:linear-gradient(135deg,#eef8fd,#f8fcff);
  }
  .mobile-nav-head strong{
    display:block;
    color:#0d5f91;
    font-size:.96rem;
  }
  .mobile-nav-head span{
    display:block;
    margin-top:2px;
    color:#667b89;
    font-size:.72rem;
    font-weight:700;
  }
  .mobile-nav-close{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid #d7e8f1;
    border-radius:13px;
    background:#fff;
    color:#0d5f91;
  }
  #nav.nav{
    position:static!important;
    display:flex!important;
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    max-height:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:12px!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  #nav .nav-link{
    display:flex!important;
    width:100%!important;
    min-height:48px;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    padding:12px 14px!important;
    border-radius:15px!important;
    white-space:normal!important;
    text-align:left!important;
    line-height:1.25!important;
  }
  #nav .nav-link i{
    display:inline-flex!important;
    width:20px;
    flex:0 0 20px;
    justify-content:center;
  }
  .mobile-nav-tools{
    display:grid!important;
    flex:0 0 auto;
    gap:8px;
    padding:10px 12px max(12px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(19,120,185,.12);
    background:rgba(255,255,255,.92);
  }
  .mobile-nav-tools .btn{
    width:100%;
    min-height:44px;
    justify-content:center;
  }

  /* Layout: mismo diseño, ajustado a una sola columna donde no cabe. */
  main,
  #contenido,
  main>section,
  main section{
    min-width:0;
    max-width:100%;
  }
  .grid,.grid-2,.grid-3,.grid-4,.grid-5,
  .cards-grid,.news-grid,.projects-grid,.systems-grid,.secretarias-grid,
  .home-gallery-strip,.service-list{
    min-width:0!important;
    grid-template-columns:1fr!important;
  }
  .card,.panel,.service-item,.featured-news-card,.system-card,.secretaria-card,
  .direction-item,.project-card,.news-card,.info-item{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Hero conserva carrusel y efectos. */
  .home-hero{
    min-height:clamp(560px,78vh,760px);
  }
  .home-hero-content{
    width:100%;
    max-width:100%;
  }
  .home-hero-grid,
  .home-hero-content>.container{
    min-width:0;
  }
  .home-hero h1{
    font-size:clamp(2rem,10vw,3.2rem);
    line-height:1.02;
  }
  .home-hero p{
    max-width:100%;
    font-size:clamp(.92rem,3.7vw,1.06rem);
  }
  .home-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
  }
  .home-hero-actions .btn{
    flex:1 1 180px;
    min-height:46px;
  }
  .home-hero-side-card,
  .home-float-card{
    max-width:calc(100% - 24px)!important;
  }

  /* Formularios y textos sin cortes. */
  input,select,textarea,button{
    max-width:100%;
  }
  input,select,textarea{
    font-size:16px;
  }
  .btn{
    white-space:normal;
  }

  /* Bot: MISMA interfaz del PC, adaptada al ancho móvil, no pantalla completa. */
  #chatAssistant{
    --bot-pc-panel-width:420px;
    z-index:52000!important;
  }
  #chatAssistant.user-positioned{
    position:fixed!important;
    right:auto!important;
    bottom:auto!important;
  }
  #chatAssistant .chat-btn{
    touch-action:none!important;
    cursor:grab!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
  #chatAssistant.bot-dragging .chat-btn{cursor:grabbing!important}

  #chatAssistant .chat-window,
  #chatAssistant .chat-window.bot-auto-position,
  #chatAssistant .chat-window.open{
    position:fixed!important;
    width:min(420px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(620px,calc(var(--portal-mobile-vh,100dvh) - 16px))!important;
    margin:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#0b1b29 0%,#08253a 100%)!important;
    border:1px solid rgba(156,226,255,.17)!important;
    box-shadow:0 24px 68px rgba(2,23,37,.34),0 0 24px rgba(41,190,255,.10)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
    transform:none!important;
  }
  #chatAssistant.open .chat-window,
  #chatAssistant .chat-window.open{
    display:flex!important;
    flex-direction:column!important;
  }
  #chatAssistant.open .chat-btn{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  #chatAssistant .chat-head{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 36px!important;
    align-items:center!important;
    gap:9px!important;
    padding:10px 11px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(135deg,#117db9,#0c638f)!important;
  }
  #chatAssistant .chat-head img{
    width:34px!important;
    height:42px!important;
    object-fit:contain!important;
  }
  #chatAssistant .chat-head strong{
    display:block!important;
    font-size:12.5px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #chatAssistant .chat-head span{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #chatAssistant .chat-close{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:11px!important;
  }
  #chatAssistant .chat-body{
    flex:0 0 auto!important;
    min-height:64px!important;
    max-height:118px!important;
    overflow-y:auto!important;
    padding:9px 11px 7px!important;
  }
  #chatAssistant .bubble{
    max-width:94%!important;
    font-size:11.5px!important;
    line-height:1.36!important;
    padding:8px 10px!important;
  }
  #chatAssistant .bubble-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:7px!important;
  }
  #chatAssistant .bubble-link{
    min-height:34px!important;
    padding:6px 7px!important;
    font-size:10px!important;
  }
  #chatAssistant .chat-help-text{
    flex:0 0 auto!important;
    margin:0!important;
    padding:7px 10px!important;
    font-size:9.5px!important;
    line-height:1.3!important;
  }
  #chatAssistant .chat-desktop-tabs{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    padding:7px 8px!important;
    background:rgba(0,0,0,.13)!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
  }
  #chatAssistant .chat-desktop-tab{
    min-width:0!important;
    min-height:44px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:5px 3px!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:transparent!important;
    color:rgba(225,246,255,.76)!important;
    font:inherit!important;
    font-size:8.8px!important;
    font-weight:700!important;
    line-height:1.08!important;
  }
  #chatAssistant .chat-desktop-tab.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,rgba(34,152,208,.24),rgba(38,161,207,.10))!important;
    border-color:rgba(126,221,255,.28)!important;
  }
  #chatAssistant .chat-action-groups{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:220px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:block!important;
    padding:8px 9px 10px!important;
    background:rgba(0,0,0,.05)!important;
  }
  #chatAssistant .chat-action-group{
    display:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
  }
  #chatAssistant .chat-action-group.is-pc-active{display:block!important}
  #chatAssistant .chat-group-title{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0 0 7px!important;
    color:#c8efff!important;
    font-size:10px!important;
    font-weight:800!important;
  }
  #chatAssistant .chat-suggestions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
  }
  #chatAssistant .chat-suggestion{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 8px!important;
    border:1px solid rgba(156,226,255,.10)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.045)!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1.2!important;
    text-align:left!important;
    white-space:normal!important;
  }
  #chatAssistant .chat-suggestion i{
    width:16px!important;
    flex:0 0 16px!important;
    text-align:center!important;
    color:#9ee5ff!important;
  }
  #chatAssistant .chat-nudge{
    max-width:min(260px,calc(100vw - 18px));
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  /* La misma animación de PC sigue activa; se reduce solo la distancia para evitar saltos visuales. */
  .ux-reveal{
    will-change:opacity,transform;
  }

  /* Tablas públicas: horizontal si realmente lo requieren, nunca cortadas. */
  .table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .search-panel{
    width:min(620px,calc(100vw - 20px));
    max-height:calc(var(--portal-mobile-vh,100dvh) - 20px);
    overflow-y:auto;
    border-radius:22px;
  }
}

@media (max-width:520px){
  .container{width:min(100% - 18px,1180px)}
  .home-hero h1{font-size:clamp(1.82rem,10.5vw,2.65rem)}
  #chatAssistant .chat-window,
  #chatAssistant .chat-window.bot-auto-position,
  #chatAssistant .chat-window.open{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(var(--portal-mobile-vh,100dvh) - 12px)!important;
  }
  #chatAssistant .chat-suggestions{grid-template-columns:1fr!important}
  #chatAssistant .bubble-actions{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Celulares: solo header principal; sin barra informativa superior. */
@media (max-width:720px){
  .topbar{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}
  .header{top:0!important}
}