/* ── EL PANEL EN EL TELÉFONO: LO QUE VALE PARA TODAS LAS PANTALLAS ───────────
 *
 * Walter, 2026-09-21, desde su iPhone. Se carga ÚLTIMO en el <head> de cada
 * pantalla del panel, después de su <style>: con la misma especificidad gana
 * el último, y es justo lo que se quiere acá (ver CLAUDE.md, el bloque
 * @media de expedientes.html que perdía por orden sin fallar).
 *
 * Sólo reglas que valen igual en todas las pantallas. Lo propio de una
 * pantalla va en su archivo, pegado a su regla base.
 *
 * tests/probar-movil-iphone.js lo mide en WebKit a 390×844. */
@media (max-width:640px){
  /* 44px para el dedo (Apple HIG, WCAG 2.5.5). Crece la zona, no la letra. */
  button:not(.sin-44), .btn, .act, .icon-btn, select,
  input[type=text], input[type=search], input[type=email], input[type=tel],
  input[type=date], input[type=number], input[type=password], input:not([type]) {
    min-height:44px;
  }
  /* Un checkbox no crece a 44 (se deformaría): crece su etiqueta. */
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height:44px; display:inline-flex; align-items:center; gap:8px }
  /* iOS agranda la página al enfocar un campo con letra de menos de 16px, y
     después no vuelve: la pantalla queda corrida hacia un costado. */
  input, select, textarea { font-size:16px }

  /* ── TABLAS → TARJETAS ────────────────────────────────────────────────
     movil.js le pone `tarjetas` a cada tabla con encabezado y copia el
     título de cada columna a su celda (`data-label`). Cada fila pasa a ser
     una tarjeta: el título arriba del dato, sin deslizar de costado. */
  /* `!important` en el ancho: varias tablas traen un min-width de escritorio
     (Rendimiento, 620px) que dejaba la tarjeta más ancha que el teléfono. */
  table.tarjetas, table.tarjetas tbody { display:block; width:100% !important; min-width:0 !important; max-width:100% }
  table.tarjetas thead { display:none }
  table.tarjetas tr { display:block; background:#fff; border-radius:12px; box-shadow:0 0 0 1px rgba(0,0,0,.08);
                      padding:10px 14px; margin:0 0 10px }
  table.tarjetas td { display:flex; gap:12px; justify-content:space-between; align-items:baseline;
                      border:0 !important; padding:5px 0 !important; text-align:right; min-width:0;
                      overflow-wrap:anywhere; width:auto !important }
  table.tarjetas td::before { content:attr(data-label); flex:none; max-width:45%; text-align:left;
                              color:#6E6E73; font-size:12.5px; font-weight:500 }
  table.tarjetas td[data-label=""]::before { content:none }
  table.tarjetas td[data-label=""] { justify-content:flex-start; text-align:left }
  /* La primera celda es el título de la tarjeta. */
  table.tarjetas td:first-child { font-weight:600; text-align:left; justify-content:flex-start }
  table.tarjetas td:first-child::before { content:none }
  table.tarjetas tfoot { display:block }
  table.tarjetas tfoot tr { background:none; box-shadow:none }
}