/* ============================================================================
   GESTIÓN EN EL CELULAR (8-oct-2026)
   Se carga solo con la pantalla angosta (media="screen and (max-width: 760px)" en index.html; al imprimir no se aplica):
   en escritorio este archivo no existe. Va después de todas las hojas, así sus
   medidas ganan sin tocar las de escritorio.
   ============================================================================ */

/* --- Campos a 16 px: con menos, el iPhone agranda la pantalla al tocarlos y hay
       que achicarla a mano después de cada carga. ---------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
/* a 16 px «Ver por: fecha del gasto» no entra en un tercio: cada desplegable toma el
   ancho de lo que dice y los que no entran bajan de renglón */
.filtros:not(.px-barra) > select { flex: 1 1 auto; max-width: none; }

/* --- Cabecera: queda a mano en las pantallas largas. Al bajar se va y al subir
       vuelve (movil.js), así no le come lugar a la lista. ---------------------- */
header.top { position: sticky; top: 0; z-index: 40; background: var(--crema); padding-bottom: 8px;
  transition: transform .2s ease; }
body.mv-cab-oculta header.top { transform: translateY(-100%); }
header.top .hamb { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px 0 -8px -12px;
  font-size: 22px; line-height: 1; color: var(--ink); }
header.top .miga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Menú lateral: renglones de 44 px, que es lo que mide un dedo -------------- */
#nav button { min-height: 44px; font-size: 14.5px; }
#nav .grupo { font-size: 11px; }
.btn-buscar { min-height: 44px; font-size: 14px; }
.btn-buscar kbd { display: none; }
.tc-chip { padding: 12px; font-size: 13px; }
.who-acciones { display: flex; gap: 4px; align-items: center; }
.who-acciones button { padding: 12px 8px; margin: -4px 0; font-size: 13px; }
.who-acciones button:first-child { margin-left: -8px; }

/* --- Botones, pestañas y desplegables ----------------------------------------- */
.btn-primary, .btn-sec, .seg button { min-height: 42px; }
details > summary { padding-block: 10px; }
table.t-tarj.t-orden thead th { height: 40px; }

/* --- Toques chicos: el área se agranda sin mover el dibujo --------------------- */
a.ref { padding-block: 9px; margin-block: -9px; }
.fx-g-btn::before { content: ""; position: absolute; inset: -11px; }

/* --- Letra: nada por debajo de 11 px ----------------------------------------- */
.px-mes em, .fx-mm-et span, .px-kl, .px-pc { font-size: 11px; }

/* --- Listas largas de a tramos (movil.js) ------------------------------------ */
.mv-oculta { display: none !important; }
.mv-mas { display: flex; gap: 8px; margin: 10px 0 4px; }
.mv-mas button { flex: 1; min-height: 44px; border: 1px solid var(--borde); border-radius: var(--radio, 10px);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.mv-mas .mv-todas { flex: none; padding: 0 14px; font-weight: 500; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { header.top { transition: none; } }
/* RRHH: la ficha en el celular (14-oct-2026) */
.rh-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rh-datos { grid-template-columns: minmax(0, 1fr); }