/* ══════════════════════════════════════════════════════════════════════════════════════════
   Estilos de los dashboards nativos que Tailwind no puede expresar como clases utilitarias:
   el borde animado de la tarjeta bajo el cursor y la barra de scroll de la app.

   Por qué un .css del RCL y no clases de Tailwind
   ----------------------------------------------
   Son cosas que necesitan @property, @keyframes y pseudo-elementos con mask: no hay utilidad
   de Tailwind para ninguna. Va en el RCL (no en el input.css de Ops) para que
   cualquier host que monte los dashboards obtenga el mismo comportamiento con solo enlazar
   este archivo — Ops lo hace en App.razor.

   Se sirve como _content/BOENET.Framework.Dashboards/css/dashboards.css.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Barra de scroll ───────────────────────────────────────────────────────────────────────
   La barra por defecto de Windows (17 px, gris claro sobre blanco) se ve como una pieza de
   otra aplicación pegada encima, sobre todo en modo oscuro y dentro de una tarjeta. Acá queda
   fina, sin pista visible, con el pulgar en el gris de los bordes de la app y en el color de
   marca al pasar el mouse.

   Se declaran las dos sintaxis a propósito: `scrollbar-width`/`scrollbar-color` es el estándar
   (Firefox, Chrome 121+), `::-webkit-scrollbar` cubre las versiones anteriores de Chrome/Edge y
   permite el borde transparente que separa el pulgar del contenido. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.5) transparent;   /* gray-400 al 50 % */
}

.dark * {
    scrollbar-color: rgb(100 116 139 / 0.6) transparent;   /* gray-500 al 60 % */
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(148 163 184 / 0.5);
    border-radius: 9999px;
    /* El borde transparente + background-clip deja el pulgar "flotando" con aire a los lados,
       en vez de pegado al borde del contenedor. */
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 180 166 / 0.75);               /* --color-brand */
}

.dark ::-webkit-scrollbar-thumb {
    background-color: rgb(100 116 139 / 0.6);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 180 166 / 0.8);
}

/* Tabla de "ver el cálculo" (DetalleModal): con muchas columnas la barra horizontal es la que se
   usa para moverse, así que va de ancho normal (no "thin") y con más contraste que el resto
   (Cristóbal, 2026-09-29). Chrome usa estas propiedades estándar en vez de ::-webkit-scrollbar. */
.albi-scroll-tabla {
    scrollbar-width: auto;
    scrollbar-color: rgb(100 116 139 / 0.85) rgb(148 163 184 / 0.18);   /* gray-500 sobre gray-400 suave */
}

.dark .albi-scroll-tabla {
    scrollbar-color: rgb(148 163 184 / 0.85) rgb(100 116 139 / 0.25);
}

.albi-scroll-tabla::-webkit-scrollbar {
    width: 12px;
    height: 14px;
}

.albi-scroll-tabla::-webkit-scrollbar-thumb {
    background-color: rgb(100 116 139 / 0.85);
}

/* ── Tarjeta bajo el cursor ────────────────────────────────────────────────────────────────
   Un dashboard es una pared de tarjetas y todas pesan igual: al pasar el mouse hay que poder
   decir sin dudar cuál se está mirando (y cuál va a recibir el clic, que acá filtra TODO el
   tablero). La señal es un trazo de color que recorre despacio el borde de la tarjeta activa.

   Solo la tarjeta activa cambia: el resto de la grilla NO se atenúa. Bajar la opacidad de los
   otros doce widgets convertía cada paso del mouse en un parpadeo de la pantalla completa, y en
   un tablero lo que hay alrededor también se lee — comparar dos cifras exige verlas a la vez.

   El ángulo del gradiente se anima con @property: una custom property registrada como <angle>
   sí interpola (una `--x: 0deg` sin registrar es un string y salta de un valor al otro). Donde
   @property no exista, el borde se dibuja igual pero quieto — se degrada, no se rompe. */
