:root{--bg:#0f1115;--panel:#171923;--muted:#8b8fa3;--text:#e6e8ef;--primary:#5b8cff;--primary-700:#3e6be6;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));background:#0b0d12;border-bottom:1px solid #202335;z-index:10}
.brand{font-weight:700;letter-spacing:.2px}
.topbar > .nav{flex-basis:100%;order:3}
.nav{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;width:100%}
.nav button{background:transparent;border:1px solid #2a2e42;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.nav button.active{background:var(--primary);border-color:var(--primary);color:white}
.nav button:hover{border-color:#3a4060}
.user{display:flex;align-items:center;gap:10px;min-height:44px}
#userName{max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.user{flex-wrap:wrap}
.user .tag{white-space:nowrap;max-width:45vw;overflow:hidden;text-overflow:ellipsis}
.user .ghost{background:transparent;border:1px solid #2a2e42;color:var(--muted)}
.container{max-width:1000px;margin:16px auto;padding:0 16px}
.container.has-bottom-nav{padding-bottom:76px}
.section{display:none}
.section.visible{display:block}
.card{background:var(--panel);border:1px solid #24283b;border-radius:12px;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.card h2{margin:0 0 12px 0;font-size:18px}
.grid2, .grid3{display:grid;gap:12px;margin:12px 0}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input,select{background:#0f1320;color:var(--text);border:1px solid #2a2e42;border-radius:10px;padding:12px 14px;outline:none;font-size:16px;min-height:44px;width:100%}
input::placeholder{color:#626988}
.actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
button{background:#1b2033;color:var(--text);border:1px solid #2a2e42;border-radius:10px;padding:12px 16px;cursor:pointer;min-height:44px}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
button.secondary{background:#151929}
button:disabled{opacity:.6;cursor:not-allowed}
.muted{color:var(--muted);font-size:12px}
.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{display:flex;justify-content:space-between;align-items:center;background:#0f1320;border:1px solid #24283b;border-radius:10px;padding:12px}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid #2a2e42;color:var(--muted)}
.tag.warn{border-color:#6b4e0b;color:#f9cd7b}
.err{color:var(--danger);font-size:12px;margin-top:6px}
.success{color:var(--success);font-size:12px;margin-top:6px}
code{background:#0b0d14;padding:2px 6px;border-radius:6px;border:1px solid #1d2131}

/* Existing styles above */

/* Loading overlays */
#splash{position:fixed;inset:0;background:#0b0d12;display:flex;align-items:center;justify-content:center;z-index:9999}
.splash-box{display:flex;flex-direction:column;align-items:center;gap:12px;background:#111422;border:1px solid #24283b;padding:16px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.splash-text{color:#e6e8ef;font-weight:600}
.spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Busy overlay (async actions) */
.busy{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9998}
.busy[hidden]{display:none}
.busy .busy-box{display:flex;flex-direction:column;align-items:center;gap:10px;background:#111422;border:1px solid #24283b;padding:14px 16px;border-radius:12px;color:#e6e8ef;min-width:180px}
.busy .spinner{margin-bottom:6px}

/* Receipt styles (Android-like) */
.receipt { margin-top: 8px; }
.receipt { display: flex; justify-content: center; }
.receipt-box {
  background: #fff5cc; /* pale yellow */
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
  color: #1b1f29;
  width: 420px;
  max-width: 100%;
}
.receipt-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 4px;
}
.receipt-meta { line-height: 1.28; margin-bottom: 4px; font-size: 15px; }
.receipt-block { line-height: 1.28; margin: 4px 0; font-size: 15px; }
.receipt-block strong { text-transform: capitalize; }
.receipt-total { font-weight: 700; margin-top: 4px; font-size: 15px; }
.receipt-box hr {
  border: 0; height: 1px; background: rgba(0,0,0,0.2);
  margin: 6px 0;
}
.receipt-box hr:last-of-type { margin: 6px 0 4px; }

/* Tighten preview card padding so the receipt uses more of the space */
#section-preview .card { padding: 8px 10px; }

/* Hide legacy preview inputs: show only the receipt */
.preview-legacy{ display:none !important; }

/* Print-friendly: print only receipt content when printing preview */
@media print {
  body * { visibility: hidden; }
  #section-preview, #section-preview * { visibility: hidden; }
  #receipt, #receipt * { visibility: visible; }
  #receipt { position: absolute; left: 0; top: 0; right: 0; margin: 0; }
}

@media (max-width:720px){
  .topbar{display:none}
  .brand{font-size:14px;order:1}
  .user{order:2;margin-left:auto;gap:6px}
  .user .tag{font-size:11px;padding:2px 6px;max-width:60vw}
  #userName{display:none}
  .nav{order:3}
  .item{flex-direction:column;align-items:flex-start;gap:8px}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Bottom navigation (mobile) */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#0b0d12;border-top:1px solid #24283b;display:none;gap:0;justify-content:space-around;padding:6px calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));z-index:20}
.bottom-nav button{flex:1;background:transparent;border:0;color:var(--muted);padding:6px 4px;border-radius:8px;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bottom-nav button svg{width:24px;height:24px;fill:currentColor}
.bottom-nav button span{line-height:1}
@media (max-width:720px){
  .topbar{display:none}
  .bottom-nav{display:flex}
  .container{padding-bottom:96px}
}

/* Mobile top bar (only mobile) */
.mobilebar{display:none;position:sticky;top:0;z-index:15;background:#0b0d12;border-bottom:1px solid #24283b;padding:8px 12px}
@media (max-width:720px){
}
.mobilebar .mbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mobilebar #mblSaldo{font-size:18px;font-weight:700;color:var(--primary)}
.mobilebar #mblBanca{font-size:12px;color:var(--muted)}
.mobilebar #mblUserName{font-size:12px;color:var(--text);max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Modal (confirm dialog) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000}
.modal[hidden]{display:none}
.modal .modal-box{background:#111422;border:1px solid #24283b;border-radius:12px;padding:16px;max-width:92vw;width:420px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.modal .modal-box h3{margin:0 0 8px 0}
.modal .modal-box p{margin:0 0 12px 0;color:var(--muted)}
.modal .actions{justify-content:flex-end}