/* ==========================================================
   CRM - CAPA DE DISENO

   Se carga ULTIMA, despues de legibilidad.css y movil.css.
   legibilidad.css resuelve contraste a fuerza de !important y, de
   paso, aplana la jerarquia visual. Esta hoja le devuelve
   profundidad, ritmo y movimiento.

   Principios:
   - la profundidad se construye con capas de luz, no con sombras
     negras: borde superior claro + sombra difusa + brillo interno
   - una sola escala de espaciado, radios y duraciones
   - todo lo que aparece, aparece animado y en cascada
   - el color se gana: gris por defecto, verde solo donde hay accion
   ========================================================== */

:root {
    /* Espaciado */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    --control-h: 42px;
    --control-h-mobile: 46px;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    /* Superficies: cada nivel se aclara y se despega del fondo */
    --surf-0: #0e1317;
    --surf-1: #141a20;
    --surf-2: #1a2229;
    --surf-3: #212b33;

    /* El borde no es una linea: es un degrade que simula luz cenital */
    --borde-luz: rgba(255, 255, 255, 0.09);
    --borde-sombra: rgba(0, 0, 0, 0.5);

    /* Sombras en capas: contacto + difusion + ambiente */
    --elev-1:
        0 1px 1px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.22);
    --elev-2:
        0 1px 1px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.22);
    --elev-3:
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 12px 28px rgba(0, 0, 0, 0.38),
        0 32px 64px rgba(0, 0, 0, 0.3);

    /* Halo de marca para estados activos */
    --halo: 0 0 0 1px rgba(var(--acento-rgb), 0.35), 0 0 24px rgba(var(--acento-rgb), 0.16);

    /* Curvas y tiempos */
    --t-rapido: 140ms;
    --t-medio: 260ms;
    --t-lento: 420ms;
    --curva: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================
   0. FONDO

   Un plano grafito con dos focos frios muy tenues y una trama
   de puntos casi invisible. La trama es lo que separa un fondo
   plano de una superficie: se percibe sin llegar a verse.
   ========================================================== */

html {
    background:
        radial-gradient(60% 40% at 15% 0%, rgba(var(--acento-rgb), 0.055) 0%, transparent 62%),
        radial-gradient(50% 40% at 88% 8%, rgba(56, 189, 248, 0.035) 0%, transparent 58%),
        var(--surf-0) !important;
    background-attachment: fixed !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ==========================================================
   1. PANELES

   El patron base: fondo translucido, borde de luz arriba que se
   apaga hacia abajo, y una linea interior clara en el borde
   superior. Es lo que hace que una caja se lea como material y
   no como un rectangulo de color.
   ========================================================== */

.glass-panel,
.top-navbar,
.main-tabs,
.barra-filtros,
.resumen-item,
.metric-card,
.chart-card,
.users-container,
.bitacora-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 42%),
        var(--surf-1) !important;
    border: 1px solid var(--borde-luz) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--elev-2) !important;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Filo superior: una linea de 1px mas clara que el borde, del ancho
   del panel y desvanecida en las puntas. Detalle barato, efecto caro. */
.glass-panel::after,
.resumen-item::after,
.metric-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* ==========================================================
   2. TIPOGRAFIA
   ========================================================== */

.section-head h2,
.users-header h2,
.historial-head h3 {
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.32rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--text-main) !important;
}

.section-head p,
.historial-head p {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    color: var(--text-muted) !important;
    max-width: 66ch;
}

/* Todo dato numerico con ancho fijo: las cifras no bailan al cambiar */
.metric-value,
.resumen-item strong,
.count-badge,
.tab-badge,
.uso-totales strong,
.custom-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ==========================================================
   3. ENCABEZADO DE SECCION
   ========================================================== */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--borde-luz);
}

.section-head__texto {
    min-width: 0;
    flex: 1 1 320px;
}

.section-head h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}

