/* ==========================================================================
   Mi Finanzas — sistema visual
   Tinta de billete sobre papel frío. Paneles planos con borde, sin sombras;
   el único elemento expresivo es el panel "billete" del dashboard.
   ========================================================================== */

:root {
    /* Paleta */
    --mf-ink: #0e4f4a;          /* tinta de billete: marca, acciones principales */
    --mf-ink-strong: #093a36;
    --mf-ink-soft: #e2eeec;     /* fondos de selección / activo */
    --mf-paper: #f3f6f5;        /* fondo de página */
    --mf-surface: #ffffff;
    --mf-text: #1c2a28;
    --mf-muted: #5e6e6b;
    --mf-line: #dae2df;
    --mf-line-soft: #e9eeec;
    --mf-in: #23794a;           /* entra dinero */
    --mf-in-soft: #e3f1e8;
    --mf-out: #b2402f;          /* sale dinero / negativo */
    --mf-out-soft: #f7e6e2;
    --mf-warn: #9a6700;
    --mf-warn-soft: #f8efd9;
    --mf-info: #2d5f86;
    --mf-info-soft: #e5edf4;

    /* Forma */
    --mf-radius-lg: 14px;       /* panel principal */
    --mf-radius: 10px;          /* paneles */
    --mf-radius-sm: 8px;        /* controles */
    --mf-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Bootstrap: redirigir sus variables a la paleta */
    --bs-body-font-family: var(--mf-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--mf-text);
    --bs-body-bg: var(--mf-paper);
    --bs-secondary-color: var(--mf-muted);
    --bs-border-color: var(--mf-line);
    --bs-border-radius: var(--mf-radius-sm);
    --bs-border-radius-lg: var(--mf-radius);
    --bs-link-color: var(--mf-ink);
    --bs-link-color-rgb: 14, 79, 74;
    --bs-link-hover-color: var(--mf-ink-strong);
    --bs-link-hover-color-rgb: 9, 58, 54;
    --bs-primary: var(--mf-ink);
    --bs-primary-rgb: 14, 79, 74;
    --bs-success: var(--mf-in);
    --bs-success-rgb: 35, 121, 74;
    --bs-danger: var(--mf-out);
    --bs-danger-rgb: 178, 64, 47;
    --bs-warning: var(--mf-warn);
    --bs-warning-rgb: 154, 103, 0;
    --bs-info: var(--mf-info);
    --bs-info-rgb: 45, 95, 134;
    --bs-primary-bg-subtle: var(--mf-ink-soft);
    --bs-success-bg-subtle: var(--mf-in-soft);
    --bs-danger-bg-subtle: var(--mf-out-soft);
    --bs-warning-bg-subtle: var(--mf-warn-soft);
    --bs-info-bg-subtle: var(--mf-info-soft);
    --bs-primary-text-emphasis: var(--mf-ink-strong);
    --bs-success-text-emphasis: #185a37;
    --bs-danger-text-emphasis: #8a2f22;
    --bs-warning-text-emphasis: #6f4a00;
    --bs-info-text-emphasis: #1f4563;
    --bs-primary-border-subtle: #b9d3cf;
    --bs-success-border-subtle: #bcdcc8;
    --bs-danger-border-subtle: #e6c0b8;
    --bs-warning-border-subtle: #e8d3a3;
    --bs-info-border-subtle: #bfd0de;
}

body {
    accent-color: var(--mf-ink);   /* casillas, radios y deslizadores nativos */
    font-feature-settings: "tnum" 1;   /* cifras tabulares: los montos se alinean */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--mf-text);
}
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9375rem; }

.text-muted { color: var(--mf-muted) !important; }
.text-success { color: var(--mf-in) !important; }
.text-danger { color: var(--mf-out) !important; }
.text-warning { color: var(--mf-warn) !important; }
.text-info { color: var(--mf-info) !important; }
.text-primary { color: var(--mf-ink) !important; }
.bg-primary { background-color: var(--mf-ink) !important; }
.bg-success { background-color: var(--mf-in) !important; }
.bg-danger { background-color: var(--mf-out) !important; }
.bg-warning { background-color: var(--mf-warn) !important; }
.bg-info { background-color: var(--mf-info) !important; }
.bg-light { background-color: var(--mf-paper) !important; }
.bg-primary-subtle { background-color: var(--mf-ink-soft) !important; }
.bg-success-subtle { background-color: var(--mf-in-soft) !important; }
.bg-danger-subtle { background-color: var(--mf-out-soft) !important; }
.bg-warning-subtle { background-color: var(--mf-warn-soft) !important; }
.bg-info-subtle { background-color: var(--mf-info-soft) !important; }

