/* Web móvil (prioridad del dueño 2026-10-11: "Prioritza la web al mòbil").
   Se enlaza el ÚLTIMO en index.html: solo ajusta lo que en el móvil se ve o se toca mal.
   Ayudante JS: js/mobile.js (teclado en pantalla, Texto/Pregunta, atrás cierra hojas, instalar app). */

/* ---------- Global (pantallas táctiles) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  /* Botones y enlaces-botón: nunca menos de 44 px de alto (dedo). */
  .btn-sm { min-height: 44px; }
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .plan-edit { min-height: 44px; padding: 0 4px; }
  .progress-tabs a { min-height: 44px; }
  .timer { min-height: 44px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  details > summary::-webkit-details-marker { display: none; }
  .self-score button { height: 44px; }
  .calc-display { min-height: 48px; }
  .navigator .grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .tool-seg button { min-height: 40px; }
  /* iOS hace zoom al enfocar un campo con letra < 16 px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em); }
  .gap input { font-size: max(16px, .95em); }
  /* Sin destello gris al tocar; sin retraso de doble toque. */
  a, button, summary, label, .choice, .tile { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* Botones con texto largo ("Sección completa · 54 preguntas · 64 min"): saltan de línea en vez de
   ensanchar la página (antes 504 px de ancho en un móvil de 320 y 1077 en un móvil horizontal). */
main .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
main .q-bottom .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Teléfonos y tabletas pequeñas (≤ 860 px) ---------- */
@media (max-width: 860px) {
  /* Zonas seguras (muesca, isla, indicador de inicio) también en horizontal. */
  .mobile-top { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  main { padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
  .tabbar { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .mobile-top .btn-sm { min-height: 44px; }

  /* Barra de pestañas: 6 pestañas en UNA fila (antes "Ajustes" saltaba a una segunda fila). */
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .tabbar a { min-width: 0; margin: 0 1px; padding: 4px 2px; min-height: 52px; font: 700 .72rem var(--font-ui); text-transform: none; letter-spacing: 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Inicio: la columna principal no puede ser más ancha que la pantalla (antes 9 px de scroll lateral en 320 px). */
  .home-main, .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero { min-width: 0; }

  /* Botones con texto largo ("Sección completa · 54 preguntas · 64 min"): saltan de línea en vez de
     ensanchar la página (antes 504 px de ancho en un móvil de 320). */

  /* Textos que se quedaban por debajo de 11 px. */
  .stage-chip, .home-hero .stage-chip { font-size: .7rem; }
  .tier-tag { font-size: 11px; }

  /* Aviso de cookies compacto: deja ver la pantalla y no tapa la acción principal. */
  .consent-banner { padding: 12px 14px; gap: 8px; border-bottom-width: 4px; max-height: 60dvh; overflow: auto; }
  .consent-text strong { font-size: var(--t-md); }
  .consent-text p { font-size: .84rem; line-height: 1.4; }
  .consent-actions .btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .consent-actions .link-btn { min-height: 40px; }

  /* Ventanas (reportar, confirmar, login, pago): hoja inferior al alcance del pulgar. */
  dialog.dialog[open] {
    margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom-width: var(--bw);
    padding: 8px max(18px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    animation: mob-sheet-up .28s cubic-bezier(.2, .9, .3, 1.05);
  }
  dialog.dialog[open]::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 4px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }

  /* ---------- Sesión de preguntas ---------- */
  html:has(body.in-session), body.in-session { overscroll-behavior-y: none; } /* tirar para recargar no rompe la sesión */

  /* Cabecera en UNA fila: título (1 línea) + cronómetro + herramientas. Antes ocupaba ~140 px. */
  .q-top {
    grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 6px;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  }
  .q-top .where strong { font-size: .95rem; }
  .q-top .where small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
  .q-top .tools { grid-column: auto; flex-wrap: nowrap; gap: 0; justify-content: flex-end; }
  .q-top .timer { padding: 6px 8px; font-size: .95rem; }
  .q-stage { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

  /* Barra inferior: el botón principal nunca se corta ("COMPROBA…"). */
  .q-bottom {
    gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
  .q-bottom #prev { flex: none; width: 52px; padding: 0; }
  .q-bottom .nav-toggle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 8px 10px; }
  .q-bottom .right { flex: 1 1 auto; min-width: 0; }
  .q-bottom .right .btn { flex: 1; min-width: 0; width: 100%; padding-left: 12px; padding-right: 12px; letter-spacing: .04em; }
  #qpane > .feedback > header { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  /* Huecos dentro del texto: más alto para el dedo y líneas que no se pisan. */
  .gap-text { line-height: 2.5; }
  .gap input { min-height: 36px; padding: 2px 6px; }
  .gap input.letters { min-height: 36px; }
  .text-input { width: min(100%, 240px); min-height: 52px; }

  /* Fichas de "ordenar palabras": más grandes, fáciles de tocar. */
  .tile { min-height: 48px; padding: 10px 16px; font-size: 1.05rem; }
  .order-built { min-height: 64px; }

  /* Redacción: el área de texto cabe con el teclado abierto. */
  textarea.answer { min-height: 180px; max-height: 50dvh; }

  /* Navegador de preguntas como hoja inferior. */
  .navigator { max-height: min(70dvh, calc(100dvh - var(--sheet-h) - 40px)); overflow: auto; overscroll-behavior: contain; }
  .navigator .grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }

  /* Texto largo + pregunta: conmutador "Texto | Pregunta" (lo crea js/mobile.js). */
  .mob-seg { position: sticky; top: var(--mob-top-h, 56px); z-index: 12; display: flex; gap: 4px; padding: 4px; margin: 0 0 10px; background: var(--surface-3); border-radius: 999px; box-shadow: 0 2px 0 var(--border); }
  .mob-seg button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 800 var(--t-sm) var(--font-display); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .mob-seg button[aria-pressed="true"] { background: var(--surface); color: var(--blue); box-shadow: 0 2px 0 var(--border); }
  .q-split.mob-tabs { border: 0; background: none; min-height: 0; }
  .q-split.mob-tabs .pane { padding-left: 2px; padding-right: 2px; }
  .q-split.mob-tabs .pane-stim { border-bottom: 0; }
  .q-split.mob-tabs.show-q > #stim, .q-split.mob-tabs.show-text > #qpane { display: none; }
  .q-split.mob-tabs.show-text > #stim { padding-bottom: 8px; }
  .mob-to-q { display: flex; width: 100%; margin-top: 12px; }
  .q-split.mob-tabs.show-q .mob-to-q { display: none; }
  .pane-stim { overflow-wrap: anywhere; hyphens: auto; }

  /* Teclado abierto: la barra inferior se queda justo encima (js/mobile.js pone --kb). */
  body.kb-open .q-bottom { transform: translateY(calc(-1 * var(--kb, 0px))); }
  body.kb-open #qpane > .feedback > header { transform: translateY(calc(-1 * var(--kb, 0px))); }
  body.kb-open .fb-fab, body.kb-open .consent-banner, body.kb-open .mob-install { display: none; }

  /* Botón "Reportar" en la sesión: sin tapar herramientas (va pequeño bajo la cabecera). */
  html body.in-session .fb-fab { top: auto; bottom: calc(var(--sheet-h) + 14px + env(safe-area-inset-bottom)); right: 10px; width: 44px; height: 44px; padding: 0; justify-content: center; opacity: .6; }
  body.in-session:has(#qpane > .feedback) .fb-fab, body.in-session:has(.navigator:not([hidden])) .fb-fab, body.tool-sheet-open .fb-fab { display: none; }
}

/* Teléfonos estrechos: herramientas más compactas en la cabecera. */
@media (max-width: 359.98px) { .q-top .tools .icon-btn { width: 40px; height: 44px; } }
@media (max-width: 420px) {
  .q-bottom .nav-toggle { font-size: .8rem; }
  .q-bottom .right .btn { font-size: .82rem; }
}
/* Pestañas: en pantallas muy estrechas, solo icono (la pestaña activa conserva su nombre). */
@media (max-width: 400px) {
  .tabbar a:not([aria-current="page"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabbar { display: flex; }
  .tabbar a { flex: 1 1 0; min-height: 50px; }
  .tabbar a[aria-current="page"] { flex-grow: 1.7; }
}

/* ---------- Calculadora y hoja de referencia: hoja inferior en el teléfono ---------- */
@media (max-width: 699.98px) and (min-height: 560px) {
  .tool-panel {
    top: auto !important; bottom: 0; height: min(64dvh, 560px) !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border: var(--bw) solid var(--border-strong); border-bottom: 0;
    padding-top: 0; box-shadow: 0 -10px 30px rgb(0 0 0 / .18);
    animation: mob-sheet-up .26s cubic-bezier(.2, .9, .3, 1.05);
  }
  .ref-tool { height: min(72dvh, 640px) !important; }
  .tool-head { border-radius: var(--r-xl) var(--r-xl) 0 0; padding-top: 14px; position: relative; }
  .tool-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--border-strong); }
  /* Con la hoja abierta, la pregunta se puede seguir leyendo encima. */
  body.tool-sheet-open { overflow: auto; }
  body.tool-sheet-open main { padding-bottom: calc(min(72dvh, 640px) + 16px); }
  body.tool-sheet-open .q-bottom { visibility: hidden; }
}
/* Móvil en horizontal (poca altura): las herramientas ocupan toda la pantalla, no un panel de escritorio. */
@media (max-height: 520px) and (max-width: 1000px) {
  .tool-panel {
    left: 0 !important; right: 0; top: 0 !important; bottom: 0; width: auto !important; height: auto !important;
    border-radius: 0; border: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .tool-grab, .tool-resize { display: none; }
  .tool-close { width: 44px; height: 44px; }
  .ref-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Móvil en horizontal: menos alto ocupado por barras fijas ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --sheet-h: 62px; }
  .tabbar a { min-height: 44px; }
  .tabbar a .ic { width: 22px; height: 22px; }
  .q-top { position: static; }
  #qpane > .feedback > header .mascot { display: none; }
  #qpane > .feedback > header { padding-top: 8px; font-size: 1.05rem; }
  .q-split { min-height: 0; }
}

/* ---------- Pista "Instalar la app" (js/mobile.js) ---------- */
.mob-install {
  position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; max-width: 520px; margin: 0 auto;
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--border); border-bottom-width: 5px;
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); animation: mob-sheet-up .3s cubic-bezier(.2, .9, .3, 1.1);
}
.mob-install img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.mob-install .txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.35; }
.mob-install .txt strong { display: block; font: 800 var(--t-md) var(--font-display); }
.mob-install .acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.mob-install .btn { min-height: 44px; padding: 8px 14px; margin: 0; }
.mob-install .later { min-height: 36px; border: 0; background: none; color: var(--ink-2); font: 700 .8rem var(--font-ui); cursor: pointer; }
.mob-share-ic { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; }
@media (min-width: 861px) { .mob-install { bottom: 24px; left: auto; right: 24px; } }

/* SPR (respuesta numérica): teclas que el teclado numérico del iPhone no tiene (− y /). */
.mob-keys { display: flex; gap: 8px; margin-top: 10px; }
.mob-keys button { min-width: 52px; min-height: 48px; border-radius: var(--r-sm); border: var(--bw) solid var(--border); border-bottom-width: var(--lip); background: var(--surface); color: var(--ink); font: 700 1.25rem var(--font-mono); cursor: pointer; }
.mob-keys button:active { transform: translateY(2px); border-bottom-width: var(--bw); }

@keyframes mob-sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { dialog.dialog[open], .tool-panel, .mob-install { animation: none; } }