/*
 * grid-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 {
    --ui-row-flash-update-bg:  rgba(13, 110, 253, 0.25);  /* azul */
    --ui-row-flash-insert-bg:  rgba(25, 135, 84,  0.25);  /* verde */
    --ui-row-flash-delete-bg:  rgba(220, 53, 69,  0.25);  /* rojo */
    --ui-row-flash-danger-bg:  rgba(220, 53, 69,  0.25);  /* rojo (error de operacion) */
    --ui-row-flash-duration:   2s;
    --ui-row-stale-border:     var(--bs-warning);
}

@keyframes uiRowFlashUpdated {
    from { background-color: var(--ui-row-flash-update-bg); }
    to   { background-color: transparent; }
}
@keyframes uiRowFlashInserted {
    from { background-color: var(--ui-row-flash-insert-bg); }
    to   { background-color: transparent; }
}
@keyframes uiRowFlashDeleted {
    from { background-color: var(--ui-row-flash-delete-bg); }
    to   { background-color: transparent; }
}
@keyframes uiRowFlashDanger {
    from { background-color: var(--ui-row-flash-danger-bg); }
    to   { background-color: transparent; }
}

.ui-row-flash-updated  > td { animation: uiRowFlashUpdated  var(--ui-row-flash-duration) ease-out forwards; }
.ui-row-flash-inserted > td { animation: uiRowFlashInserted var(--ui-row-flash-duration) ease-out forwards; }
.ui-row-flash-deleted  > td { animation: uiRowFlashDeleted  var(--ui-row-flash-duration) ease-out forwards; }
.ui-row-flash-danger   > td { animation: uiRowFlashDanger   var(--ui-row-flash-duration) ease-out forwards; }

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

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