/* Las etiquetas en mayúsculas gritan; en esta app todo va en tipo oración */
.text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }

:focus-visible { outline: 2px solid var(--mf-ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Paneles: borde en vez de sombra
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--mf-line);
    --bs-card-border-radius: var(--mf-radius);
    --bs-card-inner-border-radius: calc(var(--mf-radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    border: 1px solid var(--mf-line) !important;
    background: var(--mf-surface);
}
.card-header {
    border-bottom: 1px solid var(--mf-line-soft);
    font-weight: 600;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
/* Cabeceras de color sólido de Bootstrap: se vuelven una franja de tinta discreta */
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-danger,
.card-header.bg-info, .card-header.bg-warning, .card-header.bg-dark, .card-header.bg-secondary {
    background: var(--mf-surface) !important;
    color: var(--mf-text) !important;
    border-bottom: 1px solid var(--mf-line-soft);
    box-shadow: inset 3px 0 0 var(--mf-ink);
}
.card-header.bg-success { box-shadow: inset 3px 0 0 var(--mf-in); }
.card-header.bg-danger { box-shadow: inset 3px 0 0 var(--mf-out); }
.card-header.bg-warning { box-shadow: inset 3px 0 0 var(--mf-warn); }
.card-header.bg-info { box-shadow: inset 3px 0 0 var(--mf-info); }
.card-header[class*="bg-"] .text-white, .card-header[class*="bg-"] h1, .card-header[class*="bg-"] h2,
.card-header[class*="bg-"] h3, .card-header[class*="bg-"] h4, .card-header[class*="bg-"] h5,
.card-header[class*="bg-"] h6 { color: var(--mf-text) !important; }

.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--mf-radius-sm);
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(14, 79, 74, 0.25);
}
.btn-sm { --bs-btn-border-radius: 7px; --bs-btn-padding-x: 0.65rem; }
.btn-primary {
    --bs-btn-bg: var(--mf-ink); --bs-btn-border-color: var(--mf-ink);
    --bs-btn-hover-bg: var(--mf-ink-strong); --bs-btn-hover-border-color: var(--mf-ink-strong);
    --bs-btn-active-bg: var(--mf-ink-strong); --bs-btn-active-border-color: var(--mf-ink-strong);
    --bs-btn-disabled-bg: var(--mf-ink); --bs-btn-disabled-border-color: var(--mf-ink);
}
.btn-outline-primary {
    --bs-btn-color: var(--mf-ink); --bs-btn-border-color: var(--mf-line);
    --bs-btn-hover-bg: var(--mf-ink-soft); --bs-btn-hover-color: var(--mf-ink-strong); --bs-btn-hover-border-color: #b9d3cf;
    --bs-btn-active-bg: var(--mf-ink); --bs-btn-active-border-color: var(--mf-ink);
    background: var(--mf-surface);
}
.btn-success {
    --bs-btn-bg: var(--mf-in); --bs-btn-border-color: var(--mf-in);
    --bs-btn-hover-bg: #1b6139; --bs-btn-hover-border-color: #1b6139;
    --bs-btn-active-bg: #1b6139; --bs-btn-active-border-color: #1b6139;
}
.btn-danger {
    --bs-btn-bg: var(--mf-out); --bs-btn-border-color: var(--mf-out);
    --bs-btn-hover-bg: #8f3225; --bs-btn-hover-border-color: #8f3225;
    --bs-btn-active-bg: #8f3225; --bs-btn-active-border-color: #8f3225;
}
.btn-warning, .btn-info {
    --bs-btn-color: var(--mf-text); --bs-btn-bg: var(--mf-surface); --bs-btn-border-color: var(--mf-line);
    --bs-btn-hover-color: var(--mf-text); --bs-btn-hover-bg: var(--mf-paper); --bs-btn-hover-border-color: #c5d0cc;
    --bs-btn-active-bg: var(--mf-line-soft); --bs-btn-active-border-color: #c5d0cc;
}
.btn-info.text-white { color: var(--mf-text) !important; }
.btn-secondary, .btn-light, .btn-outline-secondary {
    --bs-btn-color: var(--mf-text); --bs-btn-bg: var(--mf-surface); --bs-btn-border-color: var(--mf-line);
    --bs-btn-hover-color: var(--mf-text); --bs-btn-hover-bg: var(--mf-paper); --bs-btn-hover-border-color: #c5d0cc;
    --bs-btn-active-color: var(--mf-text); --bs-btn-active-bg: var(--mf-line-soft); --bs-btn-active-border-color: #c5d0cc;
}
.btn-outline-success { --bs-btn-color: var(--mf-in); --bs-btn-border-color: #bcdcc8; --bs-btn-hover-bg: var(--mf-in); --bs-btn-hover-border-color: var(--mf-in); }
.btn-outline-danger { --bs-btn-color: var(--mf-out); --bs-btn-border-color: #e6c0b8; --bs-btn-hover-bg: var(--mf-out); --bs-btn-hover-border-color: var(--mf-out); }
.btn-outline-warning, .btn-outline-info {
    --bs-btn-color: var(--mf-text); --bs-btn-border-color: var(--mf-line);
    --bs-btn-hover-color: var(--mf-text); --bs-btn-hover-bg: var(--mf-paper); --bs-btn-hover-border-color: #c5d0cc;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--mf-line);
    border-radius: var(--mf-radius-sm);
    background-color: var(--mf-surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--mf-ink);
    box-shadow: 0 0 0 3px rgba(14, 79, 74, 0.15);
}
.form-label, .col-form-label { font-weight: 600; font-size: 0.875rem; color: var(--mf-text); }
.form-text { color: var(--mf-muted); }
.form-check-input:checked { background-color: var(--mf-ink); border-color: var(--mf-ink); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(14, 79, 74, 0.15); border-color: var(--mf-ink); }
.invalid-feedback, .errorlist { color: var(--mf-out); }

/* Select2 alineado con los campos */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--mf-line) !important;
    border-radius: var(--mf-radius-sm) !important;
    font-size: 1rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 0.75rem; color: var(--mf-text); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mf-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--mf-ink) !important; }
