/* ============================================================================
   SAMAPP 1.14 · CAPTURA DE MOVIMIENTOS — la hoja de registrar
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de base.css a propósito: aquí se corrigen reglas de los
   bloques 1.11/1.13/1.13.1 sin tocar aquel archivo (lo edita otra mano).

   Tres problemas medidos que arregla este archivo:

   1. En escritorio la fila de fichas se cortaba por la derecha. "+10" y
      "+ Nueva" vivían DENTRO de .tx-chip-grid, que es overflow-x:auto: con las
      15 categorías sembradas quedaban a ~600px fuera de vista y con ratón no
      hay forma de deslizar la fila. Ahora van en .tx-chip-actions, fuera de la
      zona que se desliza, y se ven a cualquier ancho.

   2. Las fichas eran "botonsotes". Dos causas: 40px de alto con 14px de
      relleno a cada lado, y sobre todo que el selector heredado
      `.tx-chip-option span` alcanzaba TAMBIÉN al <span class="i"> del icono y
      le pintaba su propia píldora de 40px con borde y relleno DENTRO de la
      ficha. De ahí que abarcaran el doble de lo necesario.

   3. Arrastrar sobre una ficha dejaba el texto resaltado en azul. Faltaba
      user-select:none en toda la hoja.
   ========================================================================== */

/* --- Nada de resaltado azul al picar o arrastrar ------------------------- */
/* La hoja se usa a golpes de dedo y de ratón: seleccionar el texto de una
   ficha nunca es lo que quieres. Los campos de texto se reactivan aparte. */
.tx-capture,
.tx-foot { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tx-capture input[type="text"],
.tx-capture input[type="date"],
.tx-capture textarea,
.tx-capture select { -webkit-user-select: text; user-select: text; }

/* ============================================================================
   FICHAS DE CUENTA Y CATEGORÍA
   ========================================================================== */

/* 1.14.1 — NADA se desliza de lado, a ningún ancho. Medido en un teléfono de
   390px: la rejilla quedaba en 227px (las acciones se llevaban 133 de los 366)
   con 447px de contenido dentro, así que "Restaurantes" aparecía CORTADA POR
   LA MITAD detrás del "+9". Se veía rota. Queja de Ricardo con captura del
   teléfono en la mano: "sigue viendose extraño y poco intuitivo".

   Las fichas se acomodan y bajan de renglón cuando no caben. Las acciones
   entran en el MISMO flujo (de ahí el display:contents) para que no quede
   hueco al final ni se corte nada. Una sola forma de acomodarlas en móvil,
   tablet y PC: menos reglas y ningún caso raro donde mirar.

   El alto sí sube ~40px por bloque, y hay de dónde: la hoja medía 677px con
   un techo de 92dvh = 811px, o sea 134px de margen sin tocar. */
.tx-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}
.tx-chip-row > .tx-chip-grid,
.tx-chip-row > .tx-chip-actions { display: contents; }

/* Sin barra de desplazamiento visible ya no hace falta reservar los 2px. */
.tx-chip-grid { padding-bottom: 0; }

/* --- La píldora ---------------------------------------------------------- */
/* La etiqueta pasa a flex: siendo bloque, el <span> inline-flex de dentro
   generaba una línea con hueco de descendentes debajo y la ficha medía más
   que sus 40px declarados. Con flex la altura es exactamente la pedida (y de
   paso, en la rejilla de escritorio todas las píldoras se estiran iguales). */
.tx-chip-option { display: flex; }

/* Ojo: aquí NO se tocan color, fondo ni borde. Los pone base.css y de ellos
   dependen el estado :checked y el modo sobrio. Esto es solo la forma. */
.tx-chip-option > span {
  justify-content: center;      /* el contenido, centrado (queja de Ricardo) */
  gap: 6px;
  min-height: 34px;
  max-width: 152px;
  padding: 0 10px;
  font-size: 0.8125rem;
}
.tx-chip-option > span .i { font-size: 0.9375rem; opacity: .85; }

