/* Escala por pantalla: de la laptop de 15.6" al monitor grande. Revisado a 1280, 1366, 1536, 1920 y 2560 px de ancho. */

/* Tarjetas de Resumen: nunca más angostas de 250 px. A 210 px (6 tarjetas en una laptop) el monto se cortaba («$3,274…»), la etiqueta verde se partía en dos líneas y la última tarjeta se salía por la derecha. */
.kpis { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Con seis tarjetas, nada de 5 arriba y 1 sola abajo: 3 y 3 en laptop, las 6 juntas en pantallas anchas */
@media (min-width: 761px) { .kpis:has(> .kpi:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .kpis:has(> .kpi:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { container-type: inline-size; }
.kpi strong { font-size: clamp(1.2rem, 15cqw, 1.55rem); }      /* cqw cuenta el ancho útil de la tarjeta (sin la zona del ícono) */
.kpi .delta { display: block; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* El título de cada pantalla crece con el ancho (antes era más grande en la laptop que en el monitor: 35 px contra 30 px) */
#vista h1:not(.x), #vista .cabecera h1:not(.x) { font-size: clamp(1.6rem, .9rem + .7vw, 2.2rem); }

/* Densidad pareja: las filas compactas que ya tenían las laptops de pantalla baja (responsivo.css, sección 20) valen en TODA pantalla de escritorio. Antes, en una pantalla más alta, las filas de Productos pasaban de 44 a 73 px y la tabla se veía distinta según el alto de la ventana. */
@media (min-width: 901px) {
  #vista { padding-top: 16px; padding-bottom: 28px; }
  #tabla-prod .tabla td, #tabla-prod .tabla th { padding-top: 3px; padding-bottom: 3px; }
  #tabla-prod .foto { width: 34px; height: 34px; font-size: .85rem; border-radius: 8px; }
  #tabla-prod .tabla td.nombre small { line-height: 1.1; }
  #tabla-prod .tabla td.nombre { font-size: .95rem; }
  #tabla-prod .tabla td:first-child { width: 54px !important; }
  .cabecera { margin-bottom: 8px; }
  .tabla td, .tabla th { padding-top: 8px; padding-bottom: 8px; }
}

/* Pantallas bajas (laptop de 768 px de alto): el aviso grande del menú ya no se come media pantalla ni tapa los íconos */
@media (max-height: 780px) {
  .menu-mosaicos .aviso89-menu h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: 6px; }
  .menu-mosaicos .aviso89-menu p { margin-bottom: 8px; font-size: .95rem; }
  .menu-mosaicos .aviso89-menu ul { margin-bottom: 8px; }
}

/* Monitores grandes: todo crece parejo para que letras, botones y filas no queden diminutos y la tabla no se estire de borde a borde */
@media (min-width: 1800px) { html { zoom: 1.12; } }
/* con el zoom, 100vh/100dvh se multiplican (la aplicación medía 1120 px en una ventana de 1000 y lo de abajo —paginación, totales, «Cerrar sesión»— quedaba fuera de la pantalla): se mide contra la ventana con porcentajes */
@media (min-width: 1800px) and (min-height: 600px) { html body #app { height: calc(100dvh / 1.12); } }
@media (min-width: 2300px) { html { zoom: 1.25; } }
@media (min-width: 2300px) and (min-height: 600px) { html body #app { height: calc(100dvh / 1.25); } }
@media (min-width: 3000px) { html { zoom: 1.6; } }
@media (min-width: 3000px) and (min-height: 600px) { html body #app { height: calc(100dvh / 1.6); } }

/* Celular: lo que se toca mide al menos 40-44 px (la auditoría encontró el botón de sucursal en 36, la X del aviso en 26, las estrellas en 36 y las medidas de etiqueta en 30) */
@media (max-width: 700px) {
  .suc-actual { min-height: 44px; }
  .aviso-burbuja .ab-x { width: 40px; height: 40px; }
  html body .aviso-burbuja .ab-acciones .btn.principal { min-height: 44px; }
  .inf-items .mega-fav, .mega-fav { min-width: 44px; min-height: 44px; }
  .dis-chip { min-height: 40px; padding: 6px 12px; }
}
/* «Avisar mi pago» llenaba toda la fila (605 px de ancho): con ese ancho un botón se ve como una barra */
.pl-form .pl-ancho { justify-self: start; width: auto; min-width: 220px; }

/* Barras de filtros de las listas (Ventas, Clientes, Compras…): cada campo ocupa lo que necesita y no una fila entera.
   Los campos de número, fecha y texto salían al 100 % del ancho por la regla base, y los selectores con buscador (.bs) también; en Ventas había siete filas de filtros antes de la tabla. */
@media (min-width: 641px) {
  .barra-herramientas > .bs { width: auto; min-width: 190px; max-width: 280px; flex: 0 1 240px; }
  .barra-herramientas > input[type=number], .barra-herramientas > input[type=date], .barra-herramientas > input[type=text],
  .barra-herramientas > input[type=time], .barra-herramientas > input[type=email], .barra-herramientas > label.campo input { width: 150px; max-width: 100%; }
  .barra-herramientas > input[type=search] { width: auto; flex: 0 1 240px; min-width: 150px; }
}

/* ---------- Pantallas que se abren como panel dentro de la página (Sugerencia de compra y otras): el recuadro llevaba borde pero 0 de margen interno,
   y el texto, el selector y la leyenda quedaban pegados al filo. ---------- */
#vista .panel .bloque { padding: 18px 22px; }
#vista .panel .bloque > .campo + .nota, #vista .panel .bloque > label.campo + .nota { margin-top: 12px; }
#vista .panel .bloque > label.campo { display: grid; gap: 6px; font-weight: 600; max-width: 460px; }
#vista .panel .bloque > .nota { max-width: 78ch; line-height: 1.5; }
@media (max-width: 640px) { #vista .panel .bloque { padding: 14px 16px; } #vista .panel .bloque > label.campo { max-width: none; } }

/* ---------- Listas con filtros (Facturas, Abonos, Entradas, Cotizaciones, Pedidos, Remisiones…) en pantalla ancha ----------
   La tabla ya no estira la página: tiene su propio scroll con el encabezado fijo; los filtros de la izquierda (estados y recientes) se quedan quietos
   y los meses van con la tabla. Para dejarle a la tabla todo el espacio: la paginación vive en la barra de arriba (a la derecha), el casillero de
   «tickets al público» también, abajo queda una sola fila con los totales y casi no hay margen. En celular y tableta todo sigue en una columna. */
.fs-check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 4px; white-space: nowrap; font-size: .92rem; }
.fs-centro .barra-herramientas { align-items: center; }
.fs-centro .pag-barra.fs-pag { margin: 0 0 0 auto; flex: 0 1 auto; justify-content: flex-end; gap: 6px 10px; }
.fs-centro .pag-barra.fs-pag .pag-info { display: none; }
.fs-centro .pag-barra.fs-pag .pag-tam { margin-right: 2px; font-size: 0; }
.fs-centro .pag-barra.fs-pag .pag-tam select { font-size: .88rem; }
.fs-centro .pag-barra.fs-pag .pag-tam select { width: 76px; min-width: 0; }
.fs-centro .pag-barra.fs-pag .pag-num { min-width: 0; white-space: nowrap; padding: 0 4px; }
.fs-centro .pag-barra.fs-pag .pag-ctrl { flex-wrap: nowrap; }
.fs-centro .pag-barra.fs-pag .btn.chico { min-width: 34px; padding: 0 8px; }
.fs-centro .barra-herramientas > input[type=search] { flex: 0 1 210px; min-width: 150px; }
@media (min-width: 961px) and (min-height: 560px) {
  #vista:has(> .fs-marco) { display: flex; flex-direction: column; padding-bottom: 8px; }
  #vista:has(> .fs-marco) > * { flex: none; }
  #vista:has(> .fs-marco) > .fs-marco { flex: 1 1 0; min-height: 430px; align-items: stretch; grid-template-columns: 176px 98px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
  .fs-lado { position: sticky; top: 0; align-self: start; max-height: 100%; overflow-y: auto; }
  .fs-meses { align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
  .fs-meses .fs-anio, .fs-meses hr, .fs-meses [data-anio-todo] { grid-column: 1 / -1; }
  .fs-meses button { min-height: 32px; }
  .fs-centro { height: 100%; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .fs-centro > * { flex: none; }
  .fs-centro > .barra-herramientas { margin-bottom: 8px; }
  .fs-centro > .fs-tabla { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  .fs-tabla > .tabla-scroll { flex: 1 1 0; min-height: 0; max-height: none; }
  .fs-centro > .fs-pie { padding: 6px 4px 0; gap: 4px 26px; }
}
@media (min-width: 1400px) and (min-height: 560px) {
  #vista:has(> .fs-marco) > .fs-marco { grid-template-columns: 206px 98px minmax(0, 1fr); }
  .fs-radio span { white-space: nowrap; }
}
/* pantalla alta: sobra altura, así que los meses van en una sola columna angosta y la tabla gana ancho */
@media (min-width: 961px) and (min-height: 820px) {
  #vista:has(> .fs-marco) > .fs-marco { grid-template-columns: 176px 56px minmax(0, 1fr); }
  .fs-meses { display: flex; flex-direction: column; gap: 2px; }
  .fs-meses button { min-height: 34px; }
}
@media (min-width: 1400px) and (min-height: 820px) {
  #vista:has(> .fs-marco) > .fs-marco { grid-template-columns: 206px 56px minmax(0, 1fr); }
}

/* Foto de la pantalla que se deja encima mientras se refresca en segundo plano (modulos32.js): ocupa el mismo lugar que la pantalla de verdad, sin tocarse */
main.vista-congelada { position: relative; z-index: 5; pointer-events: none; background: var(--papel, inherit); }

/* ---------- Ícono de ayuda «?» (ayudaI y notaAAyuda en modulos34.js): en la esquina de arriba a la derecha, con color y un pulso para que se vea ---------- */
.ayuda-i { flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font: 800 1.1rem/1 var(--f-texto, inherit); color: #fff; background: linear-gradient(135deg, #3aa6d8, #2b78c9); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(43, 120, 201, .45); cursor: help; animation: ayuda-pulso 1.6s ease-out 7; }
.ayuda-i:hover, .ayuda-i:focus-visible { transform: scale(1.1); animation: none; box-shadow: 0 0 0 4px rgba(58, 166, 216, .35), 0 2px 8px rgba(43, 120, 201, .45); }
@keyframes ayuda-pulso { 0% { box-shadow: 0 0 0 0 rgba(58, 166, 216, .75), 0 2px 8px rgba(43, 120, 201, .45); } 70% { box-shadow: 0 0 0 14px rgba(58, 166, 216, 0), 0 2px 8px rgba(43, 120, 201, .45); } 100% { box-shadow: 0 0 0 0 rgba(58, 166, 216, 0), 0 2px 8px rgba(43, 120, 201, .45); } }
@media (prefers-reduced-motion: reduce) { .ayuda-i { animation: none; } }
@media (pointer: coarse) { .ayuda-i { width: 44px; height: 44px; font-size: 1.25rem; } }
.cabecera:has(> .ayuda-i) { justify-content: flex-start; flex-wrap: nowrap; }
.cabecera:has(> .ayuda-i) > :first-child { margin-right: auto; }
.cabecera > .ayuda-i { align-self: flex-start; margin-top: 2px; order: 99; }

/* ---------- Facturas recibidas: zona de carga en una sola fila y aire entre las piezas ---------- */
.fa-pagina { display: grid; gap: 16px; }
.fa-pagina > * { margin: 0; min-width: 0; }
#vista .fa-zona { margin: 0; padding: 14px 18px; border: 2px dashed var(--regla); border-radius: 16px; text-align: left; }
.fa-zona-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fa-zona-texto { display: grid; gap: 2px; margin-right: auto; }
.fa-zona-texto strong { font-size: 1.02rem; }
#fa-resultado:not(:empty) { margin-top: 14px; }
.fa-barra { margin: 0; align-items: center; }
.fa-barra > input[type=search] { flex: 1 1 280px; max-width: 420px; min-width: 200px; }
.fa-pagina > .kpis { margin: 0; }

/* Lista corta (hasta 25 renglones, una sola página): la barra de páginas sobra */
.pag-barra.pag-una { display: none; }

/* Pestañas y filtros en forma de botón (Cotizaciones · Pedidos · Remisiones…): cada uno mide lo que dice su texto, no la cuarta parte de la pantalla */
@media (min-width: 641px) {
  #vista .filtros > button { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 18px; }      /* width:auto: entre 641 y 760 px otra regla les daba el ancho completo y quedaban en una sola columna */
}
/* la barra de páginas de las listas de la pantalla principal deja libre la esquina del globo del asistente */
@media (min-width: 961px) { #vista .tabla-scroll + .pag-barra { padding-right: 84px; } }

/* Pantallas con una tabla de scroll propio: no se deja margen de sobra debajo (la caja se mide para llegar justo hasta abajo, modulos65.js) */
#vista:has(.tabla-scroll) { padding-bottom: 10px; }
#vista .tabla-scroll + .pag-barra { margin-bottom: 0; padding-bottom: 2px; }

/* Tableta (761–960 px): los filtros arriba en una franja —estados y recientes lado a lado, meses en fila— y la tabla a todo el ancho.
   Antes mezclaba la rejilla de tres columnas con la de una, y los meses quedaban amontonados en 48 px. */
@media (min-width: 761px) and (max-width: 960px) {
  .fs-marco { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fs-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .fs-lado .fs-grupo { margin: 0; }
  .fs-meses { display: flex; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; align-items: center; }
  .fs-meses button { flex: none; min-width: 50px; min-height: 40px; }
  .fs-meses hr { display: block; width: 1px; height: 26px; margin: 0 4px; border-top: 0; border-left: 1px solid var(--regla); }
  .fs-anio { flex: none; gap: 8px; padding: 0 6px 0 0; }
}

/* Tableta y celular: «Estados» y «Recientes» como botones en fila (antes eran dos listas altas que le quitaban la mitad de la pantalla a la tabla) */
@media (max-width: 960px) {
  .fs-lado { display: flex; flex-direction: column; gap: 6px; }
  .fs-lado .fs-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; flex: none; }
  .fs-lado h4 { flex: 0 0 100%; margin: 0; padding: 0 2px 2px; border-bottom: 0; }
  .fs-radio { padding: 0 14px; min-height: 40px; border: 1px solid var(--regla); border-radius: 999px; gap: 6px; }
  .fs-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .fs-radio:has(input:checked) { background: color-mix(in srgb, var(--etiqueta) 18%, transparent); border-color: color-mix(in srgb, var(--etiqueta) 70%, transparent); font-weight: 700; }
  .fs-radio:has(input:focus-visible) { outline: 2px solid var(--etiqueta); outline-offset: 2px; }
  .fs-radio small { margin-left: 4px; }
}