.select2-dropdown { border-color: var(--mf-line); border-radius: var(--mf-radius-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--mf-ink); }

/* --------------------------------------------------------------------------
   Tablas: filas separadas por líneas finas, cifras a la derecha
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--mf-line-soft);
    --bs-table-striped-bg: #f7f9f8;
    --bs-table-hover-bg: #f3f7f6;
    margin-bottom: 0;
}
.table > thead th, .table thead.table-dark th, .table thead.table-light th {
    background: transparent !important;
    color: var(--mf-muted) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--mf-line) !important;
    white-space: nowrap;
}
.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }

/* --------------------------------------------------------------------------
   Avisos, insignias, barras de progreso
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--mf-radius);
    border: 1px solid transparent;
    padding: 0.8rem 1rem;
}
.alert-success { background: var(--mf-in-soft); border-color: #bcdcc8; color: #185a37; }
.alert-danger { background: var(--mf-out-soft); border-color: #e6c0b8; color: #8a2f22; }
.alert-warning { background: var(--mf-warn-soft); border-color: #e8d3a3; color: #6f4a00; }
.alert-info, .alert-primary { background: var(--mf-info-soft); border-color: #bfd0de; color: #1f4563; }
.alert-secondary, .alert-light { background: var(--mf-surface); border-color: var(--mf-line); color: var(--mf-text); }
.alert.border-0 { border: 1px solid currentColor !important; border-color: rgba(0, 0, 0, 0.08) !important; }

.badge { font-weight: 600; border-radius: 999px; padding: 0.3em 0.65em; letter-spacing: 0; }
.badge.bg-secondary { background: var(--mf-line-soft) !important; color: var(--mf-text) !important; }
.badge.bg-light { color: var(--mf-text) !important; border: 1px solid var(--mf-line); }
.badge.bg-warning { background: var(--mf-warn-soft) !important; color: #6f4a00 !important; }
.badge.bg-info { background: var(--mf-info-soft) !important; color: #1f4563 !important; }

.progress {
    --bs-progress-bg: var(--mf-line-soft);
    --bs-progress-border-radius: 999px;
    --bs-progress-bar-bg: var(--mf-ink);
}

.list-group { --bs-list-group-border-color: var(--mf-line-soft); --bs-list-group-active-bg: var(--mf-ink); --bs-list-group-active-border-color: var(--mf-ink); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--mf-ink); --bs-nav-tabs-border-color: var(--mf-line); }
.nav-link { color: var(--mf-muted); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--mf-ink); }
.page-link { color: var(--mf-ink); }
.active > .page-link, .page-link.active { background: var(--mf-ink); border-color: var(--mf-ink); }
.modal-content { border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg); }
.dropdown-menu {
    --bs-dropdown-border-color: var(--mf-line);
    --bs-dropdown-border-radius: var(--mf-radius);
    --bs-dropdown-link-active-bg: var(--mf-ink-soft);
    --bs-dropdown-link-active-color: var(--mf-ink-strong);
    box-shadow: 0 10px 30px rgba(20, 45, 41, 0.12);
    padding: 0.35rem;
}
.dropdown-item { border-radius: 7px; padding: 0.45rem 0.7rem; font-size: 0.875rem; }
.dropdown-header { color: var(--mf-muted); font-size: 0.78rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.mf-topbar {
    background: var(--mf-surface);
    border-bottom: 1px solid var(--mf-line);
    padding: 0;
}
.mf-topbar .container { min-height: 60px; }
.mf-brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
    color: var(--mf-ink) !important; text-decoration: none;
}
/* Sello "C$": remite a la denominación impresa en un billete */
.mf-brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--mf-ink); color: #fff;
    font-size: 0.78rem; font-weight: 700; letter-spacing: -0.03em;
}
.mf-topbar .navbar-nav { gap: 0.1rem; }
.mf-topbar .nav-link {
    color: var(--mf-muted) !important;
    font-weight: 550; font-size: 0.9rem;
    padding: 1.15rem 0.7rem !important;
    border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 0.4rem;
}
.mf-topbar .nav-link:hover, .mf-topbar .nav-link:focus-visible { color: var(--mf-text) !important; }
.mf-topbar .nav-link.active, .mf-topbar .show > .nav-link {
    color: var(--mf-ink) !important;
    border-bottom-color: var(--mf-ink);
}
.mf-topbar .dropdown-menu { margin-top: 0 !important; min-width: 15rem; }
.mf-topbar .dropdown-item i { width: 1.1rem; text-align: center; color: var(--mf-muted); margin-right: 0.35rem; }
.mf-topbar .dropdown-item.active i { color: var(--mf-ink); }
.mf-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--mf-ink-soft); color: var(--mf-ink);
    font-weight: 700; font-size: 0.8rem;
}
.mf-topbar .navbar-toggler { border: 1px solid var(--mf-line); padding: 0.35rem 0.55rem; }
.mf-topbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(14, 79, 74, 0.2); }
.mf-logout { border: 0; background: none; width: 100%; text-align: left; color: var(--mf-out); }
@media (max-width: 991.98px) {
    .mf-topbar .navbar-collapse { padding-bottom: 0.75rem; }
    .mf-topbar .nav-link { padding: 0.6rem 0.25rem !important; border-bottom: 0; border-left: 2px solid transparent; padding-left: 0.6rem !important; }
    .mf-topbar .nav-link.active, .mf-topbar .show > .nav-link { border-left-color: var(--mf-ink); }
    .mf-topbar .dropdown-menu { box-shadow: none; border: 0; padding-left: 0.75rem; }
}

