/* ==========================================================
   CRM - BARRA DE ABAJO CORTA + MENU "MAS"

   Con la navegacion abajo quedan cinco secciones en la fila
   —Tablero, Leads, Perfil, Mensajes y Hunter— y el resto pasa al
   menu que cuelga del boton de la cabecera. Ver js/mas.js.

   TODO CUELGA DE `html:not(.nav-lateral)` Y NO DE UN @media.

   Parece lo mismo y no lo es. El modo lateral se enciende con
   `(min-width: 1100px) and (pointer: fine)` desde js/lateral.js,
   mientras que movil.css corta en 768px. Entre esos dos numeros
   —una ventana a media pantalla, una tablet— la barra sigue
   estando abajo pero ningun media query de movil aplica: con un
   @media, ahi quedaban las once pestañas apretadas y el boton
   "Mas" escondido, que es el caso que esto viene a arreglar.

   `:not(.nav-lateral)` describe exactamente la condicion que
   importa: "la navegacion es la fila de abajo".
   ========================================================== */

/* 1. LAS SECUNDARIAS NO SE VEN EN LA FILA.
      No se mueven del DOM: js/lateral.js las administra y dos
      modulos mudando los mismos nodos se pelean. Aca solo se
      esconden. */
html:not(.nav-lateral) .main-tabs .tab-btn[data-sec] {
    display: none !important;
}

/* 2. LAS CINCO QUE QUEDAN SE REPARTEN LA FILA.
      Antes eran once con `flex: 0 0 auto` y scroll horizontal;
      con cinco entran holgadas y conviene que ocupen todo el
      ancho, cada una con su area de toque pareja.

      LA BARRA BAJA DE 74px A 58px.

      Los 74 no los pedia nadie: `.main-tabs` tambien lleva la clase
      `glass-panel`, y picker.css le da a esa clase `padding: 14px`.
      Catorce arriba y catorce abajo alrededor de un boton de 46
      daban 74 de barra, casi una decima parte de la pantalla de un
      telefono gastada en aire.

      El padding baja a 6 y el boton se queda en 46: el area para
      tocar no se toca —46px esta por encima de los 44 recomendados—
      y la barra pierde dieciseis pixeles. La medida vive en una
      variable porque el `padding-bottom` del contenido tiene que
      coincidir con ella; si se cambia una sola de las dos, queda un
      hueco o la barra tapa la ultima fila. */
html:not(.nav-lateral) {
    --barra-abajo-h: 58px;
}

html:not(.nav-lateral) .main-tabs {
    justify-content: space-between !important;
    gap: 4px !important;
    height: auto !important;
    min-height: var(--barra-abajo-h) !important;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
}

/* El contenido termina justo donde empieza la barra. Este numero
   estaba escrito a mano en sistema.css (72px) y quedaba viejo cada
   vez que la barra cambiaba de alto. */
html:not(.nav-lateral) .content-area {
    padding-bottom: calc(var(--barra-abajo-h) + env(safe-area-inset-bottom) + 8px) !important;
}

html:not(.nav-lateral) .main-tabs .tab-btn:not([data-sec]) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 10px 6px !important;
}

/* ==========================================================
   2b. QUE RESPONDA AL DEDO EN EL ACTO

   La barra "se tildaba y cambiaba despues". No era el trabajo de
   armar la pestaña —eso ya corre diferido, ver switchTab en
   js/app.js— sino dos cosas de la respuesta al toque:

   1. La transicion de fondo y color de .tab-btn dura 260ms. O sea
      que al apoyar el dedo el resaltado empezaba a aparecer de a
      poco y tardaba un cuarto de segundo en verse entero. En el
      escritorio, con el puntero encima, ese suavizado se lee como
      elegante; en el telefono, donde el dedo tapa el boton y se
      levanta enseguida, se lee como que la aplicacion no contesto.

   2. index.css apaga el destello nativo del toque con
      `-webkit-tap-highlight-color: transparent` y no puso nada en
      su lugar. Sin destello y con el resaltado propio llegando
      260ms tarde, tocar no producia NINGUNA respuesta visible.

   `touch-action: manipulation` es la tercera pata: le avisa al
   navegador que aca no hay doble-toque para hacer zoom, asi que no
   tiene por que esperar a ver si viene un segundo toque antes de
   entregar el evento.
   ========================================================== */
