:root {
    /* Tema oscuro premium alineado al azul del logo Presto */
    --primary: #2a8fd6;
    --primary-600: #1f7ec2;
    --primary-700: #0a5ca8;
    --primary-glow: rgba(42,143,214,.45);
    --accent: #f5a21e;
    --accent-600: #e5900a;

    --bg-0: #060c18;
    --bg-1: #0b1527;
    --bg-2: #0f1d35;
    --surface: #132340;
    --surface-2: #19294a;
    --surface-3: #1f3152;
    --border: rgba(255,255,255,.08);
    --border-2: rgba(255,255,255,.14);

    --text: #eef3fb;
    --text-dim: #9fb2cf;
    --text-soft: #6d82a6;

    --ok: #2ad17f;
    --ok-bg: rgba(42,209,127,.14);
    --warn: #ffb547;
    --warn-bg: rgba(255,181,71,.14);
    --danger: #ff5f6d;
    --danger-bg: rgba(255,95,109,.14);
    --info: #52a8e8;
    --info-bg: rgba(42,143,214,.14);

    --radius: 20px;
    --radius-sm: 14px;
    --shadow: 0 10px 30px rgba(0,0,0,.4);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
    font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

#app { min-height: 100vh; }

/* Shell con fondo degradado + glow */
.shell {
    max-width: 480px; margin: 0 auto; min-height: 100vh;
    background:
        radial-gradient(120% 70% at 50% -10%, #16305a 0%, var(--bg-1) 42%, var(--bg-0) 100%);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.shell::before {
    content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
    width:360px; height:360px; border-radius:50%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 65%);
    filter: blur(30px); pointer-events:none; opacity:.55;
    animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.4;transform:translateX(-50%) scale(1)} 50%{opacity:.7;transform:translateX(-50%) scale(1.15)} }
.safe { padding-bottom: env(safe-area-inset-bottom); }

