/* DatoYa — capa final de layout mobile-first / PWA.
   Se carga al final para impedir overflow horizontal entre módulos. */
html,body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
body{
  margin:0;
  overscroll-behavior-x:none;
}
#app{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:100dvh;
  overflow-x:clip;
}
#topbar{
  width:100%;
  max-width:100vw;
  min-width:0;
}
#topbar>*,
#topnav,
#auth-area{
  min-width:0;
}
#view{
  width:100%;
  max-width:1180px;
  min-width:0;
  margin-left:auto;
  margin-right:auto;
}
#view>*{
  min-width:0;
  max-width:100%;
}
img,video,canvas,svg{
  max-width:100%;
}
input,select,textarea,button{
  min-width:0;
}
.table-wrap,
.tabs,
.dy-admin-v2-nav,
.dy-business-hub-nav{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.table-wrap{
  overflow-x:auto;
}
.dy-admin-v2-nav,
.dy-business-hub-nav,
.tabs{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.dy-admin-v2-nav::-webkit-scrollbar,
.dy-business-hub-nav::-webkit-scrollbar,
.tabs::-webkit-scrollbar{display:none}

@media (max-width:820px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  #app{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }
  #topbar{
    padding-left:12px!important;
    padding-right:12px!important;
    gap:8px!important;
  }
  #topbar .logo{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:52%!important;
    overflow:hidden!important;
  }
  #topbar .datoya-header-logo{
    width:148px!important;
    height:auto!important;
    max-width:100%!important;
  }
  #topnav{
    flex:0 1 auto!important;
    max-width:48%!important;
    gap:7px!important;
  }
  #auth-area{
    max-width:100%!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  #auth-area>a{
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:12px!important;
  }
  #view{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:12px 12px calc(96px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  #view>*,
  #view section,
  #view article,
  #view form,
  #view .card{
    min-width:0!important;
    max-width:100%!important;
  }
  #view img,
  #view video,
  #view canvas,
  #view svg{
    max-width:100%!important;
    height:auto;
  }
  #view input,
  #view select,
  #view textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }
  #view button,
  #view .btn{
    max-width:100%;
  }
  #view .row{
    min-width:0!important;
  }
  #view .row>*,
  #view [class*="grid"]>*,
  #view [class*="flex"]>*{
    min-width:0!important;
    max-width:100%;
  }

  /* Home */
  .dy-home{width:100%!important;max-width:100%!important;gap:18px!important}
  .dy-hero{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    padding:20px 16px!important;
    gap:18px!important;
    border-radius:22px!important;
  }
  .dy-hero h1{font-size:clamp(30px,10vw,42px)!important}
  .dy-hero>*{min-width:0!important;max-width:100%!important}

  /* Acceso, perfil y creación de negocio */
  .dy-auth-shell,
  .dy-welcome,
  .dy-account-page,
  .dy-business-wizard{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto 14px!important;
  }
  .dy-auth-panel,
  .dy-account-card,
  .dy-wizard-card{
    width:100%!important;
    max-width:100%!important;
  }
  .dy-account-grid,
  .dy-two-fields,
  .dy-business-type-grid,
  .dy-option-row{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Panel del negocio */
  .dy-business-dashboard,
  .dy-business-section-page,
  .dy-hub-subpage,
  .dy-business-hub-shell{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .dy-business-dashboard{padding-left:0!important;padding-right:0!important}
  .dy-business-dashboard-hero{
    width:100%!important;
    max-width:100%!important;
    padding:18px!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .dy-dashboard-grid,
  .dy-promo-performance{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dy-dashboard-hero-actions{
    width:100%!important;
  }
  .dy-dashboard-hero-actions .btn{
    flex:1 1 140px!important;
  }

  /* Admin */
  .dy-admin-v2{
    width:100%!important;
    max-width:100%!important;
    padding:0 0 120px!important;
  }
  .dy-admin-v2-head{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .dy-admin-grid2,
  .dy-admin-settings{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dy-admin-row{
    width:100%!important;
    max-width:100%!important;
  }
  .dy-admin-row-actions{
    width:100%!important;
  }
  .dy-admin-row-actions>*{
    max-width:100%!important;
  }
  .dy-admin-money-inline{
    white-space:normal!important;
  }

  /* Navegaciones internas: se desplazan ellas, no la página entera */
  .dy-admin-v2-nav,
  .dy-business-hub-nav,
  .tabs{
    width:100%!important;
    max-width:100%!important;
    padding-bottom:8px!important;
  }

  /* Modales estilo app */
  #modal{
    padding:0!important;
  }
  #modal-card{
    width:100%!important;
    max-width:100%!important;
    border-radius:22px 22px 0 0!important;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important;
  }

  /* Evita que textos, IDs o correos largos ensanchen la app */
  .card,
  .dy-account-card,
  .dy-admin-row,
  .dy-business-dashboard,
  .dy-business-section-page,
  .dy-plan-card{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Objetivos táctiles */
  .btn,
  #bottomnav a,
  .dy-business-hub-nav a,
  .dy-admin-v2-nav a{
    min-height:44px;
  }

  #bottomnav{
    width:100%!important;
    max-width:100vw!important;
  }
}

@media (max-width:430px){
  #view{padding-left:10px!important;padding-right:10px!important}
  #topbar .datoya-header-logo{width:132px!important}
  .dy-dashboard-priority,
  .dy-dashboard-metrics,
  .dy-dashboard-metrics-large,
  .dy-admin-kpis,
  .finance{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .cat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}