@property --albi-borde-angulo {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes albi-girar-borde {
    to {
        --albi-borde-angulo: 360deg;
    }
}

.albi-widget {
    position: relative;

    /* Al pasar el mouse se le enciende el borde y gana una sombra suave, nada más. El zoom (scale
       1.012) y el brillo (brightness 1.05) se quitaron el 22-10-2026 a pedido de Cristóbal: el zoom
       "me parece incómodo" y dejaba el texto borroso mientras duraba; el brillo, también fuera. Sin
       filter tampoco se arma un contexto de apilamiento: los tooltips de adentro quedan por encima
       de las tarjetas vecinas. */
    transition: box-shadow 0.5s ease;
}

.albi-widget:hover {
    box-shadow: 0 8px 24px -12px rgb(0 180 166 / 0.35);
}

.albi-widget::after {
    content: "";
    position: absolute;
    inset: -1px;                    /* tapa el borde de 1 px de la tarjeta */
    border-radius: inherit;
    padding: 1.5px;                 /* grosor del trazo */
    /* Un trazo largo (media vuelta) que se enciende y se apaga por sus dos extremos: sin saltos
       de color, el movimiento se percibe como un reflejo que recorre el borde y no como una luz
       que da vueltas. */
    background: conic-gradient(from var(--albi-borde-angulo),
            transparent 0deg,
            rgb(0 180 166 / 0.15) 60deg,
            rgb(0 180 166 / 0.55) 130deg,
            rgb(0 180 166 / 0.85) 180deg,
            rgb(0 180 166 / 0.55) 230deg,
            rgb(0 180 166 / 0.15) 300deg,
            transparent 360deg);
    /* Recorte clásico del "borde con gradiente": se pinta todo el rectángulo y se borra el
       interior, dejando solo el marco de `padding` px. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;           /* el marco no debe robarle clics al widget */

    /* La animación se declara SIEMPRE y se pausa: así, al sacar el mouse, el trazo se queda
       donde iba y solo baja la opacidad. Si en cambio se quitara la animación (poniéndola solo
       en :hover), el ángulo volvería de golpe a 0deg y el trazo pegaría un salto al borde
       superior justo mientras se desvanece. Pausada no consume nada: el navegador no compone
       fotogramas de una animación detenida. */
    animation: albi-girar-borde 6s linear infinite;
    animation-play-state: paused;
}

/* Solo :hover — nada de :focus-within. Con el foco dentro de la tarjeta (al abrir un <select>,
   al escribir en un filtro) el borde se quedaba encendido después de sacar el mouse, y un realce
   que no sigue al cursor deja de significar "estoy mirando esto". Los controles ya avisan de su
   propio foco (focus:border-brand / focus:ring). */
.albi-widget:hover::after {
    opacity: 1;
    animation-play-state: running;
}

/* Quien pidió menos movimiento conserva el realce, sin la animación: el borde queda fijo. */
@media (prefers-reduced-motion: reduce) {
    .albi-widget::after,
    .albi-widget:hover::after {
        animation: none;
    }
}


/* ── Barra de progreso de un KPI ───────────────────────────────────────────────────────────
   El relleno crece desde cero cuando la tarjeta aparece, y después acompaña con una transición
   cada vez que cambia el valor (por ejemplo al elegir otro plan en el selector). Un brillo
   recorre la barra en bucle: es lo único que se mueve solo en el ribbon, así que se mantiene
   lento y con poco contraste para que no compita con los números. */
.albi-barra-progreso-relleno {
    transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: albi-barra-entrar 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    position: relative;
    overflow: hidden;
}

.albi-barra-progreso-relleno::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgb(255 255 255 / 0.35) 50%,
            transparent 100%);
    transform: translateX(-100%);
    animation: albi-barra-brillo 2.8s ease-in-out 0.9s infinite;
}

@keyframes albi-barra-entrar {
    from { width: 0; }
}

@keyframes albi-barra-brillo {
    0%        { transform: translateX(-100%); }
    45%, 100% { transform: translateX(200%); }
}

/* ── Anillo de progreso (AnilloProgreso) ──────────────────────────────────────────────────
   El arco se dibuja desde vacío al entrar y después sigue los cambios de valor. La animación
   va sobre stroke-dashoffset, que es lo que decide cuánto del trazo se ve.

   El "desde vacío" no se puede escribir fijo en el keyframe: el largo del trazo depende del
   radio, y el componente lo pasa en --albi-anillo-largo. Con "from" solo + "both", el navegador
   toma el valor final del atributo inline y anima desde esa variable hasta ahí. */
