/* CESCAC Finanzas Personales — Mobile-First, Bento Grid, Core Web Vitals */
* { box-sizing: border-box; }
body.finanzas-app { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #f0f4f8; -webkit-tap-highlight-color: transparent; }
.app-header { background: #1a3a52; color: #fff; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.app-header a { color: #fff; text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.5rem; }
.app-header .logo-link { display: flex; align-items: center; }
.app-header .logo-img { height: 32px; width: auto; vertical-align: middle; opacity: 0.95; filter: brightness(0) invert(1); }
.login-page .login-main .logo-img { filter: none; }
.app-header .user { margin-left: auto; }
.login-hint { font-size: 0.85rem; color: #666; margin-top: 0.75rem; }
.login-main a { color: #1a3a52; min-height: 44px; display: inline-flex; align-items: center; }
main { max-width: 920px; margin: 0 auto; padding: 1rem; }
@media (min-width: 768px) { main { padding: 1.5rem; } }
.app-footer { text-align: center; padding: 1rem; color: #666; font-size: 0.9rem; }
.login-page .login-main { margin: 2rem auto; max-width: 320px; }
.login-main form label { display: block; margin-bottom: 0.5rem; }
.login-main input { width: 100%; padding: 0.5rem; }
.login-main button { margin-top: 0.5rem; padding: 0.5rem 1rem; }
.error { color: #c00; }
.positive { color: #080; }
/* Bento Grid: tarjetas resumen */
.dashboard-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; }
@media (min-width: 480px) { .dashboard-cards { grid-template-columns: repeat(2, 1fr); } }
.card { background: #fff; padding: 1.25rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(15,23,42,0.06); }
.card .amount.negative { color: #c00; }
.card .amount.positive { color: #080; }
.dashboard-nav { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.dashboard-nav a { background: #1a3a52; color: #fff; padding: 0.6rem 1rem; text-decoration: none; border-radius: 8px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.form-inline label { display: inline-block; margin-right: 0.5rem; margin-bottom: 0.5rem; }
.form-inline input, .form-inline button { margin-right: 0.25rem; }
.prestamos-section { margin-bottom: 2rem; }
.prestamos-section h2 { margin-top: 1rem; }
.list-prestamos { list-style: none; padding-left: 0; }
.list-prestamos li { padding: 0.25rem 0; border-bottom: 1px solid #eee; }
.list-contactos { list-style: none; padding-left: 0; }
.list-contactos li { padding: 0.35rem 0; border-bottom: 1px solid #eee; }

/* Bento Grid: bloques por vertical (bancos, préstamos, gastos, comprobantes) */
.dashboard-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; }
@media (min-width: 600px) { .dashboard-layout { grid-template-columns: repeat(2, 1fr); } }
.dashboard-column { background: #ffffff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); }
.dashboard-column h2 { margin-top: 0; font-size: 1.1rem; }
.section-note { font-size: 0.9rem; color: #555; margin-bottom: 0.75rem; }
.highlight-list { list-style: none; padding-left: 0; margin: 0 0 0.5rem 0; font-size: 0.9rem; }
.highlight-list li { padding: 0.2rem 0; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem; padding: 0.6rem 1.1rem; min-height: 44px; border-radius: 999px; font-size: 0.9rem; text-decoration: none; }
.btn-primary { background: #1a3a52; color: #fff; }
.btn-secondary { background: #e2e8f0; color: #1a3a52; }
.card-note { font-size: 0.85rem; color: #555; margin-top: 0.4rem; }
/* Touch: inputs y botones en móvil */
.login-main button, .form-inline button, input[type="submit"], button[type="submit"] { min-height: 44px; padding: 0.5rem 1rem; }
.login-main input, .form-inline input { min-height: 44px; padding: 0.5rem 0.75rem; }