:root{--fondo: #f4f5f7;--card: #ffffff;--borde: #e3e6ea;--texto: #1f2430;--texto-suave: #6b7280;--primario: #2f6fed;--primario-oscuro: #2257c0;--gasto: #c92a2a;--gasto-suave: #fdecec;--ingreso: #2b8a3e;--ingreso-suave: #e9f7ec}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--fondo);color:var(--texto)}.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--texto-suave)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.login-card{width:100%;max-width:380px;padding:28px}.login-card h1{margin:0 0 4px;font-size:26px}.subtitulo{margin:0 0 20px;color:var(--texto-suave)}.promo-login{display:flex;align-items:flex-start;gap:8px;margin-top:20px;padding:12px;border-radius:10px;background:#2f6fed14;font-size:12.5px;line-height:1.4;color:var(--texto-suave)}.promo-login svg{flex-shrink:0;color:var(--primario);margin-top:1px}.promo-login a{color:var(--primario);font-weight:600;text-decoration:none}.promo-login a:hover{text-decoration:underline}.promo-modal{margin:12px 4px 0;text-align:center;font-size:12px;color:var(--texto-suave)}.promo-modal a{color:var(--primario);font-weight:600;text-decoration:none}.promo-modal a:hover{text-decoration:underline}.app{max-width:1080px;margin:0 auto;padding:16px}.cabecera{display:flex;align-items:center;justify-content:space-between;background:var(--primario);color:#fff;border-radius:12px;padding:16px 20px;margin-bottom:16px}.cabecera h1{font-size:22px;margin:0}.usuario{display:flex;align-items:center;gap:10px;color:#ffffffd9}.usuario button{display:flex;align-items:center;gap:6px;background:transparent;border-color:#fff6;color:#fff}.usuario button:hover{background:#ffffff26;border-color:#fff;color:#fff}.periodo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}.periodo-etiqueta{margin-left:auto;color:var(--texto-suave);font-size:13px}.rango{display:flex;align-items:center;gap:6px}.contenido{display:flex;flex-direction:column;gap:16px}.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.total{padding:16px}.total span{display:block;color:var(--texto-suave);font-size:13px;margin-bottom:6px}.total strong{font-size:24px}.total.ingreso strong{color:var(--ingreso)}.total.gasto strong{color:var(--gasto)}.total.balance.positivo strong{color:var(--ingreso)}.total.balance.negativo strong{color:var(--gasto)}.card{background:var(--card);border:1px solid var(--borde);border-radius:12px;padding:20px}.card h2{margin:0 0 16px;font-size:16px}button{font:inherit;border:1px solid var(--borde);background:var(--card);color:var(--texto);border-radius:8px;padding:8px 14px;cursor:pointer}button:hover{border-color:var(--primario);color:var(--primario)}button.primary{background:var(--primario);border-color:var(--primario);color:#fff;width:100%;padding:10px;font-weight:600}button.primary:hover{background:var(--primario-oscuro);color:#fff}button.primary:disabled{opacity:.6;cursor:not-allowed}button.peligro{border-color:var(--gasto);color:var(--gasto)}button.peligro:hover{background:var(--gasto-suave)}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.tabs button.active{background:var(--primario);border-color:var(--primario);color:#fff}.tipo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.tipo button.active.gasto{background:var(--gasto);border-color:var(--gasto);color:#fff}.tipo button.active.ingreso{background:var(--ingreso);border-color:var(--ingreso);color:#fff}.periodo button.active{background:var(--primario);border-color:var(--primario);color:#fff}.form h2{margin:0 0 16px;font-size:16px}.form label,.login-card label{display:block;font-size:13px;color:var(--texto-suave);margin-bottom:12px}.login-card button.primary{margin-top:4px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}input,select{width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--borde);border-radius:8px;font:inherit;color:var(--texto);background:#fff}input:focus,select:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px #2f6fed40}.acciones{display:flex;justify-content:flex-end;gap:8px}.acciones button.primary{width:auto}.grafica{display:flex;flex-direction:column;gap:10px}.barra-fila{display:grid;grid-template-columns:150px 1fr 110px;align-items:center;gap:10px;font-size:13px}.barra-nombre{color:var(--texto-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.barra-track{background:#eef0f3;border-radius:6px;height:14px;overflow:hidden}.barra{height:100%;background:var(--gasto);border-radius:6px;min-width:2px}.barra.ingreso{background:var(--ingreso)}.barra-total{text-align:right;font-variant-numeric:tabular-nums}.tabla-wrap{overflow-x:auto}.tabla{width:100%;border-collapse:collapse;font-size:14px}.tabla th{text-align:left;color:var(--texto-suave);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--borde)}.tabla td{padding:10px;border-bottom:1px solid var(--borde)}.tabla tr:last-child td{border-bottom:none}.der{text-align:right}.pos{color:var(--ingreso)}.neg{color:var(--gasto)}.etiqueta{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;text-transform:capitalize}.etiqueta.gasto{background:var(--gasto-suave);color:var(--gasto)}.etiqueta.ingreso{background:var(--ingreso-suave);color:var(--ingreso)}.acciones-fila{white-space:nowrap}.acciones-fila button{padding:4px 10px;font-size:13px;margin-left:8px}.error{background:var(--gasto-suave);color:var(--gasto);border-radius:8px;padding:10px 12px;font-size:14px}.vacio{color:var(--texto-suave)}.toasts{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:1000}.toast{display:flex;align-items:center;gap:10px;background:var(--texto);color:#fff;padding:11px 14px;border-radius:10px;font-size:14px;box-shadow:0 6px 16px #00000029;animation:toast-in .22s ease;max-width:340px}.toast.exito{background:var(--ingreso)}.toast.error{background:var(--gasto)}.toast-icon{font-weight:700;line-height:1}.toast-enlace{display:inline-block;margin-left:6px;color:inherit;font-weight:700;text-decoration:underline}.toast-cerrar{margin-left:auto;border:none;background:transparent;color:inherit;padding:0 0 0 6px;font-size:15px;line-height:1;opacity:.8}.toast-cerrar:hover{border-color:transparent;color:inherit;opacity:1}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.modal-fondo{position:fixed;top:0;right:0;bottom:0;left:0;background:#1f243073;display:flex;align-items:center;justify-content:center;padding:16px;z-index:2000;animation:modal-fondo-in .15s ease}.modal-caja{background:var(--card);border-radius:12px;padding:20px;max-width:360px;width:100%;box-shadow:0 20px 50px #00000040;animation:modal-caja-in .18s ease}.modal-caja-form{background:transparent;padding:0;max-width:440px;max-height:90vh;overflow-y:auto}.modal-caja-form .form{margin:0}.fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;padding:0;border:none;border-radius:50%;background:var(--primario);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #2f6fed66;z-index:900}.fab svg{display:block}.fab:hover{background:var(--primario-oscuro);border-color:transparent;color:#fff}.modal-mensaje{margin:0 0 18px;font-size:14px;color:var(--texto);line-height:1.4}.modal-acciones{display:flex;justify-content:flex-end;gap:8px}.modal-acciones button.confirmar{background:var(--primario);border-color:var(--primario);color:#fff}.modal-acciones button.confirmar:hover{background:var(--primario-oscuro);color:#fff}.modal-acciones button.confirmar.peligro{background:var(--gasto);border-color:var(--gasto);color:#fff}.modal-acciones button.confirmar.peligro:hover{background:#a61e1e;color:#fff}@keyframes modal-fondo-in{0%{opacity:0}to{opacity:1}}@keyframes modal-caja-in{0%{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--borde);border-top-color:var(--primario);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}.spinner.en-boton{width:14px;height:14px;border-color:#ffffff59;border-top-color:#fff;margin-right:8px;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}.cargando{display:flex;align-items:center;justify-content:center;gap:4px;padding:40px;color:var(--texto-suave)}.periodo-cargando{display:flex;align-items:center;color:var(--texto-suave);font-size:13px;margin:-8px 0 16px}.contenido-recargando{opacity:.55;pointer-events:none;transition:opacity .15s ease}@media (max-width: 640px){.app{padding:12px}.card{padding:16px}.fab{right:16px;bottom:16px;width:52px;height:52px}.login-card{padding:22px}input,select{font-size:16px}.cabecera{padding:14px 16px}.cabecera h1{font-size:19px}.usuario span{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs,.tipo{gap:10px}.tabs button,.tipo button{padding:11px 14px}.periodo{gap:10px}.periodo>button{flex:1 1 auto;min-width:96px;padding:11px 10px}.barra-nombre{white-space:normal;overflow:visible;text-overflow:unset}.periodo-etiqueta{width:100%;margin-left:0;text-align:right}.rango{width:100%;display:grid;grid-template-columns:1fr auto 1fr}.barra-fila{grid-template-columns:1fr auto;grid-template-areas:"nombre total" "track track"}.barra-nombre{grid-area:nombre}.barra-track{grid-area:track}.barra-total{grid-area:total;font-weight:600}.tabla thead{display:none}.tabla,.tabla tbody{display:block;width:100%}.tabla tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;border:1px solid var(--borde);border-radius:10px;padding:10px 12px;margin-bottom:10px}.tabla td{display:block;width:100%;border:none;padding:0}.tabla td:before{content:attr(data-label);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--texto-suave);margin-bottom:2px}.tabla td.der{text-align:right}.acciones-fila{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.acciones-fila button{margin-left:0;padding:9px 14px;font-size:14px}.toasts{left:12px;right:12px;top:10px;align-items:stretch}.toast{max-width:none;justify-content:flex-start}}@media (max-width: 480px){.grid2{grid-template-columns:1fr}.resumen{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.acciones,.modal-acciones{flex-direction:column-reverse;align-items:stretch;gap:10px}.acciones button,.modal-acciones button,.acciones button.primary{width:100%;padding:11px 14px}.total strong{font-size:20px}}