/* ══════════════════════════════════════════════════════════════════════════
   Mi Asistente · Mini-app del emprendedor (iOS y Android) — 12/09/2026

   No son dos apps: es el mismo panel.html con `?tg=1` y `html.tg-mode`. Lo que
   cambia entre iOS y Android es el chrome de Telegram, el teclado y el alcance
   del pulgar — no el producto.

   Esto le trae la estética nueva del panel (la de estetica-del-panel.md) y
   resuelve lo que en un teléfono no se puede copiar del escritorio.

   Va DESPUÉS de panel-fixes-tg.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · El teléfono de verdad: muescas y barra de gestos ─────────────────
   Telegram abre la mini-app a pantalla completa. Sin esto, en iPhone con
   muesca el contenido se mete abajo del notch y la tab bar queda tapada por
   la barra de gestos; en Android con navegación por gestos pasa lo mismo
   abajo. `env()` devuelve 0 donde no aplica, así que sirve para los dos. */
html.tg-mode .main{
  padding-top:max(14px,env(safe-area-inset-top));
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
html.tg-mode .tg-tabbar{
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* ── 2 · iOS no puede hacer zoom cuando tocás un campo ───────────────────
   Safari en iOS hace zoom automático sobre cualquier input con letra menor a
   16px, y al salir del campo NO vuelve: la mini-app queda desencuadrada y el
   emprendedor no sabe por qué. Es la causa más común de «se me rompió la
   app» en una mini-app de Telegram. 16px es el mínimo, no una preferencia. */
html.tg-mode input,html.tg-mode select,html.tg-mode textarea{
  font-size:16px;
  min-height:48px;
}
/* El texto chico de un campo puede seguir siendo chico: lo que no puede es el
   campo donde se tipea. */
html.tg-mode .cfg-field>label,html.tg-mode .ma-zon-lbl{font-size:10px}

/* ── 3 · La gramática de fila, en una columna ────────────────────────────
   En el teléfono no hay dos columnas: el rótulo va arriba y el dato abajo,
   con la hairline separando. Mismo idioma que el escritorio, una sola
   columna. */
html.tg-mode .cfg-card .cfg-field{
  display:block;padding:13px 0;border-top:1px solid var(--hairline)}
html.tg-mode .cfg-card .cfg-field:first-of-type{border-top:0}
html.tg-mode .cfg-card .cfg-field>label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cloud-500)}
html.tg-mode .cfg-card .cfg-field .val{font-size:16px;color:var(--cloud-100)}
html.tg-mode .ma-zon-select{width:100%;max-width:none}

/* ── 4 · Todo lo que se toca entra en el pulgar ──────────────────────────
   44px es el mínimo de Apple y el de Android es 48dp. Se toma el más grande
   para no tener dos criterios. Incluye las ✕ de las fichas, que en
   escritorio son de 18px y en un teléfono no se pueden acertar. */
html.tg-mode .cfg-list-row,
html.tg-mode .ma-plan,
html.tg-mode .cfg-editar,
html.tg-mode .btn-primary,
html.tg-mode .btn-outline{min-height:48px}
html.tg-mode .ma-zona{padding:10px 10px 10px 14px;font-size:14px}
html.tg-mode .ma-zona-x{width:32px;height:32px;font-size:14px}
html.tg-mode input[type="checkbox"]{width:28px;height:28px}

/* ── 5 · La lista de ajustes es la navegación ────────────────────────────
   En la mini-app se ve UNA card por pantalla y esta lista es el índice. Se le
   trae la gramática nueva: el nombre del ajuste en cuerpo de dato, su estado
   actual debajo en mono chico, y la flecha como afordancia. */
html.tg-mode .cfg-list-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--hairline);background:transparent;
  text-align:left;width:100%}
