/* =============================================================================
 * portal-movil.css · 7-oct-2026 · El portal en el MÓVIL, más fácil de tocar y de leer.
 *
 * Por qué (Mario, 7-oct: «que sea sencillo sobre todo desde móvil»). Medido en 14 pantallas de la oficina vistas
 * como Laia, Cristina y Juanjo a 390 px (revision-oficina-20261007/css_diag.cjs):
 *   · 37 campos de formulario a 12-13 px → el iPhone AMPLÍA la página al tocarlos (lo evita 16 px).
 *   · Botones de 26-29 px («Abrir» del Cartero, flechas del visor), casillas de 13-20 px, enlaces de 18-19 px.
 *   · Rótulos de 10 px (formularios, contadores, Mapa de RRHH, filtros del Cartero) y la barra de abajo a 10,5 px.
 *
 * Reglas: SÓLO en pantallas estrechas; SÓLO tamaños, y siempre hacia arriba (ni colores ni estructura; la única
 * excepción es el nombre de RRPP en dos líneas); clases
 * concretas, nada genérico que pueda romper otra pantalla. «html #mrh» delante (el portal pone id="mrh" en el <body> y algunas vistas otro dentro) para ganar a las reglas de cada vista
 * (algunas van dentro de la propia página) sin usar !important.
 * Se carga desde views/portal/_layout_head.php, después de las demás hojas del portal.
 * ========================================================================== */
@media (max-width: 767px) {

  /* 1 · Campos: 16 px (el iPhone no amplía) y 44 px de alto para el dedo. */
  html #mrh .mrh-input,
  html #mrh .mrh-select,
  html #mrh .mrh-textarea,
  html #mrh.mrh-screen-cartero-index .mc-q input,
  html #mrh.mrh-screen-cartero-index .mc-sel select,
  html #mrh .mt-place-filter select,
  html #mrh .rj-campo input { font-size: 16px; }
  html #mrh .mrh-input,
  html #mrh .mrh-select,
  html #mrh.mrh-screen-cartero-index .mc-q input { min-height: 44px; }

  /* 2 · Rótulos y cifras pequeñas: de 10-11 px a 12 px. */
  html #mrh .mrh-flabel,
  html #mrh .mrh-eyebrow,
  html #mrh .mrh-kpibar__l,
  html #mrh .mrh-kpibar__s,
  html #mrh .rl-cifra small,
  html #mrh .rl-li__d small,
  html #mrh.mrh-screen-cartero-index .mc-sel__l,
  html #mrh.mrh-screen-cartero-index .mc-rt .ty { font-size: 12px; }
  html body .mrm-chip { font-size: 11px; padding: 2px 7px; }
  html #mrh .p-shell-bottom .p-shell-nav__item { font-size: 12px; }
  html #mrh.mrh-screen-cartero-index .mc-area__t small { font-size: 12px; }

  /* 3 · Toques: 44 px donde el botón es el único camino. */
  html #mrh.mrh-screen-cartero-index .mc-open,
  html #mrh.mrh-screen-cartero-index .mc-acc { min-height: 44px; min-width: 44px; justify-content: center; }
  html body .mcp__nav button { width: 44px; height: 44px; }
  html body .ro-hoy-go .ro-hoy-link { display: inline-flex; align-items: center; min-height: 44px; }
  html #mrh .mmt-meta a { display: inline-flex; align-items: center; min-height: 40px; }
  html #mrh .mrr-bc-back { display: inline-flex; align-items: center; min-height: 44px; }
  /* Enlaces de documento y de «actualizar» dentro de cada fila del Cartero (acciones propias): fila de 44 px. */
  html #mrh.mrh-screen-cartero-index .mc-rs a.doc,
  html #mrh.mrh-screen-cartero-index .mc-rs a.upd { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
  html #mrh.mrh-screen-cartero-index .mc-rs { overflow: visible; white-space: normal; }
  html #mrh.mrh-screen-cartero-index .mc-esrow a,
  html #mrh.mrh-screen-cartero-index .mc-heff a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 3b · Filtros y selectores (RRPP, Cajas): 44 px de alto. */
  html #mrh .rl-filtros .rl-f,
  html #mrh .ab-temporal-filters .ab-filter-pill { min-height: 44px; }
  html #mrh .ab-view-toggle button { min-height: 44px; min-width: 44px; }
  /* El adjunto de la factura (input de archivo a la vista en la ficha de mantenimiento). */
  html #mrh .mmt-panel > input.mmt-file { min-height: 44px; font-size: 16px; }
  /* Contadores en dos columnas: si el último queda solo, ocupa la fila (no se estruja «Tiempo de respuesta»). */
  html #mrh .mrh-kpibar > .mrh-kpibar__c:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 4 · Casillas: más grandes. La de RRPP va en una etiqueta de 44 × 44 (rl-li__sel, manage.php), aparte del enlace a la ficha. */
  html #mrh .rl-li__sel { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px -6px -10px -12px; cursor: pointer; }
  html #mrh .mrh-check { width: 24px; height: 24px; }
  html #mrh label:not(.mmt-provider-option) > input[type="checkbox"],
  html #mrh label:not(.mmt-provider-option) > input[type="radio"],
  html #mrh .mrh-flabel input[type="checkbox"] { width: 22px; height: 22px; }   /* el radio oculto del proveedor no se toca */

  /* 5 · RRPP: con la casilla de 44 px queda poco ancho; el nombre va en hasta dos líneas en vez de cortarse con «…». */
  html #mrh .rl-li__i b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
}