/*!
 * Facturit — identidad visual (colores y tipografía de facturit.es) sobre Bootstrap 5.3.
 * Se carga después del CSS del núcleo; solo sobrescribe variables y colores, no la estructura.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- paleta */
:root {
    --fi-violeta: #0F7C94;
    --fi-violeta-rgb: 15, 124, 148;
    --fi-violeta-hover: #0B6679;
    --fi-violeta-activo: #085063;
    --fi-violeta-suave: #E5F4F7;
    --fi-azul: #3183E2;
    --fi-azul-rgb: 49, 131, 226;
    --fi-marino: #0A2540;
    --fi-marino-rgb: 10, 37, 64;
    --fi-texto: #243B53;
    --fi-gris: #6B7A8C;
    --fi-gris-rgb: 107, 122, 140;
    --fi-gris-oscuro: #4A5A6C;
    --fi-fondo: #F4F8FA;
    --fi-fondo-rgb: 244, 248, 250;
    --fi-borde: #E5E9ED;
    --fi-verde: #32D296;
    --fi-verde-rgb: 50, 210, 150;
    --fi-naranja: #FFA255;
    --fi-naranja-rgb: 255, 162, 85;
    --fi-rojo: #FF4151;
    --fi-rojo-rgb: 255, 65, 81;
    --fi-degradado: linear-gradient(51deg, #14508F 0%, #0E7C95 55%, #16A88D 100%);

    /* variables de Bootstrap */
    --bs-primary: var(--fi-violeta);
    --bs-primary-rgb: var(--fi-violeta-rgb);
    --bs-secondary: var(--fi-gris);
    --bs-secondary-rgb: var(--fi-gris-rgb);
    --bs-success: var(--fi-verde);
    --bs-success-rgb: var(--fi-verde-rgb);
    --bs-info: var(--fi-azul);
    --bs-info-rgb: var(--fi-azul-rgb);
    --bs-warning: var(--fi-naranja);
    --bs-warning-rgb: var(--fi-naranja-rgb);
    --bs-danger: var(--fi-rojo);
    --bs-danger-rgb: var(--fi-rojo-rgb);
    --bs-dark: var(--fi-marino);
    --bs-dark-rgb: var(--fi-marino-rgb);
    --bs-light: var(--fi-fondo);
    --bs-light-rgb: var(--fi-fondo-rgb);

    --bs-primary-text-emphasis: #0A4A5A;
    --bs-primary-bg-subtle: var(--fi-violeta-suave);
    --bs-primary-border-subtle: #A9D7E2;
    --bs-success-text-emphasis: #0F6B48;
    --bs-success-bg-subtle: #E3F8F0;
    --bs-success-border-subtle: #A8EACF;
    --bs-info-text-emphasis: #174B87;
    --bs-info-bg-subtle: #E3EEFC;
    --bs-info-border-subtle: #ADCDF3;
    --bs-warning-text-emphasis: #8A4A10;
    --bs-warning-bg-subtle: #FFF1E4;
    --bs-warning-border-subtle: #FFD2AC;
    --bs-danger-text-emphasis: #9C1320;
    --bs-danger-bg-subtle: #FFE7E9;
    --bs-danger-border-subtle: #FFB3BA;

    --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-color: var(--fi-texto);
    --bs-body-color-rgb: 36, 59, 83;
    --bs-emphasis-color: var(--fi-marino);
    --bs-secondary-color: var(--fi-gris);
    --bs-heading-color: var(--fi-marino);
    --bs-link-color: var(--fi-violeta);
    --bs-link-color-rgb: var(--fi-violeta-rgb);
    --bs-link-hover-color: var(--fi-violeta-activo);
    --bs-link-hover-color-rgb: 8, 80, 99;
    --bs-border-color: var(--fi-borde);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-focus-ring-color: rgba(var(--fi-violeta-rgb), 0.25);
    --bs-tertiary-bg: var(--fi-fondo);
}

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- barra superior */
.navbar.bg-primary {
    background: var(--fi-degradado) !important;
    box-shadow: 0 2px 12px rgba(var(--fi-marino-rgb), 0.18);
}

.navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

/* logo de texto "Facturit" en blanco (el núcleo lo pinta a 30×30) */
.navbar-brand img[src*="logo-white"] {
    width: auto !important;
    height: 30px !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
    color: #fff;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--fi-borde);
    --bs-dropdown-border-radius: 0.75rem;
    --bs-dropdown-link-active-bg: var(--fi-violeta);
    --bs-dropdown-link-hover-bg: var(--fi-violeta-suave);
    --bs-dropdown-link-hover-color: var(--fi-marino);
    box-shadow: 0 10px 30px rgba(var(--fi-marino-rgb), 0.12);
}

/* ---------------------------------------------------------------- botones */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.5rem;
}

