/* Barra de acciones del header (el bloque `page_actions` de base.html).
 *
 * Por defecto es la fila de botones de siempre. La pantalla que tiene más
 * acciones de las que entran en una fila deja a la vista la primaria y mete el
 * resto en un menú "⋮" — ver `products/producto_list.html`:
 *
 *   <details class="pa-actions" data-menu>
 *     <summary class="btn btn-secondary pa-more">…</summary>
 *     <div class="pa-menu"> …los botones… </div>
 *   </details>
 *
 * `<details>` es el disclosure nativo: abre y cierra sin JS, con teclado, y
 * —lo que importa acá— el markup viene del server, así que no hay una fila de
 * botones que se pinta y después se acomoda.
 *
 * El menú es igual en TODOS los anchos y no sólo en mobile: en una pantalla
 * mediana seis acciones tampoco entran, y una barra que cambia de forma según
 * el ancho deja el mismo botón en dos lugares distintos según la máquina.
 */

.page-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pa-actions { position: relative; }

/* El triangulito del `<summary>`: fuera. El botón ya tiene su ícono. */
.pa-more { list-style: none; }
.pa-more::-webkit-details-marker { display: none; }
.pa-more {
    /* Cuadrado: es sólo el ícono, sin el padding lateral del texto. */
    padding: .5rem;
}

.pa-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    min-width: 14rem;
    padding: .375rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .06);
}

/* Los botones pasan a ser filas del menú: ancho completo y texto alineado a la
   izquierda. `.pa-menu > * > .btn` alcanza al disparador de un control que
   viene envuelto (el selector de columnas) sin tocar los botones que ese
   control tiene DENTRO de su propio panel, que están más abajo. */
.pa-menu > * { width: 100%; }
.pa-menu > .btn,
.pa-menu > * > .btn {
    width: 100%;
    justify-content: flex-start;
}