html.tg-mode .cfg-list-row:last-child{border-bottom:0}
html.tg-mode .cfg-list-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
html.tg-mode .cfg-list-txt .t{font-size:15px;color:var(--cloud-100)}
html.tg-mode .cfg-list-txt .s{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--cloud-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 6 · El pie de la card se pega abajo ─────────────────────────────────
   En escritorio Editar/Cancelar/Guardar están al final de la card y se llega
   scrolleando. En un teléfono, con la card abierta a pantalla completa, eso
   queda fuera del alcance: el emprendedor edita arriba y tiene que bajar para
   guardar. El pie se fija sobre la tab bar, que es donde está el pulgar. */
html.tg-mode #view-configuracion.cfg-screen-open .cfg-foot{
  position:fixed;left:0;right:0;
  bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:60;margin:0;
  padding:12px max(14px,env(safe-area-inset-left))
          12px max(14px,env(safe-area-inset-right));
  border-top:1px solid var(--graphite-700);
  background:color-mix(in oklab,var(--graphite-950) 96%,transparent);
  backdrop-filter:blur(8px)}
html.tg-mode #view-configuracion.cfg-screen-open .cfg-foot .cfg-msg{display:none}
html.tg-mode #view-configuracion.cfg-screen-open .cfg-foot button{flex:1}
/* Y la card deja aire abajo para que el pie no le tape el último campo. */
html.tg-mode #view-configuracion.cfg-screen-open #cfg-grid-real .cfg-card.is-active{
  padding-bottom:84px}

/* ── 7 · La banda de cambios sin aplicar, arriba y fija ──────────────────
   Es la que dice que Mia todavía responde con lo anterior. En el teléfono, si
   scrollea con el contenido, se pierde justo cuando importa. */
html.tg-mode .cfg-banda.is-on{
  position:sticky;top:0;z-index:55;margin:0 0 12px;border-radius:0 0 14px 14px}

/* ── 8 · Las cifras, sin recortes, en pantalla angosta ───────────────────
   Mismo criterio que el escritorio pero con el piso más bajo: en 360px de
   ancho una tarjeta mide ~150px y «ARS 612.000» no entra a 40px. Baja de
   cuerpo, no se corta. */
html.tg-mode .kpi,html.tg-mode .metric{container-type:inline-size}
html.tg-mode .kpi .v,html.tg-mode .metric .v{font-size:clamp(17px,15cqw,30px)}

/* ── 9 · Un solo scroll ──────────────────────────────────────────────────
   Dos contenedores con scroll propio en un teléfono es una trampa: el dedo
   mueve el de adentro cuando querés mover la página. La única lista que
   conserva su scroll es la de resultados de un desplegable nativo, que la
   maneja el sistema. */
html.tg-mode .zon-resultados,
html.tg-mode .cfg-serv-lista,
html.tg-mode .pw-drawer-body{max-height:none;overflow:visible}
html.tg-mode .main{-webkit-overflow-scrolling:touch}

/* ── 10 · El aviso no puede taparle la mano ──────────────────────────────
   En escritorio el aviso va abajo a la derecha. En el teléfono ahí está el
   pulgar y la tab bar: va arriba, bajo la muesca, y no intercepta toques. */
html.tg-mode #pw-toast{
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  top:calc(10px + env(safe-area-inset-top));
  bottom:auto;max-width:none;pointer-events:none}

/* ── 11 · Android: el teclado no debe empujar la tab bar ─────────────────
   En Android el teclado redimensiona la ventana y una tab bar en `fixed`
   termina flotando arriba del teclado, sobre el campo que se está
   completando. Con la card abierta y un campo enfocado se esconde: el
   emprendedor está escribiendo, no navegando. */
html.tg-mode.tg-teclado .tg-tabbar{transform:translateY(110%)}
html.tg-mode.tg-teclado #view-configuracion.cfg-screen-open .cfg-foot{
  bottom:env(safe-area-inset-bottom)}
html.tg-mode .tg-tabbar{transition:transform 180ms ease}

/* ── 12 · Respeto por quien apagó las animaciones ────────────────────────
   En un teléfono esto no es un detalle de accesibilidad: hay gente que lo
   activa porque el movimiento la marea. */
@media (prefers-reduced-motion:reduce){
  html.tg-mode .tg-tabbar,html.tg-mode #pw-toast{transition:none}
}