.btn-primary {
    --bs-btn-bg: var(--fi-violeta);
    --bs-btn-border-color: var(--fi-violeta);
    --bs-btn-hover-bg: var(--fi-violeta-hover);
    --bs-btn-hover-border-color: var(--fi-violeta-hover);
    --bs-btn-active-bg: var(--fi-violeta-activo);
    --bs-btn-active-border-color: var(--fi-violeta-activo);
    --bs-btn-disabled-bg: var(--fi-violeta);
    --bs-btn-disabled-border-color: var(--fi-violeta);
    --bs-btn-focus-shadow-rgb: var(--fi-violeta-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--fi-violeta);
    --bs-btn-border-color: var(--fi-violeta);
    --bs-btn-hover-bg: var(--fi-violeta);
    --bs-btn-hover-border-color: var(--fi-violeta);
    --bs-btn-active-bg: var(--fi-violeta-activo);
    --bs-btn-active-border-color: var(--fi-violeta-activo);
    --bs-btn-disabled-color: var(--fi-violeta);
    --bs-btn-disabled-border-color: var(--fi-violeta);
    --bs-btn-focus-shadow-rgb: var(--fi-violeta-rgb);
}

.btn-secondary {
    --bs-btn-bg: var(--fi-gris);
    --bs-btn-border-color: var(--fi-gris);
    --bs-btn-hover-bg: var(--fi-gris-oscuro);
    --bs-btn-hover-border-color: var(--fi-gris-oscuro);
    --bs-btn-active-bg: var(--fi-gris-oscuro);
    --bs-btn-active-border-color: var(--fi-gris-oscuro);
}

.btn-outline-secondary {
    --bs-btn-color: var(--fi-gris-oscuro);
    --bs-btn-border-color: #C9CDDB;
    --bs-btn-hover-bg: var(--fi-fondo);
    --bs-btn-hover-color: var(--fi-marino);
    --bs-btn-hover-border-color: #B4B9CC;
    --bs-btn-active-bg: #ECEEF6;
    --bs-btn-active-color: var(--fi-marino);
    --bs-btn-active-border-color: #B4B9CC;
}

.btn-success {
    --bs-btn-bg: var(--fi-verde);
    --bs-btn-border-color: var(--fi-verde);
    --bs-btn-hover-bg: #26B981;
    --bs-btn-hover-border-color: #26B981;
    --bs-btn-active-bg: #1FA170;
    --bs-btn-active-border-color: #1FA170;
    --bs-btn-disabled-bg: var(--fi-verde);
    --bs-btn-disabled-border-color: var(--fi-verde);
}

.btn-outline-success {
    --bs-btn-color: #1FA170;
    --bs-btn-border-color: var(--fi-verde);
    --bs-btn-hover-bg: var(--fi-verde);
    --bs-btn-hover-border-color: var(--fi-verde);
    --bs-btn-active-bg: #1FA170;
}

.btn-danger {
    --bs-btn-bg: var(--fi-rojo);
    --bs-btn-border-color: var(--fi-rojo);
    --bs-btn-hover-bg: #E8303F;
    --bs-btn-hover-border-color: #E8303F;
    --bs-btn-active-bg: #CC2533;
    --bs-btn-active-border-color: #CC2533;
}