.mf-main { padding-top: 1.75rem; padding-bottom: 3rem; }
.mf-messages .alert { margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Encabezado de página
   -------------------------------------------------------------------------- */
.mf-page-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}
.mf-page-head h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.025em; }
.mf-page-head p { margin: 0.2rem 0 0; color: var(--mf-muted); }

/* --------------------------------------------------------------------------
   Billete: el único elemento expresivo (dashboard e inicio de sesión)
   -------------------------------------------------------------------------- */
/* El billete: tinta verde, guilloché fino y cifras como denominaciones */
.mf-note {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--mf-radius-lg);
    background-color: var(--mf-ink);
    color: #eaf4f2;
    padding: 1.5rem 1.6rem 1.35rem;
    display: flex; flex-direction: column; gap: .9rem;
}
.mf-note::before {
    /* Guilloché: ondas finas entrelazadas, como la trama de seguridad de un billete */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='0.8'%3E%3Cpath d='M0 60 Q30 20 60 60 T120 60 T180 60 T240 60'/%3E%3Cpath d='M0 60 Q30 100 60 60 T120 60 T180 60 T240 60'/%3E%3Cpath d='M0 45 Q30 5 60 45 T120 45 T180 45 T240 45'/%3E%3Cpath d='M0 75 Q30 115 60 75 T120 75 T180 75 T240 75'/%3E%3Cpath d='M0 30 Q30 -10 60 30 T120 30 T180 30 T240 30'/%3E%3Cpath d='M0 90 Q30 130 60 90 T120 90 T180 90 T240 90'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 120px;
    mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
    -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
}
.mf-note::after {
    /* Roseta: el sello circular de un billete, en la esquina */
    content: ""; position: absolute; z-index: -1; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(255,255,255,.07) 0 1px, transparent 1px 9px);
}

