:root {
  --fondo: #0a0b12; --vidrio: rgba(255, 255, 255, .06); --borde: rgba(255, 255, 255, .11);
  --tinta: #f6f3ea; --tinta-2: #bfbcb1; --tinta-3: #979488;
  --oro: #e8c97c; --verde: #6fe3ab; --rojo: #ff9a9a; --ambar: #ffc766;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.45 var(--sans); overflow: hidden; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
small { font-size: 12px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------- Marco de app ---------- */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .22; animation: flota 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: #b08a3e; left: -24vmax; top: -30vmax; }
.aurora i:nth-child(2) { background: #1b6f73; right: -28vmax; top: 6vmax; animation-duration: 28s; }
.aurora i:nth-child(3) { background: #55348c; left: 12vmax; bottom: -44vmax; animation-duration: 34s; }
@keyframes flota { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.15); } }

.exterior { display: grid; place-items: center; height: 100dvh; }
.telefono { position: relative; z-index: 1; width: 100%; height: 100dvh; display: flex; flex-direction: column; background: rgba(12, 13, 21, .72); overflow: hidden; }
@media (min-width: 560px) {
  .telefono { width: 410px; height: min(860px, calc(100dvh - 36px)); border-radius: 38px; border: 1px solid var(--borde); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); backdrop-filter: blur(24px); }
}

.splash { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--fondo); animation: splash-sale .45s ease-in 1.15s forwards; }
.splash strong { font-size: 24px; font-weight: 650; animation: sube .5s ease-out .25s both; }
.moneda { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-size: .78em; font-weight: 700; color: #2a2008; background: radial-gradient(circle at 32% 28%, #fbeab9, #d3a951 62%, #9b7630); box-shadow: inset 0 0 0 1.5px rgba(90, 66, 16, .55); }
.moneda--xl { font-size: 46px; animation: gira .8s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes gira { from { transform: rotateY(180deg) scale(.5); opacity: 0; } }
@keyframes sube { from { transform: translateY(10px); opacity: 0; } }
@keyframes splash-sale { to { opacity: 0; visibility: hidden; } }
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

/* ---------- Inicio de sesión ---------- */
.login { justify-content: flex-end; }
.login__cielo { flex: 1; display: grid; place-items: center; align-content: center; gap: 16px; padding: 30px 26px 10px; min-height: 0; }
.login__cielo .logo { font-size: 28px; }
.login__cielo p { color: var(--tinta-2); text-align: center; }
.mini-tarjeta { width: min(240px, 66%); aspect-ratio: 1.586; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #2b2a38, #14151f 55%, #27241f); border: 1px solid var(--borde); box-shadow: 0 30px 50px -20px #000; transform: rotate(-7deg); animation: flotar 5s ease-in-out infinite alternate; font-size: 12px; }
@keyframes flotar { to { transform: rotate(-3deg) translateY(-10px); } }
.mini-tarjeta .logo { font-size: 13px; white-space: nowrap; }
.mini-tarjeta b { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; font-weight: 500; }
.hoja { padding: 24px 24px calc(26px + env(safe-area-inset-bottom)); background: #15161f; border-radius: 28px 28px 0 0; border-top: 1px solid var(--borde); display: grid; gap: 14px; animation: hoja .45s cubic-bezier(.2, .9, .3, 1) 1.1s backwards; }
@keyframes hoja { from { transform: translateY(100%); } }
.hoja h1 { font-size: 22px; font-weight: 650; }
.hoja__nota { font-size: 13px; color: var(--tinta-3); text-align: center; }
.campo-clave { position: relative; }
.campo-clave button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--tinta-2); font: 600 13px var(--sans); padding: 8px; cursor: pointer; }

/* ---------- Estructura de la app ---------- */
.cab { display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 20px 8px; flex: none; }
.banda-prueba { flex: none; margin: 0 20px 6px; padding: 3px 10px; text-align: center; font-size: 12px; color: var(--ambar); border: 1px solid rgba(255, 199, 102, .35); border-radius: 8px; }
.pantalla { flex: 1; overflow-y: auto; padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; animation: entra .28s ease-out; }
.pantalla::-webkit-scrollbar { display: none; }
@keyframes entra { from { opacity: 0; transform: translateX(14px); } }
#inicio-dinamico, #seccion-reportar, #seccion-estatus { display: grid; gap: 14px; }
.pantalla > h1 { font-size: 24px; font-weight: 650; }
.tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); background: rgba(16, 17, 26, .92); border-top: 1px solid var(--borde); }
.tabs button { display: grid; justify-items: center; gap: 3px; background: none; border: 0; color: var(--tinta-3); font: 600 11px var(--sans); padding: 5px 0; cursor: pointer; }
.tabs svg { width: 23px; height: 23px; }
.tabs button[aria-current="page"] { color: var(--oro); }
.capa { position: absolute; inset: 0; z-index: 30; background: #10111a; display: flex; flex-direction: column; animation: capa .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes capa { from { transform: translateY(100%); } }
.capa__cab { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 10px; }
.capa__cab button { background: var(--vidrio); border: 0; color: var(--tinta); width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.capa__cab h2 { font-size: 17px; font-weight: 650; }
.capa__cuerpo { flex: 1; overflow-y: auto; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Tarjeta 3D ---------- */
.tarjeta { width: 100%; perspective: 1300px; cursor: pointer; user-select: none; touch-action: manipulation; }
.tarjeta__tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out; }
.tarjeta__giro { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.15, .4, 1); }
.tarjeta.volteada .tarjeta__giro { transform: rotateY(180deg); }
.cara { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara--frente { background: linear-gradient(135deg, #20222e 0%, #12141d 46%, #1b1a22 100%); }
.cara--dorso { background: linear-gradient(315deg, #20222e 0%, #12141d 55%, #191821 100%); transform: rotateY(180deg); padding: 0; }
.cara small { display: block; color: var(--tinta-3); letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; margin-bottom: 1px; }
.cara__brillo { position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: color-dodge; background: radial-gradient(420px circle at var(--bx, 30%) var(--by, 10%), rgba(255, 255, 255, .24), transparent 60%), conic-gradient(from 210deg at 80% 120%, #e8c97c33, #6fe3ab2e, #7aa7ff2e, #d58cff2e, #e8c97c33); }
.cara__fila { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cara__fila--base { margin-top: auto; align-items: flex-end; font-size: 12.5px; }
.cara__fila--base > div:first-child { min-width: 0; flex: 1; }
.logo--tarjeta { font-size: 15px; }
.sin-contacto { color: var(--tinta-2); }
.chip { position: relative; width: 40px; margin-top: 10px; }
.cara__pan { position: relative; font: 500 clamp(15px, 4.8vw, 19px) var(--mono); letter-spacing: .05em; margin-top: auto; padding-top: 4px; white-space: nowrap; }
.cara__titular { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado { white-space: nowrap; }
.estado::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--tinta-3); }
.estado--solvente::before { background: var(--verde); }
.estado--en_mora::before { background: var(--rojo); }
.estado--preaprobado::before { background: var(--oro); }
.cara__banda { display: block; height: 19%; margin-top: 7%; flex: none; background: linear-gradient(180deg, #05050a, #17171f 70%, #05050a); }
.cara__cvv { align-self: flex-end; margin: 8px 20px 0; padding: 2px 10px 3px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: #1b1b22; text-align: right; font: 600 13px var(--mono); }
.cara__cvv small { color: #55535c; font-size: 8px; margin: 0; }
.cara__saldo { margin-top: auto; padding: 0 58px 14px 20px; min-width: 0; }
.cara__saldo p { font-size: clamp(21px, 6.6vw, 27px); font-weight: 650; line-height: 1.15; min-height: 1.15em; white-space: nowrap; }
.cara__saldo .cara__diferido { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--tinta-2); margin: 3px 0 0; min-height: 1.3em; }
.toggle-cifras { position: absolute; right: 12px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--tinta); background: var(--vidrio); border: 1px solid var(--borde); border-radius: 50%; cursor: pointer; }

/* ---------- Componentes ---------- */
.btn { display: inline-block; text-align: center; text-decoration: none; font: 650 15px var(--sans); color: var(--tinta); background: var(--vidrio); border: 1px solid var(--borde); border-radius: 14px; padding: 13px 16px; cursor: pointer; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn--primario { color: #231b06; background: linear-gradient(180deg, #f1d68f, #d9b35f); border-color: transparent; }
.btn--sutil { background: transparent; }
.btn--chico { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
input, select { width: 100%; font: 16px var(--sans); color: var(--tinta); background: rgba(0, 0, 0, .3); border: 1px solid var(--borde); border-radius: 13px; padding: 12px 13px; min-height: 48px; }
input:focus, select:focus { border-color: var(--oro); outline: none; }
select option { background: #14151e; }
input[type="checkbox"] { width: auto; min-height: 0; }
.form { display: grid; gap: 12px; }
.form label, .filtros label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); min-width: 0; }
.form__doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex !important; grid-auto-flow: column; gap: 9px; align-items: flex-start; font-size: 14px; }
.caja { padding: 16px; background: var(--vidrio); border: 1px solid var(--borde); border-radius: 18px; display: grid; gap: 10px; }
.caja h2 { font-size: 16px; font-weight: 650; }
.acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.accion { display: grid; justify-items: center; gap: 5px; padding: 12px 4px; background: var(--vidrio); border: 1px solid var(--borde); border-radius: 16px; color: var(--tinta); font: 600 12.5px var(--sans); cursor: pointer; }
.accion svg { width: 22px; height: 22px; color: var(--oro); }
.oferta { padding: 18px; border-radius: 20px; background: linear-gradient(145deg, #4a3a15, #1e1a10 70%); border: 1px solid rgba(232, 201, 124, .4); display: grid; gap: 8px; }
.oferta small { color: var(--oro); font-size: 12.5px; font-weight: 600; }
.oferta strong { font-size: 29px; font-weight: 650; letter-spacing: -.015em; }
.oferta p { color: var(--tinta-2); font-size: 14px; }
.mora { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 1px solid rgba(255, 139, 139, .5); background: rgba(255, 90, 90, .1); }
.mora div { display: grid; min-width: 0; }
.mora span { font-size: 13px; color: var(--tinta-2); }
.mora .btn { flex: none; }
.info { padding: 13px 14px; border-radius: 16px; background: var(--vidrio); border: 1px solid var(--borde); font-size: 14px; color: var(--tinta-2); }
.banner { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 2.6; border: 1px solid var(--borde); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner span { position: absolute; left: 14px; bottom: 10px; font-weight: 650; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.alerta { padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255, 139, 139, .5); color: #ffd0d0; background: rgba(255, 90, 90, .1); font-size: 14px; }
.nota-prueba { font-size: 12.5px; color: var(--ambar); }
.vacio { color: var(--tinta-3); text-align: center; padding: 22px 8px; }
.segmentos { display: flex; gap: 3px; padding: 4px; background: var(--vidrio); border: 1px solid var(--borde); border-radius: 13px; flex: none; }
.segmentos button { flex: 1; min-height: 40px; font: 600 13.5px var(--sans); color: var(--tinta-2); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.segmentos button[aria-pressed="true"] { color: var(--tinta); background: rgba(255, 255, 255, .11); }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros label:nth-child(3) { grid-column: 1 / -1; }
.filtros input, .filtros select { font-size: 14px; padding: 8px 10px; min-height: 42px; }
.movs li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.movs li:last-child { border-bottom: 0; }
.movs__icono { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--tinta-2); }
.movs__titulo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.movs__monto { font-weight: 650; text-align: right; white-space: nowrap; }
.movs__monto--credito { color: var(--verde); }
.movs__sub, .movs__meta { color: var(--tinta-3); font-size: 12.5px; min-width: 0; }
.movs__meta { text-align: right; white-space: nowrap; }
.movs__motivo { grid-column: 2 / -1; font-size: 12.5px; color: var(--rojo); }
.sello { font-size: 12px; font-weight: 600; white-space: nowrap; }
.sello--en_revision, .sello--pendiente { color: var(--ambar); }
.sello--aprobado, .sello--pagada { color: var(--verde); }
.sello--rechazado, .sello--vencida { color: var(--rojo); }
.pasos { display: flex; gap: 8px; counter-reset: paso; }
.pasos li { flex: 1; counter-increment: paso; font-size: 12.5px; color: var(--tinta-3); padding-top: 7px; border-top: 2px solid var(--borde); }
.pasos li::before { content: counter(paso) ". "; }
.pasos li[aria-current], .pasos li.hecho { color: var(--tinta); border-color: var(--oro); }
.resumen-pago div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.resumen-pago div:last-child { border-bottom: 0; }
.resumen-pago dt { color: var(--tinta-2); }
.resumen-pago dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.exito { display: grid; gap: 8px; text-align: center; padding: 22px 6px; justify-items: center; }
.exito__marca { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgba(111, 227, 171, .15); color: var(--verde); }
.exito strong { font-size: 20px; }
.exito p { color: var(--tinta-2); }
.contrato { max-height: 42vh; overflow-y: auto; padding: 16px; background: #f7f4ea; color: #1d1b16; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.contrato p { margin-bottom: 8px; }
.contrato h2 { font-size: 15px; text-align: center; margin-bottom: 6px; }
.contrato h2 + p { text-align: center; color: #6b655a; }
.otp { font: 600 28px var(--mono); letter-spacing: 12px; text-align: center; }
.gran-monto { font-size: 34px; font-weight: 650; letter-spacing: -.02em; }
.etiqueta { color: var(--tinta-2); font-size: 13px; }
.medidor { height: 10px; border-radius: 5px; background: var(--vidrio); overflow: hidden; }
.medidor i { display: block; height: 100%; background: linear-gradient(90deg, #d9b35f, #f1d68f); }
.toast-app { position: absolute; left: 18px; right: 18px; top: 66px; z-index: 50; padding: 12px 14px; border-radius: 14px; background: #24252f; border: 1px solid var(--borde); font-size: 14px; animation: sube .2s ease-out; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .splash { display: none; } }

/* ---------- Carrusel de publicidad ---------- */
.carrusel { display: grid; gap: 8px; }
.carrusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: none; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.anuncio { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 2.4; overflow: hidden; border-radius: 18px; border: 1px solid var(--borde); text-decoration: none; color: #fff; }
.anuncio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anuncio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 75%); }
.anuncio__texto { position: absolute; z-index: 1; left: 14px; right: 80px; bottom: 12px; display: grid; gap: 1px; }
.anuncio__texto small { font-size: 10.5px; opacity: .8; letter-spacing: .02em; }
.anuncio__texto strong { font-size: 16px; line-height: 1.2; }
.anuncio__texto span { font-size: 12.5px; opacity: .9; }
.anuncio__ir { position: absolute; z-index: 1; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #1c1a14; font-size: 12px; font-weight: 700; }
.carrusel__puntos { display: flex; justify-content: center; gap: 4px; }
.carrusel__puntos button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.carrusel__puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .28); transition: width .25s, background .25s; }
.carrusel__puntos button[aria-current="true"]::before { width: 18px; background: var(--oro); }