/* ============================================================
   MINERIA DS · responsive-mobile.css
   Hace responsivas las 42 pantallas desktop existentes.
   Carga después de tokens/typography/components y de los <style>
   embebidos · usa !important para sobrescribir reglas inline.
   Breakpoint primario: 768px (phone/small tablet).
   ============================================================ */

/* ============================================================
   Fix de inputs (siempre, no solo en mobile)
   16px mínimo en font-size · evita zoom auto en iOS
   ============================================================ */
/* checkbox y radio nunca heredan el font-size fix ni el width 100% */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea {
  font-size: max(16px, 1em);
}

/* ============================================================
   Estilos del hamburger button (inyectado por JS en mobile)
   ============================================================ */
.filresp-hamburger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9998;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cantera-50);
  border: 1px solid var(--cantera-700);
  display: none; /* hidden by default, JS toggles to grid on mobile */
  place-items: center;
  cursor: pointer;
  box-shadow: var(--sh-md);
  -webkit-tap-highlight-color: transparent;
}
.filresp-hamburger:active { transform: scale(0.94);}
.filresp-hamburger svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.filresp-hamburger.is-open svg path:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.filresp-hamburger.is-open svg path:nth-child(2) { opacity: 0;}
.filresp-hamburger.is-open svg path:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}
.filresp-hamburger.is-open svg path {
  transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1);
  transform-origin: center;
}

.filresp-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,17,11,0.55);
  z-index: 9997;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.2,0.8,0.2,1);
}
.filresp-backdrop.is-open {
  opacity: 1; pointer-events: auto;
}