/* --------------------------------------------------------------------------
   Montos
   -------------------------------------------------------------------------- */
.mf-amount { font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.mf-amount.is-in { color: var(--mf-in); }
.mf-amount.is-out { color: var(--mf-out); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Utilidades de Bootstrap reinterpretadas
   -------------------------------------------------------------------------- */
/* "border-start border-4 border-X" pone 4px en los cuatro lados: se deja como franja
   izquierda fina que indica la naturaleza del dato, con el resto del borde neutro. */
.border-start.border-2, .border-start.border-3, .border-start.border-4, .border-start.border-5 {
    border-width: 1px !important; border-left-width: 3px !important;
}
.border-start.border-danger { border-color: var(--mf-line) !important; border-left-color: var(--mf-out) !important; }
.border-start.border-success { border-color: var(--mf-line) !important; border-left-color: var(--mf-in) !important; }
.border-start.border-warning { border-color: var(--mf-line) !important; border-left-color: var(--mf-warn) !important; }
.border-start.border-info { border-color: var(--mf-line) !important; border-left-color: var(--mf-info) !important; }
.border-start.border-primary { border-color: var(--mf-line) !important; border-left-color: var(--mf-ink) !important; }

/* Cabeceras de página heredadas (antes con degradados oscuros): panel plano */
.mf-flat-hero {
    background: var(--mf-surface) !important;
    color: var(--mf-text) !important;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius) !important;
}
.mf-flat-hero .text-white, .mf-flat-hero h1, .mf-flat-hero h2, .mf-flat-hero h3, .mf-flat-hero h4, .mf-flat-hero h5 { color: var(--mf-text) !important; }
.mf-flat-hero .text-white-50, .mf-flat-hero .opacity-75, .mf-flat-hero small { color: var(--mf-muted) !important; opacity: 1 !important; }
.mf-flat-hero .btn-light, .mf-flat-hero .btn-outline-light {
    --bs-btn-color: var(--mf-text); --bs-btn-bg: var(--mf-surface); --bs-btn-border-color: var(--mf-line);
    --bs-btn-hover-color: var(--mf-text); --bs-btn-hover-bg: var(--mf-paper); --bs-btn-hover-border-color: #c5d0cc;
}
.mf-flat-hero .bg-white { background: var(--mf-ink-soft) !important; }

.bg-gradient { background-image: none !important; }

/* Tarjetas pintadas por completo con un color: panel blanco + franja con el color del dato */
.card.bg-primary, .card.bg-success, .card.bg-danger, .card.bg-warning,
.card.bg-info, .card.bg-dark, .card.bg-secondary {
    background: var(--mf-surface) !important;
    color: var(--mf-text) !important;
}
.card.bg-primary { box-shadow: inset 3px 0 0 var(--mf-ink) !important; }
.card.bg-success { box-shadow: inset 3px 0 0 var(--mf-in) !important; }
.card.bg-danger { box-shadow: inset 3px 0 0 var(--mf-out) !important; }
.card.bg-warning { box-shadow: inset 3px 0 0 var(--mf-warn) !important; }
.card.bg-info { box-shadow: inset 3px 0 0 var(--mf-info) !important; }
.card.bg-dark, .card.bg-secondary { box-shadow: inset 3px 0 0 var(--mf-text) !important; }
.card[class*="bg-"].text-white, .card[class*="bg-"] .text-white,
.card[class*="bg-"].text-dark, .card[class*="bg-"] h1, .card[class*="bg-"] h2, .card[class*="bg-"] h3,
.card[class*="bg-"] h4, .card[class*="bg-"] h5, .card[class*="bg-"] h6 { color: var(--mf-text) !important; }
.card[class*="bg-"] .text-white-50, .card[class*="bg-"] .opacity-75 { color: var(--mf-muted) !important; opacity: 1 !important; }
.card.bg-light, .card.bg-white { box-shadow: none !important; }

/* Encabezado de página heredado (antes una caja con degradado): sin caja, como en el
   dashboard. El título manda; los botones quedan al lado o debajo. */
.mf-page-hero { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-bottom: 1.25rem !important; }
.mf-page-hero > .card-body { padding: 0 !important; }
.mf-page-hero h1, .mf-page-hero h2, .mf-page-hero .h3, .mf-page-hero .h2 { font-size: 1.6rem !important; letter-spacing: -0.025em; }
.mf-page-hero h1 > i:first-child, .mf-page-hero h2 > i:first-child, .mf-page-hero .h3 > i:first-child, .mf-page-hero .h2 > i:first-child { display: none; }

/* Iconos de títulos de sección: un solo tono, no un color por sección */
.card-header .fas, .card-header .far, .card-title > .fas, h5 > .fas:first-child, h6 > .fas:first-child {
    color: var(--mf-muted) !important;
}

.progress-bar-striped { background-image: none !important; }
.progress-bar.bg-info { background-color: var(--mf-ink) !important; }

/* Títulos de página: sin icono decorativo delante */
.mf-main h1 > .fas:first-child, .mf-main h2 > .fas:first-child { display: none; }

/* Deslizadores de Bootstrap (.form-range pinta su propio control, no usa accent-color) */
.form-range::-webkit-slider-thumb { background: var(--mf-ink); }
.form-range::-webkit-slider-thumb:active { background: var(--mf-ink-strong); }
.form-range::-moz-range-thumb { background: var(--mf-ink); }
.form-range::-webkit-slider-runnable-track { background: var(--mf-line); }
.form-range::-moz-range-track { background: var(--mf-line); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(14, 79, 74, 0.25); }

/* --------------------------------------------------------------------------
   Consejos y widget de mercado (Recomendaciones y Ahorro e inversiones)
   -------------------------------------------------------------------------- */
/* ---------- Consejos ---------- */
.tips-header, .market-header { background: var(--mf-surface) !important; border-bottom: 1px solid var(--mf-line-soft) !important; padding: 1rem 1.25rem .8rem; }
.tips-header h6, .market-header h6 { color: var(--mf-text) !important; font-weight: 650; font-size: 1rem; }
.tips-header h6 i, .market-header h6 i { display: none; }
.tips-subtitle, .market-subtitle { color: var(--mf-muted); font-size: .82rem; }
.tips-live { display: none; }
.tips-body { padding: .25rem 1.25rem; }
.tip-item { display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--mf-line-soft); }
.tip-item:last-child { border-bottom: 0; }
.tip-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; }
.tip-content { min-width: 0; }
.tip-tag { font-size: .75rem; font-weight: 600; }
.tip-title { font-size: .95rem; font-weight: 650; color: var(--mf-text); margin: .25rem 0 .2rem; line-height: 1.3; }
.tip-text { font-size: .875rem; color: var(--mf-muted); margin: 0; line-height: 1.5; max-width: 70ch; }
.tips-footer { background: var(--mf-paper); border-top: 1px solid var(--mf-line-soft); padding: .6rem; font-size: .85rem; }

