/* ============================================================
   ADA RESPONSIVE FINAL 2026-08-15
   Capa final, no destructiva: escritorio >= 861px no se altera.
   ============================================================ */

html, body { max-width: 100%; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; }
main, section, article, header, footer, nav, form, fieldset, .module-shell, .module-view,
.dashboard-main, .portal-main, .app-main, .content, .main, .panel, .card { min-width: 0; }

/* Cualquier tabla extensa queda contenida sin ensanchar la página. */
.ada-responsive-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}
.ada-responsive-table > table { width: 100%; }

/* Botón universal generado por JS. Oculto en escritorio. */
#adaResponsiveMenuBtn {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 10050;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(15,23,42,.94);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.24);
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
#adaResponsiveBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(2,6,23,.52);
  backdrop-filter: blur(2px);
}
body.ada-responsive-menu-open { overflow: hidden !important; }
body.ada-responsive-menu-open #adaResponsiveBackdrop { display: block; }

/* Evita que inputs y botones desborden por tamaños heredados. */
input, select, textarea, button { max-width: 100%; }
textarea { resize: vertical; }

@media (max-width: 860px) {
  :root { --ada-sidebar-width: 0px !important; }
  html, body { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }

  /* ----------------------------------------------------------
     SIDEBAR ADA CLÁSICO: una sola autoridad móvil
     ---------------------------------------------------------- */
  body > aside.sidebar,
  body > aside.ada-role-sidebar,
  body.ada-with-sidebar > aside.sidebar,
  body.ada-with-sidebar > aside.ada-role-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 330px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    border-radius: 0 24px 24px 0 !important;
    transform: translate3d(-105%,0,0) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10000 !important;
    visibility: visible !important;
  }
  body.ada-responsive-menu-open > aside.sidebar,
  body.ada-responsive-menu-open > aside.ada-role-sidebar,
  body.ada-responsive-menu-open.ada-with-sidebar > aside.sidebar,
  body.ada-responsive-menu-open.ada-with-sidebar > aside.ada-role-sidebar {
    transform: translate3d(0,0,0) !important;
  }

  body:has(> aside.sidebar) #adaResponsiveMenuBtn,
  body:has(> aside.ada-role-sidebar) #adaResponsiveMenuBtn { display: inline-flex; }

  /* Neutraliza reglas históricas que reservaban ancho/alto del sidebar. */
  body.ada-with-sidebar,
  body.dashboard-body,
  body.module-page,
  body:has(> aside.sidebar),
  body:has(> aside.ada-role-sidebar) {
    display: block !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  body > main.dashboard-main,
  body > main.module-shell,
  body.ada-with-sidebar > main.dashboard-main,
  body.ada-with-sidebar > main.module-shell,
  body.module-page > main.module-shell,
  body.dashboard-body > main.module-shell,
  body:has(> aside.sidebar) > main,
  body:has(> aside.ada-role-sidebar) > main {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: max(74px, calc(env(safe-area-inset-top) + 62px)) !important;
  }

  /* Cabeceras y acciones */
  .dashboard-header, .module-header, .page-header, .portal-header,
  .role-banner, .topbar, .toolbar, .actions, .action-bar,
  .filter-bar, .filters, .panel-header, .card-header {
    max-width: 100%;
  }
  .dashboard-header, .module-header, .page-header, .role-banner {
    gap: 12px !important;
  }

  /* Grillas habituales: dos columnas en tablet. */
  .dashboard-grid,
  .directivo-kpis,
  .b26-kpi-grid,
  .plan-grid,
  .kpi-grid,
  .kpis,
  [class*="kpi-grid"],
  [class*="stats-grid"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Diálogos nunca salen de pantalla. */
  dialog,
  [role="dialog"],
  [class*="modal-card"],
  [class*="dialog"] {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 640px) {
  #adaResponsiveMenuBtn {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  body > main.dashboard-main,
  body > main.module-shell,
  body.ada-with-sidebar > main.dashboard-main,
  body.ada-with-sidebar > main.module-shell,
  body.module-page > main.module-shell,
  body:has(> aside.sidebar) > main,
  body:has(> aside.ada-role-sidebar) > main {
    padding: max(68px, calc(env(safe-area-inset-top) + 58px)) 10px 20px !important;
  }

  .module-view,
  .dashboard-header,
  .role-banner,
  .panel-card,
  .card,
  [class*="panel"] {
    max-width: 100%;
  }

  .dashboard-grid,
  .directivo-kpis,
  .b26-kpi-grid,
  .plan-grid,
  .kpi-grid,
  .kpis,
  [class*="kpi-grid"],
  [class*="stats-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Formularios genéricos y barras de filtros. */
  .form-grid,
  .filter-grid,
  .filters-grid,
  .toolbar-grid,
  [class*="form-grid"],
  [class*="filter-grid"] {
    grid-template-columns: 1fr !important;
  }
  .form-grid > *, .filter-grid > *, .filters-grid > *,
  [class*="form-grid"] > *, [class*="filter-grid"] > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .toolbar, .actions, .action-bar, .filter-actions,
  [class*="toolbar"], [class*="actions"] {
    flex-wrap: wrap !important;
  }

  h1 { overflow-wrap: anywhere; }
  .user-card { width: 100%; }
}

/* Pantallas táctiles: controles con tamaño mínimo cómodo. */
@media (pointer: coarse) {
  button, .btn, a.button, input, select { min-height: 42px; }
}