/* USDT MX · Estilo D para login y registro. Se carga después de los estilos de cada página. */
:root{--ux-ink:#0e2a22;--ux-muted:#57695f;--ux-line:#dfe7e2;--ux-accent:#0b6e5a;--ux-accent-soft:#ddf1e8;--ux-accent-ink:#075443;--ux-bg:#f3f6f4}
body{background:var(--ux-bg);color:var(--ux-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
.phone-frame,.app-content{background:var(--ux-bg)}
.app-header{background:transparent;border-bottom:1px solid var(--ux-line);box-shadow:none;color:var(--ux-ink)}
.login-title,.login-title h1,.login-title h2{color:var(--ux-ink);letter-spacing:-.3px}
.login-title p{color:var(--ux-muted)}
.form-group label{color:var(--ux-ink);font-weight:600;font-size:13px}
.remember-forgot{color:var(--ux-muted)}
.remember-forgot input[type=checkbox]{accent-color:var(--ux-accent)}
.remember-forgot a,.register-link a{color:var(--ux-accent);font-weight:600;text-decoration:none}
.login-btn{background:var(--ux-ink);color:#fff;border:0;border-radius:14px;box-shadow:none;font-weight:600}
.login-btn:hover{background:#163d32}
.login-btn:disabled{opacity:.6}
.divider .line{background:var(--ux-line)}
.divider .text{color:var(--ux-muted)}
.google-btn{background:#fff;border:1px solid var(--ux-line);border-radius:12px;color:var(--ux-ink);box-shadow:none;font-weight:600}
.register-link{color:var(--ux-muted)}
.error-message{color:#b42318}
/* Campos: el contenedor es el recuadro, el input va limpio por dentro */
.login-form .input-wrapper{background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden}
.login-form .input-wrapper:focus-within{border-color:var(--ux-accent)!important;box-shadow:0 0 0 3px var(--ux-accent-soft)!important}
.login-form .input-wrapper input{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;border-radius:0!important;color:var(--ux-ink);font-size:16px}
.login-form .input-wrapper i,.login-form .toggle-password,.login-form .toggle-password i{color:#8a9a91!important;background:transparent!important}
.login-form .input-wrapper input::placeholder{color:#9aa8a0}
.form-group label{text-transform:none;letter-spacing:0}
/* Pulido */
.login-title p,.login-title{color:var(--ux-ink)!important;font-weight:700;font-size:20px;letter-spacing:-.3px}
.login-btn,.google-btn{text-transform:none!important;letter-spacing:0!important;font-size:16px}
.app-header{border-bottom:0!important}
/* Registro */
.register-form .input-wrapper{background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden}
.register-form .input-wrapper:focus-within{border-color:var(--ux-accent)!important;box-shadow:0 0 0 3px var(--ux-accent-soft)!important}
.register-form .input-wrapper input{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;border-radius:0!important;color:var(--ux-ink);font-size:16px}
.register-form .input-wrapper i,.register-form .toggle-password,.register-form .toggle-password i{color:#8a9a91!important;background:transparent!important}
.register-form .input-wrapper input::placeholder{color:#9aa8a0}
.register-title,.register-title h1,.register-title h2{color:var(--ux-ink);letter-spacing:-.3px}
.register-title p{color:var(--ux-muted)}
.register-btn{background:var(--ux-ink)!important;color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:none!important;font-weight:600}
.register-btn:hover{background:#163d32!important}
.register-btn:disabled{opacity:.6}
.password-requirements{background:#fff;border:1px solid var(--ux-line);border-radius:12px;color:var(--ux-muted)}
.password-strength .bar{border-radius:2px}
.password-strength-label{color:var(--ux-muted)}
.login-link{color:var(--ux-muted)}
.login-link a{color:var(--ux-accent);font-weight:600;text-decoration:none}
/* Requisitos de contraseña: gris → verde (cumplido) / rojo (solo si ya escribiste) */
.req,.req i{color:#8a9a91!important}
.req.met,.req.met i{color:var(--ux-accent)!important;font-weight:600}
.req.fail,.req.fail i{color:#b42318!important}
.register-form:has(#password:placeholder-shown) .req.fail,.register-form:has(#password:placeholder-shown) .req.fail i{color:#8a9a91!important;font-weight:400}
/* KYC */
.volver-btn{background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:10px!important;color:var(--ux-ink)!important;box-shadow:none!important}
.greeting h2{color:var(--ux-ink)!important;font-weight:700;letter-spacing:-.3px}
.greeting p{color:var(--ux-muted)!important}
.mensaje{border-radius:12px!important;box-shadow:none!important}
.mensaje.success{background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;border:0!important}
.mensaje.error{background:#fdeceа;background:#fdecea!important;color:#b42318!important;border:0!important}
.clabe-container{background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:16px!important;box-shadow:none!important}
.clabe-titulo{color:var(--ux-ink)!important;font-weight:700}
.clabe-titulo-icon{background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important}
.estado-badge{background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;border:0!important;font-weight:700}
.transfer-field label{color:var(--ux-ink)!important;font-weight:600;font-size:13px;text-transform:none;letter-spacing:0}
.transfer-field label small{color:var(--ux-muted)!important;font-weight:400}
.transfer-field input,.transfer-field select{background:#f8faf9!important;border:1px solid var(--ux-line)!important;border-radius:10px!important;color:var(--ux-ink)!important;box-shadow:none!important;font-size:16px}
.transfer-field input:focus,.transfer-field select:focus{border-color:var(--ux-accent)!important;box-shadow:0 0 0 3px var(--ux-accent-soft)!important;outline:0}
.transfer-btn{background:var(--ux-ink)!important;color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:none!important;font-weight:600;text-transform:none;letter-spacing:0}
.nota{color:var(--ux-muted)!important}
/* Menú de abajo igual que el dashboard: Billetera, Banco, Cupón, Tarjeta, Perfil */
.bottom-nav{background:#fff!important;border-top:1px solid var(--ux-line)!important;box-shadow:none!important}
.bottom-nav .nav-item,.bottom-nav .nav-item i{color:#8a9a91!important}
.bottom-nav .nav-item.active,.bottom-nav .nav-item.active i{color:var(--ux-accent)!important;background:transparent!important}
.bottom-nav a[href$="billetera"]{order:1}.bottom-nav a[href$="banco"]{order:2}.bottom-nav a[href$="cupon"]{order:3}.bottom-nav a[href$="tarjeta"]{order:4}.bottom-nav a[href$="perfil"]{order:5}
/* Etiqueta de estado KYC */
.estado-badge{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.estado-sin_iniciar,.estado-pendiente{background:#edf2ef!important;color:#3f5148!important}
.estado-rechazado{background:#fdecea!important;color:#b42318!important}
/* Soporte (chat) */
.phone-frame .header{background:#fff!important;color:var(--ux-ink)!important;border-bottom:1px solid var(--ux-line)!important;box-shadow:none!important}
.header .bot-avatar{background:var(--ux-accent)!important;color:#fff!important}
.header .title{color:var(--ux-ink)!important;font-weight:700}
.header .subtitle{color:var(--ux-muted)!important}
.header .subtitle .dot{background:var(--ux-accent)!important}
.header a.back{color:var(--ux-ink)!important;background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:10px!important}
.chat-area{background:var(--ux-bg)!important}
.msg.bot{background:#fff!important;color:var(--ux-ink)!important;border:1px solid var(--ux-line)!important;box-shadow:none!important}
.msg.user{background:var(--ux-accent)!important;color:#fff!important;border:0!important;box-shadow:none!important}
.chip{background:#fff!important;color:var(--ux-accent-ink)!important;border:1px solid var(--ux-line)!important;box-shadow:none!important;font-weight:600}
.chip:hover{background:var(--ux-accent-soft)!important;border-color:var(--ux-accent)!important}
.contact-btn{background:#fff!important;color:var(--ux-ink)!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;box-shadow:none!important;font-weight:600}
.contact-btn.whatsapp i{color:#128c4a!important}
.contact-btn.email i{color:var(--ux-accent)!important}
.input-row{background:#fff!important;border-top:1px solid var(--ux-line)!important;box-shadow:none!important}
.input-row input{background:#f8faf9!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;color:var(--ux-ink)!important;font-size:16px;box-shadow:none!important}
.input-row input:focus{border-color:var(--ux-accent)!important;box-shadow:0 0 0 3px var(--ux-accent-soft)!important;outline:0}
.input-row button{background:var(--ux-ink)!important;color:#fff!important;border:0!important;box-shadow:none!important}
.input-row button:hover{background:#163d32!important}
/* Aviso CLABE a nombre del titular */
.aviso-clabe{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:12px;border-radius:12px;background:#fff7e6;border:1px solid #f1d59b;color:#6b4a00;font-size:13px;line-height:1.45}
.aviso-clabe i{color:#b26b00;margin-top:2px;flex-shrink:0}
.aviso-clabe strong{color:#4d3500}
/* CLABE de retiro: todo el campo dentro del recuadro de aviso, con el aviso antes del campo */
.transfer-field:has(input[name=clabe_retiro]){display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:#fff7e6;border:1.5px solid #e9b949}
.transfer-field:has(input[name=clabe_retiro]) label{order:1;color:#4d3500!important}
.transfer-field:has(input[name=clabe_retiro]) .aviso-clabe{order:2;margin:0;padding:0;background:transparent;border:0}
.transfer-field:has(input[name=clabe_retiro]) input{order:3;background:#fff!important;border:1.5px solid #e9b949!important;font-size:18px!important;letter-spacing:1px;font-variant-numeric:tabular-nums}
.transfer-field:has(input[name=clabe_retiro]) input:focus{border-color:#b26b00!important;box-shadow:0 0 0 3px #fbe3b0!important}
/* sendBtn redondo */
.input-row button#sendBtn{width:46px!important;height:46px!important;min-width:46px;border-radius:50%!important;padding:0!important;display:flex;align-items:center;justify-content:center;font-size:17px}
/* Volver de Soporte */
.header a.back{display:inline-flex!important;align-items:center;gap:6px;padding:8px 12px!important;text-decoration:none!important;font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
/* Recuperar contraseña */
.recover-title h2{color:var(--ux-ink)!important;font-weight:700;letter-spacing:-.3px}
.recover-title p{color:var(--ux-muted)!important}
.recover-form .form-group label{color:var(--ux-ink)!important;font-weight:600;font-size:13px;text-transform:none;letter-spacing:0}
.recover-form .input-wrapper{background:#fff!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden}
.recover-form .input-wrapper:focus-within{border-color:var(--ux-accent)!important;box-shadow:0 0 0 3px var(--ux-accent-soft)!important}
.recover-form .input-wrapper input{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;color:var(--ux-ink);font-size:16px}
.recover-form .input-wrapper i,.recover-form .input-wrapper:focus-within i{color:#8a9a91!important}
.recover-form .input-wrapper input::placeholder{color:#9aa8a0}
.recover-btn{background:var(--ux-ink)!important;color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:none!important;font-weight:600;text-transform:none!important;letter-spacing:0!important}
.recover-btn:hover{background:#163d32!important}
.recover-btn:disabled{opacity:.6}
.success-message i{color:var(--ux-accent)!important}
.success-message h3{color:var(--ux-ink)!important}
.back-link a{color:var(--ux-accent)!important;font-weight:600;text-decoration:none}