/* =====================================================================
   MOVIL.CSS — Capa de adaptación para celulares y tablets.

   Reglas de esta hoja:
   1. TODO va dentro de @media (max-width: ...). En escritorio (más de
      1280px; antes 1180px) esta hoja no aplica ninguna regla: la vista de escritorio
      queda exactamente igual que antes.
   2. Se carga al final (después de dashboard.css y de los estilos de cada
      pantalla) para ganar por orden de cascada sin tocar esas hojas.
   3. Trabaja junto con static/js/movil.js, que marca las tablas que se
      convierten en tarjetas (.mv-tarjetas) y las que solo se desplazan
      hacia los lados (.mv-scroll).
   4. Vistas SUNAT (SIRE, PLE, Registro 7.1, comparaciones): NUNCA se
      transforman. Conservan sus columnas y su orden; en celular solo se
      desplazan horizontalmente. Se marcan con data-mv="sunat" en la
      plantilla, o por sus clases .dash-tabla-ple / .dash-tabla-comparar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLET Y LAPTOP PEQUEÑA (menos de 1280px): solo lo imprescindible.
   --------------------------------------------------------------------- */
@media (max-width: 1279.98px) { /* antes 1180px (auditoría 2026-10, UX-20) */
  /* Los paneles laterales (drawers) tenían un mínimo de 460px: en
     pantallas angostas se salían del borde. Se mantiene el mínimo de
     460px siempre que la pantalla lo permita. */
  .dash-drawer { min-width: min(460px, 100vw); }
}

/* ---------------------------------------------------------------------
   AVISO "DESLIZA" sobre tablas que no caben y se desplazan hacia los
   lados. Lo inserta static/js/movil.js solo en celular y tablet (hasta
   1279px), así que en escritorio nunca aparece.
   --------------------------------------------------------------------- */
.mv-desliza-aviso {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; color: var(--iv-ink-soft);
  margin: 0 0 0.35rem;
}
.mv-desliza-aviso svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   TABLET (769 a 1279px): pista de desplazamiento en tablas anchas.
   Antes, en tablet la barra de desplazamiento horizontal quedaba oculta
   (barras "flotantes" del sistema) y nada indicaba que había más
   columnas. movil.js marca con .mc-desborda la caja que no cabe y pone el
   aviso "Desliza..." encima; aquí la barra se deja siempre visible.
   (auditoría 2026-10, UX-20)
   --------------------------------------------------------------------- */
@media (min-width: 768.02px) and (max-width: 1279.98px) {
  .mc-desborda { -webkit-overflow-scrolling: touch; }
  .mc-desborda::-webkit-scrollbar { height: 10px; }
  .mc-desborda::-webkit-scrollbar-track { background: var(--mc-superficie); }
  .mc-desborda::-webkit-scrollbar-thumb { background: var(--mc-borde-campo); border-radius: 5px; }
}

