: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; }
.beta-tag { display:inline-block; font-size:10px; letter-spacing:1px; background:rgba(255,255,255,.18); border-radius:6px; padding:2px 7px; vertical-align:3px; }
.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); }

/* fase 4: directorio e historial */
.persona { display:block; width:100%; text-align:left; background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.persona .tit { font-size:15px; font-weight:800; color:var(--tinta); }
.persona .det { font-size:12px; color:var(--gris); margin-top:2px; }
.chip-rel { display:inline-block; background:#EEF3F8; color:var(--azul); border-radius:999px; padding:2px 9px; font-size:10.5px; font-weight:700; margin:4px 4px 0 0; }
.filtros { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px; margin-bottom:14px; }
.filtros input, .filtros select { width:100%; padding:10px; border:1.5px solid var(--borde); border-radius:9px; font-size:14px; margin-bottom:8px; background:#fff; }
.filtros .fila2 { display:flex; gap:8px; }
.filtros .fila2 > * { flex:1; }
.filtros .btn-sec { margin-bottom:0; padding:10px; font-size:13px; }
.badge-anulado { margin-top:4px; font-size:11px; font-weight:800; color:var(--rojo); }
.mov-anulado { opacity:.55; }
.mov-anulado .monto { text-decoration:line-through; }
.btn-anular { margin-top:6px; background:none; border:1px solid var(--rojo); color:var(--rojo); border-radius:8px; padding:4px 10px; font-size:11px; font-weight:700; }
.fcampo { flex:1; min-width:0; margin-bottom:8px; }
.fcampo label { display:block; font-size:11px; font-weight:700; color:var(--gris); margin-bottom:3px; }
.filtros .fcampo input, .filtros .fcampo select { margin-bottom:0; font-size:13px; padding:9px 8px; width:100%; }
.filtros .fila2 { margin-bottom:0; }
.filtros .fila2 .fcampo { margin-bottom:8px; }

/* ---------- fase 5: informes ---------- */
.ayuda { font-size:13px; color:var(--gris); margin-bottom:12px; line-height:1.45; }
.doc { background:var(--blanco); border:1px solid var(--borde); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.doc-head { background:var(--azul); color:#fff; padding:16px 18px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.doc-marca { font-size:17px; font-weight:800; letter-spacing:.4px; }
.doc-lema { font-size:11px; opacity:.8; margin-top:2px; }
.doc-tag { text-align:right; font-size:13px; font-weight:800; }
.doc-tag span { display:block; font-size:10px; font-weight:400; opacity:.8; margin-top:2px; }
.doc-body { padding:16px 16px 10px; }
.doc-titulo { font-size:21px; font-weight:800; color:var(--azul); }
.doc-sub2 { font-size:13px; color:var(--gris); margin:4px 0 14px; padding-bottom:12px; border-bottom:2px solid var(--azul); }
.doc-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; margin-bottom:14px; }
.doc-meta > div { flex:1; min-width:120px; }
.doc-meta span { display:block; font-size:10px; font-weight:700; color:var(--gris); letter-spacing:.5px; text-transform:uppercase; margin-bottom:2px; }
.doc-cards { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.doc-card { flex:1; min-width:100px; background:#F1F5F9; border-radius:10px; padding:10px 12px; }
.doc-card span { display:block; font-size:10px; font-weight:700; color:var(--gris); letter-spacing:.4px; text-transform:uppercase; }
.doc-card b { display:block; font-size:18px; margin-top:3px; color:var(--tinta); }
.doc-card.tot { background:var(--azul); }
.doc-card.tot span, .doc-card.tot b { color:#fff; }
.doc-aviso { background:#FDF3E3; border-left:4px solid var(--naranja); border-radius:8px; padding:10px 12px; font-size:12.5px; color:#7A4E10; margin-bottom:14px; line-height:1.45; }
.doc-sec { font-size:12px; font-weight:800; color:var(--azul); letter-spacing:.6px; margin:16px 0 6px; }
.doc-tabla-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.doc-tabla { width:100%; border-collapse:collapse; font-size:12.5px; }
.doc-tabla th { background:var(--azul); color:#fff; text-align:left; padding:7px 8px; font-size:11px; letter-spacing:.3px; white-space:nowrap; }
.doc-tabla td { padding:7px 8px; border-bottom:1px solid var(--borde); vertical-align:top; }
.doc-tabla tr:nth-child(even) td { background:#F8FAFC; }
.doc-tabla .num { text-align:right; white-space:nowrap; }
.doc-obs { margin:6px 0 10px; padding-left:18px; font-size:12.5px; color:var(--tinta); line-height:1.5; }
.doc-obs li { margin-bottom:5px; }
.doc-vacio { background:#F1F5F9; border-radius:10px; padding:18px; text-align:center; font-size:14px; font-weight:700; color:var(--gris); margin-bottom:14px; }
.doc-pie { border-top:1px solid var(--borde); margin-top:14px; padding:10px 2px 6px; font-size:10.5px; color:var(--gris); }
.btn-compartir { display:block; width:100%; background:var(--verde); color:#fff; border:none; border-radius:12px; padding:16px; font-size:17px; font-weight:800; margin-bottom:12px;}
.btn-mini { background:var(--naranja); color:#fff; border:none; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:700; margin-top:6px; }
.aviso-copia { background:#eef3fb; border:1px solid #c5d6f2; color:#2f4a78; border-radius:10px; padding:10px 12px; margin-top:12px; font-size:13px; }
.aviso-copia .btn-mini { background:var(--azul); }
.sub2 { font-size:12px; font-weight:800; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; margin:14px 0 6px; }
.elegido { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--blanco); border:2px solid var(--azul); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.elegido b { font-size:15px; color:var(--azul); display:block; }
.elegido small { font-size:12px; color:var(--gris); }
.presentacion { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:14px; margin-top:18px; font-size:14px; line-height:1.45; color:var(--azul); }
.instrucciones { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:14px; margin-top:12px; }
.instrucciones .sub { margin-top:0; }
.pasos { list-style:none; margin:0; padding:0; font-size:14px; line-height:1.45; }
.pasos li { margin:7px 0; }
.pasos li.n2 { margin-left:16px; color:var(--gris); }
.pasos li.n2 b { color:var(--azul); }
.credito { background:var(--azul); color:#dfe9f5; border-radius:12px; padding:14px; margin-top:12px; font-size:13px; }
.credito p { margin:0 0 10px; line-height:1.4; }
.credito b { color:#fff; }
.credito-linea { display:flex; align-items:center; gap:8px; margin:6px 0; }
a.credito-linea { color:#dfe9f5; text-decoration:none; min-height:34px; }
a.credito-linea .ctxt { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(223,233,245,.55); }
a.credito-linea:active { opacity:.8; }
.cico { width:18px; height:18px; display:inline-flex; flex:none; color:#8fd0a9; }
.cico svg { width:18px; height:18px; }

/* Tarjetas azules pequeñas del Inicio (dinero personal / no personal) */
.card-mini { background:var(--azul); color:#fff; border-radius:14px; padding:12px 14px; }
.card-mini small { display:block; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; opacity:.85; font-weight:700; }
.card-mini .monto { font-size:22px; font-weight:800; margin:3px 0; font-variant-numeric:tabular-nums; }
.card-mini p { font-size:11px; opacity:.9; margin:2px 0 0; }
.card-mini .desglose { font-size:10.5px; color:#fff; opacity:.9; margin:2px 0 0; }

/* Tarjeta y calendario del San (etapa 1: configuración y calendario) */
.card-san { background:#fff; border:1px solid #d7e0ea; border-radius:14px; padding:14px; margin:12px 0; }
.card-san .san-tit { font-weight:800; color:var(--azul); margin-bottom:4px; }
.card-san p { margin:4px 0; font-size:13px; color:#2b3a4a; }
.card-san .btns { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.card-san-mini { cursor:pointer; }
.card-san-mini p b { color:var(--azul); display:inline; font-size:inherit; }
.fila-dia { display:flex; gap:8px; margin-top:8px; align-items:center; }
.fila-dia input { flex:1; }
.lista-turnos { background:#fff; border:1px solid #d7e0ea; border-radius:12px; padding:6px 10px; margin:8px 0; }
.lista-turnos .turno { display:flex; justify-content:space-between; gap:8px; padding:8px 4px; border-bottom:1px solid #e6ecf2; font-size:13.5px; }
.lista-turnos .turno:last-child { border-bottom:none; }
.lista-turnos .turno.propio { background:#eaf3ff; font-weight:700; border-radius:8px; padding-left:8px; padding-right:8px; }
.lista-turnos .turno.pasado { opacity:.55; }

/* Avisos del San: bloque en el calendario */
.card-avisos { background:#fff; border:1px solid var(--borde, #D8E0E8); border-radius:12px; padding:14px; margin:14px 0; }
.card-avisos b { display:block; font-size:15px; margin-bottom:6px; }
.card-avisos p { font-size:13px; color:var(--gris); line-height:1.45; margin:0 0 10px; }
.card-avisos .aviso-pendiente { color:#8a5a00; background:#FFF4DC; border-radius:8px; padding:8px 10px; }

/* San etapa 2: acumulado de aportes */
.acum { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.acum-info { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; margin-bottom:8px; }
.acum-info b { color:var(--azul); }
.barra { height:10px; border-radius:5px; background:var(--borde); overflow:hidden; }
.barra > div { height:100%; background:var(--verde); border-radius:5px; }
.chip.ok { background:var(--verde); border-color:var(--verde); color:#fff; }
.chip.off { opacity:.5; pointer-events:none; }
.barra-mini { height:6px; margin-top:6px; }