html{
  scroll-behavior: smooth;
}
.global-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows:
    auto
    /*header*/
    1fr
    /*body*/
    auto;
  /*footer*/
}

/* *************************************************** */
/*      PEQUEÑAS CORRECCIONES A CSS DE BOOTSTRAP       */
/* *************************************************** */
/* pequeña corrección para color de svgs */
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

/* NAVBAR */
.bd-navbar {
  padding: .65rem 0;
}

/* aparición alert */
.alert-slide-in {
  animation: slide-in 0.5s forwards;
}

.alert-slide-out {
  animation: slide-out 0.5s forwards;
}

.alert-fade-out {
  animation: fade-out 0.5s ease forwards;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


/*====== INDEX DASHBOARD =======*/
/* Tarjeta de transacción mobile - hover sutil */
/* .bg-body-secondary.rounded-3.p-3:hover {
    background-color: rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.15s ease;
} */

/* Badge auto-generado */
.badge.bg-body-secondary {
    border: 1px solid rgba(0,0,0,0.08);
}

/* Dot de categoría alineado */
.rounded-circle.me-1 {
    vertical-align: middle;
}

/* Stats cards en mobile más compactas */
@media (max-width: 767.98px) {
    .fs-5 {
        font-size: 1.1rem !important;
    }
}

/* Tabla sin bordes laterales */
.table th:first-child, .table td:first-child { padding-left: 1rem; }
.table th:last-child,  .table td:last-child  { padding-right: 1rem; }


/* ══════════════════════════════════════════════════════════════════════ */
/*  Flatpickr × Bootstrap theme                                          */
/* ══════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    color: var(--bs-body-color);
}
.flatpickr-calendar.arrowTop:before    { border-bottom-color: var(--bs-border-color); }
.flatpickr-calendar.arrowTop:after     { border-bottom-color: var(--bs-body-bg); }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--bs-border-color); }
.flatpickr-calendar.arrowBottom:after  { border-top-color: var(--bs-body-bg); }

/* Cabecera mes/año */
.flatpickr-months { background: var(--bs-secondary-bg); border-radius: .375rem .375rem 0 0; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent;
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--bs-body-color); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--bs-primary); }

/* Fila de días de la semana */
.flatpickr-weekdays    { background: var(--bs-secondary-bg); }
span.flatpickr-weekday { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* Días */
.flatpickr-day             { color: var(--bs-body-color); border-color: transparent; }
.flatpickr-day:hover,
.flatpickr-day:focus       { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.flatpickr-day.today       { border-color: var(--bs-primary); }
.flatpickr-day.today:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay   { color: var(--bs-secondary-color); opacity: .5; }

/* Spinners numéricos (año) */
.numInputWrapper:hover { background: var(--bs-tertiary-bg); }
.numInputWrapper span  { border-color: var(--bs-border-color); }
.numInputWrapper span.arrowUp:after   { border-bottom-color: var(--bs-body-color); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--bs-body-color); }

/* Input visible (altInput) con apariencia Bootstrap */
input.flatpickr-input.form-control[readonly] {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}