/* ---------- Mercado ---------- */
.market-manage { color: var(--mf-muted); }
.market-manage:hover { color: var(--mf-ink); }
.market-body { padding: .25rem 1.25rem 1rem; }
.market-section-title { font-size: .8rem; font-weight: 600; color: var(--mf-muted); margin: .9rem 0 .3rem; display: flex; align-items: center; gap: 6px; }
.quote-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--mf-line-soft); }
.quote-row:last-child { border-bottom: 0; }
.quote-sym { font-weight: 650; color: var(--mf-text); font-size: .9rem; }
.quote-name { font-size: .78rem; color: var(--mf-muted); }
.quote-right { text-align: right; }
.quote-price { font-weight: 650; font-size: .9rem; color: var(--mf-text); }
.quote-chg { font-size: .78rem; font-weight: 600; }
.quote-chg.up { color: var(--mf-in); }
.quote-chg.down { color: var(--mf-out); }
.quote-chg.flat { color: var(--mf-muted); }
.news-item { display: block; padding: .55rem 0; border-bottom: 1px solid var(--mf-line-soft); text-decoration: none; }
.news-item:last-child { border-bottom: 0; }
.news-title { font-size: .85rem; color: var(--mf-text); line-height: 1.35; }
.news-item:hover .news-title { color: var(--mf-ink); text-decoration: underline; }
.news-src { font-size: .75rem; color: var(--mf-muted); }
.market-empty { font-size: .85rem; color: var(--mf-muted); padding: .4rem 0; }
.market-manage-link { font-size: .8rem; }