/* ═══════════════════════════════════════════════════════════════════════════
   ARIA EN EL CELULAR (2026-09-21, pedido de Luis: «en móvil se ve fatal»)
   ───────────────────────────────────────────────────────────────────────────
   Lo que pasaba, medido a 375 px:
   · La consola es una pantalla fija (`h-screen` = 100vh) con paneles que se desplazan
     por dentro. En el celular 100vh incluye la barra del navegador: el final de cada
     panel quedaba DEBAJO de esa barra — «scrolls que no llegan hasta el final».
   · Cabecera + paso a paso + portada ocupaban hasta 475 px de 812: el panel de trabajo
     quedaba con 300 px, y encima con su propio desplazamiento.
   · 129 campos con letra de menos de 16 px: el iPhone hace zoom al tocarlos y la pantalla
     «salta» — «cosas que se mueven».
   · Filas que no bajan de línea (los servicios): el precio se salía por el borde.

   La regla de fondo: EN EL CELULAR LA PÁGINA SE DESPLAZA ENTERA, como cualquier página.
   Nada de paneles con desplazamiento propio (salvo la conversación y el editor del
   itinerario, que lo necesitan), nada de desplazamiento lateral: lo que no entra BAJA
   de línea. Vale con o sin el rediseño de lujo: este archivo no depende de él.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El modo celular vale para pantallas ANGOSTAS (celular vertical) y para pantallas BAJAS
   (celular horizontal: más de 767 px de ancho pero ~400 de alto, donde cabecera + paso a paso +
   portada se comían toda la altura y no quedaba nada que desplazar). */
