.payment-settings { max-width: 1120px; margin: 0 auto; color: var(--mud-palette-text-primary); }
.payment-settings h1 { font-size: 1.85rem; font-weight: 600; line-height: 1.25; margin: 0 0 .65rem; }
.payment-settings h2 { font-size: 1.12rem; font-weight: 600; margin: 0 0 .5rem; }
.payment-settings p { line-height: 1.55; margin: 0; }
.payment-page-heading { margin-bottom: 1.6rem; }
.payment-page-heading > div > p:last-child, .payment-panel > p, .payment-form-heading > p { color: var(--mud-palette-text-secondary); }
.payment-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; margin-bottom: .65rem !important; color: var(--mud-palette-text-secondary); }
.payment-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.payment-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 1.6rem; min-width: 0; }
.payment-selectors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.3rem; }
.payment-field { margin-bottom: 1.15rem; }
.payment-field label, .payment-return label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; }
.payment-settings input, .payment-settings select { width: 100%; min-height: 44px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 6px; padding: .65rem .75rem; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: .9rem; }
.payment-settings input:focus-visible, .payment-settings select:focus-visible, .payment-button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }
.payment-settings input[readonly] { background: var(--mud-palette-background-gray); font-family: "IBM Plex Mono", monospace; font-size: .78rem; }
.payment-field-help { color: var(--mud-palette-text-secondary); font-size: .8rem; margin-top: .4rem !important; }
.payment-field-help span { display: block; margin-top: .2rem; }
.payment-environment { font-size: .83rem; padding: .8rem; border-radius: 6px; background: var(--mud-palette-background-gray); }
.payment-form { margin-top: 1.6rem; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 1.4rem; }
.payment-credentials-collapsed { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.4rem; padding:1rem; border-radius:8px; background:var(--mud-palette-background-gray); }
.payment-credentials-collapsed strong { display:block; margin-bottom:.25rem; }
.payment-credentials-collapsed p { color:var(--mud-palette-text-secondary); font-size:.83rem; }
.payment-credentials-collapsed .payment-button { flex:0 0 auto; }
.payment-form-heading { margin-bottom: 1.25rem; }
.payment-return { margin: 1.4rem 0; }
.payment-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.payment-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; text-align: center; text-decoration: none; }
.payment-primary { color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); }
.payment-secondary { color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border-color: var(--mud-palette-lines-inputs); }
.payment-danger { color: var(--mud-palette-error-text); background: var(--mud-palette-error); }
.payment-button:disabled { opacity: .5; cursor: not-allowed; }
.payment-bank-icon { display: inline-flex; border-radius: 10px; padding: .8rem; background: var(--mud-palette-background-gray); margin-bottom: 1.1rem; }
.payment-status { display: inline-block; font-size: .8rem; font-weight: 500; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); padding: .3rem .65rem; border-radius: 5px; margin: .35rem 0 1rem; }
.payment-status[data-status="Conectada"] { color: var(--mud-palette-success); border: 1px solid currentColor; }
.payment-connection > p { font-size: .875rem; }
.payment-account { margin: 1.2rem 0; font-size: .85rem; }
.payment-account dt { color: var(--mud-palette-text-secondary); margin-top: .8rem; }
.payment-account dd { margin: .2rem 0 0; overflow-wrap: anywhere; font-weight: 500; }
.payment-next-step { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 1.2rem; margin-top: 1.5rem; font-size: .8rem; }
.payment-next-step > p { color: var(--mud-palette-text-secondary); margin-top: .4rem; }
.payment-notice { padding: 1rem; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-left: 3px solid var(--mud-palette-primary); border-radius: 6px; margin-bottom: 1rem; }
.payment-error { border-left-color: var(--mud-palette-error); }
.payment-progress { margin-top: 1rem !important; }
.payment-disconnect { margin-top: 1rem; font-size: .85rem; }
.payment-devices { margin-top: 1.25rem; padding: 0; overflow: hidden; }
.payment-devices-heading { padding: 1.4rem 1.6rem 1.1rem; }
.payment-devices-heading p { max-width: 68ch; color: var(--mud-palette-text-secondary); font-size: .875rem; }
.payment-device-step { padding: 1.4rem 1.6rem; border-top: 1px solid var(--mud-palette-lines-default); }
.payment-step-title { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }
.payment-step-title > span { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); font-size: .78rem; font-weight: 700; }
.payment-step-title h3 { margin: 1px 0 .2rem; font-size: 1rem; font-weight: 600; }
.payment-step-title p { color: var(--mud-palette-text-secondary); font-size: .84rem; }
.payment-inline-state { margin-top: 1rem !important; padding: .8rem 1rem; border-radius: 8px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); font-size: .84rem; }
.payment-return-state { width: min(100%, 560px); margin: clamp(48px, 10vh, 112px) auto 0; overflow-wrap: anywhere; }
@media (max-width: 800px) { .payment-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .payment-panel { padding: 1.1rem; } .payment-devices { padding: 0; } .payment-devices-heading, .payment-device-step { padding: 1.1rem; } .payment-selectors { grid-template-columns: minmax(0, 1fr); gap: 0; } .payment-actions, .payment-credentials-collapsed { flex-direction: column; align-items:stretch; } .payment-actions > .payment-button, .payment-credentials-collapsed .payment-button { width: 100%; } }