/* El icono del titulo va en su propia pastilla: da peso al encabezado */
.section-head h2 i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 0.82rem !important;
    border-radius: 9px;
    color: var(--primary) !important;
    background: rgba(var(--acento-rgb), 0.1);
    border: 1px solid rgba(var(--acento-rgb), 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.section-head p {
    margin: var(--sp-2) 0 0;
}

.section-head__acciones {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

/* ==========================================================
   4. BOTONES

   El !important no es capricho: index.css declara .btn-primary-3d
   con !important en nueve propiedades. Para igualar la altura de
   ese boton con la del select de al lado hay que competir parejo.
   ========================================================== */

.section-head__acciones .btn,
.barra-filtros .btn,
.barra-filtros .select-field,
.barra-filtros input,
.historial-filtros .select-field,
.historial-filtros .btn {
    height: var(--control-h) !important;
    min-height: var(--control-h) !important;
    padding: 0 var(--sp-3) !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: var(--r-sm) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition:
        transform var(--t-rapido) var(--curva),
        box-shadow var(--t-medio) var(--curva),
        border-color var(--t-medio) var(--curva),
        background var(--t-medio) var(--curva) !important;
}

/* Accion principal: la unica pieza rellena de la pantalla.
   Degrade vertical + filo claro arriba + halo verde debajo. */
.section-head__acciones .btn-primary-3d,
.section-head__acciones .btn-primary {
    background: linear-gradient(180deg, #4ff0a4 0%, var(--primary) 55%, #1fcf78 100%) !important;
    color: #06231a !important;
    border: none !important;
    padding: 0 var(--sp-5) !important;
    white-space: nowrap;
    letter-spacing: 0.01em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 6px 18px rgba(var(--acento-rgb), 0.28) !important;
}

.section-head__acciones .btn-primary-3d:hover,
.section-head__acciones .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 12px 30px rgba(var(--acento-rgb), 0.4) !important;
}

.section-head__acciones .btn-primary-3d:active,
.section-head__acciones .btn-primary:active {
    transform: translateY(0) !important;
    transition-duration: 60ms !important;
}

.section-head__acciones .btn-primary-3d i {
    font-size: 0.82rem !important;
    color: inherit !important;
}

/* Secundarios: solo icono, cuadrados, agrupados */
.btn-icono {
    width: var(--control-h) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--surf-2) !important;
    border: 1px solid var(--borde-luz) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--elev-1) !important;
}

.btn-icono:hover {
    border-color: rgba(var(--acento-rgb), 0.45) !important;
    color: var(--primary) !important;
    background: var(--surf-3) !important;
    transform: translateY(-1px) !important;
}

.btn-grupo {
    display: inline-flex;
    border-radius: var(--r-sm);
    box-shadow: var(--elev-1);
}

.btn-grupo .btn-icono {
    border-radius: 0 !important;
    margin-left: -1px !important;
    box-shadow: none !important;
}

.btn-grupo .btn-icono:first-child {
    border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
    margin-left: 0 !important;
}

.btn-grupo .btn-icono:last-child {
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}

.btn-grupo .btn-icono:hover {
    position: relative;
    z-index: 1;
    transform: none !important;
}

/* Foco visible y de marca en todo control accionable */
.btn:focus-visible,
.select-field:focus-visible,
.tab-btn:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* ==========================================================
   5. BARRA DE FILTROS
   ========================================================== */

.barra-filtros {
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) !important;
    margin-bottom: var(--sp-5);
    border-radius: var(--r-md) !important;
}

.barra-filtros .buscador {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--control-h);
    padding: 0 var(--sp-3);
    background: var(--surf-0);
    border: 1px solid var(--borde-luz);
    border-radius: var(--r-sm);
    transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}

.barra-filtros .buscador:focus-within {
    border-color: rgba(var(--acento-rgb), 0.5);
    box-shadow: var(--halo);
}

.barra-filtros .buscador i {
    color: var(--text-dim);
    font-size: 0.8rem;
    flex: 0 0 auto;
    transition: color var(--t-medio) var(--curva);
}

.barra-filtros .buscador:focus-within i {
    color: var(--primary);
}

.barra-filtros .buscador input {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100%;
    min-width: 0;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}

.barra-filtros .select-field,
.historial-filtros .select-field {
    width: 100% !important;
    min-width: 0;
    background: var(--surf-0) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--borde-luz) !important;
    cursor: pointer;
}