/* El nombre en su propio elemento para poder recortarlo. Es <b> y no <span>
   justamente para no volver a caer en `.tx-chip-option span`.
   El interlineado de 1.4 no es capricho: el recorte necesita overflow:hidden y
   con line-height:1 la caja mide justo 13px y le corta la cola a la "g" de
   "categoría". */
.tx-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  font-weight: inherit;
}

/* EL arreglo del "botonsote": el icono heredaba la píldora entera (min-height
   40px, padding 0 14px, borde y fondo propios) porque `.tx-chip-option span`
   también le pega a él. Especificidad (0,3,0) para ganarle incluso al modo
   sobrio, que la repinta con (0,2,1). */
.tx-picker .tx-chip-option .i {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}
/* :active sube por los ancestros: sin esto el icono se encoge dos veces. */
.tx-picker .tx-chip-option span.i:active { transform: none; }

/* En dedo la ficha vuelve a ser tocable; en ratón puede ser fina. Si un
   navegador no resuelve pointer, se queda en 34px: encoge, nunca crece, así
   que el presupuesto vertical del móvil no se rompe por sorpresa. */
@media (pointer: coarse) {
  .tx-chip-option > span,
  .tx-chip-more,
  .tx-chip-new { min-height: 40px; }
}

/* El borde se refuerza al pasar el ratón. La ficha elegida no cambia: su
   regla (0,2,2) le gana a este hover (0,2,1) por sí sola. */
@media (hover: hover) {
  .tx-chip-option:hover > span { border-color: color-mix(in srgb, var(--chip-color) 55%, var(--line-strong)); }
}

/* ============================================================================
   1.14.1 · LA RUTA DE LA TRANSFERENCIA
   ----------------------------------------------------------------------------
   Ricardo, con el teléfono en la mano: "cuando es transferencia estaria bien
   que salga bien visto la institucion o cuenta que transfiere de un lado una
   flecha a la recibe". Las dos filas de cuentas salían IDÉNTICAS y no había
   forma de saber cuál era el origen y cuál el destino.

   Se reutiliza el lenguaje con el que ya se leen las transferencias en la
   lista de movimientos: una ficha del color de cada cuenta y una flecha. Así
   la hoja de alta y la lista cuentan la misma historia igual.
   ========================================================================== */
.tx-route-preview {
  display: none;               /* solo en transferencia, lo enciende el :has */
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  /* Sin margen propio: ya hereda los 16px de separación del formulario. Con
     5 cuentas la transferencia pinta DOS bloques de fichas de dos renglones
     cada uno, y se pasaba 41px del cuerpo. Cada píxel de aquí cuenta. */
  margin-bottom: 0;
}
.tx-capture:has(input[name="txType"][value="transfer"]:checked) .tx-route-preview { display: flex; }

.tx-route-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 44%;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--account-color) 34%, var(--line));
  background: color-mix(in srgb, var(--account-color) 12%, var(--surface));
  color: var(--ink-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tx-route-slot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.tx-route-slot .i { font-size: 0.9375rem; opacity: .9; }
/* Sin elegir: contorno punteado y tinta tenue. Se ve que FALTA algo, en vez de
   parecer una cuenta más. */
.tx-route-slot.is-empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-faint);
  font-weight: 500;
}
.tx-route-preview .tx-route-arrow {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1;
}
[data-color-mode="sober"] .tx-route-slot {
  background: var(--surface);
  border-color: var(--line-strong);
}

/* Las etiquetas de las dos puntas, en transferencia. base.css le añade
   " (sale de)" al rótulo "Pagado con", que junto con "Entra a" del destino
   quedaba largo y desparejo. Aquí se sustituye el rótulo entero: "Sale de" y
   "Entra a", dos palabras cada uno y simétricos. */
/* 1.21.7 — Igual que en base.css: el rótulo alterno vive en el DOM para que
   el motor de idiomas lo alcance, y aquí sólo se elige. */
