/* ── Gastos Familiares – custom styles ── */

/* Fuente */
body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* Tarjeta base */
.card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
    padding: 1.5rem;
}
.card-sm { padding: 1rem 1.25rem; }

/* Número grande en tarjetas de resumen */
.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
@media (max-width: 640px) {
    .stat-number { font-size: 0.875rem; }
    .card-dias {
        padding: 0.5rem 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin: 0 -1rem;
    }
}

/* Autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
    position: absolute;
    z-index: 50;
    left: 0; right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 220px;
    overflow-y: auto;
}
.autocomplete-list li {
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .95rem;
    color: #334155;
}
.autocomplete-list li:hover,
.autocomplete-list li.active { background: #f1f5f9; }
.autocomplete-list li.new-item { color: #6366f1; font-style: italic; }

/* Nav item activo – desktop */
.nav-desktop a {
    display: flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem;
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.nav-desktop a:hover { background: #f1f5f9; color: #1e293b; }
.nav-desktop a.activo { background: #f1f5f9; color: #1e293b; }
.nav-desktop a.activo-resumen     { color: #6366f1; background: #eef2ff; }
.nav-desktop a.activo-movimientos { color: #0ea5e9; background: #e0f2fe; }
.nav-desktop a.icono-gasto        { color: #fca5a5; }
.nav-desktop a.icono-ingreso      { color: #86efac; }
.nav-desktop a.icono-gasto:hover  { color: #f43f5e; background: #fff1f2; }
.nav-desktop a.icono-ingreso:hover{ color: #10b981; background: #ecfdf5; }
.nav-desktop a.activo-gasto       { color: #f43f5e; background: #fff1f2; }
.nav-desktop a.activo-ingreso     { color: #10b981; background: #ecfdf5; }
.nav-desktop a.activo-totales      { color: #f59e0b; background: #fffbeb; }
.nav-desktop a.activo-historico    { color: #f97316; background: #fff7ed; }
.nav-desktop a.activo-suministros  { color: #8b5cf6; background: #f5f3ff; }
.nav-desktop a.activo-conceptos    { color: #0d9488; background: #f0fdfa; }

/* Nav móvil – fijo abajo */
.nav-movil {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-movil a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: .7rem .25rem;
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s;
}
.nav-movil a.activo-resumen     { color: #6366f1; }
.nav-movil a.activo-movimientos { color: #0ea5e9; }
.nav-movil a.icono-gasto        { color: #fca5a5; }
.nav-movil a.icono-ingreso      { color: #86efac; }
.nav-movil a.activo-gasto       { color: #f43f5e; }
.nav-movil a.activo-ingreso     { color: #10b981; }
.nav-movil a.activo-totales      { color: #f59e0b; }
.nav-movil a.activo-historico    { color: #f97316; }
.nav-movil a.activo-suministros  { color: #8b5cf6; }
.nav-movil a.activo-conceptos    { color: #0d9488; }

/* Input limpio */
.inp {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-size: 1rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.inp:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    background: #fff;
}

/* Campo fecha con botón calendario */
.date-wrap { display: flex; align-items: center; gap: .4rem; }
.date-wrap .inp { flex: 1; }
.date-cal-btn {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: .75rem; border: 1.5px solid #e2e8f0; background: #f8fafc;
    color: #94a3b8; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.date-cal-btn:hover { color: #6366f1; border-color: #c7d2fe; background: #eef2ff; }
.date-picker-hidden {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0; padding: 0; border: 0;
}

/* Badge tipo */
.badge-gasto        { background:#fff1f2; color:#f43f5e; font-size:.75rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; }
.badge-ingreso      { background:#ecfdf5; color:#10b981; font-size:.75rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; }
.badge-suministro   { background:#f5f3ff; color:#8b5cf6; font-size:.75rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; }

/* Modal overlay */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 420px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* Botones */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.4rem;
    border-radius: .75rem;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    border: none;
    text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: #6366f1; color: #fff; }
.btn-primary:hover  { background: #4f46e5; }
.btn-gasto    { background: #f43f5e; color: #fff; }
.btn-gasto:hover    { background: #e11d48; }
.btn-ingreso  { background: #10b981; color: #fff; }
.btn-ingreso:hover  { background: #059669; }
.btn-outline       { background: transparent; color: #64748b; border: 1.5px solid #e2e8f0; }
.btn-outline:hover { background: #f8fafc; }
.btn-suministros       { background: #8b5cf6; color: #fff; }
.btn-suministros:hover { background: #7c3aed; }

/* Tabla */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .78rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; padding: .6rem 1rem; border-bottom: 1px solid #f1f5f9; }
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid #f8fafc; font-size: .925rem; color: #1e293b; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: #fafafa; }

/* Importe coloreado */
.imp-gasto        { color: #f43f5e; font-weight: 600; }
.imp-ingreso      { color: #10b981; font-weight: 600; }
.imp-suministro   { color: #8b5cf6; font-weight: 600; }

/* Etiqueta de sección */
.section-label {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: #94a3b8; margin-bottom: .5rem;
}

/* Navegación de mes/año con flechas */
.nav-periodo {
    display: inline-flex; align-items: center; gap: .75rem;
}
.nav-mes {
    display: inline-flex; align-items: center; gap: .25rem;
}
.nav-mes-btn {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: .5rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 1.25rem; line-height: 1;
    transition: background .15s, color .15s;
}
.nav-mes-btn:hover { background: #f1f5f9; color: #1e293b; }
.nav-mes-label {
    font-size: 1.5rem; font-weight: 700; color: #1e293b;
    letter-spacing: -.02em;
    min-width: 7.5rem; text-align: center;
}
.nav-anio-label {
    font-size: 1.1rem; font-weight: 600; color: #64748b;
    letter-spacing: -.01em;
    min-width: 3.5rem; text-align: center;
}
@media (max-width: 640px) {
    .nav-mes-label { font-size: 1.25rem; min-width: 6.5rem; }
    .nav-anio-label { font-size: 1rem; min-width: 3rem; }
}