/* =====================================================
   MOBILE FIX · BASE GENERAL
===================================================== */
@media (max-width:760px){

  body{
    overflow-x:hidden !important;
  }

  .main-content{
    padding:16px 14px 96px !important;
  }

/* NAV INFERIOR FIJO CON SCROLL HORIZONTAL */
@media (max-width:760px){

  .bottom-nav{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:10px !important;
  top:auto !important;
  width:calc(100vw - 20px) !important;
  max-width:calc(100vw - 20px) !important;
  height:64px !important;
  margin:0 !important;
  padding:7px !important;
  z-index:9999 !important;
  transform:translateX(-50%) !important;

  display:flex !important;
  gap:6px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch !important;
  box-sizing:border-box !important;
}

  .bottom-nav::-webkit-scrollbar{
  display:none !important;
}

  .bottom-nav button{
    flex:0 0 64px !important;
    width:64px !important;
    min-width:64px !important;
    height:50px !important;
    padding:4px 2px !important;
    border-radius:16px !important;
    scroll-snap-align:center !important;
  }

  .bottom-nav button.active{
    flex-basis:78px !important;
    width:78px !important;
    min-width:78px !important;
  }

  .bottom-nav button span{
    display:block !important;
    font-size:.6rem !important;
    line-height:1 !important;
  }

  .main-content{
    padding-bottom:96px !important;
  }
}

  /* FOOTER SUPERIOR DISCRETO */
  .app-footer,
.mobile-top-footer{
  position:relative !important;
  z-index:20 !important;
  width:calc(100% - 28px) !important;
  margin:4px auto 8px !important;
  padding:5px 10px !important;
  border-radius:14px !important;
  background:rgba(255,250,238,.58) !important;
  border:1px solid rgba(22,55,69,.08) !important;
  box-shadow:0 6px 14px rgba(22,55,69,.04) !important;
  backdrop-filter:blur(7px) !important;
  text-align:center !important;
  font-size:.62rem !important;
  line-height:1.15 !important;
  color:#607177 !important;
}

  .app-footer strong,
  .mobile-top-footer strong{
    display:inline !important;
    font-size:.68rem !important;
    color:#123949 !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }

  .app-footer span,
  .app-footer small,
  .mobile-top-footer span,
  .mobile-top-footer small{
    font-size:.64rem !important;
    color:#607177 !important;
  }
}

/* =====================================================
   MOBILE FIX · INICIO
===================================================== */
@media (max-width:760px){

  .hero{
    padding:18px 16px 16px !important;
    border-radius:0 0 26px 26px !important;
  }

  .hero-top{
    margin-bottom:14px !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .install-btn{
    display:none !important;
  }

  .hero .eyebrow{
    font-size:.72rem !important;
    letter-spacing:.14em !important;
    margin-bottom:4px !important;
  }

  .hero h1{
    font-size:2.55rem !important;
    line-height:.9 !important;
    margin:4px 0 2px !important;
    letter-spacing:-.03em !important;
  }

  .hero .subtitle{
    font-size:.8rem !important;
    line-height:1.15 !important;
  }

  #heroPeople{
    font-size:.7rem !important;
  }

  .dashboard-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  .dash-card{
    min-height:104px !important;
    padding:13px 10px !important;
    border-radius:20px !important;
    align-items:center !important;
    text-align:center !important;
  }

  .dash-card .sketch-icon{
    font-size:1.3rem !important;
    margin-bottom:4px !important;
  }

  .dash-card p{
    font-size:.7rem !important;
    line-height:1.05 !important;
    margin:0 0 5px !important;
  }

  .dash-card strong{
    font-size:.96rem !important;
    line-height:1.05 !important;
  }

  .dash-card small{
    font-size:.64rem !important;
    letter-spacing:.1em !important;
    line-height:1.1 !important;
  }

  .smart-rec-card{
    margin-top:12px !important;
    padding:14px !important;
    border-radius:22px !important;
    min-height:auto !important;
    display:grid !important;
    grid-template-columns:46px 1fr !important;
    gap:10px !important;
    align-items:center !important;
  }

  .smart-rec-icon{
    width:44px !important;
    height:44px !important;
    font-size:1.3rem !important;
  }

  .smart-rec-label{
    font-size:.7rem !important;
    letter-spacing:.13em !important;
  }

  .smart-rec-content h3{
    font-size:1.45rem !important;
    line-height:.95 !important;
  }

  .smart-rec-content span{
    font-size:.82rem !important;
    line-height:1.2 !important;
  }

  #view-home .section-title{
    gap:10px !important;
    margin:14px 0 12px !important;
    align-items:center !important;
  }

  #view-home .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.3rem !important;
  }

  #view-home .section-title h2{
    font-size:2.25rem !important;
    line-height:.9 !important;
  }

  #view-home .section-title p{
    font-size:.84rem !important;
    line-height:1.15 !important;
  }

  .today-card{
    min-height:auto !important;
    padding:18px 20px !important;
    border-radius:24px !important;
  }

  .today-card .label{
    font-size:.68rem !important;
    letter-spacing:.16em !important;
  }

  .today-card h3{
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  .today-card p{
    font-size:.88rem !important;
    line-height:1.25 !important;
  }

  .quick-actions{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }

  .weather-panel{
    padding:18px 20px !important;
    border-radius:24px !important;
    min-height:auto !important;
  }

  .weather-panel h3{
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  .weather-panel p{
    font-size:.86rem !important;
    line-height:1.25 !important;
  }

  .weather-actions{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:9px !important;
    margin-top:14px !important;
  }

  .weather-actions button{
    height:38px !important;
    min-height:38px !important;
    font-size:.76rem !important;
  }
}

/* =====================================================
   MOBILE FIX · DÍAS
===================================================== */
@media (max-width:760px){

  #view-days{
    padding-top:0 !important;
  }

  #view-days .section-title{
    margin:4px 0 10px !important;
    gap:10px !important;
    align-items:center !important;
  }

  #view-days .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-days .section-title h2{
    font-size:2.15rem !important;
    line-height:.9 !important;
  }

  #view-days .section-title p{
    font-size:.82rem !important;
    line-height:1.15 !important;
  }

  /* Cinta de días */
  .days-tabs{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    padding:9px !important;
    margin:6px 0 14px !important;
    border-radius:22px !important;
    background:rgba(255,250,238,.82) !important;
    border:1px solid rgba(22,55,69,.10) !important;
    box-shadow:0 10px 24px rgba(22,55,69,.08) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .days-tabs::-webkit-scrollbar{
    display:none !important;
  }

  .days-tabs button{
    flex:0 0 auto !important;
    min-width:86px !important;
    height:40px !important;
    padding:0 12px !important;
    border-radius:16px !important;
    font-size:.76rem !important;
    box-shadow:none !important;
  }

  .days-tabs button.active{
    min-width:96px !important;
    box-shadow:0 10px 22px rgba(22,55,69,.16) !important;
  }

  /* Cabecera del día */
  .day-hero-card{
    padding:17px 18px !important;
    border-radius:24px !important;
    min-height:auto !important;
    margin-bottom:12px !important;
  }

  .day-hero-card h3{
    font-size:1.78rem !important;
    line-height:.95 !important;
  }

  .day-hero-card p{
    font-size:.86rem !important;
    line-height:1.2 !important;
  }

  /* Cards */
  .day-grid{
    display:block !important;
    column-count:1 !important;
  }

  #view-days .note-card{
    margin-bottom:12px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  #view-days .day-section-head{
    min-height:48px !important;
    padding:11px 14px !important;
    gap:8px !important;
  }

  #view-days .day-section-head h4{
    font-size:1.34rem !important;
    line-height:1 !important;
  }

  #view-days .add-day-item-btn,
  #view-days .edit-tips-btn{
    height:32px !important;
    min-height:32px !important;
    padding:0 10px !important;
    border-radius:13px !important;
    font-size:.7rem !important;
  }

  #view-days .day-items{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:11px !important;
  }

  #view-days .day-item{
    min-height:48px !important;
    padding:9px 11px !important;
    border-radius:16px !important;
  }

  #view-days .day-item strong{
    font-size:1rem !important;
    line-height:1 !important;
  }

  #view-days .day-item small{
    font-size:.64rem !important;
    letter-spacing:.1em !important;
  }

  #view-days .empty-day-section{
    font-size:.84rem !important;
    padding:12px 14px !important;
  }

  #view-days .mini-action{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:13px !important;
  }
}
/* =====================================================
   MOBILE FIX · CINTA DÍAS + RUTA
===================================================== */
@media (max-width:760px){

  /* Cinta días más elegante */
  #view-days .days-tabs{
    position:relative !important;
    margin:4px 0 16px !important;
    padding:8px !important;
    border-radius:24px !important;
    background:rgba(255,250,238,.78) !important;
    border:1px solid rgba(22,55,69,.10) !important;
    box-shadow:0 12px 26px rgba(22,55,69,.08) !important;
  }

  #view-days .days-tabs button{
    min-width:92px !important;
    height:42px !important;
    border-radius:17px !important;
    font-size:.78rem !important;
    background:rgba(255,255,255,.88) !important;
  }

  #view-days .days-tabs button.active{
    min-width:104px !important;
    background:linear-gradient(135deg,#123949,#0f5b73) !important;
    color:#fff8e8 !important;
    box-shadow:0 10px 22px rgba(18,57,73,.18) !important;
  }

  /* RUTA */
  #view-route .section-title{
    margin:4px 0 14px !important;
    gap:10px !important;
    align-items:center !important;
  }

  #view-route .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-route .section-title h2{
    font-size:2.15rem !important;
    line-height:.9 !important;
  }

  #view-route .section-title p{
    font-size:.84rem !important;
    line-height:1.15 !important;
  }

  #view-route .route-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  #view-route .route-timeline-card{
    display:grid !important;
    grid-template-columns:48px 1fr !important;
    border-radius:24px !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  #view-route .timeline-left{
    padding:18px 0 !important;
  }

  #view-route .timeline-dot{
    width:38px !important;
    height:38px !important;
    border-radius:14px !important;
    font-size:1.15rem !important;
  }

  #view-route .timeline-line{
    min-height:54px !important;
  }

  #view-route .timeline-content{
    padding:16px 16px 18px !important;
  }

  #view-route .timeline-day{
    font-size:.68rem !important;
    letter-spacing:.16em !important;
    margin-bottom:4px !important;
  }

  #view-route .timeline-top h3{
    font-size:1.7rem !important;
    line-height:.95 !important;
    margin:0 0 8px !important;
  }

  #view-route .timeline-km{
    font-size:.68rem !important;
    padding:5px 10px !important;
    border-radius:999px !important;
  }

  #view-route .timeline-mood{
    font-size:.86rem !important;
    line-height:1.2 !important;
    margin-top:8px !important;
  }

  #view-route .route-steps{
    gap:6px !important;
    margin:9px 0 !important;
  }

  #view-route .route-steps span{
    min-height:24px !important;
    padding:0 9px !important;
    font-size:.66rem !important;
  }

  #view-route .timeline-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }

  #view-route .timeline-actions a,
  #view-route .timeline-actions button,
  #view-route .map-link{
    height:34px !important;
    min-height:34px !important;
    border-radius:13px !important;
    font-size:.72rem !important;
  }
}
/* =====================================================
   MOBILE FIX · HOTEL
===================================================== */
@media (max-width:760px){

  #view-hotels .section-title{
    margin:4px 0 12px !important;
    gap:10px !important;
  }

  #view-hotels .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-hotels .section-title h2{
    font-size:2.15rem !important;
    line-height:.9 !important;
  }

  #view-hotels .section-title p{
    font-size:.84rem !important;
    line-height:1.15 !important;
  }

  #view-hotels #addHotelBtn{
    height:36px !important;
    min-height:36px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    font-size:.74rem !important;
    margin:6px 0 12px !important;
  }

  #view-hotels .hotel-dashboard{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:9px !important;
    margin:10px 0 16px !important;
  }

  #view-hotels .hotel-dashboard article{
    min-height:68px !important;
    padding:10px 8px !important;
    border-radius:18px !important;
  }

  #view-hotels .hotel-dashboard strong{
    font-size:1.35rem !important;
  }

  #view-hotels .hotel-dashboard span{
    font-size:.58rem !important;
    letter-spacing:.13em !important;
  }

  #view-hotels .hotel-card-pro{
    border-radius:24px !important;
    margin-bottom:14px !important;
  }

  #view-hotels .hotel-top{
    grid-template-columns:38px 1fr 34px !important;
    gap:10px !important;
    padding:14px 15px 12px !important;
  }

  #view-hotels .hotel-icon{
    width:36px !important;
    height:36px !important;
    border-radius:13px !important;
    font-size:1rem !important;
  }

  #view-hotels .hotel-title h3{
    font-size:1.55rem !important;
    line-height:.95 !important;
  }

  #view-hotels .hotel-title p{
    font-size:.8rem !important;
    line-height:1.15 !important;
  }

  #view-hotels .hotel-fav{
    width:32px !important;
    height:32px !important;
  }

  #view-hotels .hotel-pills,
  #view-hotels .hotel-address,
  #view-hotels .hotel-notes,
  #view-hotels .hotel-actions{
    margin-left:15px !important;
    margin-right:15px !important;
  }

  #view-hotels .hotel-pills span{
    min-height:24px !important;
    padding:0 9px !important;
    font-size:.66rem !important;
  }

  #view-hotels .hotel-address,
  #view-hotels .hotel-notes{
    font-size:.84rem !important;
    line-height:1.25 !important;
  }

  #view-hotels .hotel-notes{
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  #view-hotels .hotel-actions{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:12px !important;
    margin-bottom:15px !important;
  }

  #view-hotels .hotel-actions button{
    height:34px !important;
    min-height:34px !important;
    border-radius:13px !important;
    font-size:.72rem !important;
  }
}
/* =====================================================
   MOBILE FIX · HOME CARDS + COMER
===================================================== */
@media (max-width:760px){

  /* Tarjetas superiores inicio */
  .dashboard-grid{
    gap:8px !important;
  }

  .dash-card{
    min-height:88px !important;
    padding:10px 9px !important;
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    align-items:center !important;
    text-align:left !important;
    gap:8px !important;
  }

  .dash-card .sketch-icon{
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    font-size:1.15rem !important;
    margin:0 !important;
  }

  .dash-card p{
    font-size:.66rem !important;
    line-height:1 !important;
    margin:0 0 4px !important;
  }

  .dash-card strong{
    font-size:.86rem !important;
    line-height:1.05 !important;
  }

  .dash-card small{
    font-size:.56rem !important;
    line-height:1.05 !important;
    letter-spacing:.08em !important;
  }

  .next-stop-card strong,
  #nextStopText{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    display:block !important;
    max-width:100% !important;
  }

  .smart-rec-card{
    grid-template-columns:42px 1fr !important;
    padding:12px !important;
  }

  .smart-rec-content h3{
    font-size:1.32rem !important;
  }

  /* COMER */
  #view-food .section-title{
    margin:4px 0 12px !important;
    gap:10px !important;
  }

  #view-food .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-food .section-title h2{
    font-size:2.15rem !important;
    line-height:.9 !important;
  }

  #view-food .section-title p{
    font-size:.84rem !important;
    line-height:1.15 !important;
  }

  #view-food #addRestaurantBtn{
    height:36px !important;
    min-height:36px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    font-size:.74rem !important;
    margin:6px 0 12px !important;
  }

  /* Filtros en cinta horizontal */
  #view-food .food-filters,
  #view-food .food-filter-row{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:7px 2px 8px !important;
    margin:0 0 8px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #view-food .food-filters::-webkit-scrollbar,
  #view-food .food-filter-row::-webkit-scrollbar{
    display:none !important;
  }

  #view-food [data-food-price],
  #view-food [data-food-tag]{
    flex:0 0 auto !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    font-size:.74rem !important;
    white-space:nowrap !important;
  }

  #view-food #foodResultsSummary{
    height:34px !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:15px !important;
    font-size:.74rem !important;
    margin:8px 0 12px !important;
  }

  #view-food .food-dashboard{
    grid-template-columns:repeat(2,1fr) !important;
    gap:9px !important;
    margin:10px 0 14px !important;
  }

  #view-food .food-stat{
    min-height:64px !important;
    padding:10px 8px !important;
    border-radius:18px !important;
  }

  #view-food .food-stat strong{
    font-size:1.28rem !important;
  }

  #view-food .food-stat span{
    font-size:.58rem !important;
    letter-spacing:.12em !important;
  }

  #view-food .food-zone-title{
    min-height:52px !important;
    padding:10px 14px !important;
    border-radius:20px !important;
  }

  #view-food .food-zone-title h3{
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  #view-food .food-zone-title p{
    font-size:.8rem !important;
  }

  #view-food .food-zone-list{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #view-food .food-card-premium{
    border-radius:22px !important;
    min-height:auto !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
  }

  #view-food .food-header{
    grid-template-columns:36px 1fr 34px !important;
    gap:10px !important;
    padding:13px 14px 10px !important;
  }

  #view-food .food-icon{
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
    font-size:1rem !important;
  }

  #view-food .food-info h3{
    font-size:1.48rem !important;
    line-height:.95 !important;
  }

  #view-food .food-info small{
    font-size:.78rem !important;
  }

  #view-food .food-favorite{
    width:32px !important;
    height:32px !important;
  }

  #view-food .food-price,
  #view-food .food-type,
  #view-food .food-tags,
  #view-food .food-links,
  #view-food .hotel-actions{
    margin-left:14px !important;
    margin-right:14px !important;
  }

  #view-food .food-type{
    font-size:.86rem !important;
    margin-top:8px !important;
  }

  #view-food .food-tags{
    gap:6px !important;
    margin-top:8px !important;
  }

  #view-food .food-tags span{
    min-height:22px !important;
    padding:0 8px !important;
    font-size:.64rem !important;
  }

  #view-food .food-links a,
  #view-food .hotel-actions button{
    height:32px !important;
    min-height:32px !important;
    border-radius:13px !important;
    font-size:.7rem !important;
  }

  #view-food .hotel-actions{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
    margin-bottom:14px !important;
  }
}
/* =====================================================
   MOBILE FIX · GASTOS + FOTOS
===================================================== */
@media (max-width:760px){

  /* GASTOS */
  #view-expenses .section-title,
  #view-photos .section-title{
    margin:4px 0 12px !important;
    gap:10px !important;
    align-items:center !important;
  }

  #view-expenses .section-title > span,
  #view-photos .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-expenses .section-title h2,
  #view-photos .section-title h2{
    font-size:2.05rem !important;
    line-height:.9 !important;
  }

  #view-expenses .section-title p,
  #view-photos .section-title p{
    font-size:.82rem !important;
    line-height:1.15 !important;
  }

  #view-expenses .expense-summary-grid,
  #view-expenses .family-balance-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #view-expenses .expense-card,
  #view-expenses .expense-form-card,
  #view-expenses .expense-item,
  #view-expenses .balance-card{
    border-radius:22px !important;
    padding:16px !important;
    margin-bottom:12px !important;
  }

  #view-expenses .expense-card h3,
  #view-expenses .expense-item h3,
  #view-expenses .balance-card h3{
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  #view-expenses input,
  #view-expenses select{
    height:42px !important;
    min-height:42px !important;
    border-radius:15px !important;
    font-size:.86rem !important;
  }

  #view-expenses button{
    min-height:38px !important;
    border-radius:14px !important;
    font-size:.76rem !important;
  }

  /* FOTOS */
  #view-photos .photo-upload-card{
    border-radius:24px !important;
    padding:18px 16px !important;
    margin-bottom:14px !important;
  }

  #view-photos .photo-upload-card h3{
    font-size:1.55rem !important;
    line-height:1 !important;
  }

  #view-photos .photo-upload-form{
    gap:8px !important;
  }

  #view-photos .photo-upload-form select,
  #view-photos .photo-upload-form input[type="text"],
  #view-photos .photo-upload-form input[type="file"]{
    height:40px !important;
    min-height:40px !important;
    border-radius:15px !important;
    font-size:.82rem !important;
  }

  #view-photos .photo-upload-form button{
    height:42px !important;
    min-height:42px !important;
    border-radius:15px !important;
    font-size:.82rem !important;
  }

  #view-photos .empty-photos{
    max-width:220px !important;
    margin:14px auto 0 !important;
    padding:14px 16px !important;
    border-radius:20px !important;
    font-size:.84rem !important;
    text-align:center !important;
  }
}
/* =====================================================
   MOBILE FIX · CHAT
===================================================== */
@media (max-width:760px){

  #view-chat .section-title{
    margin:4px 0 12px !important;
    gap:10px !important;
    align-items:center !important;
  }

  #view-chat .section-title > span{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.25rem !important;
  }

  #view-chat .section-title h2{
    font-size:2.05rem !important;
    line-height:.9 !important;
  }

  #view-chat .section-title p{
    font-size:.82rem !important;
    line-height:1.15 !important;
  }

  #view-chat .whatsapp-card,
  #view-chat .chat-card,
  #view-chat .avatar-card{
    border-radius:24px !important;
    padding:16px !important;
    margin-bottom:12px !important;
  }

  #view-chat .whatsapp-card h3,
  #view-chat .avatar-card h3{
    font-size:1.55rem !important;
    line-height:1 !important;
  }

  #view-chat .whatsapp-card p,
  #view-chat .avatar-card p{
    font-size:.86rem !important;
    line-height:1.2 !important;
  }

  #view-chat .whatsapp-card button,
  #view-chat .chat-tools button{
    height:38px !important;
    min-height:38px !important;
    border-radius:15px !important;
    font-size:.78rem !important;
  }

  #view-chat .chat-tools{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }

  #view-chat .chat-box,
  #view-chat #chatMessages{
    max-height:320px !important;
    min-height:180px !important;
    overflow-y:auto !important;
    padding:12px !important;
    border-radius:22px !important;
  }

  #view-chat .chat-message,
  #view-chat .message-card{
    max-width:88% !important;
    padding:10px 12px !important;
    border-radius:18px !important;
    font-size:.86rem !important;
    line-height:1.25 !important;
  }

  #view-chat .chat-message strong,
  #view-chat .message-card strong{
    font-size:.78rem !important;
  }

  #view-chat .chat-message small,
  #view-chat .message-card small{
    font-size:.68rem !important;
  }

  #view-chat .chat-form,
  #view-chat .chat-input-area{
    position:relative !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:12px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.86) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #view-chat #chatAuthorSelect,
  #view-chat #chatInput,
  #view-chat textarea,
  #view-chat input{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:15px !important;
    font-size:.84rem !important;
  }

  #view-chat textarea{
    min-height:72px !important;
    resize:none !important;
  }

  #view-chat #sendChatBtn,
  #view-chat .send-chat-btn,
  #view-chat .chat-form button[type="submit"]{
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:15px !important;
    font-size:.82rem !important;
  }

  #view-chat .avatar-grid,
  #view-chat .avatar-picker{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:8px !important;
  }

  #view-chat .avatar-grid button,
  #view-chat .avatar-picker button{
    width:100% !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:1.1rem !important;
  }
}
/* =====================================================
   MOBILE FIX · COMER FILTROS DEFINITIVOS
===================================================== */
@media (max-width:760px){

  #view-food .food-filter-row{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:7px !important;
    padding:6px 0 8px !important;
    margin:0 0 6px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #view-food .food-filter-row::-webkit-scrollbar{
    display:none !important;
  }

  #view-food [data-food-price],
  #view-food [data-food-tag]{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:max-content !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:.72rem !important;
    line-height:34px !important;
    white-space:nowrap !important;
  }

  #view-food [data-food-price].active,
  #view-food [data-food-tag].active{
    min-width:max-content !important;
  }

  #view-food #foodResultsSummary{
    width:100% !important;
    box-sizing:border-box !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 12px !important;
    font-size:.72rem !important;
    border-radius:15px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
}
/* =====================================================
   MOBILE FIX · CHAT AVATARES
===================================================== */
@media (max-width:760px){

  #view-chat .avatar-card{
    display:block !important;
    padding:14px !important;
    border-radius:22px !important;
    margin-bottom:12px !important;
  }

  #view-chat .avatar-card h3{
    font-size:1.35rem !important;
    line-height:1 !important;
    margin:0 0 6px !important;
  }

  #view-chat .avatar-card p{
    font-size:.78rem !important;
    line-height:1.15 !important;
    margin:0 0 10px !important;
  }

  #view-chat .avatar-card h3 br,
  #view-chat .avatar-card p br{
    display:none !important;
  }

  #view-chat .avatar-picker,
  #view-chat .avatar-grid{
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    padding:6px 0 2px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #view-chat .avatar-picker::-webkit-scrollbar,
  #view-chat .avatar-grid::-webkit-scrollbar{
    display:none !important;
  }

  #view-chat .avatar-picker button,
  #view-chat .avatar-grid button{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    font-size:1.05rem !important;
    padding:0 !important;
  }

  #view-chat .chat-tools{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #view-chat .chat-tools button{
    width:100% !important;
    height:36px !important;
    min-height:36px !important;
    border-radius:14px !important;
    font-size:.76rem !important;
  }

  #view-chat .whatsapp-card{
    padding:15px !important;
    border-radius:22px !important;
  }

  #view-chat .whatsapp-card h3{
    font-size:1.42rem !important;
    line-height:1 !important;
  }

  #view-chat .whatsapp-card p{
    font-size:.82rem !important;
    line-height:1.18 !important;
  }

  #view-chat .whatsapp-card button{
    height:38px !important;
    border-radius:15px !important;
    font-size:.78rem !important;
  }
}
/* =====================================================
   MOBILE FIX · MÁS + SUBMÓDULOS
===================================================== */
@media (max-width:760px){

  #view-more .section-title,
  #view-bookings .section-title,
  #view-documents .section-title,
  #view-checklist .section-title,
  #view-top .section-title,
  #view-pending .section-title{
    margin:4px 0 12px !important;
    gap:10px !important;
    align-items:center !important;
  }

  #view-more .section-title h2,
  #view-bookings .section-title h2,
  #view-documents .section-title h2,
  #view-checklist .section-title h2,
  #view-top .section-title h2,
  #view-pending .section-title h2{
    font-size:2rem !important;
    line-height:.9 !important;
  }

  #view-more .section-title p,
  #view-bookings .section-title p,
  #view-documents .section-title p,
  #view-checklist .section-title p,
  #view-top .section-title p,
  #view-pending .section-title p{
    font-size:.8rem !important;
    line-height:1.15 !important;
  }

  #view-more .more-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }

  #view-more .more-card{
    min-height:132px !important;
    padding:14px 10px !important;
    border-radius:22px !important;
  }

  #view-more .more-card h3{
    font-size:1.28rem !important;
    line-height:1 !important;
  }

  #view-more .more-card p{
    font-size:.76rem !important;
    line-height:1.15 !important;
  }

  #view-more .more-card-icon{
    width:38px !important;
    height:38px !important;
    font-size:1.1rem !important;
    margin-bottom:8px !important;
  }

  .back-more-btn,
  [data-back-more]{
    width:auto !important;
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    font-size:.74rem !important;
    background:rgba(255,250,238,.88) !important;
    border:1px solid rgba(22,55,69,.12) !important;
    color:#123949 !important;
    box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
  }

  #view-bookings .booking-card,
  #view-documents .document-card,
  #view-checklist .checklist-card,
  #view-top .top-card-pro,
  #view-pending .pending-card,
  .booking-form-card,
  .document-form-card,
  .checklist-form-card{
    border-radius:22px !important;
    padding:15px !important;
    margin-bottom:12px !important;
  }

  #view-bookings h3,
  #view-documents h3,
  #view-checklist h3,
  #view-top h3,
  #view-pending h3{
    font-size:1.42rem !important;
    line-height:1 !important;
  }

  #view-bookings input,
  #view-bookings select,
  #view-documents input,
  #view-documents select,
  #view-checklist input,
  #view-checklist select,
  #view-pending input,
  #view-pending select{
    height:40px !important;
    border-radius:15px !important;
    font-size:.82rem !important;
  }

  #view-bookings button,
  #view-documents button,
  #view-checklist button,
  #view-top button,
  #view-pending button{
    min-height:36px !important;
    border-radius:14px !important;
    font-size:.74rem !important;
  }
}