.barra-filtros .select-field:hover,
.historial-filtros .select-field:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Un filtro puesto se tiene que notar sin abrirlo */
.barra-filtros .select-field.filtro-activo {
    border-color: rgba(var(--acento-rgb), 0.5) !important;
    background: rgba(var(--acento-rgb), 0.1) !important;
    color: var(--primary) !important;
    box-shadow: var(--halo) !important;
}

/* ==========================================================
   6. TARJETAS DE RESUMEN
   ========================================================== */

.consultas-resumen,
.clientes-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.resumen-item {
    padding: var(--sp-4) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden;
    transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}

/* La barra de color va abajo a lo ancho, no como borde izquierdo:
   ancla la tarjeta y deja el texto sin sangria rara. */
.resumen-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--triage-color, var(--primary)), transparent 85%);
}

.resumen-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-3) !important;
}

.resumen-item strong {
    display: block;
    font-size: 1.6rem !important;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.resumen-item span {
    display: block;
    margin-top: var(--sp-2);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--triage-color, var(--text-main));
}

.resumen-item small {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* ==========================================================
   7. NAVEGACION

   La pastilla activa se desliza: el fondo es un pseudo-elemento
   que anima su opacidad y escala, no un cambio brusco de color.
   ========================================================== */

.main-tabs {
    gap: var(--sp-1) !important;
    padding: var(--sp-1) !important;
    border-radius: var(--r-md) !important;
}

.main-tabs .tab-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: var(--sp-2);
    height: 42px;
    padding: 0 var(--sp-5) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    background: transparent !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition:
        color var(--t-medio) var(--curva),
        background var(--t-medio) var(--curva),
        box-shadow var(--t-medio) var(--curva) !important;
}

/* El fondo va en el propio boton, no en un pseudo-elemento: index.css
   ya declara .tab-btn.active y competir por la opacidad de un ::before
   dejaba la pastilla invisible. Se anima el background directamente. */
.main-tabs .tab-btn:hover:not(.active) {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

.main-tabs .tab-btn.active {
    color: var(--primary) !important;
    background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.2), rgba(var(--acento-rgb), 0.07)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--acento-rgb), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 18px rgba(var(--acento-rgb), 0.16) !important;
}

/* Subrayado de la pestana activa: crece desde el centro */
.main-tabs .tab-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(var(--acento-rgb), 0.7);
    transition: left var(--t-medio) var(--curva), right var(--t-medio) var(--curva);
}

.main-tabs .tab-btn.active::after {
    left: 26%;
    right: 26%;
}

.main-tabs .tab-badge {
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.66rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-main);
    transition: background var(--t-medio) var(--curva), color var(--t-medio) var(--curva);
}

.main-tabs .tab-btn.active .tab-badge {
    background: var(--primary);
    color: #06231a;
}

/* ==========================================================
   8. BARRA DE ETAPAS

   Reemplaza a las columnas del tablero. Cada pastilla filtra la
   grilla y muestra cuantas consultas hay en esa etapa.
   ========================================================== */

.barra-etapas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.etapa-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-3) 0 var(--sp-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--borde-luz);
    background: var(--surf-1);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--elev-1);
    transition:
        border-color var(--t-medio) var(--curva),
        color var(--t-medio) var(--curva),
        background var(--t-medio) var(--curva),
        transform var(--t-rapido) var(--curva);
}

.etapa-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--estado-color, var(--primary));
    box-shadow: 0 0 8px var(--estado-color, var(--primary));
}

.etapa-pill .count-badge {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
}

.etapa-pill:hover {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.etapa-pill.activa {
    color: var(--estado-color, var(--primary));
    border-color: color-mix(in srgb, var(--estado-color, var(--primary)) 45%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--estado-color, var(--primary)) 16%, transparent),
            color-mix(in srgb, var(--estado-color, var(--primary)) 5%, transparent)),
        var(--surf-1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 18px color-mix(in srgb, var(--estado-color, var(--primary)) 18%, transparent);
}