/* 1.31 — Son tres, no dos: gasto "Pagado con", ingreso "Entra en",
   transferencia "Sale de". La de ingreso la ponía base.css con
   `content:" (entra en)"` pegado a "Pagado con"; se retiró esa regla. */
.tx-label-source .label-short,
.tx-label-source .label-in { display: none; }
.tx-label-source b { font-weight: inherit; }
.tx-capture:has(input[name="txType"][value="income"]:checked) .tx-label-source .label-full,
.tx-capture:has(input[name="txType"][value="transfer"]:checked) .tx-label-source .label-full { display: none; }
.tx-capture:has(input[name="txType"][value="income"]:checked) .tx-label-source .label-in { display: inline; }
.tx-capture:has(input[name="txType"][value="transfer"]:checked) .tx-label-source .label-short { display: inline; }

/* --- "+N" y "+ Nueva": mismo peso visual que las fichas ------------------ */
.tx-chip-more,
.tx-chip-new {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.8125rem;
}
/* El chevron de base.css es un ::after, y siendo la etiqueta flex se convierte
   en otro hijo: el espacio que lleva dentro del content se colapsa y quedaba
   pegado al número ("+10⌄"). */
.tx-chip-more { gap: 4px; }
/* El interruptor está visualmente oculto: el anillo de foco tiene que
   aparecer en la etiqueta o navegar con teclado es a ciegas. */
.tx-more-toggle:focus-visible + .tx-chip-more {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================================
   ≥700px · REJILLA PAREJA EN VEZ DE FILA DENTADA
   ----------------------------------------------------------------------------
   En pantalla ancha deslizar de lado con ratón es imposible, y una fila de
   fichas de anchos distintos se ve tosca. Celdas de igual ancho: todo alineado,
   nada se sale, los nombres largos se recortan con puntos suspensivos.
   En móvil se conserva la fila que se desliza: ahí el presupuesto vertical es
   de 392px y una rejilla de dos o tres filas no cabe.
   ========================================================================== */
/* Se probó una rejilla de celdas de igual ancho y se descartó MIDIÉNDOLA: con
   el formulario a 443px las fichas caían en un 2x2 con un hueco abajo a la
   derecha y el "+13" flotando arriba — el mismo aire de "sin estar centrados"
   que había que quitar, solo que disfrazado. Con ancho natural se empacan
   densas, como una lista de etiquetas, y no sobra aire en ningún renglón. */
@media (min-width: 700px) {
  /* En la hoja de 800px no hace falta recortar nombres. El tope solo evita
     que un nombre absurdo acapare el renglón entero. */
  .tx-chip-option > span { max-width: 260px; }

  /* Las plegadas ya son flex-wrap en base.css; solo se les sube el techo,
     que aquí sobra alto. El overflow vertical de base.css se conserva: es lo
     que impide que veinte categorías desplegadas empujen el teclado. */
  .tx-picker:has(.tx-more-toggle:checked) .tx-chip-rest { max-height: 152px; }
}

/* ============================================================================
   ≥900px · LA HOJA USA LA PANTALLA: FORMULARIO | TECLADO
   ----------------------------------------------------------------------------
   Antes en PC era la misma hoja angosta del teléfono, con el teclado abajo y
   el cuerpo con barra de desplazamiento aunque sobrara media pantalla.
   base.css declara `.sheet:has(.tx-capture) { display:flex }` sin media query;
   este archivo carga después, así que aquí gana el grid.
   ========================================================================== */
@media (min-width: 900px) {
  .sheet:has(.tx-capture) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--s5);
    max-width: 800px;
    max-height: 86dvh;
  }
  .sheet:has(.tx-capture) .sheet-title { grid-column: 1 / -1; grid-row: 1; }
  /* Se deja estirar (align-items por defecto): así, cuando el contenido pasa
     del alto máximo, la fila encoge y el cuerpo se desliza en vez de quedar
     recortado por el overflow:hidden de la hoja. */
  .sheet:has(.tx-capture) .sheet-body { grid-column: 1; grid-row: 2; }
  /* El teclado no se estira: se queda arriba de su columna. */
  .sheet:has(.tx-capture) .sheet-foot { grid-column: 2; grid-row: 2; align-self: start; }

  /* Guardar como fila completa bajo las teclas: la columna lateral de 82px
     que funciona en el teléfono aquí deja un botón alto y flaco, y encima roba
     ancho a unas teclas que ya son estrechas. */
  .tx-keypad {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, 44px) auto;
    gap: 6px;
  }
  .tx-key { min-height: 44px; }
  .tx-save {
    grid-column: 1 / -1;
    grid-row: 5;
    height: auto;
    min-height: 44px;
    margin-top: 2px;
    font-size: 0.9375rem;
  }
}

