@media (max-width: 768px) {
  body { overflow:auto; font-size:15px; }
  .layout { min-height:100vh; height:auto; display:flex; flex-direction:column; padding-top:0; }
  .content { display:contents; }
  .sidebar { width:100%; min-height:auto; position:static; z-index:200; padding-top:0; order:2; }
  .logo { height:58px; font-size:20px; justify-content:flex-start; padding:0 16px; padding-right:180px; }
  .logo img.logo-mayran-oficial { height:44px !important; width:72px !important; }
  .menu { display:flex; overflow-x:auto; padding:8px; gap:6px; white-space:nowrap; }
  .menu a { min-width:max-content; padding:10px 12px; font-size:13px; }
  .topbar { height:52px; padding:0 12px; position:static; z-index:400; justify-content:flex-end; order:1; }
  .topbar h2 { display:none; }
  .main { order:3; }
  .usuario-menu { gap:6px; }
  .icon-button { width:34px; height:34px; }
  .main { padding:14px 10px; }
  .page, .modulo { padding:0 !important; }
  .page-header, .modulo-header { padding:18px !important; flex-direction:column; align-items:flex-start !important; gap:14px; }
  .page-header h1, .modulo-header h2 { font-size:24px !important; }
  .dashboard-grid, .cards { grid-template-columns:1fr !important; gap:12px; }
  .dashboard-card, .cards .card, .dashboard-section { padding:18px !important; border-radius:16px !important; }
  .dashboard-buttons, .acciones-modulo { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:9px; }
  .dashboard-buttons .btn, .acciones-modulo .btn { width:100%; min-height:46px; font-size:14px; }
  .acciones-modulo .form-control { grid-column:1 / -1; width:100%; }
  .tabla-container { overflow-x:auto; border-radius:14px; }
  .tabla { min-width:720px; font-size:13px; }
  .modal-contenido { width:calc(100% - 24px); max-height:90vh; overflow-y:auto; }
  #btnSoporte { right:16px !important; bottom:16px !important; }
  #panelSoporte { right:12px !important; bottom:88px !important; width:calc(100% - 24px) !important; }
}