.etapa-pill.activa .count-badge {
    background: color-mix(in srgb, var(--estado-color, var(--primary)) 25%, transparent);
    color: var(--estado-color, var(--primary));
}

/* ==========================================================
   8b. GRILLA DE CONSULTAS

   Una fila por consulta. Es una tabla, pero construida con grid
   para que las columnas se alineen entre cabecera y cuerpo sin
   depender del ancho del contenido de cada celda.
   ========================================================== */

.grid-consultas {
    --col-cliente: minmax(210px, 1.7fr);
    --col-chip: minmax(130px, 1fr);
    --col-monto: minmax(110px, 0.8fr);
    --col-etapa: minmax(160px, 1.05fr);
    --col-resp: minmax(120px, 0.9fr);
    --col-fecha: 96px;
    --col-acc: 122px;

    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--borde-luz);
    background: var(--surf-1);
    box-shadow: var(--elev-2);
}

.grid-head,
.grid-fila {
    display: grid;
    grid-template-columns:
        var(--col-cliente) var(--col-chip) var(--col-chip) var(--col-chip)
        var(--col-monto) var(--col-etapa) var(--col-resp) var(--col-fecha) var(--col-acc);
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
}

/* Cabecera fija: al scrollear la lista larga, los rotulos quedan */
.grid-head {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 44px;
    background: var(--surf-2);
    border-bottom: 1px solid var(--borde-luz);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.grid-th {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    user-select: none;
    transition: color var(--t-rapido) var(--curva);
}

.grid-th.ordenable { cursor: pointer; }

.grid-th.ordenable:hover,
.grid-th.ordenando { color: var(--primary); }

.orden-icono {
    font-size: 0.62rem;
    opacity: 0.35;
    transition: opacity var(--t-rapido) var(--curva);
}

.orden-icono.activo { opacity: 1; }

.grid-th:hover .orden-icono { opacity: 0.8; }

/* La fila lleva el color de su etapa: barra a la izquierda y, al
   pasar por encima, un lavado del mismo color. Es lo que permite
   leer el estado de toda la cartera barriendo con la vista. */
.grid-fila {
    position: relative;
    min-height: 58px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--estado-color, var(--primary)) 7%, transparent) 0%,
            transparent 22%);
    transition: background var(--t-rapido) var(--curva);
    animation: ui-entrada 300ms var(--curva) both;
}

.grid-fila::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--estado-color, var(--primary));
    box-shadow: 0 0 12px color-mix(in srgb, var(--estado-color, var(--primary)) 55%, transparent);
}

.grid-fila:last-child { border-bottom: none; }

.grid-fila:hover {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--estado-color, var(--primary)) 14%, transparent) 0%,
            color-mix(in srgb, var(--estado-color, var(--primary)) 4%, transparent) 45%,
            transparent 75%);
}

/* Cascada de entrada de las primeras filas */
.grid-fila:nth-child(1) { animation-delay: 20ms; }
.grid-fila:nth-child(2) { animation-delay: 45ms; }
.grid-fila:nth-child(3) { animation-delay: 70ms; }
.grid-fila:nth-child(4) { animation-delay: 95ms; }
.grid-fila:nth-child(5) { animation-delay: 120ms; }
.grid-fila:nth-child(n+6) { animation-delay: 145ms; }

.grid-td {
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
}