.btn-outline-danger {
    --bs-btn-color: #E8303F;
    --bs-btn-border-color: var(--fi-rojo);
    --bs-btn-hover-bg: var(--fi-rojo);
    --bs-btn-hover-border-color: var(--fi-rojo);
    --bs-btn-active-bg: #CC2533;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fi-naranja);
    --bs-btn-border-color: var(--fi-naranja);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #F58D39;
    --bs-btn-hover-border-color: #F58D39;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #E57D28;
    --bs-btn-active-border-color: #E57D28;
}

.btn-outline-warning {
    --bs-btn-color: #D9761F;
    --bs-btn-border-color: var(--fi-naranja);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fi-naranja);
    --bs-btn-hover-border-color: var(--fi-naranja);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fi-azul);
    --bs-btn-border-color: var(--fi-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #236FC9;
    --bs-btn-hover-border-color: #236FC9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1C5EAD;
    --bs-btn-active-border-color: #1C5EAD;
}

.btn-outline-info {
    --bs-btn-color: var(--fi-azul);
    --bs-btn-border-color: var(--fi-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fi-azul);
    --bs-btn-hover-border-color: var(--fi-azul);
}

.btn-light {
    --bs-btn-bg: var(--fi-fondo);
    --bs-btn-border-color: var(--fi-borde);
    --bs-btn-hover-bg: #ECEEF6;
    --bs-btn-hover-border-color: #DCE0EA;
}

.btn-dark {
    --bs-btn-bg: var(--fi-marino);
    --bs-btn-border-color: var(--fi-marino);
    --bs-btn-hover-bg: #16385C;
    --bs-btn-hover-border-color: #16385C;
}

.btn-link {
    --bs-btn-color: var(--fi-violeta);
    --bs-btn-hover-color: var(--fi-violeta-activo);
}

/* ---------------------------------------------------------------- formularios */
.form-control:focus,
.form-select:focus {
    border-color: #7CC3D3;
    box-shadow: 0 0 0 0.25rem rgba(var(--fi-violeta-rgb), 0.18);
}

.form-check-input:checked {
    background-color: var(--fi-violeta);
    border-color: var(--fi-violeta);
}

.form-check-input:focus {
    border-color: #7CC3D3;
    box-shadow: 0 0 0 0.25rem rgba(var(--fi-violeta-rgb), 0.18);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237CC3D3'/%3e%3c/svg%3e");
}

.input-group-text {
    background-color: var(--fi-fondo);
    color: var(--fi-gris-oscuro);
}

/* ---------------------------------------------------------------- navegación, paginación, listas */
.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--fi-violeta);
    --bs-nav-tabs-link-active-border-color: var(--fi-borde) var(--fi-borde) #fff;
}

.nav-link {
    --bs-nav-link-color: var(--fi-violeta);
    --bs-nav-link-hover-color: var(--fi-violeta-activo);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--fi-violeta);
}

.pagination {
    --bs-pagination-color: var(--fi-violeta);
    --bs-pagination-hover-color: var(--fi-violeta-activo);
    --bs-pagination-hover-bg: var(--fi-violeta-suave);
    --bs-pagination-focus-color: var(--fi-violeta-activo);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--fi-violeta-rgb), 0.18);
    --bs-pagination-active-bg: var(--fi-violeta);
    --bs-pagination-active-border-color: var(--fi-violeta);
}

.list-group {
    --bs-list-group-active-bg: var(--fi-violeta);
    --bs-list-group-active-border-color: var(--fi-violeta);
    --bs-list-group-action-hover-bg: var(--fi-violeta-suave);
}

.progress {
    --bs-progress-bar-bg: var(--fi-violeta);
}

/* ---------------------------------------------------------------- tarjetas, tablas, cabeceras */
.card {
    --bs-card-border-color: var(--fi-borde);
    --bs-card-border-radius: 0.75rem;
    --bs-card-cap-bg: var(--fi-fondo);
}

.shadow-sm {
    box-shadow: 0 2px 10px rgba(var(--fi-marino-rgb), 0.06) !important;
}

