/* ===========================================================================
   KIWI ERP · AJUSTES DEL TELÉFONO (UX móvil, 27-sep-2026)
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de estilo.css (parciales/cabeza.ejs). Vive aparte para que
   estos cambios no choquen con quien edita las secciones de estilo.css en
   paralelo, y para que se lean juntos: todo lo que decide cómo se ve el
   sistema en 375 px está acá.

   De dónde sale (QA visual del 26-sep y benchmark de UX):
     1. Ocho listas se desplazaban de lado en 375 px (clientes 489, facturas
        512, OC 461, existencias 929): la causa era UNA regla, la tira de
        botones de los filtros («Filtrar · Limpiar · Exportar · Importar») que
        no envolvía.
     2. La tarjeta del teléfono ponía un dato por renglón con su rótulo encima:
        una factura medía 404 px y un artículo 564. Ahora ~90 px (§2).
     3. La barra superior medía ~200 px con los tres distintivos de ambiente
        (§3); ahora es un renglón.
     4. Objetivos táctiles de 32-42 px (paginado, calendario, vista previa).

   Probado con `scripts/qa-movil.js` (scrollWidth ≤ 375 en todas las listas).
   Casi todo va en el corte de 760 px, que es donde estilo.css §19 ya pasa las
   tablas a tarjetas y el menú a cajón: un segundo corte en 600 dejaba entre
   601 y 760 la tarjeta larga de antes.
   ======================================================================== */

/* Fuera del teléfono el botón «Más datos» y su celda no existen: la tabla de
   escritorio conserva exactamente sus columnas. */
.tarjeta-plegar,
.t-solo-plegar { display: none; }
/* Las acciones rápidas repetidas como renglones del «⋯» (parciales/
   acciones-fila.ejs) y el «⋯» que existe solo para ellas: únicamente en la
   tarjeta del teléfono. */
.ambiente-rotulo-corto { display: none; }
.menu-acciones-panel .solo-tarjeta,
.menu-acciones.solo-tarjeta-menu { display: none; }

/* ---------------------------------------------------------------------------
   0 · El menú del distintivo de ambiente (en todos los anchos)
   ------------------------------------------------------------------------- */