html:not(.nav-lateral) .main-tabs .tab-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    /* Entra rapido y sale suave: lo que importa es que el dedo vea
       algo YA. 90ms esta debajo del umbral en que se percibe espera. */
    transition: background 90ms linear, color 90ms linear !important;
}

/* El acuse de recibo. Sin transicion a proposito: es la unica
   manera de que aparezca en el mismo cuadro en que se apoya el
   dedo. El `scale` da la sensacion de que el boton se hunde —lo
   mismo que hace cualquier aplicacion nativa— y es transform, o
   sea que no cuesta nada. */
html:not(.nav-lateral) .main-tabs .tab-btn:active {
    transition: none !important;
    background: rgba(var(--acento-rgb), 0.18) !important;
    transform: scale(0.94) !important;
}

/* El rotulo no se recorta a la fuerza: si no entra, se achica la
   letra antes de cortar la palabra. "Mensajes" y "Dashboard" son
   las dos largas y entran bien a 0.7rem. */
html:not(.nav-lateral) .main-tabs .tab-btn > span.tab-rotulo {
    font-size: 0.7rem !important;
    letter-spacing: -0.01em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ==========================================================
   3. EL BOTON DE LA CABECERA
   ========================================================== */

/* `overflow: visible` porque el aro de aviso se apoya en la esquina,
   justo donde el `border-radius` curva: con el `overflow: hidden` que
   traen los .btn-icon quedaba cortado por la mitad y se veia como una
   luna en vez de un circulo. */
.mas-btn {
    position: relative;
    overflow: visible !important;
}

/* En modo lateral la columna tiene lugar para las once secciones,
   asi que este boton no tiene nada que mostrar. */
html.nav-lateral .mas-btn { display: none !important; }

html:not(.nav-lateral) .mas-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Al final del grupo de iconos, pegado a Ajustes. Va por `order`
       y no por posicion en el HTML porque js/lateral.js reinserta
       esos botones en SU orden al volver de escritorio (ver
       ORDEN_MOVIL): lo que diga el HTML se pierde en ese viaje, el
       `order` no. */
    order: 9 !important;
}

.mas-btn.abierto {
    background: rgba(var(--acento-rgb), 0.16) !important;
    color: var(--primary) !important;
}

/* EL AVISO ES UN ARO, NO UN PUNTO LLENO.

   Relleno era una gota de color sobre el icono: pesaba mas que el
   propio boton y se leia como un error. Un aro fino dice lo mismo
   —hay algo— sin gritar, y deja ver el fondo por el centro, que es
   lo que lo hace parecer parte del icono y no una calcomania
   pegada encima. Mismo tamaño, un cuarto de la tinta. */
/* VA POR ID, Y NO ES CAPRICHO.

   picker.css le pega a CUALQUIER hijo directo de un .btn-icon de la
   barra —`html body .top-navbar .btn-icon > span:not(.dot)`, pensado
   para los contadores del chat— con `height: 14px !important`. Eso es
   especificidad (0,3,3), mas alta que cualquier combinacion razonable
   de clases: con selectores de clase el aro salia de 14 y aplastado
   por el padding, sin importar cuantos !important se le pusieran.

   Un id vale mas que cualquier cantidad de clases, asi que
   `#mas-btn .mas-btn__punto` gana sin discusion y sin tener que
   escribir una cadena de seis niveles que despues nadie entiende. */
#mas-btn .mas-btn__punto {
    position: absolute;
    /* Apoyado en la esquina, sobresaliendo apenas: adentro se
       superponia con las lineas de la grilla del icono. */
    top: -2px !important;
    right: -2px !important;
    left: auto !important;
    bottom: auto !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    /* Sin halo. Lo tenia cuando el aro caia adentro del boton y se
       cruzaba con las lineas de la grilla; ahora que se apoya en la
       esquina, sobre el fondo liso de la barra, el halo era un disco
       oscuro alrededor que ensuciaba justo lo que se venia a limpiar. */
    box-shadow: none !important;
    pointer-events: none;
}

/* ==========================================================
   4. EL DESPLEGABLE

   Cuelga del <body> en `position: fixed` (ver el comentario de
   js/mas.js): adentro de la cabecera quedaba cortado por su
   overflow.
   ========================================================== */

