body {
    background-color: skyblue;
}

/* ── Color picker (swatches) ──────────────────────────────────────────────── */
.color-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.color-picker-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background-color: var(--swatch, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: box-shadow .12s ease;
}

.color-picker-swatch:hover {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-secondary-color);
}

.color-picker-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--swatch);
}

.color-picker-custom {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-style: dashed;
}

/* Destino del ancla de paginación: deja hueco para el navbar sticky */
#table_transactions {
    scroll-margin-top: 90px;
}

/* ── Tour de onboarding (driver.js) ───────────────────────────────────────── */
/* Adapta el popover al tema activo (light/dark) usando variables de Bootstrap.
   La clase .econome-tour la añade tour_controller.js vía popoverClass y da la
   especificidad necesaria para ganar al CSS propio de driver.js (que se carga
   después de este archivo en el importmap). */
.econome-tour.driver-popover {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.econome-tour .driver-popover-title {
    color: var(--bs-body-color);
}

.econome-tour .driver-popover-description,
.econome-tour .driver-popover-progress-text {
    color: var(--bs-secondary-color);
}

.econome-tour .driver-popover-close-btn {
    color: var(--bs-secondary-color);
}

.econome-tour .driver-popover-arrow-side-top    { border-top-color: var(--bs-body-bg); }
.econome-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--bs-body-bg); }
.econome-tour .driver-popover-arrow-side-left   { border-left-color: var(--bs-body-bg); }
.econome-tour .driver-popover-arrow-side-right  { border-right-color: var(--bs-body-bg); }

.econome-tour .driver-popover-navigation-btns button {
    background-color: var(--bs-primary);
    color: #fff;
    border: none;
    text-shadow: none;
    border-radius: var(--bs-border-radius-sm);
    padding: .3rem .8rem;
}

.econome-tour .driver-popover-navigation-btns button:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 85%, #000);
}

.econome-tour .driver-popover-navigation-btns button:disabled {
    opacity: .5;
}

/* ── Flatpickr adaptado al tema activo (variables Bootstrap) ──────────────── */
/* El CSS de flatpickr trae colores claros fijos; aquí se sustituyen por
   variables de Bootstrap para que el calendario respete el modo claro/oscuro. */
.flatpickr-calendar {
    /* Tono atenuado (sólido, sin alpha) para la selección en días de meses
       adyacentes. Sólido a propósito: con transparencia, los solapes del
       conector de rango se oscurecerían. */
    --fp-selected: color-mix(in srgb, var(--bs-primary) 72%, #fff);

    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
}

/* Flecha del popover */
.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 y flechas de navegación */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
/* El select del mes va transparente (como flatpickr); solo las opciones
   desplegadas necesitan fondo propio */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--bs-secondary-bg);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--bs-secondary-color);
    fill: var(--bs-secondary-color);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--bs-primary);
}

span.flatpickr-weekday { color: var(--bs-secondary-color); }

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

/* Selección y extremos del rango (incluye días de meses adyacentes, cuyos
   selectores originales de flatpickr son más específicos) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* En días de meses adyacentes la selección va en el tono atenuado */
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--fp-selected);
    border-color: var(--fp-selected);
    color: #fff;
}

/* Días intermedios del rango (flatpickr rellena huecos con box-shadow).
   Los combos con prevMonthDay/nextMonthDay/today son necesarios para ganar
   en especificidad a las reglas originales. */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
    box-shadow: -5px 0 0 var(--bs-secondary-bg), 5px 0 0 var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    color: var(--bs-tertiary-color);
}
/* Extremos del rango en media píldora (lado interior plano), reforzando los
   días de meses adyacentes para que ninguna regla original gane por
   especificidad y deje el círculo completo (causa de la costura). */
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay {
    border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    border-radius: 0 50px 50px 0;
}
/* Día único (inicio = fin): círculo completo */
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
    border-radius: 50px;
}

/* Conector entre dos extremos contiguos: mismo color exacto que los extremos,
   de modo que el solape (que existe por diseño de flatpickr) sea invisible. */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--bs-primary);
}
/* El conector se dibuja solapado sobre el día de inicio: si ese día es de un
   mes adyacente, debe llevar su mismo tono atenuado para no crear costura. */
.flatpickr-day.startRange.prevMonthDay + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.nextMonthDay + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--fp-selected);
}

/* Flechas del input numérico del año */
.numInputWrapper span.arrowUp:after   { border-bottom-color: var(--bs-secondary-color); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--bs-secondary-color); }
.numInputWrapper:hover { background: transparent; }

/* ── Sugerencia de categoría ──────────────────────────────────────────────── */
/* El contenedor del hint no ocupa espacio cuando no hay sugerencia. */
[data-category-suggest-target="hint"]:empty {
    display: none;
}

