:root{--fondo: #f4f5f7;--card: #ffffff;--borde: #e3e6ea;--texto: #1f2430;--texto-suave: #6b7280;--primario: #2f6fed;--primario-oscuro: #2257c0;--gasto: #e5484d;--gasto-suave: #fdecec;--ingreso: #2f9e44;--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)}.app{max-width:1080px;margin:0 auto;padding:16px}.cabecera{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.cabecera h1{font-size:22px;margin:0}.usuario{display:flex;align-items:center;gap:10px;color:var(--texto-suave)}.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}.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}.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)}.dos-col{display:grid;grid-template-columns:1fr 400px;gap:16px;margin-bottom:16px}@media (max-width: 860px){.dos-col{grid-template-columns:1fr}}.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:hover{border-color:var(--gasto);color:var(--gasto)}.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 h3{margin:0 0 16px;font-size:16px}.form label{display:block;font-size:13px;color:var(--texto-suave);margin-bottom:12px}.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)}.acciones{display:flex;justify-content:flex-end;gap:8px}.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-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:4px}.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}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform: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)}@media (max-width: 640px){.app{padding:12px}.card{padding:16px}.login-card{padding:22px}input,select{font-size:16px}.cabecera h1{font-size:19px}.usuario span{display:none}.periodo>button{flex:1 1 auto;min-width:96px;padding:9px 10px}.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:8px;margin-top:4px}.acciones-fila button{margin-left:0;padding:7px 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}.total strong{font-size:20px}}