/* SCRUM-258 — «List Menu», el panel desplegable del nodo 5902-97131.

   Es el componente que Carolina pide en el ticket cuando dice «ajustar el estilo como los
   kebabs»: el kebab ya lo implementa (ImageKebab y ThreeDotsPopup, nodo hermano 5639-91337),
   y los selectores de marca y sucursal no.

   Va como hoja global y no como CSS scoped de cada pantalla porque los tres selectores viven
   en proyectos distintos y el nodo es uno solo: con una copia por pantalla, la próxima
   corrección llega a dos de tres. La carga App.razor, que es el host de todo.

   Lo que el nodo mide, y de dónde sale cada valor:

     Panel  fondo color.base.white · borde 1px color.border.container · sin radio ·
            sombra shadow.surface.lg · relleno 8px arriba y abajo
     Ítem   alto fijo 40 · relleno 12/16 · borde inferior 1px ·
            Nunito 16/120% · gray.color.neutral.800
     Hover  color.brand.primary.100

   La posición la pone cada pantalla: el nodo fija el ancho en 265 porque ahí vive en el menú
   lateral, pero en reportes el panel mide lo que mide su disparador. Acá va lo que el
   componente es, no dónde cae. */

/* El panel no dice dónde cae, a propósito: eso es de quien lo usa. Meter el desplazamiento
   acá rompió la copia responsive del menú lateral, que pisa la posición a «relative» para que
   el panel empuje en vez de flotar — y en relativo el desplazamiento del 100% no se resuelve
   contra el alto del panel sino contra el del contenedor: lo mandaba 716px abajo, fuera de
   una ventana de 812. El anclaje al disparador vive en «.list-menu-host > .list-menu», que es
   la única forma de uso que lo necesita. */
.list-menu {
    position: absolute;
    z-index: 100;
    box-sizing: border-box;
    background: var(--color-base-white, #FFF);
    border: 1px solid var(--color-border-container, #E5E7EB);
    /* El nodo no redondea, y es el único lugar donde esto se declara: el desplegable del menú
       lateral venía con 8 y era lo que más lo diferenciaba del kebab. */
    border-radius: 0;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.list-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 12px 16px;
    margin: 0;
    background: none;
    border: none;
    /* El nodo le pone borde abajo a cada ítem. El kebab no lo tiene —tiene dos opciones y una
       línea entre ellas no hace falta—, pero acá la lista es de largo variable y es lo que el
       nodo dibuja entre «Marca nombre» y «Marca test». */
    border-bottom: 1px solid var(--color-border-container, #E5E7EB);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--gray-color-neutral-800, #262626);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La última no lleva línea: debajo ya está el borde del panel, y dos juntas se ven como una
   más gruesa. */
.list-menu-item:last-child {
    border-bottom: none;
}

.list-menu-item:hover {
    background: var(--color-brand-primary-100, #DAFEED);
}

/* La marca o la sucursal en la que ya estás. El nodo no define un estado «seleccionado»
   aparte: la fila que coincide con el encabezado —«Marca test»— es la que está en Hover, así
   que es ese mismo verde. El azul que había en el menú lateral no sale de ningún nodo. */
.list-menu-item.is-current {
    background: var(--color-brand-primary-100, #DAFEED);
}

/* El disparador: la caja que se ve cerrada y abre el panel. En el nodo es el encabezado con
   el nombre y el chevron; donde reemplaza a un <select> conserva la caja que ese select ya
   tenía, para no mover la pantalla de lugar. */
.list-menu-host {
    position: relative;
}

/* El panel colgado de un disparador: cae justo debajo y con su mismo ancho. Va acá y no en
   .list-menu porque el menú lateral no lo usa — el de escritorio se coloca él mismo y el
   responsive ni siquiera flota. */
.list-menu-host > .list-menu {
    top: 100%;
    left: 0;
    right: 0;
}

.list-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    background: var(--color-base-white, #FFF);
    border: 1px solid var(--color-border-container, #E5E7EB);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--gray-color-neutral-800, #262626);
}

.list-menu-trigger-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-menu-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.list-menu-trigger[aria-expanded="true"] .list-menu-chevron {
    transform: rotate(180deg);
}

/* Tapa el resto de la pantalla para que un clic afuera cierre el panel, sin que haga falta un
   listener en document que cada pantalla tendría que recordar sacar. */
.list-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}