:root {
  --azul:#17324D; --verde:#21865B; --rojo:#C83D45; --naranja:#E58A24;
  --fondo:#F4F6F8; --blanco:#FFFFFF; --tinta:#263238; --gris:#64748B; --borde:#E2E8F0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--fondo); color:var(--tinta); font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
#app { max-width:480px; margin:0 auto; min-height:100vh; background:var(--fondo); padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
button { font-family:inherit; cursor:pointer; }

.appbar { background:var(--azul); color:#fff; padding:18px 20px 16px; }
.appbar h1 { font-size:19px; font-weight:800; letter-spacing:1px; }
.appbar p { font-size:12px; opacity:.85; margin-top:2px; }
.appbar .back { background:none; border:none; color:#fff; font-size:14px; margin-bottom:6px; padding:4px 0; }

.vista { padding:16px 16px 0; }

.card-efectivo { background:var(--azul); color:#fff; border-radius:14px; padding:18px 20px; margin-bottom:14px; }
.card-efectivo small { display:block; font-size:11px; letter-spacing:.8px; text-transform:uppercase; opacity:.85; font-weight:700;}
.card-efectivo .monto { font-size:34px; font-weight:800; margin:4px 0; font-variant-numeric:tabular-nums;}
.card-efectivo p { font-size:12.5px; opacity:.9; }

.grid4 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.saldo { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 14px; }
.saldo .punto { width:10px; height:10px; border-radius:50%; display:inline-block; margin-bottom:6px;}
.saldo b { display:block; font-size:12px; color:var(--gris); font-weight:700;}
.saldo .monto { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}
.saldo p { font-size:11px; color:var(--gris); margin-top:2px;}
.c-verde{color:var(--verde);} .c-azul{color:var(--azul);} .c-naranja{color:var(--naranja);} .c-rojo{color:var(--rojo);} .c-gris{color:var(--gris);}

.dia { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; margin-bottom:14px;}
.dia div { text-align:center; }
.dia b { display:block; font-size:11px; color:var(--gris); font-weight:700;}
.dia span { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;}

.btn-principal { display:block; width:100%; background:var(--naranja); color:#fff; border:none; border-radius:12px; padding:16px; font-size:17px; font-weight:800; margin-bottom:12px;}
.btn-sec { display:block; width:100%; background:var(--blanco); color:var(--azul); border:1.5px solid var(--azul); border-radius:12px; padding:14px; font-size:15px; font-weight:700; margin-bottom:12px;}
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.accion { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:14px 8px; font-size:13.5px; font-weight:700; color:var(--azul); display:flex; flex-direction:column; align-items:center; gap:6px;}
.accion svg { width:22px; height:22px; }

.sub { font-size:12px; letter-spacing:.8px; color:var(--gris); font-weight:800; text-transform:uppercase; margin:4px 0 10px;}
.mov { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;}
.mov .ico { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.mov .ico svg { width:18px; height:18px;}
.ico-in { background:#E3F2EB; color:var(--verde);}
.ico-out { background:#FBEAEA; color:var(--rojo);}
.ico-prest { background:#FDF1E3; color:var(--naranja);}
.mov .cuerpo { flex:1; min-width:0;}
.mov .tit { font-weight:700; font-size:14.5px;}
.mov .det { font-size:12px; color:var(--gris); margin-top:2px;}
.mov .monto { text-align:right; font-weight:800; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.mov .monto small { display:block; font-weight:400; color:var(--gris); font-size:11px;}
.vacio { background:var(--blanco); border:1px dashed var(--borde); border-radius:12px; padding:22px; text-align:center; color:var(--gris); font-size:13.5px;}

.tipos { display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.tipo-btn { background:var(--blanco); border:1.5px solid var(--borde); border-radius:12px; padding:13px 14px; text-align:left; font-size:14.5px; font-weight:700; color:var(--azul);}
.tipo-btn.sel { border-color:var(--azul); background:#EEF3F8; }
.tipo-btn small { display:block; font-weight:400; color:var(--gris); font-size:11.5px; margin-top:2px;}

.campo { margin-bottom:12px; }
.campo label { display:block; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--gris); font-weight:800; margin-bottom:5px;}
.campo input, .campo select, .campo textarea { width:100%; border:1.5px solid var(--borde); border-radius:10px; padding:12px; font-size:15px; font-family:inherit; background:var(--blanco); color:var(--tinta);}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline:2px solid var(--azul); outline-offset:-1px; }
.campo .ayuda { font-size:11.5px; color:var(--gris); margin-top:4px;}
.fila2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.monto-grande { background:var(--blanco); border:1.5px solid var(--borde); border-radius:12px; padding:14px; display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.monto-grande span { font-size:24px; color:var(--gris); font-weight:700;}
.monto-grande input { border:none; outline:none; font-size:28px; font-weight:800; width:100%; font-variant-numeric:tabular-nums;}
.chips { display:flex; gap:8px; flex-wrap:wrap;}
.chip { border:1.5px solid var(--borde); background:var(--blanco); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:700; color:var(--gris);}
.chip.sel { background:var(--azul); border-color:var(--azul); color:#fff;}

.resumen { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:16px; margin-bottom:14px;}
.resumen h3 { font-size:16px; color:var(--azul); margin-bottom:10px;}
.resumen .fila { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--borde); font-size:14px;}
.resumen .fila:last-child { border-bottom:none;}
.resumen .fila b { text-align:right; font-variant-numeric:tabular-nums;}
.aviso { background:#EEF3F8; border-left:4px solid var(--azul); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--azul); margin-bottom:14px;}
.aviso-faltante { background:#FdF1E3; border-left:4px solid var(--naranja); color:#8A5410;}
.aviso-faltante b { color:#8A5410;}
.error { background:#FBEAEA; border-left:4px solid var(--rojo); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--rojo); margin-bottom:14px; font-weight:600;}
.btn-confirmar { display:block; width:100%; background:var(--verde); color:#fff; border:none; border-radius:12px; padding:16px; font-size:16px; font-weight:800; margin-bottom:10px;}

.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--azul); color:#fff; padding:12px 22px; border-radius:999px; font-size:14px; font-weight:700; box-shadow:0 6px 20px rgba(23,50,77,.35); z-index:50;}
.toast.ok { background:var(--verde); }

.navbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--blanco); border-top:1px solid var(--borde); display:flex; }
.navbar button { flex:1; background:none; border:none; padding:9px 2px 10px; font-size:10.5px; color:var(--gris); font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px;}
.navbar button.on { color:var(--azul); font-weight:800;}
.navbar svg { width:21px; height:21px;}

.desglose { margin: 2px 0 4px; font-size: 12px; color: var(--gris-txt, #5b6b7c); }