.albi-anillo-relleno {
    transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: albi-anillo-entrar 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes albi-anillo-entrar {
    from { stroke-dashoffset: var(--albi-anillo-largo); }
}

@media (prefers-reduced-motion: reduce) {
    .albi-barra-progreso-relleno,
    .albi-barra-progreso-relleno::after,
    .albi-anillo-relleno {
        animation: none;
        transition: none;
    }
}


/* ── Calendario (SelectorFecha) ────────────────────────────────────────────────────────────
   El panel entra cayendo un poco y creciendo desde arriba, anclado al botón que lo abrió, para
   que se lea como "esto salió de acá" y no como una capa que apareció encima. Corto (0,16 s):
   es un menú, no una transición de página, y si tarda se siente pesado al usarlo seguido. */
/* El punto desde el que crece (transform-origin) lo ponen las clases del componente: depende
   del ancho de pantalla y del lado al que abre (SelectorFecha.ClasePosicion). */
.albi-calendario {
    animation: albi-calendario-entrar 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes albi-calendario-entrar {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
}

/* El día bajo el cursor se levanta apenas. Sin transición de transform en el día seleccionado,
   que ya viene con scale fijo desde su clase. */
.albi-calendario-dia:hover {
    transform: translateY(-1px);
}

/* Recuadro de "Actualizando…" (DashboardHost): aparece creciendo apenas, para que se note que
   llegó algo al centro de la pantalla sin que parezca un salto. */
.albi-actualizando {
    animation: albi-actualizando-entrar 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes albi-actualizando-entrar {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .albi-calendario,
    .albi-actualizando {
        animation: none;
    }

    .albi-calendario-dia:hover {
        transform: none;
    }
}

/* ── Desplegables y vistas de Desempeño Técnico ────────────────────────────────────────────
   Reusan las entradas que ya tiene la app (Cristóbal, 02-10-2026: "animaciones de fade in que la
   app haya utilizado, para reciclar"):
     · albi-desplegar: lo que se abre con un botón (el Top, sus gráficos, la fila de indicadores)
       cae desde arriba como el panel del calendario (albi-calendario-entrar, acá arriba);
     · albi-aparecer: las tarjetas suben con cardEnter, la de los formularios (boenet-base.css),
       y se escalonan con sus mismas clases anim-d1 … anim-d5.

   Van con propiedades sueltas y no con el atajo `animation:`. El atajo pone animation-delay en 0,
   y como este archivo se carga después de output.css, le ganaría al retraso de anim-dN.

   fill-mode backwards y no both: al terminar no queda ningún transform puesto. Un transform
   crea un containing block, y los modales con position:fixed que se abren desde adentro de la
   vista quedarían anclados a la tarjeta y no a la pantalla.

   Las vistas ocultas por pestaña usan display:none, y un elemento que vuelve a mostrarse
   reinicia su animación: por eso al cambiar de pestaña las tarjetas vuelven a entrar. */
.albi-desplegar {
    transform-origin: top;
    animation-name: albi-calendario-entrar;
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: backwards;
}

.albi-aparecer {
    animation-name: cardEnter;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: backwards;
}

@media (prefers-reduced-motion: reduce) {
    .albi-desplegar,
    .albi-aparecer {
        animation: none;
    }
}

/* ── Tooltip de la dona de "Disponibilidad mecánica por activo" ──────────────────────────────
   Un arco de SVG no puede tener HTML adentro, así que el tooltip va al lado y se muestra con :has()
   cuando el mouse está sobre SU arco: sin esperar y sin ir al servidor, igual que los de las barras y
   las casillas (TooltipDato). Un selector por tramo: la comparación de atributos entre dos elementos
   no se puede escribir de forma genérica. */
.albi-dona-tip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 75ms ease;
}

.albi-dona:has([data-tramo="Normal"]:hover) .albi-dona-tip[data-tramo="Normal"],
.albi-dona:has([data-tramo="Atencion"]:hover) .albi-dona-tip[data-tramo="Atencion"],
.albi-dona:has([data-tramo="Critico"]:hover) .albi-dona-tip[data-tramo="Critico"],
/* Las donas de capacidad de Desempeño Técnico (Rendimiento individual): sus cuatro partes. */
.albi-dona:has([data-tramo="Preventiva"]:hover) .albi-dona-tip[data-tramo="Preventiva"],
.albi-dona:has([data-tramo="Correctiva"]:hover) .albi-dona-tip[data-tramo="Correctiva"],
.albi-dona:has([data-tramo="Improductivo"]:hover) .albi-dona-tip[data-tramo="Improductivo"],
.albi-dona:has([data-tramo="Libre"]:hover) .albi-dona-tip[data-tramo="Libre"] {
    visibility: visible;
    opacity: 1;
}

/* ── DM por activo: el arco de la dona y su tarjeta se levantan juntos ──────────────────────────
   Al pasar el mouse por un arco o por la tarjeta de su tramo, el arco engorda y la tarjeta sube 3 px con
   sombra, los dos a la vez (Cristóbal, 23-10-2026). Con :has() sobre la fila, sin ir al servidor; un selector
   por tramo porque la comparación de atributos entre dos elementos no se escribe de forma genérica. La sombra
   de la tarjeta va en un ::after: su franja de color es un box-shadow en línea y no se puede pisar. Una
   tarjeta deshabilitada (tramo sin activos) no se levanta. */
.albi-dm-fila circle[data-tramo] {
    transition: stroke-width 150ms ease-out;
}

.albi-dm-fila [role="group"] {
    overflow: visible;      /* sin esto, la tarjeta que sube queda cortada por el borde del recuadro */
}

.albi-dm-fila [role="group"] > button[data-tramo] {
    position: relative;
    transition: transform 150ms ease-out, background-color 150ms ease;
}

.albi-dm-fila [role="group"] > button[data-tramo]:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.albi-dm-fila [role="group"] > button[data-tramo]:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.albi-dm-fila [role="group"] > button[data-tramo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 10px 22px -10px rgb(15 23 42 / 0.35);
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

.albi-dm-fila:has([data-tramo="Normal"]:not(:disabled):hover) circle[data-tramo="Normal"],
.albi-dm-fila:has([data-tramo="Atencion"]:not(:disabled):hover) circle[data-tramo="Atencion"],
.albi-dm-fila:has([data-tramo="Critico"]:not(:disabled):hover) circle[data-tramo="Critico"] {
    stroke-width: 42px;
}

.albi-dm-fila:has([data-tramo="Normal"]:not(:disabled):hover) button[data-tramo="Normal"],
.albi-dm-fila:has([data-tramo="Atencion"]:not(:disabled):hover) button[data-tramo="Atencion"],
.albi-dm-fila:has([data-tramo="Critico"]:not(:disabled):hover) button[data-tramo="Critico"] {
    transform: translateY(-3px);
    z-index: 1;
    background-color: #fff;
}

.dark .albi-dm-fila:has([data-tramo="Normal"]:not(:disabled):hover) button[data-tramo="Normal"],
.dark .albi-dm-fila:has([data-tramo="Atencion"]:not(:disabled):hover) button[data-tramo="Atencion"],
.dark .albi-dm-fila:has([data-tramo="Critico"]:not(:disabled):hover) button[data-tramo="Critico"] {
    background-color: rgb(31 41 55);    /* gray-800, el mismo de la tarjeta elegida */
}

.albi-dm-fila:has([data-tramo="Normal"]:not(:disabled):hover) button[data-tramo="Normal"]::after,
.albi-dm-fila:has([data-tramo="Atencion"]:not(:disabled):hover) button[data-tramo="Atencion"]::after,
.albi-dm-fila:has([data-tramo="Critico"]:not(:disabled):hover) button[data-tramo="Critico"]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .albi-dm-fila [role="group"] > button[data-tramo] {
        transform: none !important;
    }
}

/* ── Rendimiento individual: el arco de la dona y su fila se levantan juntos ─────────────────────
   Lo mismo que "DM por activo" (Cristóbal, 26-10-2026): al pasar el mouse por un arco o por su fila de abajo, el
   arco engorda y la fila sube 3 px con sombra, los dos a la vez. Un selector por parte de la dona, por la misma
   razón de arriba. */
.albi-ri-dona circle[data-tramo] {
    transition: stroke-width 150ms ease-out;
}

.albi-ri-dona [data-fila] {
    position: relative;
    transition: transform 150ms ease-out, background-color 150ms ease;
}

.albi-ri-dona [data-fila]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 10px 22px -10px rgb(15 23 42 / 0.35);
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

.albi-ri-dona:has([data-tramo="Preventiva"]:hover) circle[data-tramo="Preventiva"],
.albi-ri-dona:has([data-tramo="Correctiva"]:hover) circle[data-tramo="Correctiva"],
.albi-ri-dona:has([data-tramo="Improductivo"]:hover) circle[data-tramo="Improductivo"],
.albi-ri-dona:has([data-tramo="Libre"]:hover) circle[data-tramo="Libre"] {
    stroke-width: 36px;
}

.albi-ri-dona:has([data-tramo="Preventiva"]:hover) [data-fila][data-tramo="Preventiva"],
.albi-ri-dona:has([data-tramo="Correctiva"]:hover) [data-fila][data-tramo="Correctiva"],
.albi-ri-dona:has([data-tramo="Improductivo"]:hover) [data-fila][data-tramo="Improductivo"],
.albi-ri-dona:has([data-tramo="Libre"]:hover) [data-fila][data-tramo="Libre"] {
    transform: translateY(-3px);
    z-index: 1;
    background-color: #fff;
}

.dark .albi-ri-dona:has([data-tramo="Preventiva"]:hover) [data-fila][data-tramo="Preventiva"],
.dark .albi-ri-dona:has([data-tramo="Correctiva"]:hover) [data-fila][data-tramo="Correctiva"],
.dark .albi-ri-dona:has([data-tramo="Improductivo"]:hover) [data-fila][data-tramo="Improductivo"],
.dark .albi-ri-dona:has([data-tramo="Libre"]:hover) [data-fila][data-tramo="Libre"] {
    background-color: rgb(55 65 81);    /* gray-700: la tarjeta de la sección es gray-800 */
}

.albi-ri-dona:has([data-tramo="Preventiva"]:hover) [data-fila][data-tramo="Preventiva"]::after,
.albi-ri-dona:has([data-tramo="Correctiva"]:hover) [data-fila][data-tramo="Correctiva"]::after,
.albi-ri-dona:has([data-tramo="Improductivo"]:hover) [data-fila][data-tramo="Improductivo"]::after,
.albi-ri-dona:has([data-tramo="Libre"]:hover) [data-fila][data-tramo="Libre"]::after {
    opacity: 1;
}

/* La fila de la suma (preventivo + correctivo) levanta los dos arcos a la vez, y ella misma (Cristóbal, 29-10-2026). */
.albi-ri-dona:has([data-tramo="Suma"]:hover) circle[data-tramo="Preventiva"],
.albi-ri-dona:has([data-tramo="Suma"]:hover) circle[data-tramo="Correctiva"] {
    stroke-width: 36px;
}

.albi-ri-dona:has([data-tramo="Suma"]:hover) [data-fila][data-tramo="Suma"] {
    transform: translateY(-3px);
    z-index: 1;
    background-color: #fff;
}

.dark .albi-ri-dona:has([data-tramo="Suma"]:hover) [data-fila][data-tramo="Suma"] {
    background-color: rgb(55 65 81);
}

.albi-ri-dona:has([data-tramo="Suma"]:hover) [data-fila][data-tramo="Suma"]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .albi-ri-dona [data-fila] {
        transform: none !important;
    }
}

/* ── Los cortes de Confiabilidad como puntos sobre la barra (BarraCortes.razor, 28-10-2026) ──────────────────────
   Dos input type=range nativos, uno encima del otro y transparentes: sólo los puntos reciben el mouse, así se puede
   tomar cualquiera de los dos. Son 18 px más anchos que la barra (9 px a cada lado) para que el centro del punto caiga
   justo donde termina el tramo: el navegador mueve el punto dentro del ancho menos el suyo. */
.albi-cortes-rango {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: -9px;
    top: 50%;
    width: calc(100% + 18px);
    height: 22px;
    margin: 0;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: none;
}

.albi-cortes-rango::-webkit-slider-runnable-track {
    height: 22px;
    background: transparent;
}

.albi-cortes-rango::-moz-range-track {
    background: transparent;
}

.albi-cortes-rango::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 3px solid #374151;          /* gray-700 */
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    cursor: grab;
    pointer-events: auto;
}

.albi-cortes-rango::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 3px solid #374151;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    cursor: grab;
    pointer-events: auto;
}

.albi-cortes-rango:active::-webkit-slider-thumb { cursor: grabbing; }
.albi-cortes-rango:active::-moz-range-thumb { cursor: grabbing; }

.albi-cortes-rango:focus { outline: none; }
.albi-cortes-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgb(20 184 166 / 0.5); }
.albi-cortes-rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgb(20 184 166 / 0.5); }

.dark .albi-cortes-rango::-webkit-slider-thumb { border-color: #f9fafb; background: #1f2937; }
.dark .albi-cortes-rango::-moz-range-thumb { border-color: #f9fafb; background: #1f2937; }