/* ---------------------------------------------------------------------
   CELULAR Y TABLET VERTICAL (hasta 768px)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ---- Base ---------------------------------------------------------- */
  html, body { overflow-x: clip; }
  body { -webkit-tap-highlight-color: rgba(0, 103, 184, 0.12); }
  .contenido { min-width: 0; padding-bottom: 5.5rem !important; } /* espacio para que Menti y los botones flotantes no tapen los últimos botones */
  main.contenido > * { max-width: 100%; }
  img, video, canvas, iframe { max-width: 100%; }
  pre { white-space: pre-wrap; word-break: break-word; }

  /* Evita que el teclado del celular haga zoom al tocar un campo
     (los navegadores lo hacen cuando la letra es menor a 16px). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }

  /* ---- Barra superior ------------------------------------------------ */
  .topbar-v2 { padding: 0 0.6rem 0 0.4rem; gap: 0.4rem; }
  .tb-inicio { gap: 0.45rem; }
  .tb-producto { display: none; }
  .tb-logo img { height: 30px; }
  .tb-empresa-pill { min-width: 0; max-width: 46vw; }
  .tb-empresa-pill .tb-emp-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .tb-empresa-pill .tb-emp-txt small { display: none; }
  .tb-acciones { gap: 0.3rem; flex-shrink: 0; }
  .tb-notif-panel, .tb-avatar-panel { max-width: calc(100vw - 1rem); }
  .tb-notif-panel { right: -3.2rem; }

  /* ---- Cajón del menú: toques más cómodos ---------------------------- */
  .sidebar a.nav-link, .sidebar details.nav-group summary { min-height: var(--mc-toque-min); }
  /* 0.75rem arriba y abajo + una línea de texto = 44px. La regla anterior
     (.sidebar a.subenlace, 0.6rem) perdía contra la del menú en
     interior.css y los subenlaces quedaban en ~37px. Auditoría 2026-10, UX-21 */
  .sidebar details.nav-group a.subenlace { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  /* ---- Migas y encabezados de página --------------------------------- */
  .cfg-migas { flex-wrap: wrap; font-size: 0.82rem; }
  .dash-page-head { align-items: flex-start; }
  .dash-page-head > * { max-width: 100%; }
  .dash-titulo-pagina { font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
  .dash-subtitulo { font-size: 0.86rem; }
  /* Algunas notas bajo el título usan margen negativo en línea; con el
     título en dos líneas se montaban encima. */
  .dash-titulo-pagina + .dash-nota, .dash-titulo-pagina + .dash-subtitulo,
  .dash-titulo-pagina + p, .dash-titulo-pagina + .um-tabs { margin-top: 0.4rem !important; }

  /* ---- Tarjetas y contenedores --------------------------------------- */
  .dash-tarjeta { padding: 1rem; }
  .dash-tarjeta-header { gap: 0.5rem; }
  .dash-tarjeta-header > * { min-width: 0; }
  .dash-wrap, .dash-wrap-panel { max-width: 100%; }

  /* ---- Botones: objetivo táctil mínimo de 44px -----------------------
     (antes 42px los botones, 36px los pequeños y 40px las pestañas;
     auditoría 2026-10, UX-21) */
  main .dash-btn, main .dash-btn-outline, main .dash-btn-verde, main .dash-btn-rojo,
  .dash-drawer .dash-btn, .dash-drawer .dash-btn-outline,
  .dash-modal-acciones .dash-btn, .dash-modal-acciones .dash-btn-outline {
    min-height: var(--mc-toque-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
  }
  main .dash-btn-sm, main .dash-btn-outline-sm { min-height: var(--mc-toque-min); display: inline-flex; align-items: center; }
  /* Cualquier otro botón o pestaña del contenido: mínimo 44px de alto. Va
     con especificidad cero (:where) para no pisar anchos ni colores propios
     de cada pantalla; min-height gana igual a un "height" más chico. */
  :where(main, .dash-drawer, .dash-overlay) :where(button, [role="tab"], input[type="submit"], input[type="button"], .dash-pestana, .um-tab, .inv-tab, .inv-subtab, .rvie-tab, .cf-nav-it, .mp-icon-btn) {
    min-height: var(--mc-toque-min);
  }
  /* Menú interno de Configuración (tiene min-height propio de 40px) */
  .cf-nav-it { min-height: var(--mc-toque-min); }
  /* Barra superior y cajón del menú */
  .menu-movil-btn, .tb-icon-btn { width: var(--mc-toque-min); height: var(--mc-toque-min); }
  .tb-avatar-btn { min-height: var(--mc-toque-min); height: var(--mc-toque-min); }
  .menu-movil-cerrar { width: var(--mc-toque-min); height: var(--mc-toque-min); }
  /* Filas de botones: que bajen de línea en vez de salirse. */
  .dash-page-head > div, .dash-tarjeta-header > div, .dash-modal-acciones { flex-wrap: wrap; }

  /* ---- Formularios --------------------------------------------------- */
  .dash-form-grid-2, .inv-grid-2, .opun-form-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-campo input, .dash-campo select, .dash-campo textarea,
  .dash-input, .form-control, .form-select { min-height: var(--mc-toque-min); max-width: 100%; }
  .dash-campo { min-width: 0; }
  .dash-selector-periodo, .dash-filtro-meses { flex-wrap: wrap; }
  .dash-filtro-meses select { max-width: 100%; min-width: 0; }
  .dash-selector-periodo select { min-height: var(--mc-toque-min); }
  form { max-width: 100%; }

  /* Filas en línea (style="display:flex" escrito en la plantilla) que
     contienen campos o botones: que bajen de línea en vez de salirse.
     Solo afecta a filas con controles, no a textos con ícono. */
  main [style*="display: flex"]:has(> .dash-btn, > .dash-btn-outline, > button, > .dash-campo, > input, > select, > form),
  main [style*="display:flex"]:has(> .dash-btn, > .dash-btn-outline, > button, > .dash-campo, > input, > select, > form),
  .dash-drawer [style*="display: flex"]:has(> .dash-btn, > .dash-btn-outline, > button, > .dash-campo, > input, > select),
  .dash-drawer [style*="display:flex"]:has(> .dash-btn, > .dash-btn-outline, > button, > .dash-campo, > input, > select) { flex-wrap: wrap !important; }
  /* Anchos mínimos fijos escritos en la plantilla (220px, 280px...) en
     campos y cajas: en celular no pueden superar el ancho de la pantalla. */
  main [style*="min-width"]:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(col),
  .dash-drawer [style*="min-width"]:not(table):not(tr):not(th):not(td) { min-width: 0 !important; }
  main .dash-campo[style*="min-width"] { flex: 1 1 100%; }
  /* Campos en fila: cada uno conserva un ancho legible (así "Diciembre" no
     se corta) y, si no caben, pasan a la siguiente línea. */
  main [style*="flex"] > .dash-campo:not([style*="min-width"]) { min-width: 128px; }

  /* ---- Pestañas: una sola fila deslizable ---------------------------- */
  .dash-pestanas, .um-tabs, .inv-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    max-width: 100%;
  }
  .dash-pestanas::-webkit-scrollbar,
  .um-tabs::-webkit-scrollbar, .inv-tabs::-webkit-scrollbar { display: none; }
  .dash-pestana, .um-tab { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
  /* Pestañas tipo botón (Vista de Gestión / Vista Tributaria...): bajan de
     línea y se reparten el ancho, así se ven todas sin deslizar. */
  .dash-tabs { flex-wrap: wrap; }
  .dash-tab { flex: 1 1 auto; text-align: center; min-height: var(--mc-toque-min); display: inline-flex; align-items: center; justify-content: center; }

  .dash-chips-grupo { gap: 0.4rem; }
  .dash-chip { min-height: var(--mc-toque-min); display: inline-flex; align-items: center; }

  /* ---- Paneles laterales (drawers) y modales ------------------------- */
  .dash-drawer { width: 100vw !important; max-width: 100vw; min-width: 0; padding: 1rem; }
  .dash-drawer-cerrar { width: var(--mc-toque-min); height: var(--mc-toque-min); position: sticky; top: 0; z-index: 5; }
  .dash-modal-aviso, .mc-confirmar-caja { max-width: calc(100vw - 1.5rem); }
  .dash-overlay { padding: 0.75rem; }

  /* ---- Tablas: comportamiento general -------------------------------- */
  .dash-tabla-scroll, .mv-scroll { -webkit-overflow-scrolling: touch; max-width: 100%; }
  .mv-scroll { overflow-x: auto; }

  /* (El aviso "Desliza" ahora está más arriba, fuera de este bloque:
     también se usa en tablet. Auditoría 2026-10, UX-20) */

  /* ---- Tablas convertidas en tarjetas (las marca movil.js) -----------
     Los "display" van dentro de :where() (especificidad cero) a propósito:
     así cualquier clase propia de la pantalla que oculte una fila o una
     celda (.paso-oculto, .dash-oculta-movil, filtros...) sigue ganando y
     nada que estaba oculto aparece de pronto en el celular. */
  :where(table.mv-tarjetas), :where(table.mv-tarjetas) > tbody, :where(table.mv-tarjetas) > tfoot { display: block; }
  :where(table.mv-tarjetas) > tbody > tr, :where(table.mv-tarjetas) > tfoot > tr { display: block; }
  :where(table.mv-tarjetas) > tbody > tr > td, :where(table.mv-tarjetas) > tbody > tr > th,
  :where(table.mv-tarjetas) > tfoot > tr > td, :where(table.mv-tarjetas) > tfoot > tr > th { display: flow-root; }
  table.mv-tarjetas { width: 100% !important; min-width: 0 !important; }
  table.mv-tarjetas > thead { display: none; }
  table.mv-tarjetas > tbody > tr,
  table.mv-tarjetas > tfoot > tr {
    background: var(--mc-blanco);
    border: 1px solid var(--iv-line);
    margin: 0 0 0.6rem;
    padding: 0.55rem 0.8rem;
  }
  table.mv-tarjetas > tfoot > tr { background: var(--iv-surface); font-weight: 700; }
  table.mv-tarjetas > tbody > tr > td,
  table.mv-tarjetas > tbody > tr > th,
  table.mv-tarjetas > tfoot > tr > td,
  table.mv-tarjetas > tfoot > tr > th {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.3rem 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--iv-surface) !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 0.86rem;
  }
  table.mv-tarjetas > tbody > tr > td:last-child,
  table.mv-tarjetas > tfoot > tr > td:last-child,
  table.mv-tarjetas > tfoot > tr > th:last-child { border-bottom: 0 !important; }
  table.mv-tarjetas > tbody > tr > td::before,
  table.mv-tarjetas > tfoot > tr > td::before,
  table.mv-tarjetas > tfoot > tr > th::before {
    content: attr(data-mv-label);
    float: left;
    max-width: 46%;
    margin-right: 0.75rem;
    padding-top: 0.12rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--iv-ink-soft);
  }
  table.mv-tarjetas td[data-mv-label=""]::before,
  table.mv-tarjetas th[data-mv-label=""]::before { content: none; }
  /* Primera celda = título de la tarjeta */
  table.mv-tarjetas > tbody > tr > td.mv-titulo {
    text-align: left !important;
    font-weight: 700;
    font-size: 0.92rem;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid var(--iv-line) !important;
  }
  table.mv-tarjetas > tbody > tr > td.mv-titulo::before { content: none; }
  /* Celda de acciones: botones alineados a la derecha */
  :where(table.mv-tarjetas) > tbody > tr > td.mv-acciones { display: flex; }
  table.mv-tarjetas > tbody > tr > td.mv-acciones {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem !important;
  }
  table.mv-tarjetas > tbody > tr > td.mv-acciones > * { margin: 0 !important; }
  /* Celdas vacías: no ocupan espacio */
  table.mv-tarjetas > tbody > tr > td.mv-vacia { display: none; }
  /* Filas de una sola celda (mensajes "sin datos", subtítulos, detalles) */
  table.mv-tarjetas > tbody > tr.mv-fila-unica { padding: 0.75rem; }
  table.mv-tarjetas > tbody > tr.mv-fila-unica > td { text-align: left !important; border: 0 !important; }
  table.mv-tarjetas > tbody > tr.mv-fila-unica > td::before { content: none; }
  /* Campos dentro de una tarjeta (tablas editables) */
  table.mv-tarjetas td input:not([type="checkbox"]):not([type="radio"]),
  table.mv-tarjetas td select,
  table.mv-tarjetas td textarea { width: 54% !important; min-width: 0 !important; display: inline-block; }
  table.mv-tarjetas td.mv-titulo input,
  table.mv-tarjetas td.mv-titulo select,
  table.mv-tarjetas tr.mv-fila-unica input,
  table.mv-tarjetas tr.mv-fila-unica select { width: 100% !important; }
  /* El contenedor ya no necesita marco ni scroll: cada fila es su tarjeta */
  .mv-contenedor-tarjetas { border: 0 !important; background: transparent !important; overflow: visible !important; padding: 0 !important; }

  /* ---- Líneas de asiento (Cuenta / Debe / Haber / Quitar) -------------
     Formularios de asiento manual, edición de asiento y paso de
     Contabilización de Nueva operación. En celular cada línea queda así:
       [ Cuenta ........................ ] [✕]
       [ Debe       ]  [ Haber        ]
     Se marca con la clase .mv-lineas-asiento en la tabla. */
  :where(table.mv-lineas-asiento), :where(table.mv-lineas-asiento) > tbody, :where(table.mv-lineas-asiento) > tfoot { display: block; }
  :where(table.mv-lineas-asiento) > tbody > tr, :where(table.mv-lineas-asiento) > tfoot > tr { display: grid; }
  :where(table.mv-lineas-asiento) > tbody > tr > td, :where(table.mv-lineas-asiento) > tfoot > tr > td { display: block; }
  table.mv-lineas-asiento { width: 100% !important; }
  table.mv-lineas-asiento > thead { display: none; }
  table.mv-lineas-asiento > tbody > tr,
  table.mv-lineas-asiento > tfoot > tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.35rem 0.5rem;
    align-items: end;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--iv-line);
  }
  table.mv-lineas-asiento > tbody > tr > td,
  table.mv-lineas-asiento > tfoot > tr > td {
    width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important;
  }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(1),
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(2),
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(3),
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(3) { grid-column: 2; grid-row: 2; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(4),
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  table.mv-lineas-asiento > tbody > tr > td:only-child { grid-column: 1 / -1; grid-row: auto; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(2):not(:only-child)::before,
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(2)::before { content: "Debe"; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(3)::before,
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(3)::before { content: "Haber"; }
  table.mv-lineas-asiento > tbody > tr > td:nth-child(2):not(:only-child)::before,
  table.mv-lineas-asiento > tbody > tr > td:nth-child(3)::before,
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(2)::before,
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(3)::before {
    display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--iv-ink-soft); margin-bottom: 0.2rem;
  }
  table.mv-lineas-asiento > tfoot > tr { border-bottom: 0; background: var(--iv-surface); padding: 0.6rem 0.6rem; font-weight: 700; }
  table.mv-lineas-asiento > tfoot > tr > td:nth-child(4) { display: none; }
  table.mv-lineas-asiento select, table.mv-lineas-asiento input:not([type="checkbox"]) { width: 100% !important; min-width: 0 !important; max-width: 100%; }
  table.mv-lineas-asiento .opun-linea-quitar, table.mv-lineas-asiento .btn-quitar-reparto { min-width: var(--mc-toque-min); min-height: var(--mc-toque-min); }
  /* Repartos a cuentas destino (dentro de una línea): cuenta arriba, monto y ✕ abajo */
  :where(table.tabla-repartos-destino) > tbody { display: block; }
  :where(table.tabla-repartos-destino) > tbody > tr { display: grid; }
  :where(table.tabla-repartos-destino) > tbody > tr > td { display: block; }
  table.tabla-repartos-destino > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.3rem 0; }
  table.tabla-repartos-destino > tbody > tr > td { padding: 0 !important; min-width: 0; }
  table.tabla-repartos-destino > tbody > tr > td:nth-child(1) { grid-column: 1 / -1; }

  /* ---- Tablas SUNAT: estructura intacta, solo desplazamiento --------- */
  /* 0.78rem (14 px con la base de 18 px de abajo); antes 0.74rem (11,8 px). Auditoría 2026-10, U2-12 */
  [data-mv="sunat"] table, table.dash-tabla-ple, table.dash-tabla-comparar { font-size: 0.78rem; }
  [data-mv="sunat"] .dash-tabla-scroll,
  [data-mv="sunat"] .mv-scroll { max-height: 75vh; overflow: auto; }

  /* ---- Libro Diario (vista de gestión): cada asiento en 3 líneas -------
       15 sep  [COMPRA]  CUO .......................... >
       Título / glosa del asiento
       DEBE 1,200.00                     HABER 1,200.00          */
  .dash-diario-cab { flex-wrap: wrap; row-gap: 0.25rem; gap: 0.5rem; padding: 0.6rem 0.8rem; }
  .dash-diario-fecha { order: 1; width: auto; }
  .dash-diario-pill { order: 2; width: auto; max-width: 150px; }
  .dash-diario-cuo { order: 3; flex: 1 1 auto; width: auto; min-width: 0; }
  .dash-diario-chevron { order: 4; }
  .dash-diario-glosa { order: 5; flex-basis: 100%; white-space: normal; }
  .dash-diario-monto { order: 6; flex: 1 1 0; width: auto; text-align: left; }
  .dash-diario-monto.haber { text-align: right; }
  .dash-diario-monto::before { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--iv-ink-soft); margin-right: 0.35rem; }
  .dash-diario-monto.debe::before { content: "DEBE"; }
  .dash-diario-monto.haber::before { content: "HABER"; }
  .dash-diario-detalle { padding: 0.2rem 0.8rem 0.85rem; }

  /* ---- Indicadores / KPIs / rejillas --------------------------------- */
  .dash-metricas, .dash-renta-kpis, .dash-igv-kpis, .pi-kpis, .cf-grid { grid-template-columns: 1fr !important; }
  .dash-resumen-mes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dash-columnas, .dash-cxc-layout, .dash-af-layout, .mp-rej, .cf-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-ind-card, .dash-metrica { min-width: 0; }
  /* Rejillas maestro-detalle: con "1fr" una tabla ancha estiraba toda la
     rejilla fuera de la pantalla; minmax(0, 1fr) la mantiene al ancho. */
  .inv-md-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .inv-md-grid > *, .dash-af-layout > *, .dash-cxc-layout > *, .dash-columnas > *, .mp-rej > *, .cf-layout > * { min-width: 0; }
  .dash-ind-valor, .dash-metrica-valor, .dash-renta-kpi-valor, .vt-kpi-n { overflow-wrap: anywhere; }

  /* ---- Estados financieros: tablas de 2-4 columnas que sí caben ------ */
  .dash-fin-col { padding: 0.9rem 0.85rem; }
  .dash-fin-tabla td { font-size: 0.82rem; padding-left: 0.2rem; padding-right: 0.2rem; }
  .dash-fin-cuenta td { font-size: 0.8rem; }
  .dash-fin-cuenta td:first-child { padding-left: 0.6rem; }
  .dash-fin-tabla td:first-child { overflow-wrap: anywhere; }
  /* El % de participación baja debajo del monto: así el nombre del rubro
     conserva más ancho y ninguna cifra se sale de la pantalla. */
  .dash-fin-pct, .dash-flujo-pct { display: block; margin-left: 0; }
  .dash-fin-var, .dash-fin-var-pct { white-space: normal; font-size: 0.74rem; }

}

