/* ==========================================================================
   ProQuality Intranet & CRM (Sistema de Diseño e Identidad Visual - Estilo Linkfarma + IMH Farma)
   ========================================================================== */

:root {
    /* Paleta Corporativa Principal IMH Farma */
    --color-dark-1: #281937;
    --color-dark-2: #1e122b;
    --color-violet-primary: #683477;
    --color-purple-accent: #a97ab0;
    --color-purple-light: #ba9cc2;
    --color-slate-grey: #5c546c;
    
    /* Neutros y Fondos */
    --color-bg-app: #f4f6f9;
    --color-bg-card: #ffffff;
    --color-border: #e2e8f0;
    --color-gold: #e0db7c;
    --color-gold-hover: #d4ce5e;

    /* Sombras y Radios */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-2xs: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-sm: 0 4px 14px rgba(40, 25, 55, 0.08);
    --shadow-md: 0 8px 24px rgba(40, 25, 55, 0.12);

    /* Fuentes */
    --font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-app);
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Los textos de ejemplo de los campos (placeholder) se veían casi tan oscuros como un dato ya
   escrito, y más de uno los tomaba por tal. En toda la plataforma, difuminados: gris claro y en
   cursiva, para que no se confundan nunca con un valor. Petición del usuario, 20/09/2026. */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: #b4b8c4;
    opacity: 1;
    font-style: italic;
    font-weight: 400;
}

a {
    color: var(--color-violet-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-purple-accent);
}

/* Sidebar Lateral (Estilo Linkfarma Dark Navy/Purple) */
.sidebar {
    background: linear-gradient(180deg, #281937 0%, #170d22 100%);
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(24, 15, 33, 0.35);
    z-index: 100;
}

@media (min-width: 768px) {
    .sidebar { min-height: 100vh; }
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1055 !important;
        overflow-y: auto !important;
        background: linear-gradient(180deg, #281937 0%, #170d22 100%) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
        transition: transform 0.3s ease !important;
    }
}

.sidebar a.nav-link {
    color: #cbd5e1;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 3px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 0.91rem;
    text-decoration: none;
}

.sidebar a.nav-link i {
    width: 22px;
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.sidebar a.nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(3px);
}

.sidebar a.nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(224, 219, 124, 0.2) 0%, rgba(104, 52, 119, 0.3) 100%);
    border-left: 3px solid var(--color-gold);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.sidebar .arrow-icon {
    transition: transform 0.2s ease-in-out;
}

.sidebar .nav-link:not(.collapsed) .arrow-icon {
    transform: rotate(180deg);
}

.sidebar .collapse ul {
    border-left: 1px dashed rgba(255, 255, 255, 0.15) !important;
    margin-left: 18px;
    padding-left: 6px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.sidebar .collapse .nav-link {
    font-size: 0.85rem;
    padding: 6px 12px;
    color: #94a3b8;
    background: transparent;
    box-shadow: none;
    border-left: none;
}

.sidebar .collapse .nav-link:hover {
    color: var(--color-gold);
}

.sidebar .collapse .nav-link.active {
    color: var(--color-gold) !important;
    background-color: transparent !important;
    font-weight: 700;
    border-left: none;
}

/* Topbar Header (Glassmorphism estilo Linkfarma) */
.navbar-custom {
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 10px 20px;
}

.user-avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #683477 0%, #281937 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(104, 52, 119, 0.25);
}

/* Tarjetas KPI y Paneles */
.card-kpi {
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.kpi-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--color-dark-1);
    line-height: 1.1;
}

/* ==========================================================================
   Spinner Global de Carga de Páginas (Loading Overlay)
   ========================================================================== */
#global-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 9, 28, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    visibility: visible;
}

#global-page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content-box {
    background: rgba(40, 25, 55, 0.95);
    border: 1px solid rgba(224, 219, 124, 0.3);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    color: #ffffff;
}

.spinner-custom-ring {
    position: relative;
    width: 56px;
    height: 56px;
}

.spinner-custom-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 46px;
    height: 46px;
    margin: 5px;
    border: 4px solid #e0db7c;
    border-radius: 50%;
    animation: spinner-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #e0db7c transparent transparent transparent;
}

.spinner-custom-ring div:nth-child(1) { animation-delay: -0.45s; }
.spinner-custom-ring div:nth-child(2) { animation-delay: -0.3s; }
.spinner-custom-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes spinner-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.loader-subtext {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.2rem;
}

.kpi-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botones Personalizados */
.btn-outline-purple {
    color: var(--color-violet-primary);
    border-color: var(--color-purple-light);
    background: #ffffff;
}

.btn-outline-purple:hover {
    background: var(--color-violet-primary);
    color: #ffffff;
    border-color: var(--color-violet-primary);
}

/* ==========================================================================
   Estilos Avanzados para el Dashboard Principal (4 Secciones WOW)
   ========================================================================== */