/* ============================================================================
   1.31 · LA HOJA DE CAPTURA, LEGIBLE DE UN VISTAZO
   ----------------------------------------------------------------------------
   Ricardo mandó una maqueta y la comparación con lo que había fue clara: la
   estructura era la misma, pero todo estaba dicho en voz baja. Los rótulos de
   sección competían en peso con el texto de las fichas, la cifra no decía qué
   se estaba capturando, la fila de fechas no tenía nombre y "Más opciones" era
   una frase suelta que no parecía tocable.

   Nada cambia de sitio ni de comportamiento: es la misma hoja, hablando más
   alto donde toca. Todo cuelga de .tx-capture / .tx-foot para no arrastrar al
   alta de pendientes, que comparte .manual-task-more y
   .manual-task-date-options.
   ========================================================================== */

/* --- Pestañas de tipo: icono + color del tipo ---------------------------- */
/* La píldora activa era blanca en las tres. Ahora se tiñe del color que ya usa
   la cifra del importe (coral sale, verde entra), así el tipo se reconoce sin
   leer. La mezcla va contra --tone-canvas y no contra --surface: mezclar
   contra el fondo de la tarjeta colapsa la paleta en oscuro. */
.tx-type-tabs { gap: 0; padding: 6px; }
.tx-type-tabs label { position: relative; }
.tx-type-tabs span { position: relative; gap: 6px; min-height: 42px; font-size: 0.875rem; }
.tx-type-tabs span .i { font-size: 1.0625rem; }
.tx-type-tabs span b { font-weight: inherit; }

/* Filete entre pestañas apagadas contiguas. Se apaga en la encendida y en su
   vecina: una raya pegada al borde de la píldora se ve como un descuido, no
   como una separación. */
.tx-type-tabs label + label > span::before {
  content: "";
  position: absolute;
  inset-block: 11px;
  inset-inline-start: -1px;
  width: 1px;
  background: var(--line-strong);
  transition: opacity var(--dur) var(--ease);
}
.tx-type-tabs label:has(input:checked) + label > span::before,
.tx-type-tabs input:checked + span::before { opacity: 0; }

.tx-type-tabs label[data-kind="expense"] input:checked + span {
  background: color-mix(in srgb, var(--color-coral) 22%, var(--tone-canvas));
  color: var(--finance-negative-ink);
}
.tx-type-tabs label[data-kind="income"] input:checked + span {
  background: color-mix(in srgb, var(--color-green) 24%, var(--tone-canvas));
  color: var(--finance-positive-ink);
}
.tx-type-tabs label[data-kind="transfer"] input:checked + span {
  background: color-mix(in srgb, var(--ctx-finanzas) 18%, var(--tone-canvas));
  color: var(--ink-strong);
}
/* En modo sobrio no hay color que valga: la activa es la de siempre. */
[data-color-mode="sober"] .tx-type-tabs input:checked + span {
  background: var(--surface);
  color: var(--ink-strong);
}

/* --- Importe: la pregunta, el cursor y el apunte ------------------------- */
.tx-capture .tx-amount { padding: var(--s3) 0; }
.tx-amount-ask {
  min-height: 17px;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}