@media (max-width:767px), (max-height:560px){

  /* ── 1 · LA PÁGINA SE DESPLAZA ENTERA ─────────────────────────────────── */
  /* consola.css bloquea el desplazamiento del documento (`html:has(.cab-marca){overflow:hidden}`,
     pensado para escritorio, donde cada panel se desplaza por dentro). En el celular la página
     se desplaza entera, así que acá se destraba: con el dedo NO se podía bajar (por código sí,
     y por eso la primera medición no lo vio). Lo lateral se recorta sin crear desplazamiento. */
  html, html:has(.cab-marca){ height:auto !important; overflow-y:auto !important; overflow-x:clip !important; }
  body, html:has(.cab-marca) > body{ height:auto !important; overflow:visible !important; overflow-x:clip !important; }
  body{ overscroll-behavior-y:none; }
  /* sin barras de desplazamiento a la vista, ni la de la página ni las de adentro (Luis,
     2026-09-29): en el teléfono se desplaza con el dedo y la barra sólo ocupa lugar */
  html, html *{ scrollbar-width:none; }
  html ::-webkit-scrollbar, html::-webkit-scrollbar{ display:none; }
  body > div.h-screen{ height:auto !important; min-height:100vh; min-height:100dvh; overflow:visible !important; }
  #home, #workspace, #fase1panel, #builderSection, #fase4, #fase5,
  #fase1panel > .overflow-y-auto, #builderSection > .overflow-y-auto,
  #fase4 > *, #fase4 .doc-seccion, #fase4 .doc-hoja, #docPanel{
    height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; flex:none !important; }
  #workspace:not(.hidden){ display:block !important; }   /* respeta cuándo va escondido (el inicio lo esconde) */
  /* La conversación sí tiene su propio desplazamiento: el alto de la pantalla visible. */
  #chatSection:not(.tab-hidden){ height:calc(100dvh - 24px) !important; flex:none !important; }
  /* El editor del itinerario (Fase 3). Su lienzo tenía desplazamiento propio DENTRO del de la
     página y los dos se peleaban el dedo: «scrolls que no funcionan». Ahora las páginas se
     recorren con el desplazamiento de la página; la tira de miniaturas va ARRIBA, a lo ancho
     (la maqueta: le deja todo el ancho a la página; se desliza de lado y es sólo navegación); el
     inspector es un panel fijo a pantalla completa, con su X siempre a mano; y la página se
     ajusta al ancho (aria-movil.js). Cómo se ve cada pieza, en aria-interiores.css. */
  #fase3, #fase3 > div, #fase3 .ed-raiz, #fase3 .ed-cuerpo{ height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important; flex:none !important; }
  #fase3 .ed-cuerpo{ display:flex !important; flex-direction:column !important; align-items:stretch !important; position:static !important; }
  #fase3 .ed-lienzo{ overflow:visible !important; height:auto !important; flex:1 1 auto !important; min-width:0; }
  #fase3 .ed-insp{ position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
    width:min(22rem, 92vw) !important; max-width:none !important; z-index:80 !important; overflow-y:auto !important;
    overscroll-behavior:contain; padding-top:3.4rem !important; }
  #fase3 .ed-fab{ position:fixed !important; right:16px !important; bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important; z-index:79 !important; }
  #fase3 .ed-insp-cerrar{ position:fixed !important; top:12px !important; right:12px !important; z-index:81 !important; }
  #fase3 .ed-pie{ max-height:none !important; overflow:visible !important; }

  /* ── 2 · LA CABECERA: compacta, y lo que no entra baja de línea ────────── */
  .cab-marca{ position:static !important; padding:12px 16px !important; }
  .cab-marca__fila{ flex-wrap:wrap !important; row-gap:10px !important; }
  .cab-marca .logo-marca{ height:26px !important; width:auto !important; }
  .cab-marca__acc{ flex-wrap:wrap !important; justify-content:flex-start !important; gap:6px !important; width:100%; min-width:0; }
  .bt-cab{ height:36px; min-width:36px; padding:0 10px !important; }

  /* ── 4 · SIN ZOOM AL TOCAR UN CAMPO (iPhone lo hace con letra < 16 px) ─── */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea{ font-size:16px !important; }

  /* ── 5 · LO QUE NO ENTRA, BAJA DE LÍNEA ───────────────────────────────── */
    /* Cualquier fila flexible de la consola que no sea una barra: baja de línea. */
  #builderSection .flex.items-center.justify-between{ flex-wrap:wrap !important; row-gap:8px; }
  /* Las rejillas de varias columnas pasan a dos. */
  #builderSection [class*="grid-cols-3"], #builderSection [class*="grid-cols-4"]{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  #builderSection .grid > *{ min-width:0; }

          
  /* ── 6 · EL INICIO: la bandeja se acomoda sola (aria-bandeja.css); acá sólo se recorta a lo
     ancho, sin crear desplazamiento lateral. ─────────────────────────────── */
  #home{ overflow-x:clip !important; }

  /* ── 7 · EL DOCUMENTO (Fase 4): el papel cabe en la pantalla ───────────── */
  /* El papel no se aprieta (las columnas quedaban ilegibles): se muestra a su ancho de diseño,
     reducido para que quepa entero — una miniatura fiel. Lo hace aria-movil.js. */
  /* Había DOS papeles, uno dentro del otro (el marco de la vista y la hoja), cada uno con su
     margen blanco y su sombra: doble borde, y la hoja corrida a la derecha. En el celular el
     marco es transparente y la hoja —centrada— es el único papel. */
  #docVista2{ overflow:hidden !important; padding:0 !important; background:transparent !important; box-shadow:none !important;
    border:0 !important; display:flex; justify-content:center; }
  #docVista2 > .doc-papel{ box-sizing:border-box !important; margin:0 auto !important; padding:28px !important; border-radius:0 !important; flex:none; }
  /* Sin documento todavía, el marco es lo único que hay: vuelve a ser papel, como en el escritorio.
     Transparente, el aviso «Guardá la cotización…» —tinta, porque es papel— quedaba tinta sobre el
     suelo oscuro: invisible (barrido del 2026-09-29, a 375 px). */
  #docVista2:has(> .doc-vacio){ background:#FFFFFF !important; border-radius:6px !important; }
  .bf-sel{ max-width:120px; }

  /* ── 8 · MODALES: a pantalla completa, con su propio desplazamiento ───── */
  [id$="Modal"] > div:not(.hidden){ max-height:calc(100dvh - 24px) !important; overflow-y:auto !important; width:100% !important; }
}

