/* ==========================================
   BOTONES DE ACCIONES GLOBALES
========================================== */

:root {
    --accion-verde: #28774e;
    --accion-verde-fondo: #e5f3e9;

    --accion-azul: #2472b5;
    --accion-azul-fondo: #e9f3ff;

    --accion-amarillo: #b7791f;
    --accion-amarillo-fondo: #fff3db;

    --accion-rojo: #c34242;
    --accion-rojo-fondo: #fcebec;

    --accion-violeta: #6656b9;
    --accion-violeta-fondo: #f0edff;

    --accion-gris: #596773;
    --accion-gris-fondo: #edf0f2;
}

/* Contenedor de acciones */

.acciones-tabla {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

/* Botón base */

.btn-accion {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 1px solid var(--accion-verde);
    border-radius: 3px;

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

/* SVG */

.btn-accion svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Hover */

.btn-accion:hover {
   background: #28774e;
    color: #ffffff;
    text-decoration: none;
}

.btn-accion:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.btn-accion:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.btn-accion-editar {
    background: #e8f2eb;
    color: #28774e;
}

.btn-accion-ver {
    background: var(--accion-azul-fondo);
    color: var(--accion-azul);
}

.btn-accion-fotos,
.btn-accion-contenidos,
.btn-accion-qr {
    background: var(--accion-verde-fondo);
    color: var(--accion-verde);
}

.btn-accion-reproducir {
    background: var(--accion-violeta-fondo);
    color: var(--accion-violeta);
}

.btn-accion-eliminar {
    background: #e8f2eb;
    color: #28774e;
}

.btn-accion-ocultar {
    background: #e8f2eb;
    color: #28774e;
}

/* Mantener el color al pasar el mouse */

.btn-accion:hover {
   /* color: inherit;*/
}

/* Variante compacta */

.btn-accion-sm {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 7px;
}

.btn-accion-sm svg {
    width: 16px;
    height: 16px;
}

/* Tablas */

td.columna-acciones {
    vertical-align: middle;
    white-space: normal;
}

/* Responsive */

@media (max-width: 768px) {
    .acciones-tabla {
        gap: 5px;
    }

    .btn-accion {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}


/* Recuerdos */
.btn-accion-recuerdos {
    background: #e8f2eb;
    color: #28774e;
}

/* Dedicatorias */
.btn-accion-dedicatorias {
    background: #e8f2eb;
    color: #28774e;
}

/* Enlaces */

.btn-accion-enlaces {
    background: #e5f3e9;
    color: #28774e;
}

.btn-accion-enlaces:hover {
    background: #28774e;
    color: #ffffff;
}


/* Descargar código QR */

.btn-accion-descargar-qr {
    background: #e5f3e9;
    color: #28774e;
}

.btn-accion-descargar-qr:hover {
    background: #28774e;
    color: #ffffff;
}

/* ==========================================
   VISTA PREVIA
========================================== */

.btn-accion-vista-previa {
    background: #e8f2eb;
    color: #28774e;
}

.btn-accion-vista-previa:hover {
    background: #28774e;
    color: #ffffff;
}

/* ==========================================
   OCULTAR MEMORIAL
========================================== */

.btn-accion-ocultar {
    background: #edf0f2;
    color: #28774e;
}

.btn-accion-ocultar:hover {
    background: #28774e;
    color: #ffffff;
}



/* ==========================================
   ADMINISTRACIÓN DE CONTENIDOS
========================================== */

/* Biografía */
.btn-accion-biografia {
    background: #e8f2eb;
    color: #28774e;
}

/* Momentos */
.btn-accion-momentos {
    background: #e8f2eb;
    color: #28774e;
}

/* Efectos hover */
.btn-accion-biografia:hover {
    background: #28774e;
    color: #ffffff;
}

.btn-accion-momentos:hover {
    background: #28774e;
    color: #ffffff;
}