.ambiente-menu { position: relative; flex: none; }
.ambiente-menu > summary {
  list-style: none;
  cursor: pointer;
  min-height: 36px;
}
.ambiente-menu > summary::-webkit-details-marker { display: none; }
.ambiente-menu > summary:focus-visible { outline: 2px solid var(--foco, #2563eb); outline-offset: 2px; }
.ambiente-flecha { transition: transform var(--mov-rapido) var(--curva); }
.ambiente-menu[open] .ambiente-flecha { transform: rotate(180deg); }
.ambiente-panel {
  position: absolute;
  top: calc(100% + var(--e1));
  right: 0;
  z-index: 45;
  width: min(320px, calc(100vw - 24px));
  padding: var(--e3) var(--e4);
  display: grid;
  gap: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.ambiente-dato { display: grid; gap: var(--e1); justify-items: start; }
.ambiente-dato p { margin: 0; font-size: var(--t-sm); }
.ambiente-titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ambiente-panel .conmutador-carril button { min-height: 40px; padding: var(--e1) var(--e3); }
.ambiente-ayuda { font-size: var(--t-sm); }

@media (prefers-reduced-motion: reduce) {
  .ambiente-flecha { transition: none; }
}

/* ---------------------------------------------------------------------------
   0a · La descripción de cada pantalla, en una frase
   ---------------------------------------------------------------------------
   Las cabeceras traían párrafos de 40-190 palabras que en el teléfono empujaban
   la lista una pantalla entera hacia abajo. Queda una frase; el resto se lee al
   tocar «¿Cómo funciona esta pantalla?», que se ve igual que el enlace de ayuda
   de siempre y adentro trae el capítulo del manual. */
.ayuda-pantalla { margin-top: var(--e1); max-width: 80ch; }
.ayuda-pantalla > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: 32px;
  font-size: var(--t-md);
  color: var(--texto-suave);
  cursor: pointer;
  list-style: none;
}
.ayuda-pantalla > summary::-webkit-details-marker { display: none; }
.ayuda-pantalla > summary:hover { color: var(--acento-fuerte); text-decoration: underline; }
.ayuda-pantalla-cuerpo {
  margin-top: var(--e2);
  padding: var(--e3) var(--e4);
  font-size: var(--t-md);
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.ayuda-pantalla-cuerpo > p { margin: 0 0 var(--e2); }
.ayuda-pantalla-cuerpo > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   0b · Varios avisos en UNO plegable (detalle de factura rechazada)
   ---------------------------------------------------------------------------
   Mismo aspecto que un `.aviso` ámbar; el resumen dice cuántos hay y la lista
   los separa con una raya. Con algo en rojo adentro, el borde también es rojo
   (y la plantilla lo abre): lo grave no se esconde detrás de un «ver más». */
.aviso-grupo {
  margin-bottom: var(--e4);
  border: 1px solid var(--alerta-borde);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--alerta-suave);
  color: var(--texto);
  font-size: var(--t-md);
}
.aviso-grupo.con-error { border-color: var(--destructivo-borde); }
.aviso-grupo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e2) var(--e4);
  color: var(--alerta);
  cursor: pointer;
  list-style: none;
}
.aviso-grupo > summary::-webkit-details-marker { display: none; }
.aviso-grupo > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--mov-rapido) var(--curva);
}
.aviso-grupo[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.aviso-grupo.con-error > summary { color: var(--destructivo-hundido); }
.aviso-grupo-cuenta { margin-left: auto; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.aviso-grupo-lista { margin: 0; padding: 0 var(--e4) var(--e3); list-style: none; }
.aviso-grupo-lista li { padding: var(--e2) 0; border-top: 1px solid var(--alerta-borde); }
.aviso-grupo-lista li.error { color: var(--destructivo-hundido); }
.aviso-grupo-lista li.exito { color: var(--acento-fuerte); }
@media (prefers-reduced-motion: reduce) {
  .aviso-grupo > summary::after { transition: none; }
}

@media (max-width: 760px) {
  /* 30-sep-2026 · en la computadora las listas muestran todas sus acciones como
     iconos (parciales/acciones-fila.ejs). En el teléfono no caben: los que
     venían del menú se esconden y vuelve el «⋯» con texto, como antes. */
  .acciones-por-fila > .desde-menu { display: none; }
  .menu-acciones.solo-movil-menu { display: inline-block; }
  .acciones-por-fila.todo-visible { flex-wrap: nowrap; max-width: none; }
  /* Los mínimos de las columnas de texto (estilo.css, 05-oct-2026) son de la
     tabla de escritorio: en la tarjeta cada dato tiene el renglón entero. */
  .tabla .col-nombre,
  .tabla .col-estado-texto { min-width: 0; max-width: none; }
  .linea-chica { white-space: normal; }
  .nombre-2-lineas { max-width: none; }

  /* -------------------------------------------------------------------------
     1 · Nada empuja la página de lado
     ----------------------------------------------------------------------- */
  /* La causa de los ocho desbordes: `.filtros-acciones` era `display: flex`
     SIN `flex-wrap`, y con «Exportar a Excel» + «Importar» la tira medía más
     que la pantalla. Envuelve y cada botón toma la mitad o la línea entera. */
  .filtros-acciones { flex-wrap: wrap; }
  .filtros-acciones .boton { flex: 1 1 calc(50% - var(--e2)); min-width: 0; }
  .filtros-acciones .boton { white-space: normal; text-align: center; justify-content: center; }
  .encabezado-accion .acciones { width: 100%; }
  .encabezado-accion .acciones .boton { flex: 1 1 auto; justify-content: center; }
  /* Cualquier otra tira de botones de las pantallas (acciones de un detalle,
     de un bloque) también baja de línea en vez de salirse. */
  .acciones-fila,
  .acciones-documento,
  .campo-con-boton { flex-wrap: wrap; }
  /* Un chip largo («Pago registrado automáticamente: contado», +143 px en el
     QA) se parte en vez de estirar su contenedor. */
  .chip { white-space: normal; max-width: 100%; }
  /* Un número de 20 o 50 dígitos parte donde haga falta antes que desbordar. */
  .contenido .mono { overflow-wrap: anywhere; }

  /* -------------------------------------------------------------------------
     2 · Tarjetas compactas (public/js/tarjetas-movil.js)
     -------------------------------------------------------------------------
     Dos datos por renglón:

        principal ............................ [▾][iconos][⋯]
        sub
        estado ...................................... total

     y el resto plegado detrás de «▾ Más datos». Sin el script la tabla no
     lleva `.tarjeta-compacta` y queda la tarjeta larga de estilo.css §19. */
  .tabla.tarjeta-compacta tr:not(.t-fila-simple) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "principal acciones"
      "sub       acciones"
      "estado    total";
    column-gap: var(--e3);
    row-gap: 2px;
    align-items: center;
    margin-bottom: var(--e2);
    padding: var(--e2) var(--e2) var(--e2) var(--e3);
  }
  .tabla.tarjeta-compacta tr.con-marca:not(.t-fila-simple) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "marca principal acciones"
      "marca sub       acciones"
      "marca estado    total";
  }
  .tabla.tarjeta-compacta tr:not(.t-fila-simple) > td {
    width: auto;
    min-width: 0;
    padding: 0;
    border: none;
  }
  /* El rótulo encima de cada dato era lo que duplicaba el alto: en la tarjeta
     compacta el lugar dice qué es (el total a la derecha, el estado en chip). */
  .tabla.tarjeta-compacta td.t-principal::before,
  .tabla.tarjeta-compacta td.t-sub::before,
  .tabla.tarjeta-compacta td.t-estado::before,
  .tabla.tarjeta-compacta td.t-total::before,
  .tabla.tarjeta-compacta td.t-acciones::before,
  .tabla.tarjeta-compacta td.t-marca::before { content: none; }

  .tabla.tarjeta-compacta td.t-principal {
    grid-area: principal;
    font-weight: 600;
    overflow-wrap: anywhere;
    align-self: end;
  }
  .tabla.tarjeta-compacta td.t-principal .sutil,
  .tabla.tarjeta-compacta td.t-principal .d-bloque { font-weight: 400; }
  .tabla.tarjeta-compacta td.t-sub {
    grid-area: sub;
    font-size: var(--t-sm);
    color: var(--texto-suave);
    overflow-wrap: anywhere;
    align-self: start;
  }
  .tabla.tarjeta-compacta td.t-estado { grid-area: estado; font-size: var(--t-sm); }
  /* Del estado queda el chip; la aclaración de abajo («consultado el…»,
     «vence el…») sale al desplegar. */
  .tabla.tarjeta-compacta tr:not(.desplegada) td.t-estado > .sutil,
  .tabla.tarjeta-compacta tr:not(.desplegada) td.t-estado > .d-bloque:not(.chip) { display: none; }
  /* El dato de abajo del título, en dos renglones como máximo (el documento de
     un movimiento trae su descripción entera); completo al desplegar. */
  .tabla.tarjeta-compacta tr:not(.desplegada) td.t-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .tabla.tarjeta-compacta td.t-total {
    grid-area: total;
    justify-self: end;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .tabla.tarjeta-compacta td.t-acciones {
    grid-area: acciones;
    justify-self: end;
    align-self: start;
  }
  .tabla.tarjeta-compacta td.t-marca { grid-area: marca; align-self: start; }
  .tabla.tarjeta-compacta td.t-marca label.casilla { min-height: 44px; }
  .tabla.tarjeta-compacta td.t-oculta { display: none; }
  /* Los dos mini-iconos de vista previa que `vista-previa.js` pega al enlace:
     en la tarjeta el título ya abre el detalle, y dos iconos de 44 px al lado
     del nombre lo partían en tres renglones. */
  .tabla.tarjeta-compacta .acciones-previa { display: none; }

  /* Lo secundario: plegado. Desplegado, cada dato es un renglón rótulo/valor. */
  .tabla.tarjeta-compacta td.t-secundaria { display: none; grid-column: 1 / -1; }
  .tabla.tarjeta-compacta tr.desplegada td.t-secundaria {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e1) 0;
    border-top: 1px solid var(--borde);
    font-size: var(--t-sm);
    text-align: right;
  }
  .tabla.tarjeta-compacta tr.desplegada td.t-secundaria:first-of-type { margin-top: var(--e1); }
  .tabla.tarjeta-compacta tr.desplegada td.t-secundaria::before {
    display: inline;
    flex: none;
    text-align: left;
  }
  .tabla.tarjeta-compacta tr.desplegada td.t-secundaria > * { min-width: 0; }

  /* En la tarjeta quedan solo «▾» y «⋯»: los iconos rápidos pasan a ser los
     primeros renglones del «⋯», con texto. */
  .tabla.tarjeta-compacta .acciones-por-fila > .boton-icono:not(.tarjeta-plegar),
  .tabla.tarjeta-compacta .acciones-por-fila > form.en-linea { display: none; }
  .tabla.tarjeta-compacta .menu-acciones.solo-tarjeta-menu { display: inline-block; }
  .menu-acciones-panel.en-tarjeta form.solo-tarjeta { display: block; }
  .menu-acciones-panel.en-tarjeta .menu-acciones-item.solo-tarjeta { display: flex; }
  .tabla.tarjeta-compacta .acciones-por-fila { gap: var(--e1); }
  .tabla.tarjeta-compacta .t-solo-plegar { display: block; }
  .tabla.tarjeta-compacta .tarjeta-plegar { display: inline-flex; }
  .tarjeta-plegar .icono { transition: transform var(--mov-rapido) var(--curva); }
  tr.desplegada .tarjeta-plegar .icono { transform: rotate(180deg); }
  .tarjeta-plegar[aria-expanded="true"] { color: var(--texto); background: var(--apagado); }

  /* Las cifras de arriba de las listas («Guardada 0 · Aceptada 13…») iban una
     por renglón: seis tarjetas de 100 px antes del primer documento. De a dos. */
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .tarjetas .tarjeta-dato { padding: var(--e2) var(--e3); }
  .tarjetas .tarjeta-dato .numero { font-size: var(--t-xl); }

  /* -------------------------------------------------------------------------
     3 · La barra superior en un renglón
     -------------------------------------------------------------------------
     Menú, empresa, buscar, el distintivo de ambiente, campana y salir: todo en
     56 px. La empresa es lo que cede (puntos suspensivos); el rol ya está en el
     menú lateral. */
  .barra {
    flex-wrap: nowrap;
    gap: var(--e1);
    padding: var(--e1) var(--e2);
    min-height: 56px;
  }
  .barra-empresa { flex: 1 1 auto; min-width: 0; }
  .barra-empresa span { display: none; }
  .barra-derecha { flex: none; flex-wrap: nowrap; gap: 2px; margin-left: 0; }
  .barra-derecha .en-linea { display: inline-flex; }
  /* El chip: sin el icono de probeta y con el texto chico; el rótulo entero
     sigue en `aria-label` y adentro del menú. */
  .ambiente-menu > summary {
    min-height: 44px;
    padding: 0 var(--e2);
    gap: 2px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .ambiente-menu > summary > .icono:first-child { display: none; }
  .ambiente-rotulo { display: none; }
  .ambiente-rotulo-corto { display: inline; }
  /* Todo en producción y sin conmutador: el chip no avisa nada y no lleva a
     nada que no esté en Configuración. Se calla, como el viejo de producción. */
  .ambiente-menu.solo-informa { display: none; }
  /* estilo.css §19 calla `.distintivo-ambiente.produccion` en el teléfono (era
     el chip viejo, que no llevaba a nada). Este sí lleva al conmutador de
     carril cuando lo hay, así que se vuelve a mostrar. */
  .ambiente-menu:not(.solo-informa) > summary.distintivo-ambiente.produccion { display: inline-flex; }
  /* El panel se ancla a la ventana, no al chip: el chip no está en el borde y
     un panel de 320 px colgado de él se saldría por la izquierda. Sin `top`, el
     navegador lo deja justo debajo del chip. */
  .ambiente-panel {
    position: fixed;
    top: auto;
    left: var(--e3);
    right: var(--e3);
    width: auto;
    margin-top: var(--e2);
  }

  /* -------------------------------------------------------------------------
     4 · Objetivos táctiles de 44 px que faltaban (QA 26-sep)
     ----------------------------------------------------------------------- */
  .paginado select,
  .paginado input,
  .paginado button,
  .paginado .boton,
  .paginado-tamano select,
  .paginado-salto input[type="number"],
  .paginado-salto .boton { min-height: 44px; }
  /* El «Elegir archivos» del buzón medía 21 px de alto. */
  input[type="file"] { min-height: 44px; padding: var(--e2) 0; }
  .campo-fecha-boton { min-height: 44px; min-width: 44px; }
  .boton-fila { width: 44px; height: 44px; }
  /* El destino segmentado de «Aplicar la compra» (modo Mixta) medía 40 px. */
  .segmentado-destino button { min-height: 44px; }
  /* «Quitar la línea» del editor medía 40 × 40. */
  .boton-quitar { min-width: 44px; min-height: 44px; }
  .conmutador-carril button { min-height: 44px; }
  /* Todo <summary> que se toca para desplegar (menús, «Más detalles», el grupo
     de avisos) mide al menos lo mismo que un botón. */
  details > summary { min-height: 44px; }

  /* -------------------------------------------------------------------------
     5 · La ficha del tercero en lectura (B49)
     ----------------------------------------------------------------------- */
  /* En la edición la barra fija esconde el nombre (lo dice el encabezado); en
     la LECTURA el nombre vive en la barra, así que se ve. La barra deja de ser
     fija: con chips, acciones y pestañas mide más de media pantalla. */
  .ficha-barra.ficha-lectura { position: static; }
  .ficha-barra.ficha-lectura .ficha-barra-datos { display: block; }
  .ficha-lectura .ficha-barra-nombre { font-size: var(--t-lg); }
  .ficha-lectura .ficha-barra-acciones { justify-content: flex-start; }
  .ficha-lectura .ficha-barra-acciones > .boton { flex: 1 1 calc(50% - var(--e2)); min-height: 44px; }
  /* En la edición, el nombre también (sin los chips del padrón): el <h1> de la
     página es solo para el lector de pantalla. */
  .ficha-tercero-pagina .ficha-barra-datos { display: block; }
  .ficha-tercero-pagina .ficha-barra-chips { display: none; }
  .ficha-tercero-pagina .ficha-barra-nombre { font-size: var(--t-base); }
  /* Las pestañas como chips desplazables de lado (la tira se desplaza, la
     página no). */
  .ficha-pestanas {
    gap: var(--e2);
    padding: var(--e2) var(--e3);
    border-top: 1px solid var(--borde);
    scroll-snap-type: x proximity;
  }
  .ficha-pestanas a {
    scroll-snap-align: start;
    padding: 0 var(--e3);
    border: 1px solid var(--boton-borde);
    border-bottom-width: 1px;
    border-radius: var(--r-pastilla);
    background: var(--superficie);
  }
  .ficha-pestanas a[aria-current] {
    color: var(--superficie);
    background: var(--acento-fuerte);
    border-color: var(--acento-fuerte);
  }
  /* Tarjetas del Resumen en una columna y los dos paneles uno bajo el otro. */
  .ficha-cifras { grid-template-columns: minmax(0, 1fr); }
  .ficha-resumen,
  .ficha-actividad { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bloque-encabezado .boton.chico { min-height: 44px; }
  .linea-tiempo li { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
}

/* ---------------------------------------------------------------------------
   Benchmark #11 · lista de artículos liviana en el teléfono
   ---------------------------------------------------------------------------
   La tarjeta queda en tres renglones con dos datos cada uno (DESIGN_PATTERNS
   §5): nombre + acciones · precio · estado + existencia. Los chips de filtro
   se desplazan de lado dentro de su tira (la página no) y «Columnas» se queda
   con su ancho natural. */
@media (max-width: 760px) {
  .tabla.tarjeta-compacta.tabla-articulos td { height: auto; white-space: normal; }
  .tabla.tarjeta-compacta.tabla-articulos td.celda-articulo { max-width: none; }
  .tabla.tarjeta-compacta.tabla-articulos .articulo-nombre {
    display: inline;
    max-width: none;
    white-space: normal;
  }
  /* 09-oct-2026 · la columna «Código» no va en la tarjeta (`data-tarjeta=
     "oculta"`): el código sale como segunda línea debajo del nombre, chica
     pero en el color del texto, para leerlo y dictarlo sin abrir la ficha. */
  .tabla.tarjeta-compacta.tabla-articulos .articulo-codigo-tarjeta {
    margin-top: 2px;
    color: var(--texto);
    overflow-wrap: anywhere;
  }
  .tabla.tarjeta-compacta .rotulo-tarjeta { display: inline; color: var(--texto-tenue); }
  .tabla.tarjeta-compacta.tabla-articulos td.celda-precio { text-align: left; }
  .barra-lista { flex-wrap: nowrap; align-items: flex-start; }
  .chips-articulos {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    padding-bottom: var(--e1);
    scroll-snap-type: x proximity;
  }
  .chips-articulos a { flex: none; scroll-snap-align: start; padding: 0 var(--e3); }
  .control-columnas { flex: none; }
  .control-columnas-panel { right: 0; max-width: calc(100vw - 32px); }
}

/* Benchmark #14 · aviso «Instalar Kiwi en su teléfono» del inicio. Solo lo
   muestra app-instalable.js, y solo en el teléfono. */
.aviso-instalar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.aviso-instalar[hidden] { display: none; }
.aviso-instalar img { flex: none; border-radius: var(--r-md); }
.aviso-instalar-texto { flex: 1 1 12rem; min-width: 0; }
.aviso-instalar-texto strong { display: block; }
.aviso-instalar-acciones { display: flex; gap: var(--e2); }
.aviso-instalar-acciones .boton { min-height: 44px; }

/* KIWIERP-23 · el dato que en la tarjeta del teléfono acompaña al total (la
   cantidad × el precio en las ventas de un artículo): en escritorio ya tiene
   su columna y se esconde (estilo.css). */
@media (max-width: 760px) {
  .tabla.tarjeta-compacta .solo-en-tarjeta { display: block; font-size: var(--t-sm); font-weight: 400; }
}

/* Tarjeta del cliente elegido (`parciales/cliente-documento.ejs`): «Cambiar»
   con 44 px de toque (§5) y debajo del nombre si no caben juntos. */
@media (max-width: 760px) {
  .tarjeta-cliente-cuerpo { flex-wrap: wrap; }
  .tarjeta-cliente-cambiar { min-height: 44px; min-width: 44px; }
}

/* Generador de reportes (08-oct-2026): en el teléfono los pasos van a lo
   ancho, el catálogo y el orden de las columnas uno debajo del otro, y cada
   filtro con sus campos a todo el ancho. La tabla de la vista previa se lee
   como las demás tablas en el teléfono (un bloque por fila, con su rótulo);
   la fila de total general ocupa el mismo ancho que las demás. */
@media (max-width: 760px) {
  .generador-paso { padding: var(--e3) var(--e3) var(--e3) calc(var(--e3) + 2rem); }
  .generador-paso::before { top: var(--e3); left: var(--e2); }
  .generador-columnas { grid-template-columns: minmax(0, 1fr); }
  .generador-catalogo { grid-template-columns: minmax(0, 1fr); }
  .generador-filtro > div { min-width: 0; flex: 1 1 100%; }
  .generador-filtro select,
  .generador-filtro input { width: 100%; }
  .generador-filtro-quitar { flex: 0 0 auto !important; }
  .generador-acciones > .boton,
  .generador-acciones > form,
  .generador-acciones > form .boton { flex: 1 1 auto; justify-content: center; }
  .generador-orden-total select { max-width: none; }
  /* 1.71.0 · el panel «Ajustar» en el teléfono: una columna, radios de 44 px, y
     sin los mínimos de ancho de la vista previa (la tabla es tarjeta larga). */
  .generador-ajustes-cuerpo { padding: var(--e2) 0; }
  .generador-segmentado label span { min-height: 44px; }
  .generador-orden-botones .boton-icono { width: 44px; height: 44px; }
  /* En 375 px el nombre va solo arriba y «Ajustar» con las flechas debajo:
     en un renglón no le quedaba lugar y se partía letra por letra. */
  .generador-orden-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  /* 2020 · compartir y «Enviar por correo»: una persona por renglón y las
     pastillas a lo ancho (cada una sigue midiendo 44 px de alto). */
  .compartir-lista { grid-template-columns: minmax(0, 1fr); }
  .compartir-personas,
  .correo-grupo { padding: var(--e3); }
  .opcion-pastilla { flex: 1 1 auto; }
  .correo-generador .acciones-formulario > .boton { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .generador-orden-nombre { grid-column: 1 / -1; grid-row: 1; }
  .generador-ajustes > summary { grid-column: 1; grid-row: 2; justify-self: start; }
  .generador-orden-botones { grid-column: 2; grid-row: 2; }
  /* Dos reglas y no una: un navegador que no entiende `::details-content`
     descarta la regla ENTERA, y el cuerpo se quedaba sin su fila. */
  .generador-ajustes-cuerpo { grid-column: 1 / -1; grid-row: 3; }
  .generador-ajustes::details-content { grid-column: 1 / -1; grid-row: 3; }
  .generador-ajustes > summary { min-height: 44px; }
  .generador-ajuste-formato select { min-height: 44px; }
  .generador-total-pie .casilla-en-linea { min-height: 44px; }
  /* El resumen y el total general ARRIBA de las tarjetas (Intent P2-3). */
  .generador-total-arriba { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e2); margin: 0 0 var(--e3); padding: var(--e2) var(--e3); background: var(--apagado); border-radius: var(--r-md); }
  .generador-total-arriba dt { font-size: var(--t-sm); color: var(--texto-suave); }
  .generador-total-arriba dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .generador-tabla tfoot { display: none; }
  .generador-tabla th[class*="col-"], .generador-tabla td[class*="col-"] { min-width: 0; }
  .generador-tabla tfoot td { position: static; }
}

/* Existencias por ubicación (08-oct-2026) · en el teléfono la tabla de cada
   estante son tarjetas y el pie del total se desarmaba en celdas sueltas. El
   total ya está en la línea de resumen encima de la tabla: el pie sobra. */
@media (max-width: 760px) {
  .grupo-ubicacion .tabla tfoot { display: none; }
}