@media (max-width: 900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

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

  .shell{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .header,
  .topbar{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .header{
    min-height:auto !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    padding:14px !important;
    border-radius:16px !important;
  }

  .brand,
  .brand-block{
    width:100% !important;
    min-width:0 !important;
    gap:14px !important;
    flex-wrap:wrap !important;
  }

  .brand img,
  .brand-block img{
    width:min(210px,70vw) !important;
    max-width:70vw !important;
    height:auto !important;
  }

  .brand h1,
  .title-wrap h1,
  h2{
    font-size:clamp(22px,7vw,28px) !important;
    line-height:1.08 !important;
    overflow-wrap:anywhere;
  }

  .brand p,
  .title-wrap p{
    font-size:13px !important;
  }

  .top,
  .user-area,
  .user-pill{
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .logout,
  .actions .btn,
  .modal-actions .btn{
    width:100% !important;
  }

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

  .side,
  .sidebar{
    min-height:auto !important;
    padding:16px !important;
    border-radius:16px !important;
  }

  .nav,
  .sidebar nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .nav button,
  .sidebar-btn{
    min-height:46px !important;
    margin-bottom:0 !important;
    padding:8px 12px !important;
  }

  .card,
  .materials,
  .history-group,
  .chart-card,
  .item{
    max-width:100% !important;
    padding:16px !important;
    border-radius:14px !important;
  }

  .panel-head,
  .materials-head,
  .analytics-head,
  .topline,
  .title-wrap,
  .bulk{
    display:block !important;
  }

  .tools,
  .actions,
  .modal-actions,
  .analytics-tools,
  .filters,
  .history-tabs{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .search,
  .filter-toggle,
  .btn,
  .btn-mini,
  .tool-chip,
  .filters button,
  .history-tab{
    width:100% !important;
  }

  .form-grid,
  .partida-grid,
  .mini,
  .mini-grid,
  .analytics-grid,
  .analytics-layout,
  .decision-grid,
  .period-cards,
  .material-select-grid,
  .donut-wrap,
  .status-donut,
  .progress-row,
  .reset-toolbar{
    grid-template-columns:1fr !important;
  }

  .span-12,
  .span-7,
  .span-6,
  .span-5{
    grid-column:1 !important;
  }

  .table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .table,
  .material-table,
  .analytics-table,
  table{
    min-width:720px;
  }

  dialog{
    width:calc(100% - 22px) !important;
    max-width:calc(100% - 22px) !important;
    padding:18px !important;
  }

  .toast{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
  }
}

@media (max-width: 680px){
  .topbar{
    position:relative !important;
    top:0 !important;
    left:auto !important;
    transform:none !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:10px !important;
    padding:12px !important;
    border-radius:14px !important;
  }

  .topbar .brand{
    display:block !important;
  }

  .topbar .brand img{
    width:min(190px,72vw) !important;
  }

  .topbar .nav{
    display:none !important;
  }

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

  .hero{
    min-height:auto !important;
    padding:24px 14px 54px !important;
  }

  .hero-copy-card{
    width:100% !important;
    margin-top:18px !important;
    padding:28px 20px !important;
  }

  h1{
    font-size:clamp(38px,12vw,52px) !important;
    line-height:.98 !important;
  }

  .lead{
    font-size:16px !important;
  }

  .hero-ctas{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .section,
  .platform-banner,
  .contact-modern{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }

  .service-grid,
  .materials,
  .stats,
  .contact-modern,
  .platform-banner{
    grid-template-columns:1fr !important;
  }

  .footer-modern{
    padding:38px 18px 22px !important;
  }

  .footer-top,
  .footer-links{
    display:grid !important;
    gap:18px !important;
  }
}

@media (max-width: 420px){
  .topbar .actions{
    grid-template-columns:1fr !important;
  }

  .card,
  .materials,
  .history-group,
  .chart-card,
  .item{
    padding:14px !important;
  }

  input,
  select,
  textarea,
  .btn,
  .logout{
    font-size:14px !important;
  }
}

@media (max-width: 760px){
  *,
  *::before,
  *::after{
    min-width:0;
  }

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

  body{
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .shell,
  .section,
  .platform-banner,
  .contact-modern,
  .footer-modern,
  main,
  .content{
    width:100% !important;
    max-width:100% !important;
  }

  .shell,
  .section,
  .content{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .header,
  .card,
  .side,
  .sidebar,
  .materials,
  .materials-box,
  .item,
  .request-card,
  .history-group,
  .chart-card,
  .metric-card,
  .decision-card,
  .platform-banner,
  .contact-modern{
    border-radius:12px !important;
  }

  .header,
  .card,
  .materials-box,
  .materials,
  .item,
  .request-card,
  .history-group,
  .chart-card{
    padding:14px !important;
  }

  .header,
  .brand,
  .brand-block,
  .user-area,
  .top,
  .panel-head,
  .materials-head,
  .analytics-head,
  .history-section-head,
  .history-title,
  .oc-preview-head,
  .section-header,
  .footer-top,
  .footer-bottom,
  .contact-data{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    justify-items:start !important;
    gap:10px !important;
  }

  .brand img,
  .brand-block img,
  .footer-brand img,
  .login-head img,
  .register-head img{
    width:min(230px,72vw) !important;
    max-width:72vw !important;
    height:auto !important;
  }

  h1,
  h2,
  h3,
  .title,
  .username,
  .user-name,
  .folio,
  .oc-line{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  h1{
    font-size:clamp(36px,11vw,48px) !important;
    line-height:1 !important;
  }

  h2,
  .card h2,
  .analytics-title h2{
    font-size:clamp(22px,7vw,28px) !important;
    line-height:1.12 !important;
  }

  .lead,
  p,
  .muted,
  .meta,
  .auth-sub,
  .platform-description,
  .contact-text{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .topbar{
    width:calc(100% - 20px) !important;
    min-height:auto !important;
    padding:10px !important;
  }

  .topbar .brand,
  .topbar .actions,
  .hero-ctas,
  .actions,
  .modal-actions,
  .analytics-tools,
  .history-actions,
  .oc-actions,
  .oc-preview-actions,
  .table-actions,
  .card-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .btn,
  .btn-main,
  .btn-add,
  .btn-ghost,
  .btn-mini,
  .btn-share,
  .btn-view,
  .logout,
  .support-btn,
  .filter-toggle,
  .tool-chip,
  .filters button,
  .sidebar-btn,
  .history-tab,
  .cancel-option{
    width:100% !important;
    min-height:44px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    font-size:16px !important;
  }

  textarea{
    min-height:96px !important;
  }

  .password-wrap{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
  }

  .password-wrap input{
    padding-right:74px !important;
  }

  .password-toggle{
    right:8px !important;
    width:auto !important;
    min-width:52px !important;
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:12px !important;
  }

  .form-grid,
  .partida-grid,
  .mini,
  .mini-grid,
  .analytics-grid,
  .analytics-layout,
  .decision-grid,
  .period-cards,
  .material-select-grid,
  .donut-wrap,
  .status-donut,
  .progress-row,
  .reset-toolbar,
  .service-grid,
  .materials,
  .stats,
  .why-grid,
  .platform-features,
  .cancel-options,
  .oc-preview-grid,
  .forecast-item,
  .bar-row,
  .history-line{
    grid-template-columns:1fr !important;
  }

  .partida-grid{
    align-items:stretch !important;
  }

  .remove{
    width:100% !important;
    border-radius:10px !important;
  }

  .span-12,
  .span-7,
  .span-6,
  .span-5,
  .global-notes{
    grid-column:1 !important;
  }

  .table-wrap,
  .analytics-table-wrap,
  .material-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:12px !important;
  }

  .table-wrap::after{
    content:"Desliza para ver mas";
    display:block;
    padding:8px 10px;
    border-top:1px solid #edf2f8;
    color:#657697;
    background:#fbfdff;
    font-size:11px;
    font-weight:900;
    text-align:center;
  }

  table,
  .table,
  .material-table,
  .analytics-table{
    width:max-content !important;
    min-width:min(760px,220vw) !important;
  }

  .table th,
  .table td,
  .material-table th,
  .material-table td,
  .analytics-table th,
  .analytics-table td{
    padding:10px !important;
    font-size:12px !important;
  }

  .material-line,
  .part-line,
  .parts,
  .parts-list,
  .comment-box,
  .box,
  .forecast-item,
  .cancel-part-choice,
  .notice-item{
    overflow-wrap:anywhere;
  }

  .oc-preview{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .oc-preview table{
    width:max-content !important;
    min-width:620px !important;
  }

  .notice,
  .notice-menu{
    position:fixed !important;
    top:82px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
  }

  dialog,
  .auth-card,
  dialog.cancel-modal{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    padding:18px !important;
    border-radius:14px !important;
  }

  .auth-modal{
    padding:10px !important;
    align-items:flex-start !important;
    overflow:auto !important;
  }

  .modal-close{
    top:10px !important;
    right:10px !important;
    z-index:2 !important;
  }

  .toast{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    grid-template-columns:34px 1fr !important;
    padding:12px !important;
  }

  .toast-ico{
    width:34px !important;
    height:34px !important;
  }

  .hero{
    min-height:100dvh !important;
    padding:96px 12px 56px !important;
  }

  .hero-layout{
    width:100% !important;
  }

  .hero-copy-card{
    width:100% !important;
    padding:26px 8px !important;
  }

  .hero-photo img{
    object-position:center !important;
  }

  .scroll-cue{
    display:none !important;
  }

  .contact-map,
  .map-embed,
  iframe{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width: 520px){
  .shell,
  .section,
  .content{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .card,
  .materials-box,
  .materials,
  .item,
  .request-card,
  .history-group,
  .chart-card{
    padding:12px !important;
  }

  .side,
  .sidebar{
    padding:12px !important;
  }

  .mini-avatar,
  .avatar,
  .doc-ico,
  .head-ico,
  .box-ico{
    flex:0 0 auto;
  }

  .metric-card,
  .decision-card,
  .period-card,
  .material-tile{
    min-height:auto !important;
  }

  .donut,
  .status-ring{
    margin:auto !important;
  }

  .auth-card h2{
    padding-right:36px !important;
  }
}

@media (max-width: 760px){
  /* App profiles: compact mobile layout */
  body:not(.page-home):not(.page-login){
    padding:0 !important;
    background:#f4f7fc !important;
  }

  body:not(.page-home):not(.page-login) .shell{
    width:100% !important;
    max-width:100% !important;
    padding:0 10px 16px !important;
  }

  body:not(.page-home):not(.page-login) .header{
    position:sticky !important;
    top:0 !important;
    z-index:30 !important;
    width:calc(100% + 20px) !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 -10px 10px !important;
    padding:10px 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    border-width:0 0 1px !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 8px 22px rgba(26,45,92,.08) !important;
    backdrop-filter:blur(18px);
  }

  body:not(.page-home):not(.page-login) .brand,
  body:not(.page-home):not(.page-login) .brand-block{
    width:auto !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
  }

  body:not(.page-home):not(.page-login) .brand img,
  body:not(.page-home):not(.page-login) .brand-block img{
    width:112px !important;
    max-width:112px !important;
  }

  body:not(.page-home):not(.page-login) .brand h1,
  body:not(.page-home):not(.page-login) .brand-block h1,
  body:not(.page-home):not(.page-login) .title-wrap h1{
    font-size:18px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  body:not(.page-home):not(.page-login) .brand p,
  body:not(.page-home):not(.page-login) .brand-block p,
  body:not(.page-home):not(.page-login) .title-wrap p{
    font-size:11px !important;
    line-height:1.15 !important;
    margin:2px 0 0 !important;
  }

  body:not(.page-home):not(.page-login) .top,
  body:not(.page-home):not(.page-login) .user-area{
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  body:not(.page-home):not(.page-login) .bell,
  body:not(.page-home):not(.page-login) .bell-btn{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:12px !important;
    font-size:17px !important;
  }

  body:not(.page-home):not(.page-login) .avatar-mini,
  body:not(.page-home):not(.page-login) .mini-avatar{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
    font-size:15px !important;
  }

  body:not(.page-home):not(.page-login) .top strong,
  body:not(.page-home):not(.page-login) .user-pill{
    display:none !important;
  }

  body:not(.page-home):not(.page-login) .logout{
    width:auto !important;
    min-height:38px !important;
    padding:8px 10px !important;
    border-radius:11px !important;
    font-size:0 !important;
  }

  body:not(.page-home):not(.page-login) .logout::before{
    content:"Salir";
    font-size:12px;
  }

  body:not(.page-home):not(.page-login) .main,
  body:not(.page-home):not(.page-login) .grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:0 !important;
  }

  body:not(.page-home):not(.page-login) .side,
  body:not(.page-home):not(.page-login) .sidebar{
    position:sticky !important;
    top:59px !important;
    z-index:20 !important;
    min-height:0 !important;
    padding:0 0 8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,#f4f7fc 0%,rgba(244,247,252,.94) 75%,rgba(244,247,252,0) 100%) !important;
    box-shadow:none !important;
    color:#102a64 !important;
  }

  body:not(.page-home):not(.page-login) .side > .avatar,
  body:not(.page-home):not(.page-login) .side > h2,
  body:not(.page-home):not(.page-login) .side > p,
  body:not(.page-home):not(.page-login) .tip,
  body:not(.page-home):not(.page-login) .help,
  body:not(.page-home):not(.page-login) .profile-card,
  body:not(.page-home):not(.page-login) .support,
  body:not(.page-home):not(.page-login) .nav-label{
    display:none !important;
  }

  body:not(.page-home):not(.page-login) .nav,
  body:not(.page-home):not(.page-login) .sidebar nav{
    width:100% !important;
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    overflow:visible !important;
    padding:0 1px 4px !important;
  }

  body:not(.page-home):not(.page-login) .nav button,
  body:not(.page-home):not(.page-login) .sidebar-btn{
    flex:1 1 calc(33.333% - 6px) !important;
    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;
    margin:0 !important;
    padding:7px 8px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    border:1px solid #dfe7f4 !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#263d74 !important;
    box-shadow:0 8px 18px rgba(26,45,92,.06) !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  body:not(.page-home):not(.page-login) .nav button.active,
  body:not(.page-home):not(.page-login) .sidebar-btn.active{
    background:#223f91 !important;
    border-color:#223f91 !important;
    color:#fff !important;
    box-shadow:0 10px 20px rgba(34,63,145,.18) !important;
  }

  body:not(.page-home):not(.page-login) .ico,
  body:not(.page-home):not(.page-login) .sidebar-btn .ico{
    width:24px !important;
    height:24px !important;
    border-radius:8px !important;
    background:rgba(35,63,145,.10) !important;
    color:inherit !important;
    font-size:11px !important;
  }

  body:not(.page-home):not(.page-login) .nav button.active .ico,
  body:not(.page-home):not(.page-login) .sidebar-btn.active .ico{
    background:rgba(255,255,255,.18) !important;
  }

  body:not(.page-home):not(.page-login) .content{
    padding:0 !important;
  }

  body:not(.page-home):not(.page-login) .card,
  body:not(.page-home):not(.page-login) .materials,
  body:not(.page-home):not(.page-login) .materials-box,
  body:not(.page-home):not(.page-login) .item,
  body:not(.page-home):not(.page-login) .request-card,
  body:not(.page-home):not(.page-login) .history-group,
  body:not(.page-home):not(.page-login) .chart-card{
    padding:14px !important;
    border-radius:14px !important;
    box-shadow:0 8px 22px rgba(26,45,92,.06) !important;
  }

  body:not(.page-home):not(.page-login) .card h2{
    font-size:22px !important;
  }

  body:not(.page-home):not(.page-login) .line{
    margin:8px 0 14px !important;
  }

  body:not(.page-home):not(.page-login) .form-grid,
  body:not(.page-home):not(.page-login) .partida-grid{
    gap:10px !important;
  }

  body:not(.page-home):not(.page-login) .remove{
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    justify-self:end !important;
    border-radius:12px !important;
  }

  body:not(.page-home):not(.page-login) .actions,
  body:not(.page-home):not(.page-login) .modal-actions{
    display:flex !important;
    flex-wrap:wrap !important;
  }

  body:not(.page-home):not(.page-login) .actions .btn,
  body:not(.page-home):not(.page-login) .modal-actions .btn,
  body:not(.page-home):not(.page-login) .btn-main,
  body:not(.page-home):not(.page-login) .btn-add,
  body:not(.page-home):not(.page-login) .btn-ghost{
    width:100% !important;
  }
}