/*
 * pqr-row-highlight.css
 * Implementacion del contrato definido en
 * Apernet.Framework.CommonWebLibrary.RowHighlightHelper.
 *
 * Variables override-ables. Otras soluciones derivadas pueden cambiar estos
 * valores en su propio CSS sin tocar este archivo.
 */
:root {
    --pqr-row-flash-update-bg:  rgba(13, 110, 253, 0.25);  /* azul */
    --pqr-row-flash-insert-bg:  rgba(25, 135, 84,  0.25);  /* verde */
    --pqr-row-flash-delete-bg:  rgba(220, 53, 69,  0.25);  /* rojo */
    --pqr-row-flash-duration:   2s;
    --pqr-row-stale-border:     var(--bs-warning);
}

@keyframes pqrRowFlashUpdated {
    from { background-color: var(--pqr-row-flash-update-bg); }
    to   { background-color: transparent; }
}
@keyframes pqrRowFlashInserted {
    from { background-color: var(--pqr-row-flash-insert-bg); }
    to   { background-color: transparent; }
}
@keyframes pqrRowFlashDeleted {
    from { background-color: var(--pqr-row-flash-delete-bg); }
    to   { background-color: transparent; }
}

.pqr-row-flash-updated  > td { animation: pqrRowFlashUpdated  var(--pqr-row-flash-duration) ease-out forwards; }
.pqr-row-flash-inserted > td { animation: pqrRowFlashInserted var(--pqr-row-flash-duration) ease-out forwards; }
.pqr-row-flash-deleted  > td { animation: pqrRowFlashDeleted  var(--pqr-row-flash-duration) ease-out forwards; }

/* Marca remota (Fase 2 - SignalR). Persistente hasta refresh manual. */
.pqr-row-stale-remote {
    border-left: 3px solid var(--pqr-row-stale-border) !important;
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .pqr-row-flash-updated  > td,
    .pqr-row-flash-inserted > td,
    .pqr-row-flash-deleted  > td {
        animation: none;
        outline: 2px solid currentColor;
    }
}