/* ==========================================================
   TuEdu360 App Mobile Layer
   Fase 1: ajustes exclusivos para móvil/WebView.
   IMPORTANTE: todo está dentro de media queries para no mover escritorio.
   ========================================================== */

.app-bottom-nav{
  display:none;
}

@media (max-width: 768px){
  :root{
    --app-bottom-nav-h:72px;
  }

  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }

  body{
    padding-bottom:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    background:#f4f6f9;
  }

  body.overflow-hidden{
    overflow:hidden;
  }

  .container{
    width:calc(100% - 24px) !important;
    max-width:100% !important;
  }

  img, video, iframe{
    max-width:100%;
  }

  input, select, textarea, button{
    font-size:16px;
  }

  .site-header{
    position:sticky;
    top:0;
    z-index:900;
  }

  .topbar-yellow{
    display:none;
  }

  .header-main{
    padding:8px 0 !important;
  }

  .header-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:center !important;
  }

  .brand{
    justify-content:center !important;
    min-height:52px !important;
    gap:10px !important;
  }

  .brand-logo{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
  }

  .brand-logo img{
    padding:6px !important;
  }

  .brand-text strong{
    font-size:24px !important;
  }

  .brand-text span{
    font-size:11px !important;
  }

  .header-icons{
    display:none !important;
  }

  .searchbar{
    grid-template-columns:1fr !important;
    border-radius:16px !important;
    box-shadow:0 8px 20px rgba(15,23,42,.10) !important;
  }

  .search-category,
  .searchbar input,
  .search-submit{
    min-height:46px !important;
  }

  .search-category{
    border-right:0 !important;
    border-bottom:1px solid #edf1f5 !important;
  }

  .main-nav-wrap{
    background:#fff !important;
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
  }

  .main-nav{
    padding:8px 0 !important;
  }

  .mobile-nav-head{
    display:flex !important;
    justify-content:flex-end !important;
    width:100% !important;
  }

  .mobile-menu-btn{
    width:46px !important;
    height:42px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#111 !important;
    color:#fff !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  .main-menu{
    width:100% !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    margin-top:8px !important;
    background:#fff !important;
    border:1px solid #edf1f5 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    box-shadow:0 14px 28px rgba(15,23,42,.10) !important;
  }

  .main-menu.open{
    display:flex !important;
  }

  .main-menu a{
    width:100% !important;
    padding:14px 16px !important;
    border-bottom:1px solid #edf1f5 !important;
    color:#111827 !important;
  }

  .main-menu a:last-child{
    border-bottom:0 !important;
  }

  .main-menu a.active::after{
    display:none !important;
  }

  .nav-cta{
    display:none !important;
  }

  .hero-slider,
  .hero-section,
  .home-hero,
  .usuario-hero,
  .inst-hero,
  .detail-hero{
    border-radius:0 0 24px 24px !important;
  }

  .hero-slider{
    min-height:430px !important;
  }

  .hero-content{
    padding:32px 20px 28px !important;
  }

  .hero-content h1,
  .login-side h1,
  .section-title h2,
  .detail-info-panel h1{
    font-size:clamp(27px, 8vw, 34px) !important;
    line-height:1.08 !important;
  }

  .home-search-hero,
  .login-card,
  .login-side,
  .usuario-card,
  .inst-card,
  .search-shell,
  .schools-card,
  .detail-info-panel,
  .module-card{
    border-radius:18px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
  }

  .home-search-grid,
  .login-wrap,
  .usuario-grid,
  .inst-grid,
  .listing-layout,
  .detail-layout,
  .dashboard-grid,
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  .quick-categories,
  .marketplace-category-grid,
  .benefits-grid,
  .promo-grid,
  .school-grid,
  .program-grid,
  .cards-grid,
  .kpi-grid,
  .stats-grid{
    grid-template-columns:1fr !important;
  }

  .institution-rail,
  .usuario-rail,
  .home-horizontal-scroll,
  .carousel-row{
    display:flex !important;
    overflow-x:auto !important;
    gap:14px !important;
    padding-bottom:10px !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .institution-rail::-webkit-scrollbar,
  .usuario-rail::-webkit-scrollbar,
  .home-horizontal-scroll::-webkit-scrollbar,
  .carousel-row::-webkit-scrollbar{
    height:0;
  }

  .institution-rail-card,
  .usuario-school-card,
  .home-horizontal-card,
  .carousel-card{
    min-width:82% !important;
    scroll-snap-align:start;
  }

  .table-responsive,
  .inst-table-wrap,
  .admin-table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  table{
    min-width:720px;
  }

  .app-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    min-height:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:6px;
    background:rgba(255,255,255,.96);
    border-top:1px solid rgba(15,23,42,.10);
    box-shadow:0 -12px 30px rgba(15,23,42,.12);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .app-bottom-nav__item{
    min-width:0;
    min-height:56px;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#64748b;
    font-weight:800;
    text-decoration:none;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }

  .app-bottom-nav__item:active{
    transform:scale(.97);
  }

  .app-bottom-nav__item.is-active{
    background:linear-gradient(135deg, rgba(21,126,210,.13), rgba(236,214,14,.22));
    color:#0f172a;
  }

  .app-bottom-nav__icon{
    height:24px;
    display:grid;
    place-items:center;
    font-size:20px;
    line-height:1;
  }

  .app-bottom-nav__label{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10.5px;
    line-height:1;
  }

  .chatbot-widget,
  .chatbot-launcher,
  .tuedu360-chatbot,
  .chatbot-fab{
    bottom:calc(var(--app-bottom-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 769px){
  body{
    padding-bottom:0 !important;
  }
}

@media (max-width: 480px){
  .container{
    width:calc(100% - 18px) !important;
  }

  .institution-rail-card,
  .usuario-school-card,
  .home-horizontal-card,
  .carousel-card{
    min-width:88% !important;
  }

  .app-bottom-nav{
    gap:4px;
    padding-left:6px;
    padding-right:6px;
  }

  .app-bottom-nav__item{
    border-radius:14px;
  }
}

/* ==========================================================
   Fase 2: Dashboard usuario tipo App/WebView
   Solo móvil. Escritorio queda intacto.
   ========================================================== */
@media (max-width: 768px){
  body.usuario-dashboard-body{
    background:linear-gradient(180deg,#f7fbff 0%,#eef3f8 100%) !important;
    padding-bottom:calc(var(--app-bottom-nav-h) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .usuario-dashboard-body .usuario-shell{
    display:block !important;
    min-height:100vh !important;
  }

  .usuario-dashboard-body .usuario-sidebar{
    display:none !important;
  }

  .usuario-dashboard-body .usuario-main{
    width:100% !important;
    max-width:100% !important;
    padding:12px 12px 22px !important;
    overflow:hidden !important;
  }

  .usuario-dashboard-body .usuario-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:890 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 -12px 12px !important;
    padding:12px 12px 10px !important;
    background:rgba(247,251,255,.96) !important;
    border-bottom:1px solid rgba(15,23,42,.07) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .usuario-dashboard-body .usuario-topbar-left h1{
    font-size:22px !important;
    line-height:1.12 !important;
    margin:0 !important;
    letter-spacing:-.02em !important;
  }

  .usuario-dashboard-body .usuario-topbar-left p{
    font-size:12.5px !important;
    line-height:1.45 !important;
    margin:4px 0 0 !important;
  }

  .usuario-dashboard-body .usuario-topbar-right{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    align-items:center !important;
  }

  .usuario-dashboard-body .usuario-search{
    width:100% !important;
    min-width:0 !important;
  }

  .usuario-dashboard-body .usuario-search input{
    min-height:46px !important;
    border-radius:16px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
  }

  .usuario-dashboard-body .usuario-pill-btn{
    min-height:44px !important;
    border-radius:15px !important;
    padding:0 13px !important;
    font-size:13px !important;
    box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
  }

  .usuario-dashboard-body .usuario-pill-btn:not(.primary){
    display:none !important;
  }

  .usuario-dashboard-body .usuario-hero{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin:12px 0 14px !important;
    padding:22px 18px !important;
    border-radius:24px !important;
    box-shadow:0 16px 32px rgba(15,23,42,.14) !important;
  }

  .usuario-dashboard-body .usuario-hero h2{
    font-size:28px !important;
    line-height:1.06 !important;
    margin-bottom:8px !important;
  }

  .usuario-dashboard-body .usuario-hero p{
    font-size:13.5px !important;
    line-height:1.65 !important;
  }

  .usuario-dashboard-body .usuario-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:14px !important;
  }

  .usuario-dashboard-body .usuario-btn{
    min-height:44px !important;
    border-radius:14px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
  }

  .usuario-dashboard-body .usuario-hero-side{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .usuario-dashboard-body .usuario-hero-mini{
    padding:13px !important;
    border-radius:16px !important;
  }

  .usuario-dashboard-body .usuario-hero-mini strong{
    font-size:22px !important;
  }

  .usuario-dashboard-body .usuario-hero-mini span{
    font-size:11.5px !important;
    line-height:1.2 !important;
  }

  .usuario-dashboard-body .usuario-status-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:12px 0 14px !important;
  }

  .usuario-dashboard-body .usuario-status-card,
  .usuario-dashboard-body .usuario-personal-card{
    padding:16px !important;
    border-radius:20px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  }

  .usuario-dashboard-body .usuario-status-card h3,
  .usuario-dashboard-body .usuario-personal-card h3{
    font-size:18px !important;
    margin-bottom:7px !important;
  }

  .usuario-dashboard-body .usuario-status-card p,
  .usuario-dashboard-body .usuario-personal-card p{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .usuario-dashboard-body .usuario-interest-tags{
    gap:7px !important;
    margin-top:10px !important;
  }

  .usuario-dashboard-body .usuario-interest-tag{
    min-height:30px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .usuario-dashboard-body .usuario-categories{
    display:flex !important;
    grid-template-columns:none !important;
    gap:10px !important;
    margin:0 -12px 14px !important;
    padding:0 12px 6px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .usuario-dashboard-body .usuario-categories::-webkit-scrollbar{
    display:none !important;
  }

  .usuario-dashboard-body .usuario-category-card{
    min-width:112px !important;
    padding:13px 10px !important;
    border-radius:18px !important;
    scroll-snap-align:start !important;
  }

  .usuario-dashboard-body .usuario-category-icon{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    font-size:21px !important;
    margin-bottom:7px !important;
  }

  .usuario-dashboard-body .usuario-category-card strong{
    font-size:12px !important;
  }

  .usuario-dashboard-body .usuario-actions-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:10px !important;
    margin:0 -12px 14px !important;
    padding:0 12px 6px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .usuario-dashboard-body .usuario-actions-grid::-webkit-scrollbar{
    display:none !important;
  }

  .usuario-dashboard-body .usuario-action-card{
    min-width:235px !important;
    max-width:235px !important;
    padding:15px !important;
    border-radius:20px !important;
    scroll-snap-align:start !important;
  }

  .usuario-dashboard-body .usuario-action-icon{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    font-size:21px !important;
    margin-bottom:10px !important;
  }

  .usuario-dashboard-body .usuario-action-card h4{
    font-size:16px !important;
    margin-bottom:6px !important;
  }

  .usuario-dashboard-body .usuario-action-card p{
    font-size:12.5px !important;
    line-height:1.5 !important;
  }

  .usuario-dashboard-body .usuario-kpi-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-bottom:18px !important;
  }

  .usuario-dashboard-body .usuario-kpi{
    border-radius:20px !important;
    padding:15px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  }

  .usuario-dashboard-body .usuario-kpi small{
    font-size:10px !important;
    margin-bottom:6px !important;
  }

  .usuario-dashboard-body .usuario-kpi strong{
    font-size:28px !important;
    margin-bottom:6px !important;
  }

  .usuario-dashboard-body .usuario-kpi span{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  .usuario-dashboard-body .usuario-section{
    margin-bottom:22px !important;
  }

  .usuario-dashboard-body .usuario-section-head{
    align-items:flex-end !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }

  .usuario-dashboard-body .usuario-section-head h3{
    font-size:19px !important;
    line-height:1.15 !important;
  }

  .usuario-dashboard-body .usuario-section-head p{
    font-size:12px !important;
    line-height:1.35 !important;
    margin-top:4px !important;
  }

  .usuario-dashboard-body .usuario-section-link{
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .usuario-dashboard-body .usuario-carousel-wrap{
    margin:0 -12px !important;
  }

  .usuario-dashboard-body .usuario-carousel{
    gap:12px !important;
    padding:0 12px 8px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .usuario-dashboard-body .usuario-card{
    min-width:82vw !important;
    max-width:82vw !important;
    border-radius:22px !important;
    scroll-snap-align:start !important;
    box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
  }

  .usuario-dashboard-body .usuario-card-media{
    height:164px !important;
  }

  .usuario-dashboard-body .usuario-badge{
    top:12px !important;
    left:12px !important;
    max-width:68% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .usuario-dashboard-body .usuario-fav-btn{
    top:12px !important;
    right:12px !important;
    width:40px !important;
    height:40px !important;
  }

  .usuario-dashboard-body .usuario-card-body{
    padding:14px !important;
  }

  .usuario-dashboard-body .usuario-card-meta{
    gap:6px !important;
    margin-bottom:9px !important;
  }

  .usuario-dashboard-body .usuario-card-meta span{
    font-size:10.5px !important;
    padding:5px 8px !important;
    max-width:100% !important;
  }

  .usuario-dashboard-body .usuario-card h4{
    min-height:auto !important;
    font-size:17px !important;
    line-height:1.18 !important;
    margin-bottom:7px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .usuario-dashboard-body .usuario-card p{
    min-height:42px !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .usuario-dashboard-body .usuario-card-price{
    margin-top:10px !important;
  }

  .usuario-dashboard-body .usuario-card-price strong{
    font-size:17px !important;
  }

  .usuario-dashboard-body .usuario-card-actions{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }

  .usuario-dashboard-body .usuario-card-actions a,
  .usuario-dashboard-body .usuario-card-actions button{
    min-height:42px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  .usuario-dashboard-body .usuario-arrow{
    display:none !important;
  }

  .usuario-dashboard-body .usuario-empty{
    padding:20px 16px !important;
    border-radius:18px !important;
    font-size:13px !important;
  }

  .usuario-dashboard-body .usuario-toast-wrap{
    top:auto !important;
    right:10px !important;
    left:10px !important;
    bottom:calc(var(--app-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
  }

  .usuario-dashboard-body .usuario-toast{
    border-radius:18px !important;
    padding:12px 14px !important;
  }
}

@media (max-width: 420px){
  .usuario-dashboard-body .usuario-card{
    min-width:88vw !important;
    max-width:88vw !important;
  }

  .usuario-dashboard-body .usuario-hero-actions{
    grid-template-columns:1fr !important;
  }

  .usuario-dashboard-body .usuario-kpi-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ==========================================================
   Ajuste Fase 2.1: tarjetas del carrusel más compactas en móvil
   Corrige imágenes demasiado grandes en dashboard-usuario.php
   ========================================================== */
@media (max-width: 768px){
  .usuario-dashboard-body .usuario-carousel{
    gap:10px !important;
    padding:0 12px 8px !important;
  }

  .usuario-dashboard-body .usuario-card{
    min-width:72vw !important;
    max-width:72vw !important;
    border-radius:18px !important;
  }

  .usuario-dashboard-body .usuario-card-media{
    height:112px !important;
  }

  .usuario-dashboard-body .usuario-card-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .usuario-dashboard-body .usuario-badge{
    top:9px !important;
    left:9px !important;
    padding:6px 9px !important;
    font-size:10.5px !important;
    border-radius:999px !important;
  }

  .usuario-dashboard-body .usuario-fav-btn{
    top:9px !important;
    right:9px !important;
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }

  .usuario-dashboard-body .usuario-card-body{
    padding:11px !important;
  }

  .usuario-dashboard-body .usuario-card-meta{
    margin-bottom:7px !important;
  }

  .usuario-dashboard-body .usuario-card-meta span{
    font-size:9.8px !important;
    padding:4px 7px !important;
  }

  .usuario-dashboard-body .usuario-card h4{
    font-size:15px !important;
    line-height:1.18 !important;
    margin-bottom:5px !important;
    -webkit-line-clamp:1 !important;
  }

  .usuario-dashboard-body .usuario-card p{
    min-height:34px !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    -webkit-line-clamp:2 !important;
  }

  .usuario-dashboard-body .usuario-card-price{
    margin-top:7px !important;
  }

  .usuario-dashboard-body .usuario-card-price strong{
    font-size:15px !important;
  }

  .usuario-dashboard-body .usuario-card-price span{
    font-size:10.5px !important;
  }

  .usuario-dashboard-body .usuario-card-actions{
    gap:7px !important;
    margin-top:9px !important;
  }

  .usuario-dashboard-body .usuario-card-actions a,
  .usuario-dashboard-body .usuario-card-actions button{
    min-height:37px !important;
    border-radius:12px !important;
    font-size:11.5px !important;
  }
}

@media (max-width: 420px){
  .usuario-dashboard-body .usuario-card{
    min-width:74vw !important;
    max-width:74vw !important;
  }

  .usuario-dashboard-body .usuario-card-media{
    height:105px !important;
  }
}

/* ==========================================================
   Ajuste Fase 2: Asistente flotante arriba del menú móvil.
   Evita que el botón del chatbot tape la navegación inferior.
   ========================================================== */
@media (max-width: 768px){
  .tedu-chatbot,
  .chatbot-widget,
  .chatbot-launcher,
  .tuedu360-chatbot,
  .chatbot-fab{
    bottom:calc(var(--app-bottom-nav-h, 72px) + 22px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:9998 !important;
  }

  .tedu-chatbot{
    right:12px !important;
    left:auto !important;
    width:auto !important;
    display:flex !important;
    justify-content:flex-end !important;
  }

  .tedu-chatbot-toggle{
    width:54px !important;
    height:54px !important;
    font-size:22px !important;
    box-shadow:0 12px 26px rgba(13,110,253,.26) !important;
  }

  .tedu-chatbot-panel{
    bottom:calc(var(--app-bottom-nav-h, 72px) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    height:calc(100vh - var(--app-bottom-nav-h, 72px) - 34px) !important;
    max-height:74vh !important;
  }
}

/* ==========================================================
   Ajuste Fase 2: index.php compacto en móvil/WebView.
   Controla imágenes y evita desbordes horizontales sin afectar escritorio.
   ========================================================== */
@media (max-width: 768px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .page-content,
  .main-layout,
  .mart-layout,
  .sidebar,
  .content-area,
  .widget,
  .widget-body,
  .offer-showcase,
  .hot-deals-wrap,
  .hot-deals-main,
  .hot-deals-side{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  .main-layout.mart-layout{
    gap:14px !important;
  }

  .sidebar .widget{
    padding:0 !important;
    border-radius:16px !important;
  }

  .sidebar .widget-header{
    padding:14px 14px 10px !important;
  }

  .sidebar .widget-header h3{
    font-size:17px !important;
    line-height:1.2 !important;
  }

  .sidebar .widget-body{
    padding:10px 14px 16px !important;
  }

  .featured-card{
    padding:10px !important;
    border-radius:15px !important;
  }

  .featured-image-wrap{
    height:118px !important;
    border-radius:12px !important;
  }

  .featured-image-wrap img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  .discount-badge{
    width:38px !important;
    height:38px !important;
    top:8px !important;
    right:8px !important;
    font-size:9px !important;
  }

  .featured-info h4{
    margin:10px 0 6px !important;
    font-size:15px !important;
  }

  .mini-meta{
    gap:6px !important;
  }

  .mini-meta span,
  .school-meta-top span,
  .listing-micro span{
    min-height:22px !important;
    padding:0 8px !important;
    font-size:10.5px !important;
  }

  .stars{
    font-size:12px !important;
  }

  .featured-actions,
  .school-actions,
  .highlight-actions,
  .deal-actions,
  .offer-banner-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .featured-actions a,
  .school-actions a,
  .highlight-actions a,
  .deal-actions a,
  .offer-banner-actions a,
  .newsletter-form button{
    width:100% !important;
    min-height:40px !important;
    font-size:11.5px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .top-mini-item{
    grid-template-columns:46px 1fr !important;
  }

  .top-mini-item img{
    width:46px !important;
    height:46px !important;
    border-radius:10px !important;
  }

  .newsletter-widget p,
  .mini-note{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

  .newsletter-form input{
    height:40px !important;
    border-radius:12px !important;
  }

  .offer-banner,
  .offer-banner.primary,
  .offer-banner-school{
    padding:22px 18px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  .offer-badge{
    font-size:10px !important;
    padding:8px 12px !important;
    max-width:100% !important;
  }

  .offer-banner h3{
    font-size:24px !important;
    line-height:1.12 !important;
    max-width:100% !important;
    word-break:normal !important;
  }

  .offer-banner p{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }

  .offer-banner-points{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .offer-banner-points span{
    width:100% !important;
    justify-content:center !important;
    min-height:34px !important;
    font-size:11px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .offer-mini-grid,
  .offer-mini-grid-clear{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .offer-mini-card{
    padding:14px !important;
    border-radius:14px !important;
  }

  .hot-deals-main,
  .hot-deals-side{
    padding:14px !important;
    border-radius:16px !important;
  }

  .deal-card,
  .deal-gallery{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .deal-thumb-list{
    grid-template-columns:repeat(4,1fr) !important;
    gap:8px !important;
  }

  .deal-mini-thumb{
    padding:4px !important;
  }

  .deal-mini-thumb img{
    height:44px !important;
    object-fit:cover !important;
  }

  .deal-main-image img{
    width:100% !important;
    height:145px !important;
    min-height:0 !important;
    object-fit:cover !important;
    display:block !important;
  }

  .deal-info h3{
    font-size:20px !important;
    line-height:1.2 !important;
  }

  .deal-info p{
    font-size:13px !important;
    line-height:1.5 !important;
  }

  .school-thumb img,
  .highlight-thumb img,
  .promo-card img{
    width:100% !important;
    height:135px !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }
}

@media (max-width: 420px){
  .featured-image-wrap{
    height:105px !important;
  }

  .deal-main-image img,
  .school-thumb img,
  .highlight-thumb img,
  .promo-card img{
    height:122px !important;
  }

  .offer-banner h3{
    font-size:22px !important;
  }
}

/* ==========================================================
   Ajuste Fase 2: eliminar doble scroll en index/móvil.
   Deja un solo scroll general del navegador/WebView.
   ========================================================== */
@media (max-width: 768px){
  html{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .site-header{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .header-main,
  .header-grid,
  .main-nav-wrap,
  .main-nav,
  .page-content,
  .page-content > .container,
  .main-layout,
  .mart-layout,
  .sidebar,
  .content-area,
  .widget,
  .widget-body{
    height:auto !important;
    max-height:none !important;
    overflow-y:visible !important;
    box-sizing:border-box !important;
  }

  .main-nav-wrap{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .main-nav{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .mobile-nav-head{
    position:static !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    height:auto !important;
    display:flex !important;
    justify-content:flex-end !important;
    padding:0 !important;
    z-index:1002 !important;
  }

  .main-menu{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    max-height:none !important;
    overflow-y:visible !important;
  }

  .main-menu.open{
    display:flex !important;
  }

  .mini-slider,
  .featured-card,
  .top-mini-list,
  .newsletter-widget,
  .offer-showcase,
  .hot-deals-wrap,
  .school-grid,
  .promo-grid,
  .highlight-grid{
    height:auto !important;
    max-height:none !important;
    overflow-y:visible !important;
  }

  .main-layout.mart-layout{
    display:block !important;
  }
}

/* ==========================================================
   Ajuste Fase 2.2: corrección fuerte de múltiples scrollbars en móvil/WebView.
   Objetivo: que solo exista el desplazamiento natural de la página.
   Nota: en celular real el usuario desplaza con el dedo; por eso ocultamos barras
   visuales de scroll en contenedores que antes mostraban una segunda barra.
   ========================================================== */
@media (max-width: 768px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100% !important;
    overflow-x:clip !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  body{
    position:relative !important;
  }

  /* Contenedores principales: nunca deben crear scroll vertical interno */
  .site-header,
  .header-main,
  .header-grid,
  .main-nav-wrap,
  .main-nav,
  .main-menu,
  .page-content,
  .page-content > .container,
  .main-layout,
  .mart-layout,
  .sidebar,
  .content-area,
  .widget,
  .widget-body,
  .mini-slider,
  .featured-card,
  .top-mini-list,
  .newsletter-widget,
  .offer-showcase,
  .hot-deals-wrap,
  .hot-deals-main,
  .hot-deals-side,
  .institutions-home-panel,
  .institution-group-block,
  .school-grid,
  .promo-grid,
  .highlight-grid,
  .footer-grid{
    max-height:none !important;
    height:auto !important;
    overflow-y:visible !important;
    overflow-x:clip !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .site-header::-webkit-scrollbar,
  .header-main::-webkit-scrollbar,
  .header-grid::-webkit-scrollbar,
  .main-nav-wrap::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar,
  .main-menu::-webkit-scrollbar,
  .page-content::-webkit-scrollbar,
  .page-content > .container::-webkit-scrollbar,
  .main-layout::-webkit-scrollbar,
  .mart-layout::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .content-area::-webkit-scrollbar,
  .widget::-webkit-scrollbar,
  .widget-body::-webkit-scrollbar,
  .mini-slider::-webkit-scrollbar,
  .featured-card::-webkit-scrollbar,
  .top-mini-list::-webkit-scrollbar,
  .newsletter-widget::-webkit-scrollbar,
  .offer-showcase::-webkit-scrollbar,
  .hot-deals-wrap::-webkit-scrollbar,
  .hot-deals-main::-webkit-scrollbar,
  .hot-deals-side::-webkit-scrollbar,
  .institutions-home-panel::-webkit-scrollbar,
  .institution-group-block::-webkit-scrollbar,
  .school-grid::-webkit-scrollbar,
  .promo-grid::-webkit-scrollbar,
  .highlight-grid::-webkit-scrollbar,
  .footer-grid::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  /* Rieles horizontales: permiten deslizar de lado, pero sin barra vertical ni barra visible */
  .institution-rail-wrap,
  .institution-rail,
  .usuario-carousel,
  .usuario-categories,
  .usuario-actions-grid,
  .home-horizontal-scroll,
  .carousel-row{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .institution-rail-wrap::-webkit-scrollbar,
  .institution-rail::-webkit-scrollbar,
  .usuario-carousel::-webkit-scrollbar,
  .usuario-categories::-webkit-scrollbar,
  .usuario-actions-grid::-webkit-scrollbar,
  .home-horizontal-scroll::-webkit-scrollbar,
  .carousel-row::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  /* El menú inferior y el chatbot son fijos, no deben aportar scroll propio a la página */
  .app-bottom-nav,
  .tedu-chatbot,
  .tedu-chatbot-toggle{
    overflow:visible !important;
  }

  /* Solo el panel abierto del chatbot puede tener scroll interno para sus mensajes */
  .tedu-chatbot-panel,
  .tedu-chatbot-body,
  .search-dropdown-menu{
    scrollbar-width:thin !important;
    -ms-overflow-style:auto !important;
  }
}


/* =========================================================
   FASE 4 - Login, registro y selección tipo app móvil
   Solo aplica en celular/WebView. Escritorio conserva diseño.
   ========================================================= */
@media (max-width: 768px){
  body{
    overflow-x:hidden !important;
  }

  /* Páginas de acceso */
  .login-page,
  .registro-page{
    padding:12px 0 calc(var(--app-bottom-nav-h, 72px) + 26px) !important;
    background:#eef3f8 !important;
  }

  .login-page > .container,
  .registro-page > .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .login-wrap,
  .registro-wrap{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  /* Hero informativo compacto */
  .login-side,
  .registro-side{
    border-radius:22px !important;
    min-height:auto !important;
    padding:22px 18px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.10) !important;
  }

  .login-side-badge,
  .registro-side-badge{
    min-height:28px !important;
    padding:0 12px !important;
    font-size:10px !important;
    margin-bottom:12px !important;
  }

  .login-side h1,
  .registro-side h1{
    font-size:26px !important;
    line-height:1.08 !important;
    margin-bottom:10px !important;
    letter-spacing:-.4px !important;
  }

  .login-side p,
  .registro-side p{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }

  .login-feature-list,
  .registro-side-features{
    display:none !important;
  }

  .login-side-stats,
  .registro-side-stats{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .login-stat,
  .registro-stat{
    padding:10px 8px !important;
    border-radius:14px !important;
  }

  .login-stat strong,
  .registro-stat strong{
    font-size:19px !important;
    margin-bottom:4px !important;
  }

  .login-stat span,
  .registro-stat span{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  /* Tarjeta de formulario */
  .login-card,
  .registro-card{
    border-radius:22px !important;
    padding:18px 14px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
    overflow:hidden !important;
  }

  .login-brand{
    margin-bottom:16px !important;
    gap:10px !important;
  }

  .login-brand .brand-logo{
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  .login-brand .brand-text strong{
    font-size:21px !important;
  }

  .login-brand .brand-text span{
    font-size:12px !important;
  }

  .login-card-head,
  .registro-card-head{
    margin-bottom:16px !important;
  }

  .login-card-head h2,
  .registro-card-head h2{
    font-size:25px !important;
    line-height:1.08 !important;
    letter-spacing:-.3px !important;
  }

  .login-card-head p,
  .registro-card-head p{
    font-size:13.5px !important;
    line-height:1.5 !important;
  }

  .login-form,
  .registro-form{
    gap:13px !important;
  }

  .registro-grid-2,
  .login-register-grid,
  .registro-actions{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .login-group label,
  .registro-group label{
    font-size:13px !important;
    margin-bottom:6px !important;
  }

  .login-group input,
  .registro-group input,
  .registro-group select,
  .registro-group textarea{
    min-height:47px !important;
    border-radius:14px !important;
    font-size:16px !important; /* evita zoom automático en iPhone */
    padding-left:13px !important;
    padding-right:13px !important;
  }

  .registro-group textarea{
    min-height:86px !important;
  }

  .login-options{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    font-size:13px !important;
  }

  .login-btn-main,
  .login-btn-alt,
  .registro-btn-main,
  .registro-btn-alt{
    width:100% !important;
    min-height:48px !important;
    border-radius:15px !important;
    font-size:11px !important;
    letter-spacing:.45px !important;
  }

  .login-register-card{
    min-height:58px !important;
    border-radius:16px !important;
    padding:12px !important;
  }

  .login-register-card strong{
    font-size:13px !important;
  }

  .login-register-card span{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .registro-check{
    align-items:flex-start !important;
    gap:10px !important;
    padding:12px !important;
    border:1px solid #e6ebf2 !important;
    background:#f9fbfd !important;
    border-radius:14px !important;
  }

  .registro-check span,
  .registro-mini-note,
  .login-footer{
    font-size:12.5px !important;
    line-height:1.55 !important;
  }

  .alert-box{
    border-radius:14px !important;
    font-size:13px !important;
    padding:11px 12px !important;
  }

  /* Selector de tipo de registro */
  .selector-main{
    align-items:flex-start !important;
    padding:16px 12px calc(var(--app-bottom-nav-h, 72px) + 26px) !important;
  }

  .selector-wrap{
    width:100% !important;
  }

  .selector-top{
    text-align:left !important;
    margin-bottom:16px !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    background:#fff !important;
    border:1px solid #e8edf3 !important;
    box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
  }

  .selector-badge{
    min-height:28px !important;
    padding:0 12px !important;
    font-size:10px !important;
    margin-bottom:10px !important;
  }

  .selector-top h1{
    font-size:27px !important;
    line-height:1.08 !important;
    margin-bottom:9px !important;
    letter-spacing:-.4px !important;
  }

  .selector-top p{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }

  .selector-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .selector-card{
    border-radius:22px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
  }

  .selector-card:hover{
    transform:none !important;
  }

  .selector-card-head{
    padding:20px 16px 16px !important;
  }

  .selector-icon{
    width:52px !important;
    height:52px !important;
    border-radius:16px !important;
    font-size:24px !important;
    margin-bottom:12px !important;
  }

  .selector-card-head h2{
    font-size:24px !important;
    margin-bottom:8px !important;
  }

  .selector-card-head p{
    font-size:13.5px !important;
    line-height:1.5 !important;
  }

  .selector-card-body{
    padding:16px !important;
  }

  .selector-list{
    gap:9px !important;
    margin-bottom:16px !important;
  }

  .selector-list li{
    padding:11px !important;
    border-radius:15px !important;
    gap:10px !important;
  }

  .selector-list-icon{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    border-radius:11px !important;
    font-size:14px !important;
  }

  .selector-list strong{
    font-size:13.5px !important;
  }

  .selector-list span{
    font-size:12.5px !important;
    line-height:1.4 !important;
  }

  .selector-btn,
  .selector-btn-outline{
    width:100% !important;
    min-height:48px !important;
    border-radius:15px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   FASE 5 - escuelas.php tipo buscador app / marketplace móvil
   Estos estilos solo aplican en móvil/WebView.
========================================================= */
@media (max-width: 768px){
  body.mobile-filters-open{
    overflow:hidden !important;
  }

  .listing-page-wrap{
    padding:12px 0 calc(var(--app-bottom-nav-h, 72px) + 30px) !important;
  }

  .listing-page-wrap .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }

  .hero-listing-banner{
    border-radius:22px !important;
    padding:20px 16px !important;
    margin:0 0 12px !important;
    box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
  }

  .hero-listing-banner h1{
    font-size:28px !important;
    line-height:1.08 !important;
    margin-bottom:9px !important;
    letter-spacing:-.5px !important;
  }

  .hero-listing-banner p{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .hero-mini-stats{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:14px !important;
  }

  .hero-mini-stats article{
    border-radius:16px !important;
    padding:11px 8px !important;
    text-align:center !important;
  }

  .hero-mini-stats strong{
    font-size:19px !important;
    line-height:1 !important;
  }

  .hero-mini-stats span{
    font-size:10.5px !important;
    line-height:1.25 !important;
  }

  .breadcrumb-bar{
    display:none !important;
  }

  .mobile-listing-toolbar{
    position:sticky !important;
    top:0 !important;
    z-index:60 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:9px !important;
    align-items:center !important;
    margin:10px 0 12px !important;
    padding:8px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid #e6ebf2 !important;
    box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .mobile-listing-search{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
    height:46px !important;
    padding:0 12px !important;
    border-radius:16px !important;
    background:#f8fafc !important;
    border:1px solid #dde6ef !important;
  }

  .mobile-listing-search-icon{
    flex:0 0 auto !important;
    font-size:16px !important;
    opacity:.75 !important;
  }

  .mobile-listing-search input{
    width:100% !important;
    min-width:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#111827 !important;
    font-size:16px !important;
    font-family:inherit !important;
  }

  .mobile-filter-btn{
    height:46px !important;
    border:0 !important;
    border-radius:16px !important;
    padding:0 13px !important;
    background:#111827 !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
    box-shadow:0 8px 18px rgba(15,23,42,.16) !important;
  }

  .mobile-filter-backdrop{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.46) !important;
    z-index:9990 !important;
  }

  body.mobile-filters-open .mobile-filter-backdrop{
    display:block !important;
  }

  .listing-layout-fixed{
    display:block !important;
  }

  .listing-layout-fixed > aside{
    display:block !important;
  }

  .listing-sidebar-box{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-height:88vh !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    z-index:9995 !important;
    border-radius:28px 28px 0 0 !important;
    padding:17px 15px calc(var(--app-bottom-nav-h, 72px) + 18px) !important;
    border:1px solid #e6ebf2 !important;
    box-shadow:0 -18px 42px rgba(15,23,42,.24) !important;
    transform:translateY(110%) !important;
    transition:transform .24s ease !important;
    background:#fff !important;
  }

  body.mobile-filters-open .listing-sidebar-box{
    transform:translateY(0) !important;
  }

  .mobile-filter-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:12px !important;
    padding-bottom:10px !important;
    border-bottom:1px solid #eef2f7 !important;
  }

  .mobile-filter-head h3,
  .listing-sidebar-box h3{
    margin:0 !important;
    font-size:22px !important;
    line-height:1.1 !important;
  }

  .mobile-filter-close{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    border:1px solid #e2e8f0 !important;
    background:#f8fafc !important;
    color:#111827 !important;
    font-size:25px !important;
    line-height:1 !important;
    display:grid !important;
    place-items:center !important;
  }

  .filter-group-fixed{
    margin-bottom:12px !important;
  }

  .filter-group-fixed label{
    font-size:12.5px !important;
    margin-bottom:6px !important;
  }

  .filter-group-fixed input[type="text"],
  .filter-group-fixed select{
    min-height:48px !important;
    border-radius:15px !important;
    font-size:16px !important;
    background:#f8fafc !important;
  }

  .check-row{
    min-height:46px !important;
    border-radius:15px !important;
    padding:10px 12px !important;
    background:#f8fafc !important;
    border:1px solid #e6ebf2 !important;
    margin-bottom:9px !important;
  }

  .filter-buttons{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  .btn-block-dark,
  .btn-block-light{
    min-height:48px !important;
    border-radius:15px !important;
    font-size:11.5px !important;
  }

  .listing-stats-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 0 12px !important;
  }

  .listing-stat-box{
    border-radius:18px !important;
    padding:12px 8px !important;
    text-align:center !important;
  }

  .listing-stat-box strong{
    font-size:18px !important;
    line-height:1 !important;
  }

  .listing-stat-box span{
    font-size:10.5px !important;
    line-height:1.2 !important;
  }

  .listing-head-box{
    border-radius:20px !important;
    padding:15px !important;
    margin-bottom:12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  .listing-head-box h2{
    font-size:22px !important;
    margin-bottom:5px !important;
  }

  .listing-head-box p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .mini-chip-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:7px !important;
    margin-top:10px !important;
    padding-bottom:2px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .mini-chip-row::-webkit-scrollbar{ display:none !important; }

  .mini-chip{
    flex:0 0 auto !important;
    min-height:28px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }

  .sort-box{
    min-width:0 !important;
    width:100% !important;
  }

  .sort-box select{
    width:100% !important;
    min-height:46px !important;
    border-radius:15px !important;
    font-size:16px !important;
  }

  .listing-results-loading{
    border-radius:16px !important;
    padding:10px 12px !important;
    margin-bottom:10px !important;
    background:#eef6ff !important;
    font-size:13px !important;
  }

  .listing-cards-fixed{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .listing-card-fixed{
    display:grid !important;
    grid-template-columns:116px minmax(0,1fr) !important;
    border-radius:20px !important;
    box-shadow:0 8px 20px rgba(15,23,42,.07) !important;
    min-height:152px !important;
  }

  .listing-card-fixed:hover{
    transform:none !important;
  }

  .listing-card-thumb{
    height:100% !important;
    min-height:152px !important;
    border-radius:20px 0 0 20px !important;
  }

  .listing-card-thumb img{
    object-fit:cover !important;
  }

  .card-tag-fixed{
    top:8px !important;
    left:8px !important;
    min-height:24px !important;
    padding:0 8px !important;
    font-size:9.5px !important;
  }

  .listing-fav-btn{
    top:8px !important;
    right:8px !important;
    width:34px !important;
    height:34px !important;
    font-size:16px !important;
  }

  .listing-card-body{
    min-width:0 !important;
    padding:12px 12px 13px !important;
  }

  .meta-row{
    flex-wrap:nowrap !important;
    gap:5px !important;
    overflow-x:auto !important;
    margin-bottom:7px !important;
    padding-bottom:1px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .meta-row::-webkit-scrollbar{ display:none !important; }

  .meta-row span{
    flex:0 0 auto !important;
    min-height:23px !important;
    padding:0 8px !important;
    font-size:9.5px !important;
  }

  .listing-card-body h3{
    min-height:0 !important;
    margin-bottom:6px !important;
    font-size:16px !important;
    line-height:1.18 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .stars{
    margin-bottom:6px !important;
    font-size:12px !important;
  }

  .price-line-fixed{
    gap:2px !important;
    margin-bottom:7px !important;
  }

  .price-current-fixed{
    font-size:13px !important;
    line-height:1.2 !important;
  }

  .price-old-fixed{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  .listing-card-body p{
    min-height:0 !important;
    margin-bottom:10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .listing-actions-fixed{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  .listing-actions-fixed .btn-main,
  .listing-actions-fixed .btn-alt,
  .listing-actions-fixed button{
    min-height:38px !important;
    border-radius:12px !important;
    font-size:10.5px !important;
    padding:0 7px !important;
    letter-spacing:.1px !important;
  }

  .listing-actions-fixed > :nth-child(3){
    display:none !important;
  }

  .pagination-wrap{
    margin-top:14px !important;
    padding-bottom:10px !important;
  }

  .pagination-wrap a,
  .pagination-wrap span{
    min-width:38px !important;
    height:38px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }

  .empty-box{
    border-radius:20px !important;
    padding:18px 16px !important;
    font-size:13px !important;
  }

  .listing-toast-wrap{
    top:12px !important;
    right:10px !important;
    left:10px !important;
    width:auto !important;
    z-index:10020 !important;
  }

  .listing-toast{
    border-radius:18px !important;
    padding:12px !important;
  }

  .contact-modal-dialog{
    width:100% !important;
    max-width:100% !important;
    max-height:88vh !important;
    overflow-y:auto !important;
    border-radius:28px 28px 0 0 !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    transform:none !important;
    padding:20px 16px calc(var(--app-bottom-nav-h, 72px) + 20px) !important;
  }

  .contact-modal.open .contact-modal-dialog{
    animation:mobileSheetUp .22s ease both !important;
  }

  @keyframes mobileSheetUp{
    from{ transform:translateY(105%); }
    to{ transform:translateY(0); }
  }

  .contact-form-modal .form-row,
  .contact-form-modal .modal-actions{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .contact-form-modal input,
  .contact-form-modal textarea{
    font-size:16px !important;
    border-radius:15px !important;
  }
}

@media (min-width: 769px){
  .mobile-listing-toolbar,
  .mobile-filter-backdrop,
  .mobile-filter-close{
    display:none !important;
  }
}