/* ============================================================
   BREAKPOINT MÓVIL · ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ── Anti-overflow horizontal global ── */
  /* Solo html clipa el viewport · body NO tiene overflow-x:hidden
     para no bloquear el scroll interno de tablas y otros containers */
  html {
    max-width: 100vw !important;
    overflow-x: clip !important; /* clip: no crea scroll container, solo recorta */
  }
  body {
    max-width: 100vw !important;
    /* sin overflow-x: hidden — tablas y carruseles necesitan scroll interno */
  }
  *, *::before, *::after {
    max-width: 100%;
  }
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Las tablas necesitan poder ser más anchas que su contenedor (scroll horizontal)
     NO les ponemos max-width: 100% — el wrapper .tbl-wrap tiene overflow-x: auto */
  table {
    max-width: none !important;
  }
  /* Cualquier contenedor explícito con ancho fijo */
  .shell, .bo-shell, .main, .bo-main, .layout,
  .form-section, .form-section-body, .section-body,
  .form-grid, .field, .input-group, .det-hero, .hero,
  .page-head, .crumbs, .save-bar, .send-bar {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* inputs nunca más anchos que su contenedor
     EXCLUIR checkbox y radio — no deben ser 100% de ancho */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* checkbox y radio: tamaño fijo razonable, nunca 100% */
  input[type="checkbox"],
  input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    flex-shrink: 0;
  }

  /* ── Mostrar hamburger ── */
  .filresp-hamburger { display: grid;}

  /* ── Shell genérico → 1 columna ── */
  .shell,
  .bo-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Evitar que grid items inflen el track más allá del contenedor */
  .bo-shell > *,
  .shell > *,
  .rep-layout > *,
  .layout > *,
  .det-grid > *,
  .gf-layout > *,
  .cat-layout > * {
    min-width: 0;
  }

  /* ── Sidebar pasa a drawer fixed izquierdo ── */
  .sidebar,
  .bo-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1);
    box-shadow: 8px 0 32px rgba(0,0,0,0.25);
    overflow-y: auto !important;
  }
  .sidebar.is-open,
  .bo-side.is-open {
    transform: translateX(0);
  }

  /* ── Topbar BO y main · padding para hamburger ── */
  .bo-top {
    padding-left: 64px !important;
    padding-right: var(--s-4) !important;
    height: auto !important;
    min-height: 52px;
    flex-wrap: wrap;
    gap: var(--s-2) !important;
  }
  .bo-top .crumbs { font-size: 10px !important;}
  .bo-top .env-pill {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .bo-top .search { display: none !important;} /* puede ir abajo si se requiere */
  .bo-top .nav-arrows { display: none !important;}

  .main,
  .bo-main {
    padding: var(--s-4) !important;
    max-width: 100% !important;
  }

  /* En screens sin BO topbar pero con sidebar, agregar espacio arriba */
  .shell > .main:not(.bo-main) {
    padding-top: var(--s-7) !important;
  }

  /* ── Crumbs ── */
  .crumbs {
    font-size: 10px !important;
    margin-bottom: var(--s-4) !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }

  /* ── Page heads ── */
  .page-head {
    display: flex !important;       /* fuerza flex aunque el inline style diga grid */
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--s-3) !important;
    padding-bottom: var(--s-4) !important;
    margin-bottom: var(--s-4) !important;
  }
  .page-head h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  .page-head .lead {
    font-size: 13px !important;
  }
  .page-head .meta-pill,
  .page-head .approved-pill,
  .page-head .general-status,
  .page-head .quick-actions {
    align-self: stretch !important;
  }
  .page-head .quick-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  /* general-status en page-head: ancho completo, sin min-width */
  .page-head .general-status,
  .general-status {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* eyebrow de page-head (pantalla 16) */
  .page-head .eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }

  /* Hero genérico */
  .det-hero,
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-3) !important;
    padding: var(--s-4) !important;
  }
  .det-hero h1,
  .hero h1 {
    font-size: 22px !important;
  }

  /* ── Form grids stack ── */
  .form-grid,
  .form-grid.cols-2,
  .form-grid.cols-3,
  .form-grid.cols-4,
  .form-grid.cols-tel {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-grid .span-2,
  .form-grid .span-full,
  .form-grid [style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  /* ── Grids named específicos (pantallas individuales) ── */
  .contact-card,
  .contact-other,
  .metros-row,
  .date-grid,
  .dg,
  .pp-row,
  .calc-box,
  .val-summary,
  .alt-fields,
  .ft-grid,
  .data-grid,
  .req-data dl,
  .unam-actions .btn-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* contact-card: oculta la columna-label, la muestra arriba */
  .contact-card .role {
    font-size: 10px !important;
  }

  /* ── fld-list (reportes · campos a incluir) ── */
  .fld-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* 2 cols siguen siendo legibles en móvil */
  }

  /* ── Filter rows (reportes · filtros por campo) ── */
  /* Desktop: select(110px) | select/input(1fr) | btn(28px)
     Mobile:  [select campo ▼]          [× del]
              [select/input valor — full width    ]       */
  .filter-row {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    grid-template-rows: auto auto !important;
    gap: 4px !important;
  }
  /* Primer hijo (campo): col1 fila1 */
  .filter-row > *:first-child {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
    min-height: 36px;
  }
  /* Segundo hijo (valor): ancho completo fila2 */
  .filter-row > *:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 13px !important;
    min-height: 36px;
  }
  /* Tercer hijo (botón eliminar): col2 fila1 */
  .filter-row > *:nth-child(3),
  .filter-row .del {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  /* ── Comparación A vs B (screen 34 · validación comprobante) ── */
  /* Desktop: [label 160px] [val-A 1fr] [val-B 1fr] [verdict 100px]
     Mobile:  [label full-width]
              [val-A] [val-B]
              [verdict full-width]                                 */
  .cmp-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: var(--s-2) !important;
  }
  .cmp-row .field-name {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
  }
  .cmp-row > *:nth-child(2) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }
  .cmp-row > *:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
  }
  .cmp-row .verdict {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
  .cmp-row .v {
    font-size: 11px !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    padding: 4px 6px !important;
  }

  /* ── 2-col main + aside · stack ── */
  .layout,
  .det-grid,
  .grid,
  .gf-layout,
  .rep-layout,
  .cat-layout,
  .vl-layout,
  .users-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-4) !important;
  }
  .aside,
  .aside-stack,
  .toc-aside,
  .config-panel,
  .events-col,
  .cat-menu,
  .inbox {
    position: static !important;
    max-height: none !important;
    width: 100% !important;
  }

  /* ── KPIs ── */
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s-2) !important;
  }
  .u-kpis {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .kpi {
    padding: var(--s-3) var(--s-4) !important;
  }
  .kpi .num,
  .kpi .v {
    font-size: 22px !important;
  }

  /* ── Tabs (F1/F2/Todas) · scroll horizontal en lugar de cortar ── */
  .tabs {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex-wrap: nowrap !important;
    padding-bottom: 0 !important;
  }
  .tabs::-webkit-scrollbar { display: none;}
  .tab {
    flex-shrink: 0 !important;
    padding: var(--s-2) var(--s-3) !important;
    font-size: 10px !important;
    white-space: nowrap;
  }
  .tab .count {
    font-size: 9px !important;
    padding: 1px 6px !important;
  }

  /* ── Tablas · scroll horizontal ── */
  .tbl-wrap,
  .lt-wrap,
  .u-wrap,
  .preview-tbl-wrap,
  .matrix-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;  /* override overflow:hidden shorthand */
    -webkit-overflow-scrolling: touch;
  }
  .tbl,
  .lt,
  .ut,
  .prev-tbl {
    min-width: 720px !important;
  }
  .matrix {
    min-width: 900px !important;
  }
  .ct {
    min-width: 600px !important;
  }
  /* Celdas con códigos/folios — no partir en guiones */
  .tbl .folio,
  .tbl td.folio,
  .tbl .folio-ref,
  .lt .folio,
  .ut .folio,
  .prev-tbl .folio {
    white-space: nowrap !important;
  }
  /* Primera columna sticky en tablas anchas (screen 42, 44, 23, 31…) */
  /* Mantiene INVITADO / FOLIO visible mientras se scrollea */
  .tbl-wrap .tbl thead th:first-child,
  .tbl-wrap .tbl tbody td:first-child,
  .lt-wrap .lt thead th:first-child,
  .lt-wrap .lt tbody td:first-child,
  .u-wrap .ut thead th:first-child,
  .u-wrap .ut tbody td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2;
    background: var(--bg-elev, #faf8f4) !important;
    box-shadow: 2px 0 4px -1px rgba(0,0,0,0.08);
    /* Ancho fijo para que la columna sea útil sin ocupar todo */
    min-width: 130px !important;
    max-width: 160px !important;
    width: 150px !important;
  }
  /* En la columna sticky: truncar texto largo, ocultar email */
  .tbl-wrap .tbl tbody td:first-child .nm,
  .tbl-wrap .tbl tbody td:first-child .who .nm,
  .lt-wrap .lt tbody td:first-child .nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
    display: block;
  }
  .tbl-wrap .tbl tbody td:first-child .em,
  .tbl-wrap .tbl tbody td:first-child .who .em,
  .tbl-wrap .tbl tbody td:first-child .rfc {
    display: none !important; /* ocultar email/RFC en móvil — el nombre es suficiente */
  }
  /* .who layout: icono + nombre en fila */
  .tbl-wrap .tbl tbody td:first-child .who {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* ── Avatares: evitar deformación oval en flex ── */
  .av {
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  /* ── Celda ORGANIZACIÓN: ocultar subtítulo, truncar nombre ── */
  /* El subtítulo (span) hace que la celda tenga 3-4 líneas en 110px */
  .tbl td .org > span,
  .lt td .org > span,
  .ut td .org > span {
    display: none !important;
  }
  .tbl td .org b,
  .tbl td .org strong,
  .lt td .org b,
  .ut td .org b {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 108px;
  }

  /* ── Salones asignados: compactar tags ── */
  .tbl td .salones-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    max-width: 87px;
  }
  .tbl td .salones-tags .salon-tag {
    font-size: 9px !important;
    padding: 1px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 85px !important;
  }

  /* KPI solitario en grid de 2 cols → span completo */
  .kpis > *:last-child:nth-child(2n+1) {
    grid-column: 1 / -1 !important;
  }

  /* ── Inputs y form fields ── */
  .field input,
  .field select,
  .field textarea,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }
  textarea {
    min-height: 80px !important;
  }
  .field label {
    font-size: 10px !important;
  }

  /* ── Botones · touch target ── */
  .btn {
    min-height: 44px;
    padding: 10px 16px !important;
  }
  .btn-sm {
    min-height: 36px;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .btn-lg {
    min-height: 52px;
    padding: 14px 20px !important;
  }

  /* ── Save bar / Send bar · stack acciones ── */
  .save-bar,
  .send-bar,
  .submit-bar {
    left: 0 !important;
    padding: var(--s-3) var(--s-4) !important;
    flex-wrap: wrap !important;
    gap: var(--s-2) !important;
  }
  .save-bar .actions,
  .send-bar .actions,
  .send-bar .right {
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    display: flex !important;
    gap: var(--s-2) !important;
  }
  .save-bar .autosave,
  .save-bar .step-info,
  .save-bar .step-of,
  .save-bar .dirty-counter,
  .save-bar .group-divider,
  .save-bar .ready-state {
    font-size: 10px !important;
  }
  .save-bar .group-divider { display: none !important;}
  .save-bar .actions .btn,
  .send-bar .actions .btn {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  body { padding-bottom: 100px !important;} /* room for save bar */

  /* ── Modales full-screen ── */
  .modal,
  .confirm-modal .box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .backdrop {
    padding: 0 !important;
  }
  .modal .m-head,
  .modal .m-body,
  .modal .m-foot {
    padding-left: var(--s-4) !important;
    padding-right: var(--s-4) !important;
  }
  .modal .m-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-2) !important;
  }
  .modal .m-head h1 {
    font-size: 22px !important;
  }
  .modal .compare {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .modal .compare-arrow {
    transform: rotate(90deg);
    height: 32px;
  }
  .modal .consequences {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .modal .conseq-col + .conseq-col {
    border-left: 0 !important;
    border-top: 1px solid var(--rule) !important;
  }
  .modal .actions-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--s-2) !important;
  }
  .modal .actions-row .right {
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap;
  }
  .modal .actions-row .right .btn {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── Flow steps wizard ── */
  .flow-steps,
  .cont-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--s-2) !important;
    margin-bottom: var(--s-4) !important;
  }
  .flow-step,
  .cs {
    padding: var(--s-2) 0 !important;
  }
  .flow-step .num,
  .cs .ix {
    font-size: 9px !important;
  }
  .flow-step .name,
  .cs .nm {
    font-size: 11px !important;
  }

  /* ── Tariff banner F1 ── */
  .tariff {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tariff-col + .tariff-col {
    border-left: 0 !important;
    border-top: 1px solid var(--rule) !important;
  }

  /* ── Stand options F1 / Opt grid F2 ── */
  .options-grid,
  .opt-grid,
  .salones-picker,
  .salones-grid,
  .salon-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .stand-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Docs grid (stand sin equipar, factura) ── */
  .docs-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Pay status + Reject alert (pantalla 13 · pago) ── */
  /* 56-64px icon | 1fr text | auto pill/actions → stack vertical */
  .pay-status,
  .reject-alert {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: var(--s-3) var(--s-3) !important;
    padding: var(--s-4) !important;
  }
  .pay-status .ic,
  .reject-alert .ic {
    grid-row: 1 / 3 !important;
    width: 44px !important; height: 44px !important;
    align-self: flex-start !important;
    font-size: 18px !important;
  }
  .pay-status .pill {
    grid-column: 2 / 3 !important;
    white-space: nowrap;
    align-self: start;
  }
  /* reject-alert: body ocupa col 2, actions va a nueva fila completa */
  .reject-alert .body {
    grid-column: 2 / 3 !important;
  }
  .reject-alert .actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .reject-alert .actions .btn {
    flex: 1 !important;
    justify-content: center;
    text-align: center;
  }
  .reject-alert .body strong {
    font-size: 18px !important;
  }

  /* ── Catálogos · stack ── */
  .cat-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cat-panel,
  #salones,
  #areas,
  #actividades,
  #secciones,
  #tarifas {
    overflow-x: auto;
  }
  .cat-panel table {
    min-width: 600px;
  }

  /* ── Panels con tabla directa (contador, etc.) ── */
  /* .panel tiene overflow:hidden en desktop → en móvil lo cambiamos a
     overflow-x:auto para que la tabla interna pueda scrollear */
  .panel {
    overflow-x: auto !important;
  }
  /* Panel header: nowrap + scroll para los filter-pills */
  .panel-head {
    flex-wrap: wrap !important;
    gap: var(--s-2) !important;
    row-gap: var(--s-2) !important;
  }
  .panel-head .filter-pills {
    overflow-x: auto !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .panel-head .filter-pills::-webkit-scrollbar { display: none; }
  .panel-head .filter-pills button {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* ── Reportes ── */
  .config-panel {
    position: static !important;
    max-height: none !important;
  }
  .fld-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Personas dinámicas ── */
  .person-row {
    grid-template-columns: 28px minmax(0, 1fr) 36px !important;
  }
  .person-row .cell + .cell {
    border-left: 0 !important;
    padding-left: 6px !important;
    margin-top: 4px;
    border-top: 1px dashed var(--rule);
    padding-top: 6px !important;
    grid-column: 2 / 3;
  }

  /* ── Mostrar/ocultar hint en BO secundario ── */
  .cb-head .right,
  .cb-head .hint,
  .section-head .hint {
    display: none !important;
  }

  /* ── Demo toggle · más chico ── */
  .demo-toggle {
    bottom: 110px !important;
    left: 10px !important;
    right: 10px !important;
    transform: scale(0.85);
    transform-origin: bottom left;
    font-size: 9px !important;
    flex-wrap: wrap;
  }

  /* ── Login screens · stack ── */
  /* m-login / 03-login / 04 / 05 ya manejan responsive en sí */
  .bo-shell.login-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Index/landing · grid de cards ── */
  .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .section-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--s-3) !important;
  }
  .badge-count {
    align-self: flex-start;
  }

  /* ── legal-item (screens 11 · 12 · 15 · términos) ── */
  /* Grid 28px 1fr auto: view-link auto empuja el texto a columna muy angosta */
  .legal-item {
    grid-template-columns: 28px 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }
  .legal-item .view-link {
    grid-column: 2 / 3 !important; /* bajo el label, alineado con el texto */
    grid-row: 2 / 3 !important;
    align-self: start !important;
    margin-top: 4px !important;
  }

  /* ── config-section-head · ocultar .note en mobile (espacio) ── */
  .config-section-head {
    flex-wrap: wrap !important;
    padding: var(--s-4) var(--s-4) !important;
    gap: 4px var(--s-3) !important;
  }
  .config-section-head .note {
    display: none !important; /* secundario en mobile — quita presión al título */
  }
  .config-section-head h2 {
    font-size: 18px !important;
  }

  /* ── Switch-banner (screen 10 · stand sin equipar) ── */
  /* Grid 38px 1fr auto: botón auto (~130px) deja solo 103px al copy */
  .switch-banner {
    grid-template-columns: 38px 1fr !important; /* ic | copy */
    grid-template-rows: auto auto !important;
    gap: var(--s-3) !important;
    padding: var(--s-4) !important;
  }
  /* botón: nueva fila, ancho completo */
  .switch-banner .btn,
  .switch-banner a.btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Timeline step-toggle (screen 08 · detalle solicitud) ── */
  /* Grid 1fr auto auto: step-meta auto (~100px) aprieta el heading */
  .step-toggle {
    grid-template-columns: 1fr auto !important; /* heading | chev */
    grid-template-rows: auto auto !important;
  }
  .step-toggle .step-meta {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    text-align: left !important;
    padding-bottom: 4px !important;
  }
  .step-toggle .chev {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }
  .step-toggle .heading .ix {
    white-space: nowrap !important;
    font-size: 9px !important;
  }
  .step-toggle h3 {
    font-size: 18px !important;
  }

  /* ── general-status card (screen 08 · detalle solicitud) ── */
  /* Grid auto 1fr auto: la col del pill (189px) aplasta el texto (106px) */
  .general-status {
    grid-template-columns: auto 1fr !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  /* Pill + fecha: nueva fila, fila completa, pill izq / fecha der */
  .general-status > *:nth-child(3) {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .general-status .what {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  .general-status .label {
    font-size: 9px !important;
  }
  .general-status .deadline {
    font-size: 10px !important;
  }

  /* ── Choices (Flujo 1 / Flujo 2) · apila en 1 col ── */
  .choices {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-3) !important;
  }
  .choice {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-2) !important;
    padding: var(--s-4) var(--s-4) var(--s-3) !important;
  }
  .choice .tag {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0 !important;
  }
  .choice h4 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .choice .desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  /* CTA row al fondo: "5 pasos · 20 min" a la izq, "Empezar →" a la der */
  .choice .arrow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: var(--s-2) !important;
    padding-top: var(--s-2) !important;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
  }
  .choice .arrow span {
    font-size: 10px !important;
    color: var(--ink-mute, #888) !important;
  }
  .choice .arrow b {
    font-size: 13px !important;
  }

  /* ── Notif sidebar (bo-side) cierra al click en link ── */
  /* Lo maneja el JS · ver responsive-mobile.js */

  /* ── Stat cards en panel y horarios ── */
  .stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Eventos sidebar · listado ── */
  .events-card,
  .events-list,
  .inbox-list {
    max-height: none !important;
  }

  /* ── Hide some sticky elements that don't make sense on mobile ── */
  .matrix tbody th {
    position: static !important;
    min-width: 140px !important;
  }
  .matrix thead th {
    position: static !important;
  }

  /* ── Hero institutional centered on small screens ── */
  .bo-brand {
    display: none !important; /* en login BO se oculta la columna institucional */
  }

  /* ── 2-col login pages (38, 21) ── */
  body[data-screen-label*="Login"] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── propuesta-administrador (17) backdrop padding ── */
  .backdrop {
    align-items: stretch !important;
  }

  /* ── .tag global: nunca partir en 2 líneas ── */
  .tag {
    white-space: nowrap !important;
  }

  /* ── bulk-bar (screens 23, 25, 30…) ── */
  /* flex: count | actions(auto) → count arriba, buttons abajo */
  .bulk-bar {
    flex-wrap: wrap !important;
    gap: var(--s-2) !important;
    padding: var(--s-2) var(--s-3) !important;
  }
  .bulk-bar .actions {
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .bulk-bar .actions button {
    flex: 1 1 auto !important;
    font-size: 10px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }

  /* ── approval-actions (screen 24 · detalle stand) ── */
  /* flex: note-span | .right(auto) → note arriba, botones abajo */
  .approval-actions {
    flex-wrap: wrap !important;
    gap: var(--s-2) !important;
  }
  .approval-actions span {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .approval-actions .right {
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .approval-actions .right .btn {
    flex: 1 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  /* ── compare-summary (screen 34 · contador validar) ── */
  /* grid 160px 1fr 1fr 100px → scroll horizontal */
  .compare-summary {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare-summary .body {
    min-width: 480px !important;
  }

  /* ── Screen 18 · Términos / doc-head ── */
  /* flex: seal | title | download(auto) → stack, download full-width */
  .doc-head {
    flex-wrap: wrap !important;
    padding: var(--s-3) var(--s-4) !important;
    gap: var(--s-2) var(--s-3) !important;
  }
  .doc-head h2 {
    font-size: 15px !important;
  }
  .doc-head .download {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    order: 3 !important;
  }

  /* ── Screen 19 · Editar evento — s-head secciones ── */
  /* flex: ribbon | h2 | meta(auto) → ocultar meta, ribbon se encoge */
  .section-direct .s-head,
  .section-restricted .s-head {
    flex-wrap: wrap !important;
    padding: var(--s-3) var(--s-4) !important;
    gap: var(--s-2) var(--s-3) !important;
  }
  .section-direct .s-head h2,
  .section-restricted .s-head h2 {
    font-size: 18px !important;
    flex: 1 1 100% !important; /* fuerza segunda línea */
    order: 2 !important;
  }
  .section-direct .s-head .ribbon,
  .section-restricted .s-head .ribbon {
    font-size: 9px !important;
    padding: 3px 8px !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  .section-direct .s-head .meta,
  .section-restricted .s-head .meta {
    display: none !important;
  }

  /* ── Screen 13 · Pago / comprobante ── */

  /* captura-card: 160px 1fr → stack vertical */
  .captura-card {
    grid-template-columns: 1fr !important;
    gap: var(--s-4) !important;
    padding: var(--s-4) !important;
  }
  .pdf-preview {
    min-height: 120px !important;
    max-height: 140px !important;
  }

  /* ref-grid: repeat(3,auto) 1fr → 2 columnas */
  .captura-info .ref-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: var(--s-4) !important;
  }

  /* doc-uploader-head: ocultar .state, mostrar solo el ícono ::before */
  .doc-uploader-head {
    flex-wrap: wrap !important;
    padding: var(--s-3) var(--s-4) !important;
    gap: var(--s-2) var(--s-2) !important;
  }
  .doc-uploader-head h3 {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .doc-uploader-head .state {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 9px !important;
  }

  /* uhead nota: hide on mobile */
  .upload-block .uhead {
    flex-wrap: wrap !important;
    padding: var(--s-4) var(--s-4) !important;
  }
  .upload-block .uhead h2 {
    font-size: 19px !important;
  }
  .upload-block .uhead .note {
    display: none !important;
  }

  /* waiting-eta: 32px 1fr auto → 32px 1fr, person a segunda fila */
  .waiting-eta {
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    padding: var(--s-3) var(--s-4) !important;
  }
  .waiting-eta .person {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    text-align: left !important;
    display: flex !important;
    gap: var(--s-2) !important;
    padding-top: var(--s-2) !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }
  .waiting-eta .person b {
    display: inline !important;
  }

  /* deadline-block: 1fr auto → stack */
  .deadline-block {
    grid-template-columns: 1fr !important;
    padding: var(--s-3) var(--s-4) !important;
  }
  .deadline-block .actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .deadline-block .actions .btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* ── Screen 12 · Carga Excel editoriales ── */

  /* count-summary: 1fr auto → stack, .change a segunda fila */
  .count-summary {
    grid-template-columns: 1fr !important;
    gap: var(--s-2) !important;
  }
  .count-summary .left {
    flex-wrap: wrap !important;
    gap: var(--s-3) !important;
  }
  .count-summary .change {
    font-size: 10px !important;
  }

  /* ufstep-head: 40px 1fr auto → 40px 1fr, status a segunda fila */
  .ufstep-head {
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    padding: var(--s-3) var(--s-4) !important;
  }
  .ufstep-status {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    padding-bottom: var(--s-2) !important;
  }
  .ufstep-title h3 {
    font-size: 17px !important;
  }

  /* template-row: 80px 1fr auto → 80px 1fr, botón a segunda fila */
  .template-row {
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: var(--s-4) var(--s-4) !important;
  }
  /* ── table-toolbar (screen 12 · filtros tabla validación) ── */
  /* .filters + .search + .right no caben en 375px en fila → wrap */
  .table-toolbar {
    flex-wrap: wrap !important;
    gap: var(--s-2) !important;
    padding: var(--s-3) var(--s-4) !important;
  }
  .table-toolbar .filters {
    order: 1 !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .table-toolbar .filters::-webkit-scrollbar { display: none; }
  .table-toolbar .filters button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
  .table-toolbar .search {
    order: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .table-toolbar .right {
    order: 3 !important;
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    font-size: 10px !important;
  }
  .table-toolbar .right .btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* el 3er hijo es un div wrapper sin clase que contiene los botones */
  .template-row > *:last-child {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--s-2) !important;
  }
  .template-row > *:last-child .btn {
    justify-content: center !important;
    text-align: center !important;
  }

  /* file-row: 48px 1fr auto → 48px 1fr, actions a segunda fila */
  .file-row {
    grid-template-columns: 48px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: var(--s-3) var(--s-3) !important;
    padding: var(--s-4) !important;
  }
  .file-row .actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    flex-wrap: wrap !important;
  }
  .file-row .actions .btn,
  .file-row .actions a.btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* val-summary: repeat(3,1fr) auto → stack a 1 columna */
  .val-summary {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .val-progress {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--s-4) !important;
    padding: var(--s-4) !important;
  }
  .val-stat .num {
    font-size: 28px !important;
  }
  .val-stat {
    padding: var(--s-4) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }

  /* reload-notice: 40px 1fr auto → 40px 1fr, botón a segunda fila */
  .reload-notice {
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: var(--s-3) var(--s-3) !important;
    padding: var(--s-4) !important;
  }
  /* el 3er hijo es un div wrapper sin clase que contiene el botón */
  .reload-notice > *:last-child {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .reload-notice > *:last-child .btn {
    justify-content: center !important;
    text-align: center !important;
  }

  /* ============================================================
     Screen 25 · pp-row personas del evento
     grid-template-columns: 1fr 1fr → nombre encima del rol
     ============================================================ */
  .pp-row {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .pp-row .role {
    font-size: 11px !important;
  }

  /* ============================================================
     Screen 30 · log table
     Tabla densa: overflow-x scroll + avatar no se deforma
     ============================================================ */
  .lt-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .lt {
    min-width: 540px !important;
  }
  /* Avatar siempre circular — flex-shrink: 0 evita que se aplaste */
  .lt .user-cell .av {
    flex-shrink: 0 !important;
    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* ============================================================
   BREAKPOINT TABLET · 769–1100px (ya existe en algunos archivos)
   refuerzos aquí
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important;}
  .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;}
}