/* ═══════════════════════════════════════════════════════════════════════════
   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; }
  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 queda fija al costado
     (es navegación, se sigue viendo siempre); 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). */
  #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; align-items:flex-start !important; position:static !important; }
  #fase3 .ed-lienzo{ overflow:visible !important; height:auto !important; flex:1 1 auto !important; min-width:0; padding:6px !important; }
  #fase3 .ed-tira-col{ flex:0 0 3.4rem !important; width:3.4rem !important; }
  #fase3 .ed-tira{ padding:.3rem !important; }
  #fase3 .ed-tira-col{ position:sticky !important; top:0; align-self:flex-start !important; max-height:100dvh; }
  #fase3 .ed-tira{ max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
  #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; }

  /* ── 3 · EL PASO A PASO Y LA PORTADA DE FASE ──────────────────────────── */
  #faseNav{ position:relative !important; top:auto !important; overflow:hidden !important; padding:10px 16px !important; }   /* relative y no static: la foto de la fase (capa absoluta) se mide contra la barra; con static se estiraba sobre todo el documento */
  #faseNav .fase-txt{ display:none !important; }            /* la portada ya dice la fase */
  #faseNav .fase-btn:not(:first-child)::before{ width:14px !important; }
  #faseNav .fase-num{ width:30px !important; height:30px !important; }
  #faseNav *{ min-width:0; }
  #faseNav > *, #faseNav [class*="perfil__"]{ flex-wrap:wrap !important; }
  .lujo-fase{ height:96px !important; padding:0 16px 14px !important; gap:12px !important; }
  .lujo-fase__lugar{ display:none !important; }
  .lujo-fase__tit{ font-size:28px !important; }
  .lujo-fase__cifras{ gap:14px !important; }
  .lujo-fase__cifra b{ font-size:30px !important; }
  .lujo-fase__cifra small{ font-size:9.5px !important; letter-spacing:.16em !important; }
  .lujo-fase__estado{ font-size:17px !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]):not(.dia-tarj__tit),
  select, textarea{ font-size:16px !important; }
  html.aria-lujo .dia-tarj textarea.bg-transparent, .dia-tarj textarea{ font-size:16px !important; }

  /* ── 5 · LO QUE NO ENTRA, BAJA DE LÍNEA ───────────────────────────────── */
  /* Los servicios: nombre arriba a todo el ancho; cantidades, precio y acciones debajo. */
  .svc-linea > .flex, .svc-linea > div > .flex{ flex-wrap:wrap !important; row-gap:10px; }
  .svc-linea > .flex > .flex-1{ flex:1 1 calc(100% - 28px) !important; }
  .svc-linea > .flex > .shrink-0:last-child, .svc-linea .flex.items-center.gap-1\.5.shrink-0{
    flex:1 1 100% !important; flex-wrap:wrap !important; justify-content:flex-start; row-gap:8px; }
  .svc-linea p.text-sm, .svc-linea p.truncate{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  /* Los días: la fecha y los botones bajan si no caben. */
  .dia-tarj > .flex, .dia-tarj > div:first-child{ flex-wrap:wrap !important; row-gap:8px; }
  .dia-tarj{ padding:18px 16px !important; }
  .dia-tarj__tit{ font-size:20px !important; }
  /* Cualquier fila flexible de la consola que no sea una barra: baja de línea. */
  #builderSection .flex.items-center.justify-between, #fase5 .flex.items-center.justify-between,
  #fase4 .flex.items-center.justify-between{ flex-wrap:wrap !important; row-gap:8px; }
  /* Las rejillas de varias columnas pasan a dos. */
  #tsCabecera .grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  #builderSection [class*="grid-cols-3"], #builderSection [class*="grid-cols-4"]{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  #builderSection .grid > *, #fase5 .grid > *, #fase1panel .grid > *{ min-width:0; }
  /* La Fase 1: un campo por renglón. */
  .cal-grupo__campos{ grid-template-columns:1fr !important; }
  .cal-grupo{ padding:18px 16px !important; }

  /* Las secciones plegables: título y «+» arriba, el resumen debajo a todo el ancho. */
  .com-cab{ flex-wrap:wrap !important; row-gap:6px !important; }
  .com-cab > .com-cab__tit{ order:0; flex:1 1 auto; min-width:0; }
  .com-cab > :not(.com-cab__tit):not(.com-cab__resumen){ order:1; }
  .com-cab > .com-cab__resumen{ order:2; flex:1 1 100%; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

  /* ── 6 · EL INICIO ─────────────────────────────────────────────────────── */
  .hoja-inicio{ padding:0 16px 32px !important; }
  /* La banda de fotos: desde arriba, y recortada a lo ancho sin crear desplazamiento lateral. */
  #home{ overflow-x:clip !important; }
  .lujo-banda{ top:0 !important; height:230px !important; }
  .hoja-inicio__filtros{ display:grid !important; grid-template-columns:1fr; gap:8px !important; }
  .hoja-inicio__filtros > *{ min-width:0; width:100% !important; }
  .hoja-inicio__mes{ grid-column:1 / -1; }
  .hoja-inicio__mes input{ flex:1; min-width:0; }
  .hoja-inicio__cuenta{ grid-column:1 / -1; margin:0 !important; }
  .fila-cotiz{ padding:16px !important; }
  .fila-cotiz__tit{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  .hoja-inicio__paginas{ flex-wrap:wrap; gap:8px; }

  /* ── 7 · EL DOCUMENTO (Fase 4): el papel cabe en la pantalla ───────────── */
  .doc-panel{ width:100% !important; }
  /* 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; }
  #fase4 .doc-hoja{ padding:4px 0 24px !important; }
  .bf{ top:0; }
  .bf-sel{ max-width:120px; }
  .doc-tabs{ flex-wrap:wrap; }

  /* ── 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; }
}

/* En el celular horizontal (pantalla baja) las portadas no se comen la altura. */
@media (max-height:560px){
  html.aria-lujo .hoja-inicio__cab.lujo-cab{ grid-template-rows:230px auto !important; }
  html.aria-lujo .lujo-cab .hoja-inicio__tit{ font-size:44px !important; margin-bottom:20px !important; }
  html.aria-lujo .lujo-cab .lujo-cifra__n{ font-size:64px !important; }
  html.aria-lujo .lujo-cab .lujo-cifra{ margin-bottom:16px !important; }
  .lujo-fase{ height:84px !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 (`html.aria-lujo .dia-tarj`),
   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){
  /* El marco: 12 px por lado en vez de 50. */
  html.aria-lujo body #builderSection > .overflow-y-auto{ padding-left:12px !important; padding-right:12px !important; padding-top:16px !important; }
  html.aria-lujo body #builderSection > .overflow-y-auto > * + *{ margin-top:14px !important; }

  /* Los paneles plegables (ficha, notas, comisiones, datos del itinerario). */
  html.aria-lujo body #builderSection .com-cab{ padding:16px !important; }
  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]):not(.dia-tarj__tit),
  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; }

  /* EL DÍA. */
  html.aria-lujo body .dia-tarj{ padding:18px 14px 6px !important; }
  html.aria-lujo body .dia-tarj + .dia-tarj{ margin-top:16px !important; }
  html.aria-lujo body .dia-tarj__tit{ font-size:23px !important; line-height:1.2 !important; margin:14px 0 6px !important; }
  html.aria-lujo body .dia-tarj textarea.bg-transparent{ font-size:16px !important; line-height:1.6 !important; }
  /* Las agarraderas para arrastrar no sirven con el dedo y se comían 20 px de cada renglón. */
  html.aria-lujo body .dia-tarj .cursor-grab{ display:none !important; }
  /* Cabecera del día: número, fecha y botones con tamaño de dedo. */
  html.aria-lujo body .dia-tarj > .flex:first-child{ gap:10px !important; }
  html.aria-lujo body .dia-tarj > .flex:first-child{ flex-wrap:nowrap !important; }
  html.aria-lujo body .dia-tarj > .flex:first-child > .flex.ml-auto{ margin-left:0 !important; flex:1 1 0 !important; min-width:0; gap:2px !important; }
  html.aria-lujo body .dia-tarj > .flex:first-child input{ flex:1 1 9.6rem; min-width:9.6rem; width:auto !important; min-height:42px; padding:0 8px !important; }
  html.aria-lujo body .dia-tarj > .flex:first-child{ gap:8px !important; }
  html.aria-lujo body .dia-tarj__num{ width:40px !important; height:40px !important; font-size:20px !important; flex:none; }
  html.aria-lujo body .dia-tarj > .flex:first-child button.p-1,
  html.aria-lujo body .dia-tarj > .flex:first-child > button{ width:36px !important; height:36px !important; display:inline-grid !important; place-items:center; padding:0 !important; flex:none; }
  html.aria-lujo body .dia-tarj button.p-1, html.aria-lujo body .svc-linea button.p-1,
  html.aria-lujo body .svc-linea .ico-accion{ width:38px !important; height:38px !important; display:inline-grid !important;
    place-items:center; padding:0 !important; flex:none; }
  html.aria-lujo body .dia-tarj button.p-1 svg, html.aria-lujo body .svc-linea button svg{ width:18px !important; height:18px !important; }

  /* EL SERVICIO: el nombre arriba; debajo las cantidades en dos columnas con la etiqueta
     encima; después el precio grande con sus acciones; después margen y comodín, cada uno
     en su renglón; y el desglose en letra que se lee. */
  html.aria-lujo body .svc-linea{ padding:20px 0 !important; }
  html.aria-lujo body .svc-linea > .flex:first-child{ gap:12px 10px !important; }
  html.aria-lujo body .svc-linea > .flex > .flex-1{ flex:1 1 100% !important; }
  html.aria-lujo body .svc-linea p.text-sm{ font-size:19px !important; line-height:1.3 !important; }
  html.aria-lujo body .svc-linea p.text-\[11px\]{ font-size:13px !important; margin-top:4px; }
  html.aria-lujo body .svc-linea .font-mono{ display:inline-block; margin:6px 0 0 !important; }
  html.aria-lujo body .svc-linea .flex.items-center.gap-1\.5.shrink-0{ display:flex !important; flex:1 1 100% !important;
    flex-wrap:wrap !important; align-items:center !important; gap:12px 6px !important; }
  html.aria-lujo body .svc-linea .flex.items-center.gap-1\.5.shrink-0 > div.flex{ flex:1 1 calc(50% - 6px) !important;
    flex-direction:column !important; align-items:stretch !important; gap:6px !important; }
  /* Con una sola cantidad (traslados, tours) va a todo el ancho: así el precio y sus
     acciones quedan siempre juntos en el renglón de abajo. */
  html.aria-lujo body .svc-linea .flex.items-center.gap-1\.5.shrink-0 > div.flex:only-of-type{ flex:1 1 100% !important; }
  html.aria-lujo body .svc-linea .svc-etq{ font-size:11px !important; }
  html.aria-lujo body .svc-linea .flex.items-center.gap-1\.5.shrink-0 > div.flex input{ width:100% !important; min-height:44px; }
  /* El precio es lo más grande del servicio (libro de marca: manda la cifra) y va en su
     renglón; sus cuatro acciones, debajo y siempre en el mismo sitio, quepa o no la cifra. */
  html.aria-lujo body .svc-linea .precio-calc{ flex:1 1 100% !important; min-width:0; font-size:24px !important; white-space:nowrap; }
  /* La letra chica: nada por debajo de 11 px en el teléfono. */
  html.aria-lujo body .svc-linea [class*="text-[10px]"], html.aria-lujo body .svc-linea details > summary *,
  html.aria-lujo body .svc-linea label, html.aria-lujo body .svc-linea .font-mono{ font-size:11px !important; }
  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; }
  html.aria-lujo body .svc-linea details > summary.text-\[11px\]{ font-size:11.5px !important; padding:12px 0 !important; line-height:1.4 !important; }
  /* Los botones de texto con tamaño de dedo: «+ Servicio» de cada día y los de comisiones. */
  html.aria-lujo body #daysList button[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; }
  html.aria-lujo body .svc-linea .precio-calc ~ select, html.aria-lujo body .svc-linea select{ width:100% !important; min-height:44px; }
  /* Margen y comodín. */
  html.aria-lujo body .svc-linea .mt-1.flex.flex-wrap{ gap:12px !important; margin-top:14px !important; }
  html.aria-lujo body .svc-linea .mt-1.flex.flex-wrap > span{ flex:1 1 100% !important; min-width:0 !important; gap:10px !important; }
  html.aria-lujo body .svc-linea .mt-1.flex.flex-wrap > span > span.uppercase{ font-size:11px !important; min-width:5.5rem; }
  html.aria-lujo body .svc-linea .mt-1.flex.flex-wrap input{ min-height:42px; flex:1 1 auto; width:auto !important; }
  html.aria-lujo body .svc-linea .mt-1.flex.flex-wrap input.w-16{ flex:0 0 6rem; }
  /* El desglose del precio. */
  html.aria-lujo body .svc-linea .border-l-2.text-\[11px\]{ font-size:13px !important; line-height:1.55 !important;
    margin-top:14px !important; padding:4px 0 4px 12px !important; }
  html.aria-lujo body .svc-linea .border-l-2.text-\[11px\] > * + *{ margin-top:3px !important; }
  /* «Editar descripción»: un renglón que se toca. */
  html.aria-lujo body .svc-linea details > summary{ font-size:11.5px !important; padding:12px 0 !important; line-height:1.4 !important; }
  html.aria-lujo body .svc-linea details textarea{ font-size:16px !important; min-height:76px; }

  /* «Días» y su botón. */
  html.aria-lujo body #btnAddDay{ min-height:40px; padding:0 16px !important; }
}

/* En el celular SÍ se ve en qué fase se está (Luis): sólo el nombre corto de la fase activa,
   chico, al lado de su círculo; el dato de abajo queda fuera para no sumar ancho ni alto. */
@media (max-width:767px), (max-height:560px){
  #faseNav .fase-btn.fase-on .fase-txt{ display:block !important; margin-left:8px !important; }
  #faseNav .fase-btn.fase-on .fase-dato{ display:none !important; }
  #faseNav .fase-btn.fase-on .fase-lbl{ font-size:9.5px !important; letter-spacing:.14em !important; color:#FFFFFF !important; }
}