/* =========================================================
   Finanzas — Hoja de estilos base (rediseño "Claro+")
   Cargar DESPUÉS de Bootstrap. Se hereda en todas las páginas.
   ========================================================= */

:root {
    --fin-bg:        #fafbfc;   /* fondo de la app            */
    --fin-surface:   #ffffff;   /* tarjetas                   */
    --fin-border:    #eceef1;   /* bordes suaves              */
    --fin-line:      #f1f3f5;   /* divisores de tabla/listas  */
    --fin-ink:       #1f2933;   /* texto principal            */
    --fin-muted:     #6b7480;   /* texto secundario           */
    --fin-faint:     #9aa2ac;   /* texto terciario / iconos   */

    /* Azul de marca espaciopropio.es — ver assets/marca/MARCA.md
       Elegido como el más vivo que aún cumple contraste AA:
       4,52:1 sobre --fin-bg y 4,68:1 sobre blanco. */
    --fin-accent:    #3A74C5;   /* acento (azul de marca)     */
    --fin-accent-d:  #3162A5;
    --fin-accent-bg: #E8EFF9;

    --fin-pos:       #4a9b7a;   /* ingresos / positivo        */
    --fin-neg:       #d9655a;   /* gastos / negativo          */
    --fin-warn:      #b3862f;   /* alerta / sin categorizar   */
}

body {
    background: var(--fin-bg);
    color: var(--fin-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 0.94rem;
}

.app-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 56px;
}

/* ---------- Navbar superior ---------- */
.topnav {
    background: var(--fin-surface);
    border-bottom: 1px solid var(--fin-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.topnav__inner { max-width: 1320px; margin: 0 auto; padding: .5rem 1.5rem; }
.topnav__brand {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--fin-ink);
    font-size: 1.2rem;
}
.topnav .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--fin-muted);
    font-weight: 500;
    font-size: .9rem;
    padding: .45rem .7rem;
    border-radius: 9px;
}
.topnav .nav-link i { font-size: 1rem; color: var(--fin-faint); }
.topnav .nav-link:hover { background: var(--fin-line); color: var(--fin-ink); }
.topnav .nav-link.active { background: var(--fin-accent-bg); color: var(--fin-ink); }
.topnav .nav-link.active i { color: var(--fin-accent); }
.btn-salir { border: 1px solid #e2e5e9; color: var(--fin-muted); font-weight: 500; }
.btn-salir:hover { background: var(--fin-line); color: var(--fin-ink); }

/* ---------- Tarjetas ---------- */
.card,
.app-card {
    background: var(--fin-surface);
    border: 1px solid var(--fin-border);
    border-radius: 14px;
}
.card { box-shadow: none; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--fin-line);
    font-weight: 600;
    padding: 16px 22px;
}
.card-body { padding: 20px 22px; }

/* ---------- KPIs tintados (Gastos / Ingresos / Balance / Alerta) ---------- */
.kpi { border-radius: 14px; padding: 18px 20px; height: 100%; }
.kpi__label {
    display: flex; align-items: center; gap: .5rem;
    font-size: .84rem; font-weight: 600; margin-bottom: .5rem;
}
.kpi__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi__value small { font-size: .9rem; font-weight: 500; }

