/* v6.1 - mobile fixes: menu, trámites cards, events width, popup warning */

/* Mobile menu: force proper dropdown behavior */
body.ji-v53-clean .ji-clean-navline__inner,
body.ji-v54-dashboard .ji-clean-navline__inner{
  position:relative!important;
  overflow:visible!important;
}
@media (max-width: 920px){
  body.ji-v53-clean .ji-menu-toggle,
  body.ji-v54-dashboard .ji-menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:52px!important;
    height:52px!important;
    padding:.6rem!important;
    border-radius:10px!important;
    background:transparent!important;
    position:relative!important;
    z-index:30!important;
  }
  body.ji-v53-clean .ji-clean-nav,
  body.ji-v54-dashboard .ji-clean-nav,
  body.ji-v53-clean .ji-main-nav,
  body.ji-v54-dashboard .ji-main-nav{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 1px)!important;
    z-index:25!important;
    display:none!important;
    background:#ffffff!important;
    border-top:1px solid #e3e7ea!important;
    box-shadow:0 16px 34px rgba(0,0,0,.12)!important;
    border-radius:0 0 18px 18px!important;
  }
  body.ji-v53-clean .ji-main-nav.is-open,
  body.ji-v54-dashboard .ji-main-nav.is-open{
    display:block!important;
  }
  body.ji-v53-clean .ji-main-nav > ul,
  body.ji-v54-dashboard .ji-main-nav > ul{
    display:block!important;
    padding:.6rem!important;
    margin:0!important;
  }
  body.ji-v53-clean .ji-main-nav > ul > li,
  body.ji-v54-dashboard .ji-main-nav > ul > li{
    display:block!important;
  }
  body.ji-v53-clean .ji-main-nav > ul > li > a,
  body.ji-v54-dashboard .ji-main-nav > ul > li > a{
    display:block!important;
    padding:.95rem 1rem!important;
    border-radius:12px!important;
    color:#173d4a!important;
    font-size:1rem!important;
    font-weight:800!important;
    text-transform:none!important;
  }
  body.ji-v53-clean .ji-main-nav--mega>ul>li+li>a:before,
  body.ji-v54-dashboard .ji-main-nav--mega>ul>li+li>a:before{
    display:none!important;
    content:none!important;
  }
}

/* Trámites cards: readable single-column layout on phones */
@media (max-width: 767px){
  .ji-tramite-grid,
  .ji-tramite-grid--own,
  .ji-tramite-grid--external{
    grid-template-columns:1fr!important;
    gap:1rem!important;
  }
  .ji-tramite-grid .ji-unified-card{
    min-width:0!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__top{
    padding:1rem 1.1rem .25rem!important;
    font-size:.92rem!important;
    line-height:1.2!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__body{
    padding:.15rem 1.1rem 1rem!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__body h3{
    font-size:1.35rem!important;
    line-height:1.18!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__body p{
    font-size:1rem!important;
    line-height:1.55!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__footer{
    padding:.95rem 1rem 1rem!important;
  }
  #tramites .ji-unified-card--independencia-service .ji-unified-card__footer a{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:46px!important;
    font-size:.92rem!important;
  }
}

/* Events: on mobile each event should use the whole width */
@media (max-width: 767px){
  .ji-events-carousel__track{
    grid-auto-columns:100%!important;
    gap:.9rem!important;
    padding-right:0!important;
  }
  .ji-event-tile{
    min-height:auto!important;
    width:100%!important;
  }
  .ji-event-tile__link{
    min-height:0!important;
  }
  .ji-event-tile__actions{
    justify-content:space-between!important;
  }
  .ji-event-tile__actions a{
    flex:1 1 auto!important;
    justify-content:center!important;
  }
}

/* Popup-blocker notice */
.ji-external-link-modal__hint{
  margin:.15rem 0 0!important;
  padding:.8rem .95rem!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  border:1px solid #d9e3ea!important;
  color:#4b5563!important;
  font-size:.95rem!important;
}
@media (max-width: 560px){
  .ji-external-link-modal__dialog{
    width:min(92vw, 100%)!important;
    padding:1.2rem!important;
  }
  .ji-external-link-modal__actions{
    flex-direction:column!important;
  }
  .ji-external-link-modal__actions .ji-btn{
    width:100%!important;
    justify-content:center!important;
  }
}