.dashboard-module-header {
    margin-top: 2.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.75rem;
}

.dashboard-module-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--color-dark-1);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
}

.filter-bar-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-2xs);
}

.kpi-card-hero {
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(40, 25, 55, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.kpi-card-hero:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(40, 25, 55, 0.25);
}

.kpi-card-hero-purple-1 { background: linear-gradient(135deg, #1b0e27 0%, #301744 100%); }
.kpi-card-hero-purple-2 { background: linear-gradient(135deg, #4d2358 0%, #683477 100%); }
.kpi-card-hero-purple-3 { background: linear-gradient(135deg, #7c4b8b 0%, #9b63ab 100%); }
.kpi-card-hero-gold { background: linear-gradient(135deg, #c8c049 0%, #e0db7c 100%); color: #1e122b !important; }

/* `.kpi-label` y `.kpi-value` nacieron para las tarjetas BLANCAS y llevan colores oscuros
   (`--color-dark-1` y `#64748b`). Dentro de una hero de fondo oscuro el número quedaba
   prácticamente invisible: sobre `kpi-card-hero-purple-1`, morado casi negro, no se leía.
   `resumen.php` lo esquivó en su día evitando las dos clases y poniendo utilidades de Bootstrap a
   mano en cada tarjeta; eso deja el problema en pie para la siguiente pantalla que las use, que es
   justo lo que pasó en los resultados de encuestas. Se corrige en la fuente.
   La dorada NO se toca: ahí el texto oscuro es el que contrasta. */
.kpi-card-hero .kpi-value { color: #ffffff; }
.kpi-card-hero .kpi-label { color: rgba(255, 255, 255, 0.78); }
.kpi-card-hero-gold .kpi-value { color: #1e122b; }
.kpi-card-hero-gold .kpi-label { color: rgba(30, 18, 43, 0.75); }

/* ==========================================================================
   Estado de CARGA de un dato
   --------------------------------------------------------------------------
   Una pantalla con selector de período reconsulta sin recargar, y mientras
   llega la respuesta seguía enseñando la cifra ANTERIOR. Es el peor estado
   posible: no parece que esté cargando, parece que ya ha contestado, y quien
   mira anota un número que corresponde a otras fechas.

   Dos piezas: un giro que sustituye al valor, y una capa que cubre una gráfica
   sin desmontarla.
   ========================================================================== */
.valor-cargando {
    display: inline-block;
    width: 1.1rem; height: 1.1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.55;
    vertical-align: -0.15em;
    animation: pq-giro 0.75s linear infinite;
}

@keyframes pq-giro { to { transform: rotate(360deg); } }

.capa-cargando {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    z-index: 2;
}

.capa-cargando.activa { display: flex; }

.capa-cargando .valor-cargando {
    width: 2rem; height: 2rem;
    border-width: 3px;
    color: var(--color-violet-primary, #683477);
    opacity: 1;
}

.kpi-mini-box {
    border-radius: 14px;
    padding: 1.1rem 0.8rem;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-mini-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.kpi-mini-box-yellow { background: #e0db7c; color: #1e122b !important; }
.kpi-mini-box-purple-1 { background: #886297; }
.kpi-mini-box-purple-2 { background: #55445d; }
.kpi-mini-box-purple-3 { background: #a582b2; }
.kpi-mini-box-dark-1 { background: #312838; }
.kpi-mini-box-dark-2 { background: #1e1428; }

.seller-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.table-ranking tbody tr {
    transition: background-color 0.2s ease;
}

.table-ranking tbody tr:hover {
    background-color: rgba(104, 52, 119, 0.04);
}

.bg-purple-primary {
    background-color: var(--color-violet-primary) !important;
    color: #ffffff !important;
}

.text-gold {
    color: var(--color-gold) !important;
}

.text-purple-accent {
    color: var(--color-purple-accent);
}

.badge-yellow {
    background-color: #e0db7c;
    color: #3b3700;
}

/* Dark Mode Tokens */
[data-lf-theme="dark"] {
    --color-bg-app: #0f172a;
    --color-bg-card: #1e293b;
    --color-border: rgba(255,255,255,0.12);
}

[data-lf-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

[data-lf-theme="dark"] .navbar-custom,
[data-lf-theme="dark"] .card-kpi,
[data-lf-theme="dark"] .card {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

/* Login Page Specific Styles */
.login-body {
    background: linear-gradient(135deg, #140b1f 0%, #281937 50%, #0f0717 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-card .form-control {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.login-card .form-control:focus {
    border-color: var(--color-violet-primary);
    box-shadow: 0 0 0 4px rgba(104, 52, 119, 0.15);
}

/* El tamano lo pone Bootstrap (`.btn`, `.btn-sm`, `.btn-lg`), no esta clase: hasta el 07/10/2026
   llevaba `padding: 0.85rem 1.5rem` y `border: none`, que pisaban a `.btn-sm` y dejaban el boton
   ~15px mas alto que los campos de su misma fila. El borde transparente de 1px es el que tienen
   los `form-control`: sin el, el boton queda 2px mas bajo que el campo de al lado. */
.btn-primary-purple {
    background: linear-gradient(135deg, #683477 0%, #281937 100%);
    color: #ffffff;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 10px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.btn-primary-purple.btn-sm {
    --bs-btn-border-radius: 8px;
}

.btn-primary-purple:hover {
    background: linear-gradient(135deg, #7b3e8d 0%, #352148 100%);
    color: var(--color-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(40, 25, 55, 0.3);
}

/* Estado deshabilitado (p. ej. mientras se recalcula un bloque).
   `.btn-primary-purple` no es una variante de Bootstrap, asi que su estado :disabled caia en el
   color por defecto de `.btn` —texto oscuro— sobre el degradado morado y con opacidad 0.65: el
   rotulo quedaba ilegible. Se fija texto blanco y un morado apagado, manteniendo el contraste. */
.btn-primary-purple:disabled,
.btn-primary-purple.disabled {
    background: linear-gradient(135deg, #8d6f97 0%, #5b5063 100%);
    color: #ffffff !important;
    opacity: 1;
    transform: none;
    box-shadow: none;
    cursor: progress;
}

/* La variante de contorno, para acciones secundarias que aun asi deben leerse como un boton.
   Nace en Ofertas y Premios (28/08/2026): la columna de referencias era un numero subrayado y no
   se veia que fuera la puerta a lo que hace que la oferta sirva de algo. Hereda de `.btn` de
   Bootstrap el tamano y el radio, asi que funciona igual con `.btn-sm`. */
.btn-outline-primary-purple {
    color: var(--color-violet-primary);
    border: 1px solid var(--color-violet-primary);
    background: transparent;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline-primary-purple:hover,
.btn-outline-primary-purple:focus {
    background: var(--color-violet-primary);
    border-color: var(--color-violet-primary);
    color: #ffffff;
}

.btn-outline-primary-purple:disabled,
.btn-outline-primary-purple.disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Zona de imagen: arrastrar y soltar o pulsar para elegir (assets/js/zona_imagen.js).
   Vacía es un recuadro de trazo discontinuo; con imagen, la muestra entera (sin recortar) sobre un
   fondo neutro, con las acciones flotando arriba a la derecha. */
.zona-imagen {
    position: relative;
    border-radius: 12px;
}

.zona-imagen-vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 150px;
    padding: 1.25rem;
    text-align: center;
    border: 2px dashed var(--color-purple-light);
    border-radius: 12px;
    background: #faf7fb;
    color: var(--color-slate-grey);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.zona-imagen-vacia:hover,
.zona-imagen-vacia:focus-visible,
.zona-imagen.arrastrando .zona-imagen-vacia {
    border-color: var(--color-violet-primary);
    background: #f3ebf5;
    outline: none;
}

.zona-imagen-icono {
    font-size: 1.9rem;
    color: var(--color-purple-accent);
}

.zona-imagen-texto {
    font-size: 0.9rem;
}

.zona-imagen-enlace {
    color: var(--color-violet-primary);
    font-weight: 700;
    text-decoration: underline;
}

.zona-imagen-ayuda {
    font-size: 0.75rem;
    opacity: 0.8;
}

.zona-imagen-llena {
    display: none;
    position: relative;
    border-radius: 12px;
    background: #f4f2f6;
    border: 1px solid #e6e1ea;
    overflow: hidden;
}

.zona-imagen-llena img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    cursor: zoom-in;
}

.zona-imagen-acciones {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.35rem;
}

.zona-imagen-acciones .btn {
    box-shadow: 0 2px 6px rgba(40, 25, 55, 0.18);
}

.zona-imagen-progreso {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
}

.zona-imagen-pastilla {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-violet-primary);
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(40, 25, 55, 0.2);
}

.zona-imagen.con-imagen .zona-imagen-vacia { display: none; }
.zona-imagen.con-imagen .zona-imagen-llena { display: block; }
.zona-imagen.subiendo .zona-imagen-progreso { display: flex; }
.zona-imagen.subiendo .zona-imagen-acciones { display: none; }

/* Arrastrando una imagen nueva encima de la que ya hay. */
.zona-imagen.con-imagen.arrastrando .zona-imagen-llena {
    outline: 2px dashed var(--color-violet-primary);
    outline-offset: -6px;
}

/* Solo lectura: la imagen se puede ver en grande, pero no cambiar ni quitar. */
.zona-imagen.deshabilitada .zona-imagen-vacia {
    cursor: default;
    opacity: 0.6;
}
.zona-imagen.deshabilitada .zona-imagen-vacia:hover {
    border-color: var(--color-purple-light);
    background: #faf7fb;
}
.zona-imagen.deshabilitada [data-accion="cambiar"],
.zona-imagen.deshabilitada [data-accion="quitar"] {
    display: none;
}

/* Iconos de Ayuda interactivos y Tooltips (?) */
.help-icon {
    cursor: pointer;
    opacity: 0.65;
    font-size: 0.88em;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.help-icon:hover {
    opacity: 1;
    color: var(--color-violet-primary) !important;
    transform: scale(1.18);
}

/* ==========================================================================
   Impresión (@media print)
   ==========================================================================
   AL IMPRIMIR NO SALE LA PÁGINA: sale únicamente lo que se haya volcado en
   `#print-manual-container`. Todo lo demás que cuelgue de `<body>` se oculta.

   Quien quiera imprimir algo tiene que clonarlo dentro de ese contenedor antes de
   llamar a `window.print()`; un `window.print()` a secas sale en blanco, y es
   deliberado. Hoy sólo lo usa la tabla de vendedores del Resumen de Fidelización
   (`imprimirResumenEquipo()` en `modules/fidelizacion/resumen.php`), que añade sus
   propias reglas de tabla en la propia página.

   Aquí vivieron también las reglas que daban formato al volcado del Centro de Ayuda
   —cabecera, pestañas y acordeones del panel—. Se retiraron el 19/08/2026 junto con
   el botón «Imprimir manual»: la ayuda se consulta navegando y no se entrega en un
   documento que pueda circular fuera. Ver docs/centro-de-ayuda.md.
   ========================================================================== */
@media print {
    body > *:not(#print-manual-container) {
        display: none !important;
    }

    #print-manual-container {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
        z-index: 999999 !important;
    }

    h1, h2, h3, h4, h5, h6, .accordion-item, .list-group-item {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

/* ==========================================================================
   Adaptabilidad Móvil Avanzada (@media max-width 768px)
   ========================================================================== */
@media (max-width: 768px) {
    main.bg-app-main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .navbar-custom {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .filter-bar-card {
        padding: 0.85rem 0.95rem !important;
    }
    
    .kpi-card-hero {
        padding: 1rem 1.15rem !important;
        margin-bottom: 0.5rem;
    }

    .kpi-card-hero .h2 {
        font-size: 1.45rem !important;
    }

    .dashboard-module-title {
        font-size: 1.15rem !important;
    }

    .table-ranking {
        font-size: 0.83rem !important;
    }

    .table-ranking th, 
    .table-ranking td {
        padding: 0.5rem 0.4rem !important;
    }

    .user-avatar-circle, 
    .seller-avatar-img {
        width: 32px !important;
        height: 32px !important;
    }

    #legend_comparativa {
        font-size: 0.75rem !important;
    }
}



/* ==========================================================================
   Botón flotante «Volver arriba» (transversal a toda la aplicación)
   ==========================================================================
   Se inyecta desde `includes/footer.php`, así que lo tiene cualquier pantalla que
   cierre con el pie, sin escribir una línea en el módulo.

   Nace por los listados con scroll infinito (IMH Fidelización › Listar Clientes):
   tras unos cuantos lotes el formulario de filtros queda a miles de píxeles y
   volver con la rueda del ratón es un viaje largo.

   Es hijo directo de <body>, de modo que la regla de impresión de más arriba
   —`body > *:not(#print-manual-container)`— ya lo deja fuera del papel.         */
#btn-volver-arriba {
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* Por debajo del backdrop de los offcanvas (1040) y de la barra flotante de
       selecciones (1060): con una ficha lateral abierta debe quedar detrás, no
       flotando sobre la penumbra. */
    z-index: 1030;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-violet-primary) 0%, var(--color-dark-1) 100%);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(40, 25, 55, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
                box-shadow 0.2s ease, color 0.2s ease;
}

#btn-volver-arriba.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#btn-volver-arriba:hover {
    color: var(--color-gold);
    box-shadow: 0 14px 32px rgba(40, 25, 55, 0.45);
    transform: translateY(-3px);
}

#btn-volver-arriba:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Con una barra inferior flotante en pantalla (la de selecciones de Listar Clientes
   va centrada y ocupa hasta el 92 % del ancho) el botón sube para no taparla. */
#btn-volver-arriba.con-barra-inferior {
    bottom: 84px;
}

@media (max-width: 575.98px) {
    #btn-volver-arriba {
        right: 14px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
    }
    #btn-volver-arriba.con-barra-inferior {
        bottom: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #btn-volver-arriba,
    #btn-volver-arriba.visible,
    #btn-volver-arriba:hover {
        transform: none;
        transition: opacity 0.01ms linear, visibility 0.01ms linear;
    }
}