.mas-menu {
    position: fixed;
    z-index: 4000;
    min-width: 208px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    /* Superficie opaca y no vidrio: este panel se abre SOBRE el
       contenido y sobre el fondo de video. Un backdrop-filter aca
       seria un desenfoque nuevo recalculandose con cada cuadro del
       video, que es justo lo que se saco del header y del panel
       lateral por lento (ver rendimiento.css). */
    background: var(--surf-1, #14161c);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.24);

    /* Solo opacity y transform: las dos que el navegador anima sin
       repintar. */
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.mas-menu.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mas-menu[hidden] { display: none; }

.mas-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    /* 44px de alto, la medida comoda para el dedo. */
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main, #e8eaed);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.mas-item:hover,
.mas-item:focus-visible {
    background: rgba(var(--acento-rgb), 0.12);
    color: var(--primary);
    outline: none;
}

.mas-item.activo {
    background: rgba(var(--acento-rgb), 0.16);
    color: var(--primary);
}

.mas-item i,
.mas-item .ico,
.mas-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    font-size: 1rem;
    opacity: 0.85;
}

.mas-item__txt {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El texto va OSCURO sobre el verde, en los dos temas.

   El acento del CRM es un verde claro: encima de el, el blanco da
   1,66:1 de contraste —ilegible, el minimo accesible es 4,5— y el
   oscuro da 11,35:1. Que el tema sea claro no cambia nada, porque
   el fondo de esta pastilla no es el de la pagina: es el verde,
   igual en los dos. Medido, no estimado. */
.mas-item__badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary);
    color: #06131c;
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
}

/* ==========================================================
   5. TEMA CLARO

   El panel oscuro sobre una pantalla clara se ve como un agujero.
   Van los mismos elementos con la superficie y las sombras dadas
   vuelta; el acento no cambia, que es lo que mantiene la pieza
   reconocible entre los dos temas.
   ========================================================== */

html[data-tema="claro"] .mas-menu {
    background: #fff;
    border-color: rgba(16, 20, 30, 0.1);
    box-shadow: 0 12px 32px rgba(16, 20, 30, 0.16), 0 2px 8px rgba(16, 20, 30, 0.08);
}

html[data-tema="claro"] .mas-item {
    color: #1a1d24;
}

html[data-tema="claro"] .mas-item:hover,
html[data-tema="claro"] .mas-item:focus-visible,
html[data-tema="claro"] .mas-item.activo {
    background: rgba(var(--acento-rgb), 0.14);
    color: color-mix(in srgb, var(--primary) 72%, #10141e);
}

html[data-tema="claro"] .mas-btn__punto {
    box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================
   6. AVISOS Y SESION SE VAN A PERFIL (SOLO CON LA BARRA ABAJO)

   En el telefono la cabecera se quedaba sin lugar: con la marca, el
   rol y los botones de video, chat, apariencia y avisos, la campana
   quedaba cortada contra el borde derecho y no se podia tocar.

   Los dos que menos se usan de esa fila se esconden y viven en la
   pestaña Perfil. Se esconden, no se mueven: js/lateral.js
   administra esos mismos nodos y dos modulos mudando los mismos
   botones se pelean. Los delegados de Perfil los aprietan desde
   alla (ver js/mas.js).

   En modo lateral no se toca nada: alli viven en el pie de la
   columna, que tiene lugar de sobra.
   ========================================================== */
html:not(.nav-lateral) .top-navbar #avisos-toggle,
html:not(.nav-lateral) .top-navbar #logout-btn,
html:not(.nav-lateral) .brand-container #avisos-toggle,
html:not(.nav-lateral) .brand-container #logout-btn {
    display: none !important;
}

/* La tarjeta de Perfil se ve SIEMPRE, tambien en escritorio: tener
   "cerrar sesion" en el perfil es lo que uno espera encontrar ahi,
   no una muleta del telefono. */
.perfil-sesion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.perfil-sesion-acciones .btn {
    flex: 1 1 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 12px;
}

/* El contador de avisos, igual que el de la campana de la cabecera.
   Texto oscuro en los dos temas, por lo mismo que .mas-item__badge:
   el fondo es el verde del acento, no el de la pagina. */
.perfil-sesion-cuenta {
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary);
    color: #06131c;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.5;
}

/* Cerrar sesion se despega del resto: es la unica de esta tarjeta
   que no se puede deshacer con otro toque. Rojo al pasar por
   encima, no de entrada, para no gritar desde el fondo de la
   pantalla. */