.table {
    --bs-table-hover-bg: rgba(var(--fi-violeta-rgb), 0.05);
    --bs-table-striped-bg: rgba(var(--fi-marino-rgb), 0.025);
}

.table > thead th,
.table th {
    color: var(--fi-marino);
    font-weight: 700;
}

.table-success {
    --bs-table-bg: #E3F8F0;
    --bs-table-border-color: #C6EFDF;
    --bs-table-hover-bg: #D3F2E6;
}

.table-danger {
    --bs-table-bg: #FFE7E9;
    --bs-table-border-color: #FFCDD2;
    --bs-table-hover-bg: #FFD7DB;
}

.table-warning {
    --bs-table-bg: #FFF1E4;
    --bs-table-border-color: #FFDDBF;
    --bs-table-hover-bg: #FFE6CF;
    background-color: #FFF1E4;
}

.table-info {
    --bs-table-bg: #E3EEFC;
    --bs-table-border-color: #C4DAF7;
    --bs-table-hover-bg: #D3E4FA;
}

/* cabecera gris claro de listados y fichas */
.bg-light {
    background-color: var(--fi-fondo) !important;
}

/* barra de carga (pace) */
.pace .pace-progress {
    background: #fff;
    height: 3px;
}

/* ---------------------------------------------------------------- acceso (login) */
body.fi-login {
    background: var(--fi-degradado) fixed;
    min-height: 100vh;
}

body.fi-login .card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(var(--fi-marino-rgb), 0.35);
    overflow: hidden;
}

body.fi-login .card-img-top[src*="horizontal-logo"] {
    width: auto;
    max-width: 220px;
    display: block;
    margin: 2rem auto 0.5rem;
}

body.fi-login .btn-lg {
    border-radius: 500px;
}

body.fi-login .card-footer {
    background: var(--fi-fondo);
    color: var(--fi-gris-oscuro);
    font-size: 0.9rem;
}

/* ------------------------------------------------------- colores estacionales
 * facturit-estacion.js marca <html data-fi-paleta="..."> con la paleta elegida (la del tema del día si están
 * activados los colores estacionales, o el color fijo del panel de control). Sin ese atributo se mantiene la
 * paleta base (océano, teal).
 * Se redefinen solo las variables de color principal; el resto de la interfaz las hereda.
 */