.celda-cliente {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fila-nombre {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila-sub {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.celda-monto {
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.celda-fecha {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}

.celda-responsable {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El select de etapa se lee como texto hasta que se lo apunta */
.etapa-select {
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--estado-color, var(--primary)) 11%, transparent);
    color: var(--estado-color, var(--primary));
    font-family: var(--font-family);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}

.etapa-select:hover,
.etapa-select:focus {
    border-color: color-mix(in srgb, var(--estado-color, var(--primary)) 45%, transparent);
    background: color-mix(in srgb, var(--estado-color, var(--primary)) 18%, transparent);
    outline: none;
}

.celda-acciones {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.btn-fila {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--borde-luz);
    background: var(--surf-2);
    color: var(--text-muted);
    font-size: 0.76rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        color var(--t-rapido) var(--curva),
        border-color var(--t-rapido) var(--curva),
        transform var(--t-rapido) var(--curva);
}

.btn-fila:hover {
    color: var(--primary);
    border-color: rgba(var(--acento-rgb), 0.45);
    transform: translateY(-1px);
}

/* En reposo la fila informa; al apuntarla, ofrece acciones */
@media (hover: hover) and (pointer: fine) {
    .celda-acciones { opacity: 0.35; transition: opacity var(--t-medio) var(--curva); }
    .grid-fila:hover .celda-acciones { opacity: 1; }
}

.grid-vacia {
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    border-radius: var(--r-lg);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: var(--surf-1);
}

.grid-vacia i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto var(--sp-3);
    font-size: 1.35rem;
    color: var(--primary);
    border-radius: 17px;
    background: rgba(var(--acento-rgb), 0.08);
    border: 1px solid rgba(var(--acento-rgb), 0.18);
}

.grid-vacia h4 {
    margin: 0 0 var(--sp-2);
    font-size: 1rem;
    color: var(--text-main);
}

.grid-vacia p {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text-muted);
}

/* ==========================================================
   9. CHIPS DE TRIAGE

   Canal, tipo y prioridad dentro de cada fila de la grilla.
   ========================================================== */

.triage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.triage-chip {
    font-size: 0.66rem !important;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    color: var(--triage-color, #8b9a95);
    background: color-mix(in srgb, var(--triage-color, #8b9a95) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--triage-color, #8b9a95) 30%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Barras de scroll finas y de marca */
.table-responsive::-webkit-scrollbar,
.grid-body::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track,
.grid-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-full);
}

.table-responsive::-webkit-scrollbar-thumb,
.grid-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-full);
    transition: background var(--t-medio) var(--curva);
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.grid-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dim);
}


/* ==========================================================
   10. TABLAS
   ========================================================== */

.custom-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surf-2) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim) !important;
    white-space: nowrap;
    border-bottom: 1px solid var(--borde-luz) !important;
}

.custom-table td {
    font-size: 0.82rem !important;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}

.custom-table tbody tr {
    transition: background var(--t-rapido) var(--curva);
}

.custom-table tbody tr:hover {
    background: rgba(var(--acento-rgb), 0.045) !important;
}

/* ==========================================================
   11. CARTERA DE PROYECTOS
   ========================================================== */

.historial-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--borde-luz);
}

.historial-head h3 i {
    color: var(--primary) !important;
    margin-right: var(--sp-2);
}

.historial-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.historial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}

/* ==========================================================
   11b. CARTERA DE CLIENTES

   Fichas en vez de tabla: siete columnas obligaban a scroll
   lateral y lo que se consulta de un cliente se lee mejor junto.
   ========================================================== */

.clientes-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.buscador-clientes { min-width: 240px; }

.clientes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}

.cliente-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--borde-luz);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 42%),
        var(--surf-1);
    box-shadow: var(--elev-2);
    overflow: hidden;
    animation: ui-entrada 340ms var(--curva) both;
    transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}

.cliente-ficha::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.cliente-ficha:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--acento-rgb), 0.28);
    box-shadow: var(--elev-3);
}

.cliente-ficha:nth-child(1) { animation-delay: 30ms; }
.cliente-ficha:nth-child(2) { animation-delay: 65ms; }
.cliente-ficha:nth-child(3) { animation-delay: 100ms; }
.cliente-ficha:nth-child(4) { animation-delay: 135ms; }
.cliente-ficha:nth-child(n+5) { animation-delay: 170ms; }