.perfil-salir:hover,
.perfil-salir:focus-visible {
    border-color: var(--danger, #ef4444) !important;
    color: var(--danger, #ef4444) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ==========================================================
   7. LA CABECERA, DE BORDE A BORDE

   `#crm-workspace` tiene `padding: 16px`, y la cabecera vivia
   adentro de ese marco: quedaba flotando con una franja del fondo
   a cada lado, como una tarjeta. En un telefono eso son treinta y
   dos pixeles de ancho regalados y, sobre todo, la hace parecer
   una tarjeta mas del contenido en vez del techo de la pantalla.

   El margen negativo la saca del marco sin tocar el padding del
   contenedor, que es el que le da aire al contenido de abajo y no
   hay razon para sacarselo.

   Si algun dia cambia el `padding` de #crm-workspace, hay que
   cambiar este numero: son el mismo valor mirado desde los dos
   lados. Por eso va en una variable con nombre, para que se
   encuentre buscando.
   ========================================================== */
html:not(.nav-lateral) {
    --marco-lateral: 16px;
}

html:not(.nav-lateral) .top-navbar {
    margin-left: calc(var(--marco-lateral) * -1) !important;
    margin-right: calc(var(--marco-lateral) * -1) !important;
    /* Arriba tambien: los mismos 16px del marco dejaban una franja
       de fondo entre el borde de la pantalla y la barra. Se notaba
       sobre todo al esconderse —la barra se iba y quedaba una tira
       de fondo donde antes habia algo— y hacia que pareciera una
       tarjeta flotando en vez del techo de la aplicacion. */
    margin-top: calc(var(--marco-lateral) * -1) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    /* Menos alto que el 14px que traia de `.glass-panel`: la barra
       es una tira de iconos, no un panel con contenido. */
    padding: 8px var(--marco-lateral) !important;
}

/* ==========================================================
   8. LOS ICONOS DE LA CABECERA: MAS GRANDES Y MAS FINOS

   Llamadas, mensajes, ajustes y el de secciones eran botones de
   34px con un dibujo de 15 adentro: mucho borde y poca figura,
   dificiles de acertar con el pulgar.

   Suben a 40 de caja y 21 de dibujo. Y el trazo baja de 1,75 a
   1,4: cuanto mas grande es un icono de linea, mas gruesa se ve la
   linea a igual valor. Bajarlo al agrandar es lo que mantiene el
   peso visual parejo —es la misma razon por la que iconos.css usa
   `vector-effect: non-scaling-stroke`— y lo que hace que se lean
   modernos en vez de pesados.
   ========================================================== */
/* Van los tres —`height`, `min-height` y `max-height`— y no solo el
   primero: picker.css fija los tres en 32px con !important, asi que
   subir `height` a 40 no alcanzaba. El `max-height` le ponia un techo
   y el boton seguia midiendo 32, con la regla nueva ganando la
   pulseada y sin ningun efecto visible. Lo mismo del lado del ancho,
   por las dudas. */
html:not(.nav-lateral) .top-navbar .btn-icon {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
}

html:not(.nav-lateral) .top-navbar .btn-icon i.ico,
html:not(.nav-lateral) .top-navbar .btn-icon i {
    font-size: 21px !important;
}

html:not(.nav-lateral) .top-navbar .btn-icon i.ico > svg {
    stroke-width: 1.4 !important;
}

/* ==========================================================
   8b. HACER LUGAR PARA EL CUARTO BOTON

   Con el boton de secciones mudado a este grupo, la fila pide
   349px y la cabecera de un telefono da 343: el ultimo boton caia
   afuera y `overflow: hidden` de .brand-container (picker.css) lo
   recortaba sin dejar rastro. Se veia como si el boton no
   existiera.

   Los pixeles salen de donde sobran y no de los botones, que es
   justo lo que se acaba de agrandar:

     - El logotipo baja de 173 a 128 de ancho. Es la pieza mas
       grande de la barra por lejos y sigue leyendose perfecto: la
       proporcion se respeta al milimetro (el PNG es 3384x371, o
       sea 9,12 a 1) porque deformarlo se nota enseguida.
     - El margen lateral pasa de 16 a 12.
     - El aire entre iconos, de 10 a 4. Con botones de 40px, diez
       de separacion es mas de lo que hace falta para no errarle.
   ========================================================== */
html:not(.nav-lateral) .top-navbar .marca-nombre {
    width: 128px !important;
    height: 14px !important;
}

html:not(.nav-lateral) .top-navbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

html:not(.nav-lateral) .top-navbar .brand-container {
    gap: 4px !important;
    /* Que pueda usar todo el ancho que le quede: sin esto se queda
       en el que calculo antes y vuelve a recortar el ultimo boton. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* El logotipo no se encoge ni se estira con lo que pase al lado. */
html:not(.nav-lateral) .top-navbar .logo-wrapper {
    flex: 0 0 auto !important;
}

/* Y el grupo de la derecha ocupa lo justo, para no empujar. */
html:not(.nav-lateral) .top-navbar .user-meta {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* ==========================================================
   9. LA CABECERA SE VA AL BAJAR Y VUELVE AL SUBIR

   En un telefono la cabecera son 61 pixeles fijos que casi nunca se
   necesitan mientras se lee una lista. Al bajar se va; apenas se
   hace el gesto de subir, vuelve —antes de llegar arriba del todo,
   que es lo que uno espera cuando quiere el buscador o el menu—.

   Se mueve con `transform` y nada mas. Es la propiedad que el
   navegador anima en la placa de video sin recalcular posiciones ni
   volver a pintar: la cabecera se desliza sin costo. Cambiarle el
   `top` o la altura, que es la otra forma de hacer esto, obliga a
   recalcular el layout de la pagina entera en cada cuadro del
   gesto, y en un telefono eso se siente como que el scroll trabaja
   con esfuerzo. Ver js/mas.js para cuando se pone y se saca la
   clase.
   ========================================================== */
html:not(.nav-lateral) .top-navbar {
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
    /* Un unico elemento promovido a su propia capa. Es justo el caso
       para el que existe `will-change`: algo que se va a mover de
       verdad y seguido. */
    will-change: transform;
}

html:not(.nav-lateral).cabecera-oculta .top-navbar {
    transform: translateY(-100%);
}

/* ==========================================================
   10. "CARGAR LEAD" ES UN MAS Y NADA MAS

   OJO: este bloque NO cuelga de `html:not(.nav-lateral)`. Es el
   unico de esta hoja que vale en los tres tamaños —telefono,
   tablet y escritorio— porque el pedido fue justamente ese. Si se
   agrega algo aca abajo, mirar bien si va con prefijo o sin el.

   El texto salio del HTML; esto solo lo deja cuadrado.

   Conserva `btn-primary-3d` —el relieve y el color de accion
   principal— porque sigue siendo el boton mas importante de la
   fila: es el unico que CREA algo, los demas filtran o mandan.

   Se probo agregarle tambien `btn-icono`, que es la forma que usan
   sus vecinos, y no sirve: esa clase pinta el fondo transparente y
   le ganaba al color primario, con lo cual el boton quedaba igual
   que los otros y perdia la jerarquia. La forma se da aca.

   VAN DOS IDs EN EL SELECTOR, Y NO ES POR GUSTO.

   picker.css ya tiene `html body #tab-pipeline #open-create-lead-btn`
   con `min-width: 0 !important; flex: 1 1 auto !important` —para que
   el boton se estire en la fila cuando tenia texto—. Eso es DOS ids
   de especificidad. Un selector con un solo id pierde, aunque esta
   hoja cargue despues y aunque lleve !important: la especificidad se
   mira antes que el orden. De ahi que la primera version quedara
   aplastada en 28px de ancho.

   Se repite el mismo par de ids y se le suma la clase, que alcanza
   para ganar sin inventar una cadena mas larga.
   ========================================================== */
html body #tab-pipeline #open-create-lead-btn.btn-mas-lead {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
}

/* El signo, un punto mas grande que el resto de los iconos de la
   fila: es la accion principal de la pantalla. */
html body #tab-pipeline #open-create-lead-btn.btn-mas-lead i {
    font-size: 1.15rem !important;
    margin: 0 !important;
}

/* En el telefono la fila de acciones es mas apretada. */
html:not(.nav-lateral) body #tab-pipeline #open-create-lead-btn.btn-mas-lead {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
}

/* Quien pidio menos movimiento en el sistema no tiene por que ver
   el panel entrar deslizandose ni la cabecera correrse. Aparecen y
   listo. */
@media (prefers-reduced-motion: reduce) {
    .mas-menu { transition: none; }
    html:not(.nav-lateral) .top-navbar { transition: none; }
}