/* Acciones por fila de una tabla: uno o dos botones ícono visibles y el resto
   dentro del menú "…" (row_actions.js). El menú es position:fixed y lo ubica el
   JS, así que no lo recorta el overflow del contenedor de la tabla. */

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.ra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: .375rem;
    cursor: pointer;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: background .15s;
}
.ra-btn:hover { background: #e2e8f0; }

.ra-menu {
    position: fixed;
    z-index: 70;
    min-width: 13rem;
    padding: .25rem;
    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);
}
.ra-menu.hidden { display: none; }
/* Los ítems que son POST van envueltos en su propio <form>: sin esto el form
   agrega su caja y el botón deja de ocupar el ancho del menú. */
.ra-menu form { display: block; margin: 0; }

.ra-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4375rem .625rem;
    border-radius: .375rem;
    font-size: .8125rem;
    color: #334155;
    white-space: nowrap;
    text-align: left;
}
.ra-item:hover { background: #f1f5f9; }
/* Variante <button> (acciones POST): que no herede el look de botón del browser. */
button.ra-item {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
button.ra-item:hover { background: #f1f5f9; }
button.ra-item:disabled { opacity: .45; cursor: not-allowed; }
button.ra-item:disabled:hover { background: none; }

.ra-item.ra-danger { color: #dc2626; }
.ra-item.ra-danger:hover { background: #fee2e2; }

.ra-sep { height: 1px; margin: .25rem .375rem; background: #e2e8f0; }