/* ── 6 · LA FASE 2 CON AIRE (2026-09-21) ──────────────────────────────────────
   Luis: «la fase 2 está todo muy apuñado». Causa: las reglas de celular de la sección 5
   perdían contra las de aria-lujo.css, que son más específicas, así que en el teléfono seguían mandando los márgenes de escritorio: 20 px de la página +
   30 px de la tarjeta por lado = el contenido en 275 de 375 px, con el título a 30 px, botones
   de 22 px y el desglose en letra de 11 px. Acá todo lleva `html.aria-lujo body` para ganar,
   y cada cosa va en su renglón con espacio para el dedo. */
@media (max-width:767px), (max-height:560px){

  /* Los paneles plegables (ficha, notas, comisiones, datos del itinerario). */
    html.aria-lujo body #builderSection details > div.p-4{ padding:4px 16px 20px !important; }
  html.aria-lujo body #builderSection > .overflow-y-auto > details.bg-white{ padding:16px !important; }
  html.aria-lujo body #builderSection details .space-y-3 > * + *{ margin-top:16px !important; }
  html.aria-lujo body #builderSection label.block{ font-size:11.5px !important; margin-bottom:6px !important; }
  /* Las fechas, el asesor y los campos que se cortaban: uno por renglón. */
  html.aria-lujo body #builderSection .grid:has(input[type=date]),
  html.aria-lujo body #builderSection .grid:has(#mAdvisorName){ grid-template-columns:1fr !important; row-gap:16px !important; }
  html.aria-lujo body #builderSection input:not([type=checkbox]):not([type=radio]),
  html.aria-lujo body #builderSection select{ min-height:44px; }
  /* Las casillas de «ocultar» del itinerario gráfico: una por renglón, fáciles de tocar. */
  html.aria-lujo body #builderSection .flex.flex-wrap:has(input[data-hide]){ flex-direction:column !important; gap:4px !important; }
  html.aria-lujo body #builderSection label:has(> input[data-hide]){ min-height:40px; font-size:14px !important; gap:10px !important; }
  html.aria-lujo body #builderSection input[data-hide]{ width:20px; height:20px; }

  /* Comisiones: el nombre (es el interruptor) a la izquierda con todo el ancho que sobra; a
     la derecha el % y, debajo de él, lo que da en plata. */
  html.aria-lujo body #comCard .grid.grid-cols-\[1fr_4\.5rem_6rem\]{ grid-template-columns:minmax(0,1fr) 6.5rem !important;
    gap:6px 10px !important; padding:10px 0 !important; border-top:1px solid rgba(234,223,206,.10); }
  html.aria-lujo body #comCard .grid.grid-cols-\[1fr_4\.5rem_6rem\] > .com-sw{ grid-row:1 / span 2; align-self:stretch; min-height:44px; text-align:left; }
  html.aria-lujo body #comCard .grid.grid-cols-\[1fr_4\.5rem_6rem\] > .text-right{ grid-column:2; }
  html.aria-lujo body #comCard [data-comcon]{ font-size:15px !important; }


                                /* La letra chica: nada por debajo de 11 px en el teléfono. */
    html.aria-lujo body #comCard [class*="text-[10px]"]{ font-size:11.5px !important; }
  html.aria-lujo body #comCard .com-sw__nota{ font-size:11.5px !important; line-height:1.35 !important; }
    /* Los botones de texto con tamaño de dedo: «+ Servicio» de cada día y los de comisiones. */
  html.aria-lujo body #daysList .pz-nuevo[data-act="add"]{ min-height:42px; padding:0 16px !important; font-size:13px !important; }
  html.aria-lujo body #comGuardarEstandar{ min-height:42px; }
  html.aria-lujo body #comPonerEstandar{ display:inline-block; padding:10px 2px !important; }
                          
  /* «Días» y su botón. */
  html.aria-lujo body #btnAddDay{ min-height:40px; padding:0 16px !important; }
}
/* El paso a paso del celular (sólo el círculo, y el nombre de la fase activa) vive en
   aria-lujo.css §44, que vale hasta 1023 px: así el celular y la tableta se ven igual. */