.cliente-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.cliente-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--primary);
    background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.18), rgba(var(--acento-rgb), 0.06));
    border: 1px solid rgba(var(--acento-rgb), 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cliente-id {
    min-width: 0;
    flex: 1;
}

.cliente-id h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cliente-numero {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.cliente-tag {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: var(--radius-full);
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--vivo-violeta);
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.cliente-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cliente-datos dt {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cliente-datos dd {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.cliente-datos .cliente-monto {
    font-size: 0.9rem;
    color: var(--primary);
}

.cliente-ultimo {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cliente-ultimo i {
    color: var(--text-dim);
    margin-right: 5px;
}

.cliente-acciones {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
}

.cliente-tel {
    font-size: 0.74rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   12. ESTADO VACIO
   ========================================================== */

.tabla-vacia {
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
    max-width: 54ch;
    margin: 0 auto;
}

.tabla-vacia > i {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto var(--sp-4);
    font-size: 1.5rem;
    color: var(--primary);
    border-radius: 18px;
    background: rgba(var(--acento-rgb), 0.08);
    border: 1px solid rgba(var(--acento-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 32px rgba(var(--acento-rgb), 0.1);
}

.tabla-vacia h4 {
    margin: 0 0 var(--sp-2);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.tabla-vacia p {
    margin: 0 0 var(--sp-5);
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.tabla-vacia strong {
    color: var(--primary);
}

.tabla-vacia .btn {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* ==========================================================
   13. BITACORA Y HORAS DE USO
   ========================================================== */

.bitacora-panel {
    padding: var(--sp-5) !important;
}

.bitacora-resumen span,
.bitacora-resumen a {
    background: rgba(var(--acento-rgb), 0.09);
    border: 1px solid rgba(var(--acento-rgb), 0.2);
    border-radius: var(--r-sm);
    transition: background var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}

.bitacora-resumen a:hover {
    background: rgba(var(--acento-rgb), 0.16);
    transform: translateY(-1px);
}

.bitacora-nota {
    border-radius: var(--r-sm);
    border: 1px solid var(--borde-luz);
    background: var(--surf-2);
    transition: border-color var(--t-medio) var(--curva);
}

.bitacora-nota:hover {
    border-color: rgba(var(--acento-rgb), 0.28);
}

.uso-totales > div {
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.1), rgba(var(--acento-rgb), 0.03));
    border: 1px solid rgba(var(--acento-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.uso-barra-fill {
    background: linear-gradient(180deg, #4ff0a4, var(--primary) 60%, #17835a) !important;
    box-shadow: 0 0 14px rgba(var(--acento-rgb), 0.28);
    transition: height var(--t-lento) var(--curva) !important;
}

/* ==========================================================
   14. MOVIMIENTO

   Nada aparece de golpe. Las pestanas entran con un
   desplazamiento corto; las tarjetas, en cascada.
   ========================================================== */

@keyframes ui-entrada {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ui-entrada-lateral {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ui-brillo {
    from { background-position: -180% 0; }
    to   { background-position: 180% 0; }
}

.tab-content.active {
    animation: ui-entrada var(--t-lento) var(--curva) both;
}

/* Cascada: cada bloque de la pantalla entra un poco despues que el
   anterior. Es lo que separa "aparecio la pagina" de "se armo". */
.tab-content.active > .section-head { animation: ui-entrada 380ms var(--curva) both; }
.tab-content.active > .consultas-resumen { animation: ui-entrada 380ms var(--curva) 60ms both; }
.tab-content.active > .barra-filtros { animation: ui-entrada 380ms var(--curva) 110ms both; }
.tab-content.active > .barra-etapas { animation: ui-entrada 380ms var(--curva) 160ms both; }
.tab-content.active > #consultas-grid { animation: ui-entrada 380ms var(--curva) 200ms both; }

/* Las pastillas de etapa entran de izquierda a derecha */
.etapa-pill {
    animation: ui-entrada-lateral 420ms var(--curva) both;
}

.etapa-pill:nth-child(1) { animation-delay: 40ms; }
.etapa-pill:nth-child(2) { animation-delay: 80ms; }
.etapa-pill:nth-child(3) { animation-delay: 120ms; }
.etapa-pill:nth-child(4) { animation-delay: 160ms; }
.etapa-pill:nth-child(5) { animation-delay: 200ms; }
.etapa-pill:nth-child(n+6) { animation-delay: 240ms; }

/* Tarjetas de resumen y filas de tabla */
.resumen-item { animation: ui-entrada 360ms var(--curva) both; }
.resumen-item:nth-child(1) { animation-delay: 30ms; }
.resumen-item:nth-child(2) { animation-delay: 70ms; }
.resumen-item:nth-child(3) { animation-delay: 110ms; }
.resumen-item:nth-child(4) { animation-delay: 150ms; }
.resumen-item:nth-child(n+5) { animation-delay: 190ms; }

.custom-table tbody tr { animation: ui-entrada 300ms var(--curva) both; }
.custom-table tbody tr:nth-child(1) { animation-delay: 20ms; }
.custom-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.custom-table tbody tr:nth-child(3) { animation-delay: 80ms; }
.custom-table tbody tr:nth-child(4) { animation-delay: 110ms; }
.custom-table tbody tr:nth-child(n+5) { animation-delay: 140ms; }

/* Barrido para estados de carga */
.cargando {
    background: linear-gradient(90deg,
        var(--surf-2) 25%, var(--surf-3) 50%, var(--surf-2) 75%);
    background-size: 200% 100%;
    animation: ui-brillo 1.4s linear infinite;
    border-radius: var(--r-sm);
    color: transparent !important;
}

/* ==========================================================
   15. TELEFONO
   ========================================================== */

/* Tramo intermedio: entre 561 y 768px hay ancho de sobra para que la
   accion principal conserve su tamano natural. Estirarla a todo lo
   ancho recien tiene sentido cuando el pulgar no llega de una punta a
   la otra. */
@media (min-width: 561px) and (max-width: 768px) {
    .section-head__acciones { width: auto; }
    .section-head { align-items: flex-end; }
}

/* Debajo de 560px la accion principal si ocupa el ancho disponible */
@media (max-width: 560px) {
    .section-head__acciones .btn-primary-3d,
    .section-head__acciones .btn-primary {
        flex: 1;
    }
}

@media (max-width: 768px) {

    body::before { background-size: 18px 18px; }

    .section-head {
        align-items: stretch;
        gap: var(--sp-3);
        padding-bottom: var(--sp-3);
        margin-bottom: var(--sp-4);
    }

    .section-head__acciones { width: 100%; }

    .section-head__acciones .btn-primary-3d,
    .section-head__acciones .btn-primary {
        height: var(--control-h-mobile) !important;
        min-height: var(--control-h-mobile) !important;
    }

    .section-head__acciones .btn-icono {
        width: var(--control-h-mobile) !important;
        height: var(--control-h-mobile) !important;
        min-height: var(--control-h-mobile) !important;
    }

    /* Filtros plegados: en 375px, cinco selects abiertos empujaban
       el tablero fuera de la primera pantalla. */
    .filtros-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        width: 100%;
        height: var(--control-h-mobile);
        padding: 0 var(--sp-4);
        margin-bottom: var(--sp-3);
        background: var(--surf-1);
        border: 1px solid var(--borde-luz);
        border-radius: var(--r-sm);
        box-shadow: var(--elev-1);
        color: var(--text-main);
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color var(--t-medio) var(--curva), color var(--t-medio) var(--curva);
    }

    .filtros-toggle[aria-expanded="true"] {
        border-color: rgba(var(--acento-rgb), 0.5);
        color: var(--primary);
        box-shadow: var(--halo);
    }

    .filtros-toggle .filtros-cuenta {
        padding: 2px 8px;
        border-radius: var(--radius-full);
        background: var(--primary);
        color: #06231a;
        font-size: 0.68rem;
        font-weight: 800;
    }

    /* El estado plegado lo fija el CSS, no el JS: asi no depende de
       cuando corra el script ni de que el telefono rote. */
    .barra-filtros {
        display: none !important;
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }

    .barra-filtros.filtros-abiertos {
        display: grid !important;
        animation: ui-entrada 300ms var(--curva) both;
    }

    .barra-filtros .buscador,
    .barra-filtros .select-field,
    .barra-filtros .btn {
        height: var(--control-h-mobile) !important;
        min-height: var(--control-h-mobile) !important;
        font-size: 0.86rem !important;
    }

    .consultas-resumen,
    .clientes-resumen {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    .resumen-item { padding: var(--sp-3) !important; }
    .resumen-item strong { font-size: 1.28rem !important; }

    /* La barra de etapas se desliza de costado en vez de envolver.
       El degradado del borde derecho avisa que hay mas etapas: sin el,
       la ultima pastilla queda cortada al ras y parece un error. */
    .barra-etapas {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--sp-3)) var(--sp-3);
        padding: 0 var(--sp-3) var(--sp-2);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

    .barra-etapas::-webkit-scrollbar { display: none; }

    .etapa-pill { scroll-snap-align: start; }

    /* La grilla deja de ser grilla: cada consulta pasa a ser una
       ficha. Nueve columnas en 375px serian ilegibles, y una tabla
       con scroll lateral obliga a ir y volver por cada fila. */
    .grid-head { display: none; }

    .grid-consultas {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    /* Cada celda tiene su propia area. Compartir area entre celdas y
       separarlas con justify-self no alcanza: los items se apilan en
       el mismo track y se superponen. */
    .grid-fila {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            'cliente cliente etapa'
            'canal   tipo    prio'
            'monto   resp    fecha'
            'acc     acc     acc';
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-2);
        min-height: 0;
        border: 1px solid var(--borde-luz);
        border-radius: var(--r-md);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
            var(--surf-1);
        box-shadow: var(--elev-1);
    }

    .grid-fila::before { border-radius: var(--r-md) 0 0 var(--r-md); }

    .celda-cliente { grid-area: cliente; }
    .celda-etapa   { grid-area: etapa; justify-self: end; }

    .grid-fila > .grid-td:nth-child(2) { grid-area: canal; }
    .grid-fila > .grid-td:nth-child(3) { grid-area: tipo; }
    .grid-fila > .grid-td:nth-child(4) { grid-area: prio; }

    /* Los chips no pueden ensanchar su columna ni recortarse feo */
    .grid-fila > .grid-td:nth-child(2) .triage-chip,
    .grid-fila > .grid-td:nth-child(3) .triage-chip,
    .grid-fila > .grid-td:nth-child(4) .triage-chip {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .celda-monto       { grid-area: monto; font-size: 0.74rem; }
    .celda-responsable { grid-area: resp;  font-size: 0.74rem; text-align: center; }

    .celda-fecha {
        grid-area: fecha;
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--sp-1);
        font-size: 0.74rem;
    }

    .celda-acciones {
        grid-area: acc;
        justify-content: stretch;
        opacity: 1;
        padding-top: var(--sp-1);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .celda-acciones .btn-fila { flex: 1; }

    .btn-fila {
        width: auto;
        height: var(--control-h-mobile);
    }

    .etapa-select { width: 100%; font-size: 0.7rem; }

    /* Una etapa por pantalla, se pasa deslizando */
    .historial-head { flex-direction: column; align-items: stretch; }

    .historial-filtros { display: grid; grid-template-columns: 1fr; }

    .historial-filtros .select-field,
    .historial-filtros .btn {
        height: var(--control-h-mobile) !important;
        min-height: var(--control-h-mobile) !important;
        width: 100%;
    }

    .historial-grid { grid-template-columns: 1fr; }

    .clientes-lista { grid-template-columns: 1fr; }

    /* Grid y no flex: movil.css declara `select { max-width: 100%
       !important }`, asi que el select ignora cualquier limite y en
       flex se lleva la fila entera aplastando al buscador. En grid el
       ancho lo fija el track, no el hijo. */
    #tab-clientes .section-head__acciones {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
        gap: var(--sp-2);
        width: 100%;
    }

    .buscador-clientes,
    #clientes-orden {
        min-width: 0;
        width: 100%;
    }

    .bitacora-panel { padding: var(--sp-4) !important; }

    .tabla-vacia { padding: var(--sp-5) var(--sp-3); }
}

/* En desktop no hay plegado */
@media (min-width: 769px) {
    .filtros-toggle { display: none !important; }
    .barra-filtros { display: grid !important; }
}

/* ==========================================================
   16. ACCESIBILIDAD DE MOVIMIENTO

   Si el sistema pide menos movimiento, se apagan las animaciones
   pero NO las opacidades finales: nada puede quedar invisible.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}