/* ===================================================================
   MOTION & PULIDO global — capa de "vida" premium, sutil y elegante.
   Reversible: quitar el <link> y el <script> del header.
   Respeta prefers-reduced-motion (no anima si el usuario lo pidió).
   No toca la paleta: todo en petrol/coral/marfil tinteado.
   =================================================================== */

/* ── Entrada suave de los bloques de la página (sin FOUC) ──────────
   Un inline-script en el <head> agrega html.rs-anim ANTES del paint y
   oculta los bloques de primer nivel; motion.js les agrega .rs-entra
   escalonado. A los 700ms un failsafe revela todo por las dudas. */
@keyframes rs-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
html.rs-anim .fl-contenedor > *:not(.rs-entra) { opacity: 0; }
.rs-entra {
    animation: rs-entra .68s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--rs-delay, 0ms);
}

/* ── Hover con física en lo interactivo (cards-link, métricas) ───── */
a.fl-tarjeta, .fl-tarjeta--interactiva, .fl-tarjeta-metrica {
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}
a.fl-tarjeta:hover, .fl-tarjeta--interactiva:hover, .fl-tarjeta-metrica:hover {
    transform: translateY(-3px);
    box-shadow: var(--fl-sombra-lg);
}
a.fl-tarjeta:active, .fl-tarjeta--interactiva:active, .fl-tarjeta-metrica:active {
    transform: translateY(-1px);
}

/* ── Micro-tipografía: números tabulares (no "saltan") ──────────── */
.fl-tarjeta-metrica-valor, .fl-badge, .fl-tabla td, .rs-num,
.rs-ed-stat-num, .rs-noti-fila-fecha { font-variant-numeric: tabular-nums; }

/* ── kbd tags (teclitas estilo tecla) ───────────────────────────── */
kbd, .fl-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.55em; height: 1.55em; padding: 0 .4em;
    font-family: var(--rs-fuente-mono, ui-monospace, monospace);
    font-size: .78em; font-weight: 600; line-height: 1;
    color: var(--rs-petrol-700, #11303D);
    background: var(--rs-marfil-100, #F6F0E1);
    border: 1px solid var(--rs-tinta-200, #C9CFD4);
    border-bottom-width: 2px;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(11, 35, 48, .04);
}

/* ── Profundidad sutil (glass) en overlays de modales ───────────── */
.fl-modal-overlay, .fl-modal-fondo { backdrop-filter: blur(3px); }

/* ── Respeto a accesibilidad ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rs-entra { animation: none !important; }
    html.rs-anim .fl-contenedor > * { opacity: 1 !important; }
    a.fl-tarjeta:hover, .fl-tarjeta--interactiva:hover, .fl-tarjeta-metrica:hover { transform: none; }
}
