/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: transferencias
   --------------------------------------------------------------------------
   Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de
   una va en components.css. Prohibido escribir colores, radios o sombras
   literales: se consumen con var(--token) de tokens.css.
   ========================================================================== */

/* ---- Ritmo vertical del panel -------------------------------------------
   .kpis ya trae su propio margen inferior; el resto de bloques de la
   pestaña no, así que lo añadimos aquí para que no queden pegados. */
.transfers-container > .aviso,
.transfers-container > .bento{margin-bottom:var(--esp-4)}
.transfers-toolbar{margin-bottom:var(--esp-4)}

/* Los chips del pie de la celda de progreso deben poder bajar de línea en
   pantallas estrechas: .c-pie es una fila fija en components.css porque la
   pensaron para dos o tres datos cortos, no para una lista que crece. */
.transfers-resumen .c-pie{flex-wrap:wrap}

/* ---- Importe en dos monedas -----------------------------------------------
   Euros, moneda local y tipo de cambio apilados y alineados a la derecha
   dentro de la misma celda .col-amount, en vez de tres columnas sueltas. */
.imp-pila{display:flex;flex-direction:column;align-items:flex-end;gap:2px}


/* ---- Ganchos de fila y formulario -----------------------------------------
   `.transfer-row` y `.transfer-form` son los puntos de anclaje que usan las
   plantillas; el aspecto lo ponen los componentes, aquí solo el ritmo propio
   de esta pestaña. */
.transfer-row td{vertical-align:middle}
.transfer-form .form-actions{margin-top:var(--esp-5)}