/* ColePay: sistema visual común (app de padres y alumnos, recarga, caja y panel) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --m-950: #1a0638;
    --m-900: #2e0f5c;
    --m-800: #3b0f7a;
    --m-700: #5b21b6;
    --m-600: #6d28d9;
    --m-500: #7c3aed;
    --m-400: #8b5cf6;
    --m-300: #a78bfa;
    --m-100: #ede9fe;
    --m-50: #f5f3ff;
    --menta: #1fdcaa;
    --menta-2: #5ef2cc;
    --menta-osc: #0e9f7a;
    --fondo: #f4f2fa;
    --tarjeta: #ffffff;
    --texto: #1d1433;
    --suave: #6b6385;
    --linea: #e7e3f1;
    --rojo: #e5484d;
    --ambar: #f5a524;
    --verde: #12a37d;
    --radio: 22px;
    --sombra: 0 10px 30px -12px rgba(46, 15, 92, .25);
    --sombra-2: 0 24px 60px -20px rgba(46, 15, 92, .45);
    --grad: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 45%, #3b0f7a 100%);
    --grad-top: linear-gradient(160deg, #7c3aed 0%, #5b21b6 45%, #2e0f5c 100%);
    --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--m-600); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.oculto-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───────── Botones ───────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    border: 0; border-radius: 16px; padding: .95rem 1.4rem;
    font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
    text-decoration: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primario { background: var(--grad); color: #fff; box-shadow: 0 12px 26px -10px rgba(109, 40, 217, .75), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primario:hover { box-shadow: 0 16px 34px -10px rgba(109, 40, 217, .9), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-menta { background: linear-gradient(135deg, var(--menta-2), var(--menta)); color: var(--m-900); box-shadow: 0 12px 26px -12px rgba(31, 220, 170, .9); }
.btn-blanco { background: #fff; color: var(--m-700); box-shadow: var(--sombra); }
.btn-suave { background: var(--m-50); color: var(--m-700); }
.btn-suave:hover { background: var(--m-100); }
.btn-peligro { background: #fdecec; color: var(--rojo); }
.btn-vidrio { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); }
.btn-bloque { width: 100%; }
.btn-chico { padding: .55rem .9rem; font-size: .88rem; border-radius: 12px; }
.btn-icono { width: 44px; height: 44px; padding: 0; border-radius: 14px; }

/* ───────── Formularios ───────── */
.campo { display: grid; gap: .4rem; margin-bottom: 1rem; }
.campo > span { font-size: .85rem; font-weight: 600; color: var(--suave); }
.entrada {
    width: 100%; border: 1.5px solid var(--linea); background: #fff; border-radius: 16px;
    padding: .95rem 1rem; font-size: 1.02rem; outline: none; transition: border .2s, box-shadow .2s;
}
.entrada:focus { border-color: var(--m-400); box-shadow: 0 0 0 4px rgba(139, 92, 246, .15); }
.entrada.grande { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; text-align: center; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ayuda { font-size: .84rem; color: var(--suave); line-height: 1.45; }
.error-txt { color: var(--rojo); font-size: .9rem; font-weight: 600; min-height: 1.2em; }

/* ───────── Tarjetas y listas ───────── */
.caja { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.titulo-sec { display: flex; align-items: center; justify-content: space-between; margin: 1.6rem 0 .8rem; }
.titulo-sec h2 { font-size: 1.05rem; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.titulo-sec a, .titulo-sec button { font-size: .88rem; font-weight: 700; color: var(--m-600); background: none; border: 0; text-decoration: none; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }
.avatar {
    width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;
    background: var(--m-50); color: var(--m-600); font-weight: 800; font-size: .95rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 22px; height: 22px; }
.avatar.verde { background: #e3f9f2; color: var(--menta-osc); }
.avatar.rojo { background: #fdecec; color: var(--rojo); }
.avatar.ambar { background: #fff4e0; color: #c47f00; }
.lista .info { flex: 1; min-width: 0; }
.lista .t { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .s { font-size: .8rem; color: var(--suave); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.monto.mas { color: var(--verde); }
.monto.menos { color: var(--texto); }
.monto.tachado { text-decoration: line-through; color: var(--suave); }
.vacio { text-align: center; color: var(--suave); padding: 2rem 1rem; font-size: .92rem; }
.vacio svg { width: 44px; height: 44px; color: var(--m-300); display: block; margin: 0 auto .6rem; }

.etiqueta { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--m-50); color: var(--m-700); }
.etiqueta.verde { background: #e3f9f2; color: var(--menta-osc); }
.etiqueta.rojo { background: #fdecec; color: var(--rojo); }
.etiqueta.ambar { background: #fff4e0; color: #b26b00; }
.etiqueta.gris { background: #eeedf3; color: var(--suave); }

/* ───────── Tarjeta ColePay (visual de tarjeta de débito) ───────── */
.tarjeta-cp {
    position: relative; overflow: hidden; border-radius: 24px; padding: 1.3rem 1.35rem 1.2rem;
    color: #fff; aspect-ratio: 1.62; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(120% 140% at 100% 0%, #a78bfa 0%, transparent 45%), radial-gradient(90% 120% at 0% 100%, #1fdcaa55 0%, transparent 50%), linear-gradient(135deg, #7c3aed, #4c1d95 60%, #2e0f5c);
    box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255,255,255,.25);
    isolation: isolate;
}
.tarjeta-cp::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 28px solid rgba(255,255,255,.06); z-index: -1; }
.tarjeta-cp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%); transform: translateX(-120%); animation: brillo 5s ease-in-out infinite 1.2s; z-index: -1; }
@keyframes brillo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.tarjeta-cp .fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tarjeta-cp .marca { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.tarjeta-cp .marca img { width: 28px; height: 28px; border-radius: 9px; }
.tarjeta-cp .chip { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #f6e3a1, #c9a64b); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tarjeta-cp .chip::after { content: ''; position: absolute; inset: 7px 9px; border: 1.5px solid rgba(0,0,0,.25); border-radius: 4px; }
.tarjeta-cp .saldo-lbl { font-size: .78rem; opacity: .8; font-weight: 600; letter-spacing: .02em; }
.tarjeta-cp .saldo { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tarjeta-cp .saldo small { font-size: 1.1rem; opacity: .85; margin-right: .2rem; font-weight: 700; }
.tarjeta-cp .titular { font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-cp .num { font-size: .82rem; opacity: .85; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.tarjeta-cp .ojo { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.tarjeta-cp .ojo svg { width: 18px; height: 18px; }
.tarjeta-cp.bloqueada { filter: grayscale(.85) brightness(.85); }
.tarjeta-cp .sello { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: rgba(229, 72, 77, .92); color: #fff; padding: .45rem 1rem; border-radius: 12px; font-weight: 800; letter-spacing: .06em; font-size: .9rem; display: flex; gap: .4rem; align-items: center; }
.tarjeta-cp .sello svg { width: 18px; height: 18px; }

/* ───────── Teclado de PIN ───────── */
.puntos { display: flex; justify-content: center; gap: 1rem; margin: 1.3rem 0 1.6rem; }
.puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--m-300); transition: all .18s ease; }
.puntos i.lleno { background: var(--m-600); border-color: var(--m-600); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(124, 58, 237, .14); }
.puntos.error { animation: temblor .4s ease; }
.puntos.error i { border-color: var(--rojo); }
.puntos.error i.lleno { background: var(--rojo); box-shadow: none; }
@keyframes temblor { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 320px; margin: 0 auto; }
.teclado button {
    height: 66px; border-radius: 20px; border: 0; background: #fff; font-size: 1.6rem; font-weight: 700;
    box-shadow: 0 4px 14px -6px rgba(46, 15, 92, .25); transition: transform .1s, background .15s; color: var(--texto);
    display: grid; place-items: center;
}
.teclado button:active { transform: scale(.93); background: var(--m-50); }
.teclado button.tecla-x { background: transparent; box-shadow: none; color: var(--suave); }
.teclado button svg { width: 26px; height: 26px; }
.teclado.oscuro button { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.12); }
.teclado.oscuro button:active { background: rgba(255,255,255,.22); }
.teclado.oscuro button.tecla-x { border: 0; background: transparent; color: rgba(255,255,255,.75); }

/* ───────── Hoja inferior, modal y aviso ───────── */
.fondo-hoja { position: fixed; inset: 0; background: rgba(20, 6, 45, .5); backdrop-filter: blur(3px); z-index: 50; opacity: 0; transition: opacity .25s; }
.fondo-hoja.ver { opacity: 1; }
.hoja {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--fondo); border-radius: 28px 28px 0 0;
    max-height: 92vh; overflow-y: auto; padding: .7rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .3, 1); max-width: 560px; margin: 0 auto;
}
.hoja.ver { transform: translateY(0); }
.hoja .agarre { width: 44px; height: 5px; border-radius: 3px; background: #d5cfe4; margin: 0 auto 1rem; }
.hoja h3 { margin: 0 0 .3rem; font-size: 1.3rem; letter-spacing: -.02em; }
.hoja .sub { color: var(--suave); margin: 0 0 1.2rem; font-size: .93rem; line-height: 1.45; }
@media (min-width: 700px) {
    .hoja { bottom: 50%; border-radius: 28px; transform: translateY(60%) scale(.96); opacity: 0; transition: transform .3s, opacity .25s; }
    .hoja.ver { transform: translateY(50%) scale(1); opacity: 1; }
    .hoja .agarre { display: none; }
}

.avisos { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: .5rem; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.aviso {
    display: flex; gap: .75rem; align-items: center; background: #1d1433; color: #fff; padding: .85rem 1rem; border-radius: 18px;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.5); font-size: .92rem; font-weight: 600; animation: bajar .35s cubic-bezier(.2, .9, .3, 1.2);
    pointer-events: auto;
}
.aviso svg { width: 22px; height: 22px; flex: none; }
.aviso.ok svg { color: var(--menta); }
.aviso.mal svg { color: #ff8a8e; }
.aviso.sale { animation: subir .3s ease forwards; }
@keyframes bajar { from { transform: translateY(-30px); opacity: 0; } }
@keyframes subir { to { transform: translateY(-30px); opacity: 0; } }

/* ───────── Éxito animado ───────── */
.exito { display: grid; place-items: center; text-align: center; padding: 1rem 0; }
.exito .circulo { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--menta-2), var(--menta)); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(31, 220, 170, .15), 0 0 0 26px rgba(31, 220, 170, .07); animation: pop .5s cubic-bezier(.2, .9, .3, 1.4); }
.exito .circulo svg { width: 50px; height: 50px; color: var(--m-900); stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .45s .25s ease forwards; }
.exito .circulo.mal { background: linear-gradient(135deg, #ff8a8e, var(--rojo)); box-shadow: 0 0 0 12px rgba(229, 72, 77, .14); }
.exito .circulo.mal svg { color: #fff; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ───────── Entrada escalonada ───────── */
.aparece > * { animation: aparecer .5s cubic-bezier(.2, .8, .3, 1) both; }
.aparece > *:nth-child(2) { animation-delay: .06s; }
.aparece > *:nth-child(3) { animation-delay: .12s; }
.aparece > *:nth-child(4) { animation-delay: .18s; }
.aparece > *:nth-child(5) { animation-delay: .24s; }
.aparece > *:nth-child(6) { animation-delay: .3s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }

.girando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(124, 58, 237, .2); border-top-color: var(--m-600); animation: girar .8s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Orbes decorativos del fondo morado */
.orbes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbes i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: flotar 12s ease-in-out infinite alternate; }
.orbes i:nth-child(1) { width: 260px; height: 260px; background: #a78bfa; top: -90px; right: -60px; }
.orbes i:nth-child(2) { width: 200px; height: 200px; background: #1fdcaa; bottom: -120px; left: -60px; opacity: .3; animation-delay: -4s; }
.orbes i:nth-child(3) { width: 140px; height: 140px; background: #c084fc; top: 40%; left: 55%; opacity: .25; animation-delay: -8s; }
@keyframes flotar { to { transform: translate(30px, 20px) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}