/* Topbar */
.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 20px 12px; position:relative; z-index:2;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height: 26px; filter: brightness(0) invert(1); opacity:.96; }
.brand .badge-admin { background: var(--accent); color:#1a1200; padding:2px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.5px; }

.content { flex:1; padding: 10px 16px 100px; overflow-y:auto; position:relative; z-index:1; }

/* Cards glass */
.card {
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow);
    margin-bottom: 14px;
    animation: cardIn .4s cubic-bezier(.2,.7,.3,1) both;
    backdrop-filter: blur(10px);
}
@keyframes cardIn { from { opacity:0; transform: translateY(14px) scale(.98) } to { opacity:1; transform:none } }
.card.primary {
    background: linear-gradient(135deg, var(--primary-700) 0%, #06386b 60%, #052a52 100%);
    border: 1px solid rgba(42,143,214,.4);
    box-shadow: 0 14px 40px rgba(10,92,168,.35);
    position:relative; overflow:hidden;
}
.card.primary::after {
    content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px;
    background: radial-gradient(circle, rgba(42,143,214,.5), transparent 70%); filter:blur(20px);
}

.hero { text-align:center; padding: 26px 18px; }
.hero .label { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#9cc4e8; }
.hero .amount { font-size:40px; font-weight:800; margin:8px 0 4px; letter-spacing:-1px;
    background: linear-gradient(90deg,#fff,#bfe0fb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub { font-size:13px; color:#9cc4e8; }

/* Pills */
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.pill svg { width:13px; height:13px; }
.pill.pend { background: var(--warn-bg); color: var(--warn); }
.pill.ok   { background: var(--info-bg); color: var(--info); }
.pill.disb { background: var(--ok-bg); color: var(--ok); }
.pill.paid { background: rgba(255,255,255,.08); color: var(--text-dim); }
.pill.cancel { background: var(--danger-bg); color: var(--danger); }

/* Botones */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
    border:none; border-radius: var(--radius-sm); padding:15px 18px;
    font-size:15.5px; font-weight:700; cursor:pointer; font-family:inherit;
    transition: transform .12s cubic-bezier(.2,.7,.3,1), filter .2s, box-shadow .2s, opacity .2s;
    position:relative; overflow:hidden;
}
.btn svg { width:18px; height:18px; }
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn-primary { background: linear-gradient(120deg, var(--primary), var(--primary-700)); color:#fff; box-shadow: 0 8px 22px rgba(42,143,214,.35); }
.btn-primary:not([disabled]):active { box-shadow: 0 4px 12px rgba(42,143,214,.3); }
.btn-accent { background: linear-gradient(120deg, var(--accent), var(--accent-600)); color:#1a1200; box-shadow:0 8px 22px rgba(245,162,30,.3); }
.btn-ghost { background: var(--surface-3); color: var(--text); border:1px solid var(--border-2); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border:1px solid rgba(255,95,109,.3); }
.btn-ok { background: var(--ok-bg); color: var(--ok); border:1px solid rgba(42,209,127,.3); }
.btn.sm { padding:10px 14px; font-size:13.5px; width:auto; }
.btn-row { display:flex; gap:10px; }

/* Inputs */
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color: var(--text-dim); margin-bottom:7px; font-weight:600; }
.input, select.input, textarea.input {
    width:100%; background: rgba(255,255,255,.05); border:1.5px solid var(--border);
    color: var(--text); border-radius: var(--radius-sm); padding:14px 15px; font-size:16px; font-family:inherit;
    outline:none; transition: border .15s, box-shadow .15s, background .15s;
}
.input:focus { border-color: var(--primary); background: rgba(42,143,214,.08); box-shadow:0 0 0 4px rgba(42,143,214,.14); }
.input::placeholder { color: var(--text-soft); }

.segment { display:flex; gap:10px; }
.segment .opt { flex:1; border:1.5px solid var(--border); border-radius: var(--radius-sm); padding:14px; text-align:center;
    cursor:pointer; font-weight:700; font-size:14px; background: rgba(255,255,255,.04); color: var(--text-dim); transition:.2s; }
.segment .opt.on { border-color: var(--primary); color:#fff; background: rgba(42,143,214,.16); box-shadow:0 0 0 3px rgba(42,143,214,.12); }

/* PIN pad */
.pin-dots { display:flex; gap:14px; justify-content:center; margin:8px 0 22px; }
.pin-dots .d { width:15px; height:15px; border-radius:50%; border:2px solid var(--primary); transition:.2s; }
.pin-dots .d.on { background: var(--primary); box-shadow:0 0 12px var(--primary-glow); transform:scale(1.15); }
.keypad { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; max-width:300px; margin:0 auto; }
.key { aspect-ratio:1.7/1; border-radius:16px; background: rgba(255,255,255,.05); border:1px solid var(--border);
    color: var(--text); font-size:23px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition: transform .1s, background .15s; }
.key:active { background: rgba(42,143,214,.2); transform: scale(.92); }
.key.blank { background:transparent; border:none; cursor:default; }
.key svg { width:22px; height:22px; }

.range { width:100%; accent-color: var(--primary); height:6px; }
.monto-display { font-size:36px; font-weight:800; text-align:center; margin:8px 0; letter-spacing:-1px;
    background: linear-gradient(90deg,#fff,#9cc4e8); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Bottom nav */
.navbar {
    position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
    background: rgba(9,18,36,.85); backdrop-filter: blur(16px);
    border-top:1px solid var(--border); padding:9px 0 calc(9px + env(safe-area-inset-bottom));
    z-index:3;
}
.navbar .item { display:flex; flex-direction:column; align-items:center; gap:3px; color: var(--text-soft);
    font-size:11px; cursor:pointer; flex:1; font-weight:600; position:relative; transition: color .2s; }
.navbar .item svg { width:23px; height:23px; transition: transform .2s; }
.navbar .item.active { color: var(--primary); }
.navbar .item.active svg { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 4px 8px var(--primary-glow)); }
.navbar .item .dotbadge { position:absolute; top:-2px; right:50%; margin-right:-22px; background: var(--danger); color:#fff;
    font-size:9px; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;
    animation: pop .3s ease; }
@keyframes pop { from { transform:scale(0) } to { transform:scale(1) } }

/* Rows */
.row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; gap:10px; }
.row + .row { border-top:1px solid rgba(255,255,255,.05); }
.row .k { color: var(--text-dim); font-size:14px; }
.row .v { font-weight:700; font-size:14px; text-align:right; }
.row .v.big { font-size:19px; color: var(--primary); }

.loan-item { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; transition: padding-left .15s; }
.loan-item:active { padding-left:6px; }
.loan-item:last-child { border-bottom:none; }
.loan-item .meta { color: var(--text-soft); font-size:12px; margin-top:2px; }

.muted { color: var(--text-dim); } .soft { color: var(--text-soft); } .center { text-align:center; }
.sep { height:1px; background: var(--border); margin:14px 0; }
.h-title { font-size:20px; font-weight:800; margin:8px 0 14px; letter-spacing:-.3px; }
.sub-title { font-size:13px; color: var(--text-dim); margin-bottom:16px; }
.section-label { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color: var(--text-soft); margin:4px 0 10px; }

.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumbs img { width:62px; height:62px; object-fit:cover; border-radius:10px; border:1px solid var(--border); cursor:pointer; transition: transform .15s; }
.thumbs img:active { transform: scale(.94); }
.thumb-wrap { position:relative; }
.thumb-wrap .tag { position:absolute; bottom:3px; left:3px; background:rgba(0,0,0,.7); color:#fff; font-size:8px; padding:1px 5px; border-radius:5px; }

/* Alerts */
.alert { padding:12px 14px; border-radius: var(--radius-sm); font-size:13.5px; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start;
    animation: cardIn .35s ease both; }
.alert svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert.err { background: var(--danger-bg); color: var(--danger); border:1px solid rgba(255,95,109,.25); }
.alert.ok { background: var(--ok-bg); color: var(--ok); border:1px solid rgba(42,209,127,.25); }
.alert.info { background: var(--info-bg); color: var(--info); border:1px solid rgba(42,143,214,.25); }
.alert.warn { background: var(--warn-bg); color: var(--warn); border:1px solid rgba(255,181,71,.25); }

/* Auth */
.auth-hero { text-align:center; padding: 46px 0 20px; animation: cardIn .5s ease both; }
.auth-hero img { height: 52px; filter: brightness(0) invert(1); }
.auth-hero p { color: var(--text-dim); margin-top:12px; font-size:14px; }

.spinner { width:30px; height:30px; border:3px solid rgba(255,255,255,.12); border-top-color: var(--primary); border-radius:50%; animation: spin .7s linear infinite; margin:48px auto; }
@keyframes spin { to { transform: rotate(360deg) } }

.link { color: var(--primary); cursor:pointer; font-weight:700; }

/* ===== CHAT ===== */
.chat-wrap { display:flex; flex-direction:column; height: calc(100vh - 60px - 68px); }
.chat-scroll { flex:1; overflow-y:auto; padding:14px 4px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:78%; padding:9px 12px; border-radius:16px; font-size:14px; line-height:1.35; word-wrap:break-word; animation: msgIn .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes msgIn { from { opacity:0; transform: translateY(8px) scale(.96) } to { opacity:1; transform:none } }
.msg .time { font-size:10px; opacity:.6; margin-top:4px; display:block; text-align:right; }
.msg img { max-width:200px; border-radius:10px; display:block; margin-bottom:4px; cursor:pointer; }
.msg.user { align-self:flex-end; background: linear-gradient(120deg, var(--primary), var(--primary-700)); color:#fff; border-bottom-right-radius:4px; }
.msg.admin { align-self:flex-start; background: var(--surface-3); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg.system { align-self:center; background: var(--warn-bg); color: var(--warn); font-size:12.5px; text-align:center; max-width:92%; border:1px solid rgba(255,181,71,.2); }
.chat-input { display:flex; gap:8px; align-items:center; padding:10px 6px; border-top:1px solid var(--border); background: rgba(9,18,36,.6); }
.chat-input .iconbtn { width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background: rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: background .15s; }
.chat-input .iconbtn:active { background: rgba(42,143,214,.2); }
.chat-input .iconbtn svg { width:20px; height:20px; color: var(--primary); }
.chat-input input { flex:1; border:1.5px solid var(--border); border-radius:999px; padding:11px 16px; font-size:15px; outline:none; background: rgba(255,255,255,.05); color: var(--text); }
.chat-input input:focus { border-color: var(--primary); }
.chat-input .send { width:44px; height:44px; border-radius:50%; background: linear-gradient(120deg,var(--primary),var(--primary-700)); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:0 6px 16px rgba(42,143,214,.4); transition: transform .12s; }
.chat-input .send:active { transform: scale(.9); }
.chat-input .send svg { width:20px; height:20px; color:#fff; }
.chat-preview { padding:8px; border-top:1px solid var(--border); background: rgba(255,255,255,.04); display:flex; align-items:center; gap:10px; }
.chat-preview img { width:52px; height:52px; object-fit:cover; border-radius:8px; }

.convo { display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; transition: background .15s; }
.convo:active { background: rgba(255,255,255,.04); }
.convo .av { width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg,var(--primary),var(--primary-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.convo .body { flex:1; min-width:0; } .convo .body .nm { font-weight:700; font-size:14.5px; } .convo .body .lm { font-size:13px; color: var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.convo .nb { background: var(--danger); color:#fff; font-size:11px; min-width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 6px; }

/* ===== FIRMA ===== */
.sign-overlay { position:fixed; inset:0; background:#060c18; z-index:1000; display:flex; flex-direction:column; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.sign-pad { flex:1; display:flex; flex-direction:column; padding:14px; }
.sign-pad .title { color:#fff; font-weight:700; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.sign-canvas-box { flex:1; background:#fff; border-radius:16px; position:relative; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.sign-canvas-box canvas { width:100%; height:100%; display:block; touch-action:none; }
.sign-canvas-box .baseline { position:absolute; left:8%; right:8%; bottom:28%; border-bottom:2px dashed #cbd5e1; pointer-events:none; }
.sign-canvas-box .ph { position:absolute; left:8%; bottom:29%; color:#94a3b8; font-size:13px; pointer-events:none; }
.sign-actions { display:flex; gap:10px; margin-top:12px; }

.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; animation: fadeIn .2s ease; }
.lightbox img { max-width:100%; max-height:100%; border-radius:10px; }
.lightbox .close { position:absolute; top:16px; right:16px; color:#fff; cursor:pointer; }

.chip { display:inline-flex; align-items:center; gap:7px; background: var(--info-bg); color: var(--primary); padding:9px 13px; border-radius:10px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid rgba(42,143,214,.25); }
.chip svg { width:16px; height:16px; }

.flex { display:flex; } .between { justify-content:space-between; } .items-center { align-items:center; }
.gap8 { gap:8px; } .mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}

/* Transicion de pantallas */
.screen-enter { animation: screenIn .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes screenIn { from { opacity:0; transform: translateX(16px) } to { opacity:1; transform:none } }

/* ===== Shimmer / skeleton ===== */
.sk { position:relative; overflow:hidden; background: rgba(255,255,255,.05); border-radius:10px; }
.sk::after { content:''; position:absolute; inset:0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%) } }
.sk-line { height:12px; margin:8px 0; }
.sk-line.w40 { width:40% } .sk-line.w60 { width:60% } .sk-line.w80 { width:80% }
.sk-card { height:16px; }
.sk-row { display:flex; justify-content:space-between; padding:9px 0; }
.sk-row .sk { height:12px; width:30% } .sk-row .sk.v { width:22% }
.sk-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; }

/* ===== Loading overlay global ===== */
.loading-bar { position:fixed; top:0; left:0; right:0; height:3px; z-index:1200; overflow:hidden; background:transparent; }
.loading-bar::before { content:''; position:absolute; height:100%; width:40%;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); animation: barMove 1s linear infinite; }
@keyframes barMove { 0% { left:-40% } 100% { left:100% } }

/* Botones con spinner inline */
.btn .mini-spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .6s linear infinite; }

/* Typing / enviando en chat */
.sending { opacity:.6; }
.dots-typing { display:inline-flex; gap:3px; align-items:center; }
.dots-typing span { width:5px; height:5px; border-radius:50%; background: var(--text-soft); animation: typing 1.2s infinite; }
.dots-typing span:nth-child(2){ animation-delay:.2s } .dots-typing span:nth-child(3){ animation-delay:.4s }
@keyframes typing { 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }