/* =====================================================================
   IDENTIDAD VISUAL — "Cartilla" (inspirada en las libretas de ahorro
   y libros de contabilidad de toda la vida: tinta, papel y sellos).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
    --ink:        #16283D;   /* navy tinta - estructura, texto principal */
    --paper:      #F7F6F2;   /* fondo, "papel" */
    --paper-line: #E4E0D6;   /* líneas / bordes sutiles sobre el papel */
    --money-pos:  #2E6F4E;   /* verde ahorro - ingresos, positivo */
    --money-neg:  #A13D3D;   /* rojo ladrillo - gastos, negativo */
    --brass:      #9C7A3C;   /* bronce - acentos, sello, hover */
    --slate:      #5B6B7A;   /* gris azulado - texto secundario */
}

body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--paper);
    color: var(--ink);
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* Toda cifra monetaria usa la mono "de máquina de sumar", con números
   tabulares para que las columnas de importes queden bien alineadas. */
.money, .stat-value {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---- Barra de navegación ---- */
.navbar-brand i { color: var(--brass); }

/* ---- Botones ---- */
.btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #0E1C2B;
    border-color: #0E1C2B;
}
.btn-outline-primary {
    color: var(--ink);
    border-color: var(--ink);
}
.btn-outline-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
}
.btn-success { background-color: var(--money-pos); border-color: var(--money-pos); }
.btn-danger, .btn-outline-danger:hover { background-color: var(--money-neg); border-color: var(--money-neg); }

/* ---- Tarjetas base ---- */
.card {
    border: 1px solid var(--paper-line);
    border-radius: 10px;
    box-shadow: none;
    background-color: #FFFFFF;
}

/* ---- Tarjetas de estadísticas del dashboard (estilo "asiento de libro") ---- */
.card-stat {
    border: 1px solid var(--paper-line);
    border-left: 4px solid var(--slate);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(22,40,61,0.06);
    background-color: #FFFFFF;
}
.card-stat.accent-green  { border-left-color: var(--money-pos); }
.card-stat.accent-red    { border-left-color: var(--money-neg); }
.card-stat.accent-brass  { border-left-color: var(--brass); }
.card-stat.accent-navy   { border-left-color: var(--ink); }

.card-stat .stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}

.card-stat .stat-value {
    font-size: 1.55rem;
}
.card-stat .stat-value.text-success { color: var(--money-pos) !important; }
.card-stat .stat-value.text-danger  { color: var(--money-neg) !important; }
.card-stat .stat-value.text-primary { color: var(--brass) !important; }

/* ---- Sello de periodo (como el timbre de fecha de una libreta) ---- */
.period-stamp {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brass);
    border: 1.5px solid var(--brass);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    transform: rotate(-1.5deg);
    background: rgba(156,122,60,0.06);
}

.badge.bg-secondary { background-color: var(--slate) !important; }
.badge.bg-success   { background-color: var(--money-pos) !important; }
.badge.bg-danger    { background-color: var(--money-neg) !important; }
.badge.bg-warning   { background-color: var(--brass) !important; color: #fff !important; }

a { color: var(--brass); }
a:hover { color: var(--ink); }

/* =====================================================================
   MENÚ LATERAL (sidebar)
   ===================================================================== */
:root { --sidebar-width: 250px; }

.sidebar-topbar {
    background-color: var(--ink);
    border-bottom: 3px solid var(--brass);
}

#sidebarMenu {
    background-color: var(--ink) !important;
    width: var(--sidebar-width) !important;
    border-right: 3px solid var(--brass) !important;
    color: #fff;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem 1.25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-brand i { color: var(--brass); }

.sidebar-nav {
    padding: .75rem 0;
    overflow-y: auto;
}
#sidebarMenu .sidebar-nav .nav-link {
    color: rgba(255,255,255,0.78) !important;
    font-weight: 500;
    font-size: .92rem;
    padding: .6rem 1.25rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none !important;
    background-color: transparent;
}
.sidebar-nav .nav-link i { width: 18px; text-align: center; }
#sidebarMenu .sidebar-nav .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.06);
}
#sidebarMenu .sidebar-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(156,122,60,0.18);
    border-left-color: var(--brass);
    font-weight: 600;
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: .6rem 1.25rem;
    list-style: none;
}

.sidebar-user {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: .6rem 0;
}
#sidebarMenu .sidebar-user-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    color: rgba(255,255,255,0.85) !important;
    font-size: .88rem;
    text-decoration: none !important;
}
#sidebarMenu .sidebar-user-link:hover { color: #fff !important; background-color: rgba(255,255,255,0.06); }
#sidebarMenu .sidebar-user-link.active { color: var(--brass) !important; }

@media (min-width: 992px) {
    #sidebarMenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 1030 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #sidebarMenu .offcanvas-body {
        background-color: transparent !important;
    }
    .main-content {
        margin-left: var(--sidebar-width) !important;
    }
}


.auth-wrapper {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    max-width: 420px;
    width: 100%;
    border: 1px solid var(--paper-line);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(22,40,61,0.08);
}

/* ---- Impresión de informes ---- */
@media print {
    .no-print, nav, footer, #sidebarMenu, .sidebar-topbar {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .container {
        max-width: 100% !important;
    }
}