/* Shared customer identity for sign-in, account, storefront and payment dialogs. */
body:is([data-page=client],[data-page=store],[data-page=login],[data-page=approval]){--brand:#ffad6b;--line:#373330}
body:is([data-page=client],[data-page=store]) #modal-recarga>.recharge-dialog{background:#17181c;border-color:#655343;color:#f5f2ed}
body:is([data-page=client],[data-page=store]) #modal-recarga :is(.recharge-dialog-heading,.recarga-actions){background:#17181c;border-color:#373330}
body:is([data-page=client],[data-page=store]) #modal-recarga .recarga-body{background:#17181c}
body:is([data-page=client],[data-page=store]) #modal-recarga .recharge-eyebrow{color:#ffd0a6}
body:is([data-page=client],[data-page=store]) #modal-recarga #btn-enviar-recarga{background:#ffad6b;border-color:#ffad6b;color:#fff}
body:is([data-page=client],[data-page=store]) #modal-recarga #btn-enviar-recarga:hover:not(:disabled){background:#ffad6b}
body:is([data-page=client],[data-page=store]) #modal-recarga .recharge-progress b{border-color:#655343}
body:is([data-page=client],[data-page=store]) #modal-recarga[data-recharge-step=setup] .recharge-progress-first b,body:is([data-page=client],[data-page=store]) #modal-recarga[data-recharge-step=payment] .recharge-progress-second b{background:#ffad6b;color:#fff;border-color:#ffad6b}
body:is([data-page=client],[data-page=store]) #modal-recarga :is(.recharge-order-box,[data-recharge-payment],#input-cod-operacion,#voucher-upload-placeholder){background:#17181c;border-color:#655343;color:#ffd0a6}
body:is([data-page=client],[data-page=store]) #modal-recarga #recharge-pay-total{color:#ffd0a6}
body:is([data-page=client],[data-page=store]) #modal-recarga :is(#btn-metodo-yape,#btn-metodo-plin){background:#202125;border-color:#655343}
body:is([data-page=client],[data-page=store]) #modal-recarga :is(#btn-metodo-yape,#btn-metodo-plin)[aria-pressed=true]{border-color:#ffd0a6;background:#ffad6b16;box-shadow:inset 0 0 0 1px #ffad6b33}
body:is([data-page=client],[data-page=store]) #modal-recarga button.amount-selected{background:#373330!important;border-color:#ffad6b!important;color:#f5f2ed}
body:is([data-page=client],[data-page=store]) #modal-recarga .recharge-setup>div:last-child>div:last-child{background:#101114;border-color:#655343}
body:is([data-page=client],[data-page=store]) #modal-recarga .recharge-consent{background:#101114;border-color:#655343}
body:is([data-page=client],[data-page=store]) #modal-recarga .recharge-consent input{accent-color:#ffad6b}
body:is([data-page=client],[data-page=store]) .app-dialog>div{background:#17181c;border-color:#655343;color:#f5f2ed}
body:is([data-page=client],[data-page=store]) .status-pill.green{background:#203e32;color:#94dfb9}
body:is([data-page=client],[data-page=store]) .status-pill.amber{background:#403122;color:#f0cb92}
body:is([data-page=client],[data-page=store]) .status-pill.red{background:#412630;color:#ffb5c2}
body[data-page=login]{background:radial-gradient(ellipse at 20% 20%,#3733303b,transparent 60%),#101114!important;--ink:#f5f2ed;--muted:#beb4aa;color:#f5f2ed}
body[data-page=login] :is(.auth-card,.login-card,.auth-shell,.login-panel){background:#17181c;border-color:#655343;color:#f5f2ed;border-radius:22px}
body[data-page=login] h1,body[data-page=login] h2{color:#f5f2ed}
body[data-page=login] input:not([type=checkbox]){background:#101114!important;color:#f5f2ed!important;border-color:#655343!important}
body[data-page=login] .primary-button{background:#ffad6b;color:#fff;border-color:#ffad6b}
body[data-page=login] .app-brand .brand-secondary{color:#ffad6b}
@media(prefers-reduced-motion:reduce){body:is([data-page=client],[data-page=store]) *{scroll-behavior:auto!important;transition:none!important}}
body[data-page=login] main{background:#17181c;border:1px solid #655343;box-shadow:0 28px 90px #0005;border-radius:22px;color:#f5f2ed}
body[data-page=login] #auth-title{font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.6px;font-size:28px}
body[data-page=login] #auth-description{color:#beb4aa;font-size:13px;line-height:1.7}
body[data-page=approval]{background:radial-gradient(ellipse at 20% 20%,#3733303b,transparent 60%),#101114;color:#f5f2ed}
body[data-page=approval] .approval-card{background:#17181c;border-color:#655343;color:#ffd0a6;border-radius:22px}
body[data-page=approval] .approval-header .app-brand,body[data-page=approval] .approval-card h1{color:#f5f2ed}
body[data-page=approval] .approval-card p{color:#beb4aa}
body[data-page=approval] .approval-symbol{background:#65534330;color:#ffd0a6}
body[data-page=approval] .approval-header #approval-logout{background:#202125;border-color:#655343;color:#ffd0a6}
body[data-page=approval] .primary-button{background:#ffad6b;color:#fff}
/* Brand accents follow the orange/black DairShop logo. */
body:is([data-page=client],[data-page=store],[data-page=login],[data-page=approval]){--brand:#ff8b32;--canvas:#101114;--ink:#f5f2ed;--muted:#beb4aa;--line:#373330}
body:is([data-page=client],[data-page=store]) :is(.primary-button,#btn-verificar,#btn-abrir-auth,#btn-abrir-recarga){background:#ff8b32;color:#20140b;border-color:#ffac68}
body:is([data-page=client],[data-page=store]) .primary-button:hover{background:#ffa65b;color:#20140b}
body:is([data-page=client],[data-page=store]) #modal-recarga #btn-enviar-recarga{background:#ff8b32;color:#20140b;border-color:#ffa45d}
body:is([data-page=client],[data-page=store]) #modal-recarga #btn-enviar-recarga:hover:not(:disabled){background:#ffa65b;color:#20140b}
body:is([data-page=client],[data-page=store]) .balance-card button{background:#ff9b45;color:#21150b}
body:is([data-page=client],[data-page=store]) .storefront-brand b{color:#ff9b3d}
body:is([data-page=client],[data-page=store]) .customer-unified-nav a.active{border-color:#9e5d2c;background:#ff8b3215;color:#ffb67e}
body[data-page=login] :is(.primary-button,#btn-submit-auth){background:#ff8b32;color:#20140b;border-color:#ffa45d}
body[data-page=approval] .primary-button{background:#ff8b32;color:#20140b}

/* Sign-in and registration use charcoal surfaces, including browser autofill. */
body[data-page=login]{color-scheme:dark}
body[data-page=login] header .login-brand-name{color:#f5f2ed;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:20px;letter-spacing:-.6px}
body[data-page=login] header a:last-child{color:#c9bdb1}
body[data-page=login] #auth-tabs{background:#101114;border:1px solid #3d3833;padding:5px;gap:5px}
body[data-page=login] #auth-tabs button{min-height:42px;padding:10px 12px;font-size:13px;color:#c9bdb1;background:transparent;border-radius:8px}
body[data-page=login] #auth-tabs button[aria-pressed=true]{background:#ff8b32;color:#20140b;box-shadow:0 2px 8px #0003}
body[data-page=login] #auth-tabs button[aria-pressed=false]:hover{background:#262422;color:#fff}
body[data-page=login] :is(button,a,input):focus-visible{outline:2px solid #ffb67e;outline-offset:3px}
body[data-page=login] form label{font-size:12px;color:#c9bdb1}
body[data-page=login] form input{min-height:48px;font-size:14px;border-radius:10px;caret-color:#ffad6b}
body[data-page=login] form input::placeholder{color:#9f978e;opacity:1}
body[data-page=login] form input:is(:autofill,:-webkit-autofill){-webkit-text-fill-color:#f5f2ed!important;caret-color:#ffad6b;box-shadow:0 0 0 1000px #101114 inset!important;border-color:#655343!important}
body[data-page=login] #registration-review-note{background:#ff8b320c;border:1px solid #68452b;border-radius:12px;padding:16px 18px}
body[data-page=login] #registration-review-note span{color:#ffb67e;font-size:10px}
body[data-page=login] #registration-review-note strong{color:#f1dfcf;font-size:13px}
body[data-page=login] #registration-review-note p{color:#c9bdb1;font-size:12px;line-height:1.7}
body[data-page=login] #alerta-error{background:#382123;color:#ffc0bb;border-color:#71413f;padding:12px;line-height:1.6}
body[data-page=login] #btn-submit-auth{font-size:14px;min-height:48px;box-shadow:none}
body[data-page=login] #btn-submit-auth:hover:not(:disabled){background:#ffa65b}
body[data-page=login] #btn-submit-auth:disabled{opacity:.65;cursor:wait}
body[data-page=login] #auth-footer-note,body[data-page=login] footer{font-size:12px;line-height:1.7;color:#aaa198}
@media(max-width:600px){body[data-page=login]{padding:20px 16px;gap:24px}body[data-page=login] header{margin-bottom:0;padding:0}body[data-page=login] main{padding:26px 22px;border-radius:18px}body[data-page=login] #auth-title{font-size:25px}body[data-page=login] form input{font-size:16px}body[data-page=login] #auth-tabs button{font-size:12px;padding-inline:8px}body[data-page=login] header .login-brand-name{font-size:18px}body[data-page=login] .login-brand-logo{width:44px;height:44px}}