:root[data-fi-paleta="primavera"] {
    --fi-violeta: #2F8F4E;
    --fi-violeta-rgb: 47, 143, 78;
    --fi-violeta-hover: #257A41;
    --fi-violeta-activo: #1C6032;
    --fi-violeta-suave: #E8F5EC;
    --bs-primary-border-subtle: #B3DDC1;
    --fi-degradado: linear-gradient(51deg, #1F6B4A 0%, #2F8F4E 55%, #6BAF52 100%);
}

:root[data-fi-paleta="verano"] {
    --fi-violeta: #E07B00;
    --fi-violeta-rgb: 224, 123, 0;
    --fi-violeta-hover: #C46A00;
    --fi-violeta-activo: #A35800;
    --fi-violeta-suave: #FFF1DB;
    --bs-primary-border-subtle: #FAD39A;
    --fi-degradado: linear-gradient(51deg, #E8590C 0%, #F08A00 50%, #FFC107 100%);
}

:root[data-fi-paleta="otono"] {
    --fi-violeta: #7C2D12;
    --fi-violeta-rgb: 124, 45, 18;
    --fi-violeta-hover: #651F0C;
    --fi-violeta-activo: #4E1708;
    --fi-violeta-suave: #F6E7E1;
    --bs-primary-border-subtle: #D9B3A5;
    --fi-degradado: linear-gradient(51deg, #3E1408 0%, #7C2D12 55%, #A5521F 100%);
}

:root[data-fi-paleta="invierno"] {
    --fi-violeta: #2F6DB5;
    --fi-violeta-rgb: 47, 109, 181;
    --fi-violeta-hover: #265B99;
    --fi-violeta-activo: #1D4A7D;
    --fi-violeta-suave: #E7EFF9;
    --bs-primary-border-subtle: #B5CCE8;
    --fi-degradado: linear-gradient(51deg, #14386B 0%, #2F6DB5 55%, #4B93C4 100%);
}

/* festividades: sustituyen a la estación durante su día (ver FESTIVIDADES en facturit-estacion.js) */
:root[data-fi-paleta="nochevieja"] {
    --fi-violeta: #2B2F3A;
    --fi-violeta-rgb: 43, 47, 58;
    --fi-violeta-hover: #1F232C;
    --fi-violeta-activo: #14171D;
    --fi-violeta-suave: #ECEDEF;
    --bs-primary-border-subtle: #C3C6CC;
    --fi-degradado: linear-gradient(51deg, #0B0D12 0%, #2B2F3A 55%, #C9A227 100%);
}

:root[data-fi-paleta="sanvalentin"] {
    --fi-violeta: #C2185B;
    --fi-violeta-rgb: 194, 24, 91;
    --fi-violeta-hover: #A31449;
    --fi-violeta-activo: #84103B;
    --fi-violeta-suave: #FCE4EE;
    --bs-primary-border-subtle: #EDB0CA;
    --fi-degradado: linear-gradient(51deg, #8E1244 0%, #C2185B 55%, #F06292 100%);
}

:root[data-fi-paleta="santjordi"] {
    --fi-violeta: #C8102E;
    --fi-violeta-rgb: 200, 16, 46;
    --fi-violeta-hover: #A80D26;
    --fi-violeta-activo: #880A1F;
    --fi-violeta-suave: #FCE6EA;
    --bs-primary-border-subtle: #EDB0BB;
    --fi-degradado: linear-gradient(51deg, #9B0F1F 0%, #C8102E 55%, #F2B705 100%);
}

/* Barça: azul a la izquierda y grana a la derecha, unidos por un borde apenas difuminado en el centro (solo como color fijo) */
:root[data-fi-paleta="barca"] {
    --fi-violeta: #004D98;
    --fi-violeta-rgb: 0, 77, 152;
    --fi-violeta-hover: #003F7D;
    --fi-violeta-activo: #003162;
    --fi-violeta-suave: #E1ECF7;
    --bs-primary-border-subtle: #A6C3E3;
    --fi-degradado: linear-gradient(90deg, #004D98 0%, #004D98 47%, #A50044 53%, #A50044 100%);
}

:root[data-fi-paleta="santjoan"] {
    --fi-violeta: #C2410C;
    --fi-violeta-rgb: 194, 65, 12;
    --fi-violeta-hover: #A5360A;
    --fi-violeta-activo: #862C08;
    --fi-violeta-suave: #FDEDE4;
    --bs-primary-border-subtle: #F0BFA3;
    --fi-degradado: linear-gradient(51deg, #1B2A4A 0%, #C2410C 55%, #FFB000 100%);
}

:root[data-fi-paleta="halloween"] {
    --fi-violeta: #6A2C91;
    --fi-violeta-rgb: 106, 44, 145;
    --fi-violeta-hover: #571F78;
    --fi-violeta-activo: #431860;
    --fi-violeta-suave: #F1E7F7;
    --bs-primary-border-subtle: #D4BCE3;
    --fi-degradado: linear-gradient(51deg, #1B1325 0%, #6A2C91 55%, #E8590C 100%);
}

:root[data-fi-paleta="navidad"] {
    --fi-violeta: #B3202A;
    --fi-violeta-rgb: 179, 32, 42;
    --fi-violeta-hover: #961A23;
    --fi-violeta-activo: #78141B;
    --fi-violeta-suave: #FBE8E9;
    --bs-primary-border-subtle: #E6B0B4;
    --fi-degradado: linear-gradient(51deg, #7A1018 0%, #B3202A 55%, #2E7D4F 100%);
}

/* ------------------------------------------------------ decoración estacional
 * Capa creada por facturit-estacion.js. Se muestra una sola vez al entrar (cada partícula hace una única pasada y
 * la capa se elimina al terminar). Sin eventos de ratón y por debajo del menú (1030) y los modales (1055).
 */
.fi-decoracion {
    position: fixed;
    inset: 0;
    z-index: 1020;
    overflow: hidden;
    pointer-events: none;
}

.fi-particula {
    --fi-op: 0.55;
    position: absolute;
    top: -40px;
    line-height: 1;
    opacity: 0;
    user-select: none;
    will-change: transform, opacity;
    animation-name: fi-caida;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes fi-caida {
    0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
    6%   { opacity: var(--fi-op); }
    50%  { transform: translate3d(var(--fi-dx, 30px), 55vh, 0) rotate(calc(var(--fi-giro, 360deg) / 2)); }
    92%  { opacity: var(--fi-op); }
    100% { transform: translate3d(calc(var(--fi-dx, 30px) * -0.5), 108vh, 0) rotate(var(--fi-giro, 360deg)); opacity: 0; }
}

.fi-decoracion-invierno .fi-particula,
.fi-decoracion-navidad .fi-particula {
    --fi-op: 0.7;
    color: #8DB8E8;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

.fi-decoracion-primavera .fi-particula {
    --fi-op: 0.6;
}

/* adorno de la esquina: aparece, se balancea (o gira, el sol) unos segundos y se desvanece */
.fi-sol,
.fi-esquina {
    position: absolute;
    right: 18px;
    bottom: 14px;
    line-height: 1;
    opacity: 0;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.fi-sol {
    --fi-op: 0.35;
    font-size: 54px;
    animation-name: fi-sol-vida;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
}

.fi-esquina {
    --fi-op: 0.45;
    font-size: 48px;
    animation-name: fi-esquina-vida;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
}

@keyframes fi-esquina-vida {
    0%   { transform: rotate(-6deg) translateY(0); opacity: 0; }
    12%  { opacity: var(--fi-op); }
    30%  { transform: rotate(6deg) translateY(-6px); }
    55%  { transform: rotate(-6deg) translateY(0); }
    80%  { transform: rotate(6deg) translateY(-6px); opacity: var(--fi-op); }
    100% { transform: rotate(-6deg) translateY(0); opacity: 0; }
}

@keyframes fi-sol-vida {
    0%   { transform: rotate(0deg); opacity: 0; }
    12%  { opacity: var(--fi-op); }
    80%  { opacity: var(--fi-op); }
    100% { transform: rotate(180deg); opacity: 0; }
}

/* partículas que suben (corazones, chispas de hoguera) */
.fi-particula.fi-sube {
    top: auto;
    bottom: -40px;
    animation-name: fi-subida;
}

@keyframes fi-subida {
    0%   { transform: translate3d(0, 5vh, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: var(--fi-op); }
    50%  { transform: translate3d(var(--fi-dx, 30px), -50vh, 0) rotate(calc(var(--fi-giro, 360deg) / 4)); }
    90%  { opacity: var(--fi-op); }
    100% { transform: translate3d(calc(var(--fi-dx, 30px) * -0.5), -108vh, 0) rotate(calc(var(--fi-giro, 360deg) / 2)); opacity: 0; }
}

@media print {
    .fi-decoracion {
        display: none !important;
    }
}

/* ------------------------------------------------------ susto de Halloween
 * Cara a pantalla completa unos segundos (ver «Susto de Halloween» en facturit-estacion.js).
 */
.fi-susto {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 92vh;
    cursor: pointer;
    animation: fi-susto-aparece 2.6s ease-out both;
}

@keyframes fi-susto-aparece {
    0%   { opacity: 0; background-size: auto 25vh; }
    8%   { opacity: 1; background-size: auto 100vh; }
    14%  { background-size: auto 92vh; }
    20%  { background-position: 48% 51%; }
    26%  { background-position: 52% 49%; }
    32%  { background-position: 49% 52%; }
    38%  { background-position: 51% 48%; }
    44%  { background-position: 50% 50%; }
    80%  { opacity: 1; background-size: auto 96vh; }
    100% { opacity: 0; background-size: auto 100vh; }
}

@media print {
    .fi-susto {
        display: none !important;
    }
}