/* Gastos pagados y servicios sin stock: heredan tokens y componentes de FIBO. */
.gasto-ayuda { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; padding:12px; border:1px solid var(--border-light); border-left:4px solid var(--brand); border-radius:8px; background:var(--bg-1); color:var(--tx-1); }
.gasto-ayuda p { margin:0; font-size:14px; line-height:1.5; color:var(--tx-2); }
.gasto-ayuda-acciones { display:flex; flex-wrap:wrap; gap:8px; }
.gasto-ayuda-acciones .btn,#gasto-tipo-label { min-height:44px; white-space:normal; }
.gasto-estado-fijo { display:flex; align-items:center; min-height:44px; }
.gastos-row .status-badge { white-space:normal; text-align:center; }
/* Estados de Gastos (lista y estado fijo del formulario): tinta mezclada con tx-1 (oscurece en claro, aclara en oscuro) y borde distinto por estado, AA sin depender sólo del color. */
.gastos-row .status-paid,.gastos-row .status-pending,.gastos-carga-layout .gasto-estado-fijo .status-paid,.gastos-carga-layout .gasto-estado-fijo .status-pending { padding:3px 6px; border:1px solid currentColor; border-color:color-mix(in srgb,currentColor 45%,transparent); }
.gastos-row .status-paid,.gastos-carga-layout .gasto-estado-fijo .status-paid { color:var(--s-libre); color:color-mix(in srgb,var(--s-libre) 45%,var(--tx-1)); border-style:solid; }
.gastos-row .status-pending,.gastos-carga-layout .gasto-estado-fijo .status-pending { color:var(--s-cocina); color:color-mix(in srgb,var(--s-cocina) 45%,var(--tx-1)); border-style:dashed; }
.gasto-historico-nota,.gastos-row .gasto-historico-nota { white-space:normal; overflow-wrap:anywhere; color:var(--tx-2); }
/* Columna de acción con etiquetas textuales (Anular/Reintegros): ancho fijo compartido por encabezado y filas. */
.gastos-row { grid-template-columns:82px minmax(150px,1.4fr) minmax(120px,1fr) 82px 110px 104px; min-width:790px; }
.gastos-row>:last-child { min-width:0; justify-self:stretch; }
.gastos-row>:last-child:is(.btn,button),.gastos-row>:last-child :is(.btn,button) { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:8px 10px; font-size:12px; line-height:1.2; white-space:nowrap; justify-content:center; }
.compra-items-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.compra-items-actions .btn { min-height:44px; white-space:normal; }
.compra-servicio-row { align-items:end; }
.compra-servicio-row .input { min-height:44px; }
.compra-servicio-row .btn-icon { min-width:44px; min-height:44px; }
.compra-servicio-campo { display:flex; flex-direction:column; gap:4px; min-width:0; }
.compra-servicio-label { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--tx-2); }
.compra-servicio-badge { padding:1px 8px; border:1px solid var(--border-light); border-radius:999px; font-size:12px; color:var(--tx-1); white-space:nowrap; }
.compra-servicio-error { display:block; font-size:13px; color:var(--s-cuenta); }
/* CTA de la carga: tinta oscura sobre el naranja de marca, AA en ambos temas y estados. */
.gastos-carga-layout .gastos-form-actions { --gasto-cta-ink:#0c0a09; }
.gastos-carga-layout .gastos-form-actions .btn-primary,.gastos-carga-layout .gastos-form-actions .btn-primary:hover,.gastos-carga-layout .gastos-form-actions .btn-primary:focus,.gastos-carga-layout .gastos-form-actions .btn-primary:focus-visible,.gastos-carga-layout .gastos-form-actions .btn-primary:active { color:var(--gasto-cta-ink); min-height:44px; }
.gastos-carga-layout .gastos-form-actions .btn-primary:hover:not(:disabled) { background:var(--brand); border-color:var(--brand); filter:brightness(1.08); }
.gastos-carga-layout .gastos-form-actions .btn-primary svg { color:inherit; }
.gastos-carga-layout .gastos-form-actions .btn-primary:focus-visible { outline:2px solid var(--tx-1); outline-offset:2px; }
/* Compra con servicio: mismo criterio de CTA que Gastos, sólo en esa superficie. */
.compra-form:has(.compra-servicio-row) { --gasto-cta-ink:#0c0a09; }
.compra-form:has(.compra-servicio-row) .compra-submit,.compra-form:has(.compra-servicio-row) .compra-submit:hover,.compra-form:has(.compra-servicio-row) .compra-submit:focus,.compra-form:has(.compra-servicio-row) .compra-submit:focus-visible,.compra-form:has(.compra-servicio-row) .compra-submit:active { color:var(--gasto-cta-ink); min-height:44px; }
.compra-form:has(.compra-servicio-row) .compra-submit:hover:not(:disabled) { background:var(--brand); border-color:var(--brand); filter:brightness(1.08); }
.compra-form:has(.compra-servicio-row) .compra-submit svg { color:inherit; }
.compra-form:has(.compra-servicio-row) .compra-submit:focus-visible { outline:2px solid var(--tx-1); outline-offset:2px; }
@media (max-width:600px) { .compra-items-actions { width:100%; } .compra-items-actions .btn,.gasto-ayuda-acciones .btn { flex:1 1 auto; } .compra-item-row>.compra-servicio-campo { grid-column:1/-1; } .compra-form :has(>.compra-items-actions) { flex-wrap:wrap; } .compra-form :has(>.compra-items-actions)>:not(.compra-items-actions) { flex:1 1 100%; min-width:0; } .compra-form :has(>.compra-items-actions)>.compra-items-actions { flex:1 1 100%; justify-content:stretch; } }