.kpi--gastos   { background: #fcecea; }
.kpi--gastos   .kpi__label { color: #b85248; }
.kpi--gastos   .kpi__value { color: #9e463d; }

.kpi--ingresos { background: #e7f4ee; }
.kpi--ingresos .kpi__label { color: #3d8767; }
.kpi--ingresos .kpi__value { color: #2f6e52; }

.kpi--balance  { background: var(--fin-accent-bg); }
.kpi--balance  .kpi__label { color: var(--fin-accent); }
.kpi--balance  .kpi__value { color: var(--fin-accent-d); }

.kpi--alerta   { background: #fbf2e2; }
.kpi--alerta   .kpi__label { color: var(--fin-warn); }
.kpi--alerta   .kpi__value { color: #8f6b22; }

.kpi--neutro   { background: var(--fin-line); }
.kpi--neutro   .kpi__label { color: var(--fin-muted); }
.kpi--neutro   .kpi__value { color: var(--fin-ink); }

/* ---------- Selector de mes ---------- */
.month-switch {
    display: inline-flex;
    background: var(--fin-surface);
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 3px;
}
.month-switch .btn { border: 0; color: var(--fin-muted); }
.month-switch .btn.is-today { color: var(--fin-ink); font-weight: 600; }

/* ---------- Importes ---------- */
.importe-positivo { color: var(--fin-pos); font-weight: 600; }
.importe-negativo { color: var(--fin-neg); font-weight: 600; }
/* un importe nunca debe partirse en dos lineas */
.importe-positivo, .importe-negativo { white-space: nowrap; }

/* ---------- Badges de categoría ---------- */
.badge-categoria {
    display: inline-block;
    background: #eef2f6;            /* gris por defecto; el color real se pasa inline */
    color: #5b6570;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
}
.badge-categoria.badge-sin      { background: #fbeccb; color: #8f6b22; }
.badge-categoria.badge-traspaso { background: #aeb6bf; color: #ffffff; }
.badge-categoria.rounded-pill   { border-radius: 20px; }

/* ---------- Tablas ---------- */
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 13px 22px; }
/* tablas compactas dentro de tarjetas: el padding grande las estrangula */
.table-sm > :not(caption) > * > * { padding: 8px 12px; }
.table td, .table th { vertical-align: middle; }
.table thead th {
    background: transparent;
    color: var(--fin-faint);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--fin-line);
}
.table tbody tr { border-color: var(--fin-line); }
.table-hover tbody tr:hover { background: #f8fafc; }

/* ---------- Barra de categorías (dashboard) ---------- */
.catbar { display: flex; gap: 4px; align-items: flex-start; }
.catbar__col { min-width: 0; }
.catbar__seg { height: 16px; border-radius: 5px; margin-bottom: 10px; }
.catbar__name { font-size: .74rem; color: var(--fin-faint); line-height: 1.25; }
.catbar__amount { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Lista patrimonio ---------- */
.plist-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--fin-line);
}
.plist-row:last-child { border-bottom: 0; }
.plist-row .label { display: flex; align-items: center; gap: .5rem; color: var(--fin-muted); font-size: .92rem; }
.plist-row .label i { color: var(--fin-faint); }

/* ---------- Avisos ---------- */
.duplicado-warning { background-color: #fbf2e2; }

/* ---------- Botones outline coherentes ---------- */
.btn-outline-secondary {
    --bs-btn-color: var(--fin-muted);
    --bs-btn-border-color: #e2e5e9;
    --bs-btn-hover-bg: var(--fin-line);
    --bs-btn-hover-border-color: #d7dbe0;
    --bs-btn-hover-color: var(--fin-ink);
}
.btn-primary {
    --bs-btn-bg: var(--fin-accent);
    --bs-btn-border-color: var(--fin-accent);
    --bs-btn-hover-bg: var(--fin-accent-d);
    --bs-btn-hover-border-color: var(--fin-accent-d);
}
.text-primary { color: var(--fin-accent) !important; }
a { color: var(--fin-accent); }

/* ---------- Menú: hueco para el logotipo ----------
   Con la navbar desplegada, Bootstrap aplica su propio padding-x de .5rem a
   .navbar-expand-xl .navbar-nav .nav-link (3 clases) y gana a .topnav
   .nav-link (2 clases). Igualamos especificidad para apretarlo y dejar sitio
   al logotipo completo: libera ~44px, suficiente para que todo quepa en
   1200px con holgura. */
.topnav.navbar-expand-xl .navbar-nav .nav-link {
    padding: .45rem .4rem;
    gap: .35rem;
}

/* El botón Salir va solo con icono cuando el menú está desplegado (el ancho
   está justo), y recupera su texto al colapsar, donde sobra sitio. */
.btn-salir__txt { margin-left: .4rem; }
@media (min-width: 1200px) {
    .btn-salir__txt { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .topnav .nav-link { padding: .55rem .5rem; }
    .app-main { padding: 20px 16px 48px; }
}