/* Badge de la categoría sugerida: informativo, borde verde, no clicable. */
.cat-suggest-badge {
    border: 1px solid var(--bs-success);
    border-radius: 50rem;
    padding: .05rem .5rem;
    font-size: .8125rem;
    color: var(--bs-body-color);
}

/* Resaltado breve del select al autorrellenarse: refuerza que el campo cambió
   solo; se aplica una vez y se desvanece. */
@keyframes catAutofillFlash {
    from { box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .35); }
    to   { box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), 0); }
}
.cat-autofill-flash {
    animation: catAutofillFlash .75s ease-out;
    border-color: var(--bs-success);
}

/* ── Alta rápida de movimientos ───────────────────────────────────────────── */
/* Más ancho que los 500px por defecto de Bootstrap, para que el formulario
   respire igual que en la página completa de crear movimiento. Por debajo de
   este ancho manda el margen del propio .modal-dialog, así que no hace falta
   media query. */
.tx-quick-add-dialog {
    max-width: 630px;
}

/* ── Botón discreto (aspecto de enlace, comportamiento de botón) ──────────── */
/* Para acciones secundarias que no deben competir con las primarias: «Cerrar»,
   «Más opciones». En reposo es texto atenuado; al pasar por encima aparece un
   fondo suave y el texto sube a color pleno.

   El color de reposo lo pone esta clase y NO `text-muted`: esa utilidad lleva
   `!important` y dejaría el hover sin efecto, que es justo lo que pasaba antes
   (a simple vista el botón no respondía al ratón). Al cargarse este archivo
   después de Bootstrap, basta con la misma especificidad para ganarle.

   La transición se anula sola con `prefers-reduced-motion`: Bootstrap ya lo hace
   de forma global para cualquier transición. */
.btn-quiet {
    color: var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

/* Un punto más de fondo al pulsar, para que el clic se note */
.btn-quiet:active {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

/* Con el menú desplegado, el disparador se queda «encendido» */
.btn-quiet.show {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

/* Tecla rápida anunciada dentro del propio botón que dispara. Va sobre botones
   sólidos (btn-primary), así que se tiñe con negro translúcido y se perfila con
   blanco translúcido: así funciona igual en claro y en oscuro sin declarar
   colores por tema. Sobrescribe el <kbd> de Bootstrap, que viene con el contraste
   invertido. */
.btn-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Altura fija y line-height 1: así el centrado lo decide el flex y no la
       métrica de la fuente, que es lo que descuadraba el glifo en Chrome. */
    height: 1.15rem;
    min-width: 1.15rem;
    /* margin-left: .45rem; */
    padding: 0 .3rem;
    font-size: .7rem;
    line-height: 1;
    /* El <kbd> es inline dentro del texto del botón: sin esto se apoya en la
       línea base y queda bajo respecto a la etiqueta. */
    vertical-align: middle;
    color: inherit;
    background-color: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .25rem;
}

/* El icono va a 1em del propio distintivo y hereda su color. Es SVG y no el
   carácter ↵ (U+21B5) a propósito: Chrome lo resuelve con una fuente de
   respaldo cuya línea base no cuadra con la del resto, y se ve descolgado. */
.btn-kbd svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Hueco mientras se trae el formulario de edición. La altura aproxima la del
   formulario ya montado para que el modal no encoja al abrirse y vuelva a
   crecer al llegar el contenido. */
.tx-form-loading {
    min-height: 21rem;
}

/* Franja de confirmación del alta encadenada. Altura fija de una línea: se
   repinta en cada guardado en lugar de crecer con la tanda. */
.tx-added-bar {
    background-color: rgba(var(--bs-success-rgb), .12);
    border: 1px solid rgba(var(--bs-success-rgb), .35);
    color: var(--bs-body-color);
}

.tx-added-bar .fa-circle-check {
    color: var(--bs-success);
}

/* El texto cambia poco entre un alta y la siguiente, así que lo que hace de
   acuse de recibo es el pulso, no el contenido. */
@keyframes txAddedPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .5); }
    35%  { transform: scale(1.02); box-shadow: 0 0 0 .35rem rgba(var(--bs-success-rgb), .25); }
    100% { transform: scale(1);    box-shadow: 0 0 0 .5rem rgba(var(--bs-success-rgb), 0); }
}

.tx-added-pulse {
    animation: txAddedPulse .6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .tx-added-pulse { animation: none; }
}

/* ── Ayuda plegable ───────────────────────────────────────────────────────── */
/* El caret apunta hacia abajo con el panel abierto y hacia la derecha cerrado.
   Bootstrap pone y quita la clase .collapsed en el disparador, así que el giro
   no necesita JS propio. */
.help-toggle .fa-caret-down {
    transition: transform .15s ease;
}

.help-toggle.collapsed .fa-caret-down {
    transform: rotate(-90deg);
}