/* ---------------------------------------------------------------------
   CELULAR PEQUEÑO (hasta 480px)
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tb-empresa-pill { max-width: 40vw; }
  .tb-avatar-circ { width: 32px; height: 32px; }
  /* interior.css baja la campana a 36px en celular pequeño: se mantiene 44px. */
  .tb-icon-btn { width: var(--mc-toque-min); height: var(--mc-toque-min); }
  .dash-titulo-pagina { font-size: 1.15rem; }

  /* Botones de encabezado: ocupan el ancho para tocarlos fácil */
  .dash-page-head > div:not(.dash-page-head-izquierda) > .dash-btn,
  .dash-page-head > div:not(.dash-page-head-izquierda) > .dash-btn-outline { flex: 1 1 auto; }
  .dash-modal-acciones .dash-btn, .dash-modal-acciones .dash-btn-outline { flex: 1 1 100%; }

  .dash-resumen-mes { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-drawer { padding: 0.85rem; }
}

/* =====================================================================
   SEGUNDA AUDITORÍA 2026-10 (prioridad media): U2-12, U2-14 y U2-16.
   Igual que el resto de esta hoja, TODO va dentro de @media (max-width:
   768px): en PC (y en tablet horizontal / laptop) no cambia nada.
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- U2-12: letra legible en celular ------------------------------
     Casi todo el texto de las pantallas está en rem (0.78rem en tablas,
     0.85rem en notas, 0.66rem en encabezados de tabla) y en celular medía
     de 10,6 a 13,8 px. Con la base del documento en 18 px (112.5 %) todo
     sube en la misma proporción y se conserva el diseño: texto normal
     ~16 px, tablas y etiquetas 14 px, notas 15 px. Los campos ya estaban
     en 16 px fijos (arriba), así que no cambian. */
  html { font-size: 112.5%; }
  /* Encabezados de tabla: 0.66rem / 0.72rem eran 10,6 / 11,5 px. */
  .dash-tabla-densa th, .dash-tabla th { font-size: 0.75rem; }
  /* Botones pequeños (Editar, Eliminar, Comparación...): 14 px. */
  main .dash-btn-outline-sm, main .dash-btn-sm { font-size: 0.8rem; }
  /* El título de página no necesita crecer con la base. */
  .dash-titulo-pagina { font-size: 1.15rem; }

  /* ---- U2-14: registros de compras y ventas ------------------------- */
  /* Conmutador «Resumen / Tabla completa (SUNAT)»: solo si registro_movil.js lo activó. */
  .rg-movil.rg-vista-resumen > .rg-movil-conmutador.dash-tabs,
  .rg-movil.rg-vista-tabla > .rg-movil-conmutador.dash-tabs { display: flex; flex-wrap: nowrap; gap: 0.4rem; margin: 0 0 0.75rem; }
  .rg-movil-conmutador .dash-tab { flex: 1 1 50%; }
  .rg-movil.rg-vista-resumen > .rg-resumen-movil { display: block; }
  .rg-movil.rg-vista-resumen > .rg-tabla-completa,
  .rg-movil.rg-vista-resumen > .mv-desliza-aviso { display: none; }
  /* Tarjetas: proveedor o cliente y total arriba; comprobante y fecha debajo. */
  .rg-resumen-movil { list-style: none; margin: 0 0 0.75rem; padding: 0; }
  .rg-tarjeta { background: var(--mc-blanco); border: 1px solid var(--iv-line); padding: 0.65rem 0.8rem; margin: 0 0 0.5rem; }
  .rg-tarjeta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .rg-tarjeta-fila > * { min-width: 0; }
  .rg-tarjeta-tercero { font-weight: 700; color: var(--iv-ink); overflow-wrap: anywhere; }
  .rg-tarjeta-total { font-weight: 700; color: var(--iv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rg-tarjeta-detalle { color: var(--iv-ink-soft); font-size: 0.86rem; margin-top: 0.2rem; }
  .rg-tarjeta-numero { color: var(--iv-ink); }
  .rg-tarjeta-pie { align-items: center; margin-top: 0.45rem; }
  .rg-tarjeta-vacia { color: var(--iv-ink-soft); }
  .rg-tarjeta-totales { background: var(--iv-surface); font-weight: 700; }
  /* Tabla completa: columna fija con proveedor y serie-número (compras) y
     serie-número bajo el cliente (ventas); sin las 3 filas vacías de relleno. */
  th.rg-col-movil, td.rg-col-movil { display: table-cell; }
  .rg-solo-movil { display: block; }
  .rg-col-movil, .rg-movil .dash-col-fija { white-space: normal; min-width: 8.5rem; max-width: 10rem; overflow-wrap: anywhere; }
  .rg-col-tercero { display: block; font-weight: 600; }
  .rg-col-comprobante { display: block; color: var(--iv-ink-soft); font-variant-numeric: tabular-nums; }
  tr.rg-relleno { display: none; }

  /* ---- U2-16: objetivos táctiles de 44 px ---------------------------- */
  /* Mis empresas: cada acción es un botón de 44 px; «Eliminar empresa» va
     al final, en su propia línea y separada de las demás. Sigue llevando a
     su pantalla de confirmación. */
  .emp-acciones { gap: 0.5rem; justify-content: flex-end; width: 100%; }
  .emp-acciones > form > button, .emp-accion {
    min-height: var(--mc-toque-min); display: inline-flex; align-items: center; justify-content: center;
    padding: 0 0.8rem; border: 1px solid var(--iv-line); background: var(--mc-blanco); text-decoration: none;
  }
  .emp-accion.emp-accion-peligro {
    order: 99; flex: 1 1 100%; margin-top: 0.9rem; border-color: #C0392B;
  }
  /* Interruptores (Comparar con año anterior, Mostrar todas las líneas...). */
  a.dash-switch, label.dash-switch { min-height: var(--mc-toque-min); }
  /* Migas de pan y enlaces «← Volver». */
  .ux-migas a, .cfg-migas a, .dash-volver { display: inline-flex; align-items: center; min-height: var(--mc-toque-min); }
  .dash-volver { margin-bottom: 0.5rem; }
  /* Enlaces dentro de notas («Créalo aquí», «Administrar locales»...): el
     área táctil crece con relleno y margen negativo, sin mover el texto. */
  main .dash-nota a { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
  /* Enlaces de tablas en tarjetas (Periodos: Situación financiera, Resultados, KPIs...). */
  .dash-enlaces a, table.mv-tarjetas td.mv-titulo a { display: inline-flex; align-items: center; min-height: var(--mc-toque-min); }
  /* Chips y rangos (Por cobrar/Por pagar, «3 meses» de Caja y Bancos). */
  .cxc-chip, .dash-grafico-rango a { display: inline-flex; align-items: center; min-height: var(--mc-toque-min); }
  .dash-grafico-rango { flex-wrap: wrap; }
  /* Configuración: buscador y botones de 34-38 px. */
  .cf-buscar { min-height: var(--mc-toque-min); }
  .cf-buscar input { align-self: stretch; }
  main .mp-btn, .cf-btn-peligro { min-height: var(--mc-toque-min); }
  /* Listas desplegables sueltas (rangos de meses de Balance y Resultados),
     accesos directos de Inicio, «Editar» de Inventario y «Editar permisos». */
  main select { min-height: var(--mc-toque-min); }
  .mp-barra a, main .inv-btn-sm, .um-rol-btn, main a.dash-nota { min-height: var(--mc-toque-min); }
  main a.dash-nota, main .inv-btn-sm, .um-rol-btn { display: inline-flex; align-items: center; }
}