/**
 * LOS SEPARADORES DEL MENÚ «OPCIONES», PARA LAS CATORCE TABLAS DE LA APP.
 *
 * LA RAYA GRIS COLGADA DEL BORDE DE ARRIBA. Cada opción del menú se pintaba con su propio
 * `border-t border-gray-200` de Tailwind: o sea que cada opción traía puesto el separador de
 * la que tiene ENCIMA. Y qué opciones se pintan depende de la fila, porque el `render` de la
 * columna las va concatenando dentro de `if`s (`row.puedoAbrirDisputa`, `row.tieneDisputa`,
 * `row.puedoAddFactura`…). En cuanto la primera que sobrevive es una de las que llevan borde,
 * la raya queda flotando en el borde superior del panel sin nada que separar.
 *
 * Se veía a diario en /mis-disputas, donde el menú tiene UNA sola opción («Abrir disputa») y
 * era todo lo que se veía: un panel blanco con una raya cruzándole la cabeza. Y en
 * /operaciones, /articulos_alquilados, /cupones_descuento, /articulos_publicados y
 * /backoffice/usuarios pasaba lo mismo en cuanto la fila no daba para más opciones.
 *
 * No se arregla opción por opción, porque una opción NO PUEDE SABER si es la primera: eso
 * depende de datos que sólo existen en tiempo de ejecución. Lo sabe la LISTA, y se dice con
 * `li + li`. Aquí, una vez, para los catorce menús —el marcado está copiado catorce veces y
 * no hacía falta copiar también el arreglo, igual que con su colocador de al lado—.
 *
 * Se carga desde plantillas/layout.blade.php DETRÁS de @yield('css'), como
 * datatables-paginacion.css: las hojas de cada vista se enlazan ahí dentro y esto necesita ir
 * detrás para ganar en cascada.
 *
 * @see public/js/menu-acciones-tabla.js  El que coloca el panel; esto le da forma.
 * @see tests/Feature/MenuAccionesTablaTest.php
 * @see tests/e2e/admin/menu-acciones-tabla.spec.ts
 */

/* NINGUNA OPCIÓN PINTA SU PROPIO BORDE DE ARRIBA. Los `border-t` del marcado ya están fuera,
   pero esto se queda: son catorce plantillas que se copian entre ellas, y basta con que una
   vuelva a nacer con la clase puesta para que reaparezca la raya. Gana por especificidad
   (0,1,3 contra el 0,1,0 de `.border-t`), así que no hace falta ningún `!important`. */
.dropdown-menu ul > li > a,
.dropdown-menu ul > li > button {
    border-top-width: 0;
}

/* Y EL SEPARADOR VA ENTRE DOS OPCIONES, que es lo único que un separador puede significar. En
   la primera no hay `li` anterior, así que no se pinta: el panel de una sola opción sale limpio.

   `--border` es el token de las tablas (public/css/mrx-tabla.css), y el menú vive dentro de
   `.mrx-tabla` en seis de las ocho vistas: allí la raya es la misma que la del borde del panel
   y cambia sola con el tema oscuro. El respaldo es para las otras dos —/backoffice/usuarios y
   /verifactu/pagos, que no llevan esa hoja—, y no es opcional: un `var()` sin definir y sin
   respaldo deja el borde en `currentColor`, o sea una raya del color del texto. */
.dropdown-menu ul > li + li {
    border-top: 1px solid var(--border, #E5E7EB);
}