/* Los tres van en el DOM y el CSS enciende uno: el `display:flex` viene de la
   regla general .tx-only-*, y un contenedor flex ignora text-align, así que el
   centrado se pide aquí explícitamente. */
.tx-amount-ask .tx-ask { justify-content: center; }

.tx-capture .tx-amount-currency { font-size: 26px; font-weight: 700; color: var(--ink-strong); }
.tx-capture .tx-amount-value { font-size: clamp(42px, 13.5vw, 58px); font-weight: 700; }

/* El cursor delata que el teclado de abajo escribe AQUÍ y no en algún campo.
   Se detiene con `prefers-reduced-motion`: un parpadeo permanente en el centro
   de la pantalla es justo lo que esa preferencia viene a evitar. */
.tx-amount-caret {
  width: 2px;
  align-self: center;
  height: clamp(30px, 9vw, 40px);
  margin-left: 2px;
  border-radius: 1px;
  background: var(--ink-faint);
  animation: txCaret 1.1s steps(1, end) infinite;
}
@keyframes txCaret { 0%, 45% { opacity: .75; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tx-amount-caret { animation: none; opacity: .5; } }

.tx-amount-expr:empty { min-height: 0; }
.tx-amount-hint { margin-top: 2px; color: var(--ink-faint); font-size: 0.8125rem; }

/* --- Cabecera de cada bloque de fichas ----------------------------------- */
.tx-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  min-width: 0;
}
.tx-capture .tx-picker-label {
  min-width: 0;
  color: var(--ink-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.tx-capture .tx-picker-label b { font-weight: inherit; }
.tx-picker-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 4px 0 4px 8px;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.tx-picker-all .i { font-size: 0.875rem; opacity: .75; transition: transform var(--dur) var(--ease); }
.tx-picker-all b { font-weight: inherit; }
.tx-picker-all .tx-all-close { display: none; }
.tx-picker:has(.tx-more-toggle:checked) .tx-picker-all .tx-all-open { display: none; }
.tx-picker:has(.tx-more-toggle:checked) .tx-picker-all .tx-all-close { display: inline; }
.tx-picker:has(.tx-more-toggle:checked) .tx-picker-all .i { transform: rotate(90deg); }
@media (hover: hover) { .tx-picker-all:hover { color: var(--ink); } }
.tx-more-toggle:focus-visible + .tx-picker-all {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Fichas: teñidas, no contorneadas ------------------------------------ */
/* Antes eran fondo casi blanco + borde de color: a tamaño de dedo el borde era
   lo único que se veía y las fichas parecían casillas vacías. Se invierte el
   peso —fondo teñido, borde transparente—, y así la elegida se distingue por
   SATURACIÓN y no por tener o no contorno. */
.tx-capture .tx-chip-option > span {
  min-height: 42px;
  gap: 8px;
  padding: 0 16px;
  border-color: transparent;
  background: color-mix(in srgb, var(--chip-color) 26%, var(--tone-canvas));
  color: var(--ink-strong);
  font-size: 0.875rem;
  font-weight: 600;
}
.tx-capture .tx-chip-option input:checked + span {
  background: color-mix(in srgb, var(--chip-color) 72%, var(--tone-canvas));
  color: var(--ink-on-color);
  font-weight: 700;
}
.tx-capture .tx-chip-option > span .i { font-size: 1rem; opacity: 1; }
/* "Sin categoría" no tiene color propio: gris del sistema, no un teñido de
   --ink-faint que en oscuro sale casi negro. */
.tx-capture .tx-chip-none > span { background: var(--surface-sunken); color: var(--ink-muted); }
.tx-capture .tx-chip-none input:checked + span { background: var(--line-strong); color: var(--ink-strong); }
@media (hover: hover) {
  .tx-capture .tx-chip-option:hover > span {
    border-color: transparent;
    background: color-mix(in srgb, var(--chip-color) 38%, var(--tone-canvas));
  }
  .tx-capture .tx-chip-option:hover input:checked + span {
    background: color-mix(in srgb, var(--chip-color) 72%, var(--tone-canvas));
  }
}
[data-color-mode="sober"] .tx-capture .tx-chip-option > span {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--ink);
}
[data-color-mode="sober"] .tx-capture .tx-chip-option input:checked + span {
  background: var(--ink-strong);
  border-color: transparent;
  color: var(--paper);
}

/* "+ Cuenta" y "+ Nueva": contorno punteado. Crear algo nuevo no es elegir una
   ficha más, y el punteado es la convención de "hueco por llenar" que la app ya
   usa en la tarjeta de "Agregar cuenta". */
.tx-capture .tx-chip-new {
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
}
@media (hover: hover) { .tx-capture .tx-chip-new:hover { border-color: var(--ink-faint); color: var(--ink); } }

/* --- Fecha: con rótulo, y las píldoras al ancho de su texto -------------- */
/* La rejilla de tres columnas iguales estiraba "Hoy" hasta medir lo mismo que
   "Otro día": tres botones enormes para un dato secundario. */
.tx-capture .tx-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.tx-date-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: auto;
  color: var(--ink-strong);
  font-size: 0.9375rem;
  font-weight: 600;
}
.tx-date-label .i { font-size: 1.125rem; color: var(--ink-muted); }
.tx-date-label b { font-weight: inherit; }
.tx-capture .tx-date-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-capture .tx-date-options span { min-height: 38px; padding: 0 16px; font-size: 0.875rem; font-weight: 600; }
.tx-capture .tx-custom-date { flex: 1 0 100%; }
/* A 400px y menos, "Fecha" se queda con su renglón y las píldoras bajan
   enteras: apretarlas para que quepan en la misma línea sería encoger letra, y
   esta hoja no encoge letra. */
@media (max-width: 400px) {
  .tx-date-label { margin-right: 0; flex-basis: 100%; }
  .tx-capture .tx-date-options { flex: 1 1 auto; }
}

/* --- "Más opciones": una barra, no una frase ----------------------------- */
/* Era texto tenue con un "+" pegado y no se leía como algo que se pueda tocar
   —justo lo que salta al comparar con la maqueta—. Ahora es una barra con su
   fondo, su icono y su flecha, del mismo alto táctil que las demás filas. */
.tx-capture .tx-more { border-top: 0; padding-top: 0; }
.tx-capture .tx-more > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--dur) var(--ease);
}
.tx-capture .tx-more > summary::after { content: none; }
.tx-capture .tx-more > summary b { font-weight: inherit; }
.tx-capture .tx-more > summary > .i:first-child { font-size: 1.125rem; color: var(--ink-muted); }
.tx-more-caret { margin-left: auto; font-size: 1.125rem; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.tx-capture .tx-more[open] .tx-more-caret { transform: rotate(180deg); }
@media (hover: hover) { .tx-capture .tx-more > summary:hover { background: var(--surface-hover); } }
.tx-capture .tx-more > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Teclado: teclas más suaves y Guardar con su avión ------------------- */
.tx-foot .tx-key {
  border-color: transparent;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
@media (hover: hover) { .tx-foot .tx-key:hover { background: var(--surface-hover); } }
.tx-foot .tx-save {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r-lg);
  font-size: 0.9375rem;
}
.tx-foot .tx-save .i { font-size: 20px; }
.tx-foot .tx-save b { font-weight: inherit; }

/* En escritorio Guardar es una fila ancha bajo las teclas (regla de más
   arriba): ahí el avión va AL LADO del texto, no encima. */
@media (min-width: 900px) {
  .tx-foot .tx-save { flex-direction: row; gap: 8px; }
}

/* --- Presupuesto vertical: la hoja tiene que caber sin desplazarse -------- */
/* Medido a 390×844: al subir de tamaño rótulos, fichas y barras, el cuerpo
   pasó de 414px (justo lo visible) a 621px, y "Fecha" y "Más opciones"
   quedaron BAJO el teclado. Un formulario con teclado fijo abajo que además
   hay que desplazar es peor que uno apretado, así que el aire recuperado se
   paga aquí, no encogiendo la letra:
     · el salto entre bloques baja de 16 a 12 px            (−20)
     · el bloque del importe pierde su relleno propio       (−24)
     · "Fecha" sólo se parte en dos renglones bajo 360px    (−44)
     · fichas y pestañas de 42 a 40 px                      (−16)
   Lo que NO se toca: el tamaño de la letra de ninguna pieza. */
.tx-capture { gap: var(--s3); }

.tx-capture .tx-amount { padding: 0 0 var(--s1); }
.tx-capture .tx-amount-value { font-size: clamp(40px, 12.5vw, 54px); }
.tx-amount-hint { margin-top: 0; }

.tx-type-tabs { padding: 4px; }
.tx-type-tabs span { min-height: 40px; }

.tx-capture .tx-chip-option > span,
.tx-capture .tx-chip-new { min-height: 40px; }
.tx-capture .tx-chip-row { gap: 6px; }
.tx-picker { gap: 6px; }

/* La regla de ≤400px de arriba se sustituye: a 390 el rótulo y las tres
   píldoras caben en un renglón (medido: 300px de contenido en 348 de ancho).
   Se parte sólo cuando de verdad no cabe. */
@media (max-width: 400px) {
  .tx-date-label { margin-right: auto; flex-basis: auto; }
}
@media (max-width: 360px) {
  .tx-date-label { margin-right: 0; flex-basis: 100%; }
  .tx-capture .tx-date-options { flex: 1 1 auto; }
}

/* El título de la hoja, con el peso que tiene en la maqueta. Sólo aquí: es el
   encabezado de una pantalla de captura, no el de un menú. */
.sheet:has(.tx-capture) .sheet-title { font-weight: 700; letter-spacing: -.015em; }

/* "Sin categoría" elegida: gris de tinta, no `--line-strong`, que en esta
   paleta es un beige y salía como una ficha color café. */
.tx-capture .tx-chip-none input:checked + span {
  background: color-mix(in srgb, var(--ink-faint) 42%, var(--tone-canvas));
  color: var(--ink-strong);
}

/* La tecla de borrar dibujada, no el carácter ⌫: sin fuente que lo traiga, el
   navegador lo pinta como un recuadro con la flecha dentro (se veía así en la
   captura de 390). */
.tx-key.is-del .i { font-size: 22px; }

/* base.css declara `.tx-date-row { flex-direction: column }`. Al no repetirlo
   aquí, "Fecha" y las píldoras seguían apilándose aunque sobraran 49px de
   ancho: la fila medía 82px en vez de 50. Lo delató la medición de los hijos
   (rótulo 69px arriba, opciones 222px debajo, contenedor 348px). */
.tx-capture .tx-date-row { flex-direction: row; }
@media (max-width: 360px) { .tx-capture .tx-date-row { flex-direction: column; align-items: stretch; } }

/* Fichas un punto más justas de lo que pedía la maqueta: con 15px de relleno
   las cuatro categorías más "+ Nueva" caían en TRES renglones y empujaban la
   fecha bajo el teclado; con 13 caben en dos. La letra no se toca. */
.tx-capture .tx-chip-option > span,
.tx-capture .tx-chip-new { padding: 0 12px; }

/* El teclado también cede un poco: cuatro filas a 42px en vez de 44 son 8px
   que valen más arriba, y siguen por encima del mínimo táctil cómodo. */
.tx-foot .tx-keypad { gap: 6px; }
.tx-foot .tx-key { min-height: 42px; }

.tx-amount-ask { min-height: 16px; font-size: 0.8125rem; }
.tx-amount-hint { font-size: 0.75rem; }

/* Los últimos 34px salen del cromo de la hoja, no del contenido. Medido a
   390×844: de los 776px de hoja, 133 se los llevaban el relleno, el asa, el
   título y los márgenes del pie. El asa NO se toca —son 44px de zona de
   arrastre y eso fue un arreglo deliberado para el iPhone—; lo que sobra es
   el colchón bajo el teclado y el aire del título. */
.sheet:has(.tx-capture) { padding-bottom: calc(var(--safe-bottom) + var(--s4)); }
.sheet:has(.tx-capture) .sheet-title { margin-bottom: var(--s2); }
.sheet:has(.tx-capture) .sheet-foot:not(:empty) { margin-top: var(--s3); }
@media (max-width: 899px) { .sheet:has(.tx-capture) { max-height: 94dvh; } }

/* Con el rótulo y las píldoras en la misma línea, el grupo se ancla a la
   derecha: `flex-grow:1` en las opciones se comía el `margin-right:auto` del
   rótulo y las tres píldoras salían pegadas a "Fecha". */
@media (min-width: 361px) { .tx-capture .tx-date-options { flex: 0 0 auto; } }

/* El icono de borrar, al tamaño de los dígitos que tiene al lado. */
.tx-key.is-del .i { font-size: 24px; }

/* Los 4px que faltaban a 390: el bloque del importe ya se separa con el
   salto del formulario, su relleno propio era doble contabilidad. */
.tx-capture .tx-amount { padding: 0; }

/* --- Modo sobrio: la pestaña activa también se apaga ---------------------- */
/* La regla de arriba perdía por especificidad contra
   `.tx-type-tabs label[data-kind="x"] input:checked + span` (0,3,2 contra
   0,3,1). Se iguala el peso en vez de recurrir a !important. */
[data-color-mode="sober"] .tx-type-tabs label[data-kind] input:checked + span {
  background: var(--surface);
  color: var(--ink-strong);
}
/* Y la cifra. Esto venía de antes: la regla dice
   `color: var(--color-coral, var(--ctx-expense))`, pero --color-coral SIEMPRE
   está definida, así que el respaldo neutro nunca entraba y en modo sobrio el
   importe seguía saliendo coral —justo lo que ese ajuste viene a evitar—. */
[data-color-mode="sober"] .tx-capture:has(input[name="txType"][value="income"]:checked) .tx-amount-value,
[data-color-mode="sober"] .tx-capture:has(input[name="txType"][value="expense"]:checked) .tx-amount-value {
  color: var(--ink-strong);
}

/* --- Oscuro: la identidad de la ficha, en el borde ----------------------- */
/* Un 26% de color contra el fondo oscuro no da un pastel, da un barro: el
   amarillo de "Alimentos" salía verde oliva y los rosas, granate. Se baja el
   relleno y el color vuelve al contorno, que en oscuro es donde se lee. La
   elegida no cambia: a 72% sigue siendo un bloque de color pleno. */
/* OJO con la especificidad: escrito como `.tx-chip-option > span` esta regla
   (0,4,2) le ganaba a la de la ficha ELEGIDA (0,3,1) y la dejaba con relleno
   del 14% y tinta oscura encima — ilegible. Va atada a `input:not(:checked)`
   para que no pueda alcanzar nunca a la elegida. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tx-capture .tx-chip-option input:not(:checked) + span {
    background: color-mix(in srgb, var(--chip-color) 14%, var(--tone-canvas));
    border-color: color-mix(in srgb, var(--chip-color) 42%, transparent);
  }
}
:root[data-theme="dark"] .tx-capture .tx-chip-option input:not(:checked) + span {
  background: color-mix(in srgb, var(--chip-color) 14%, var(--tone-canvas));
  border-color: color-mix(in srgb, var(--chip-color) 42%, transparent);
}
/* El modo sobrio manda sobre el oscuro: sin color, ni en el borde. */
[data-color-mode="sober"] .tx-capture .tx-chip-option input:not(:checked) + span {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
}