/*
 * movil.css — Canon del ecosistema Mordor para móvil y tablet.
 *
 * Se copia TAL CUAL a `public/css/movil.css` de cada app (ver STACK-ESTANDAR.md
 * §3.8) y se enlaza DESPUÉS de los estilos propios de la app, para que sus
 * reglas ganen en caso de empate.
 *
 * Principio: casi todo es OPT-IN (clases que la app pone donde quiere). Copiar
 * este fichero a una app no debe cambiar nada visible por sí solo, salvo las
 * dos reglas globales del principio, que son seguras en cualquier diseño:
 *   - no inflar el texto al girar el iPhone;
 *   - inputs a 16 px en móvil, porque por debajo iOS hace zoom al enfocarlos
 *     y la página queda descolocada.
 *
 * Puntos de corte únicos del ecosistema (no inventar otros por app):
 *   ≤ 640px → móvil      ≤ 900px → tablet
 * (Los media queries no admiten variables CSS, por eso van escritos a mano.)
 *
 * Solo usa variables CSS con valor de respaldo: no depende de los tokens de
 * ninguna app concreta.
 */

/* ─── Global (seguro en cualquier app) ─────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
}

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ─── Tabla → tarjetas apiladas ────────────────────────────────────────────────
   Uso: <table class="tabla-movil"> y en cada <td data-label="Columna">.
   En móvil desaparece la cabecera y cada fila pasa a ser una tarjeta con una
   línea «Columna — valor» por celda. Una celda sin data-label (o con
   data-label="") ocupa la línea entera: útil para la columna de acciones. */
@media (max-width: 640px) {
  table.tabla-movil,
  table.tabla-movil tbody,
  table.tabla-movil tr,
  table.tabla-movil td {
    display: block;
    width:   100%;
  }

  table.tabla-movil thead {
    display: none;
  }

  table.tabla-movil tr {
    padding:       8px 0;
    border-bottom: 1px solid var(--color-border, rgba(127, 127, 127, 0.25));
  }
  table.tabla-movil tr:last-child {
    border-bottom: none;
  }

  table.tabla-movil td {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             4px 12px;
    padding:         6px 16px;
    border:          none;
    text-align:      right;
  }

  table.tabla-movil td::before {
    content:     attr(data-label);
    flex:        0 0 auto;
    text-align:  left;
    font-size:   0.75rem;
    font-weight: 600;
    opacity:     0.7;
  }

  table.tabla-movil td:not([data-label])::before,
  table.tabla-movil td[data-label=""]::before {
    display: none;
  }
  table.tabla-movil td:not([data-label]),
  table.tabla-movil td[data-label=""] {
    justify-content: flex-start;
    text-align:      left;
  }
}

/* ─── Tabla densa con scroll horizontal propio ─────────────────────────────────
   Para tablas de datos (logs, históricos) donde las tarjetas no aportan: se
   envuelve la tabla en <div class="tabla-scroll"> y la tabla desplaza ella sola,
   sin arrastrar la página entera. */
.tabla-scroll {
  max-width:  100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Visibilidad por tamaño ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .solo-escritorio { display: none !important; }
}
@media (min-width: 641px) {
  .solo-movil { display: none !important; }
}

/* ─── Objetivo táctil ──────────────────────────────────────────────────────────
   44×44 px es el mínimo que recomiendan Apple y el W3C para tocar con el dedo
   sin fallar. Se aplica solo en móvil para no agrandar el diseño de escritorio. */
@media (max-width: 640px) {
  .tactil {
    min-width:  44px;
    min-height: 44px;
  }
}

/* ─── Contenedores que no deben desbordar ─────────────────────────────────────
   Opt-in (no global) porque Leaflet, three.js y similares fijan tamaños propios
   a sus imágenes y canvas y un max-width global los deforma. */
.sin-desborde img,
.sin-desborde video,
.sin-desborde canvas,
.sin-desborde iframe {
  max-width: 100%;
  height:    auto;
}

/* ─── Enlace «← Portal» de la cabecera (volverPortal.js) ──────────────────────
   Sale oculto y volverPortal.js lo muestra solo si se entró por el portal.
   Hereda el color de la cabecera de cada app (currentColor); en móvil queda
   solo la flecha, con área táctil de 40 px. */
.volver-portal {
  display:         inline-flex;
  align-items:     center;
  gap:             2px;
  flex-shrink:     0;
  padding:         4px 10px 4px 4px;
  margin-right:    8px;
  border-radius:   999px;
  color:           inherit;
  font-size:       0.875rem;
  font-weight:     500;
  line-height:     1;
  text-decoration: none;
  opacity:         0.75;
  transition:      opacity 0.15s ease, background-color 0.15s ease;
}
.volver-portal:hover,
.volver-portal:focus-visible {
  opacity:          1;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}
.volver-portal svg {
  display:     block;
  flex-shrink: 0;
}
.volver-portal[hidden] {
  display: none;
}
/* Envoltorio del enlace + el logo de la app: así la cabecera conserva el mismo
   número de hijos y su justify-content (casi siempre space-between) no cambia.
   Sin min-width: 0 a propósito: el grupo no debe encoger por debajo de lo que
   ocupa el logo, o el logo se sale y se monta encima del menú (pasó en
   mytravelatlas). */
.volver-portal-grupo {
  display:     inline-flex;
  align-items: center;
}

@media (max-width: 640px) {
  .volver-portal {
    justify-content: center;
    min-width:       40px;
    min-height:      40px;
    padding:         0;
    margin-right:    4px;
  }
  .volver-portal span {
    display: none;
  }
}

/* ─── Solo con ratón: .solo-escritorio ─────────────────────────────────────────
   Para lo que no tiene sentido en una pantalla táctil, como el botón que enseña
   un QR para hacer la foto «desde otro dispositivo»: si ya estás en el móvil,
   escanear un QR con ese mismo teléfono no sirve, y su propio botón de foto ya
   abre la cámara o la galería.
   Se mira el TIPO de puntero, no el ancho: un portátil con la ventana estrecha
   lo sigue viendo. !important porque hay apps que ponen y quitan `hidden` a ese
   mismo botón por JS, y su display propio ganaría. */
@media (hover: none) and (pointer: coarse) {
  .solo-escritorio {
    display: none !important;
  }
}