@keyframes spf-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ── DARK (default) ─────────────────────────────────────── */ .str_prettier_format { display : block; padding : 0.75em 1.1em; border-radius: 0.9rem; border : none; word-break : break-word; overflow-wrap: break-word; background : rgba(255, 255, 255, 0.07); backdrop-filter : blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow : 0 2px 16px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.12); color : rgba(236, 240, 241, 0.92); font-size : var(--fuente-normal, 1em); line-height: 1.65; animation : spf-in 0.18s ease-out both; transition : box-shadow 0.14s ease, background 0.14s ease; } .str_prettier_format:hover { background : rgba(255, 255, 255, 0.11); box-shadow : 0 4px 22px rgba(0, 0, 0, 0.30), 0 1px 4px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } /* ── LIGHT ───────────────────────────────────────────────── */ /* activar agregando clase .light al o contenedor */ .light .str_prettier_format { background : linear-gradient(135deg, rgba(235, 228, 255, 0.60) 0%, rgba(225, 238, 255, 0.60) 100%); backdrop-filter : none; -webkit-backdrop-filter: none; box-shadow : 0 2px 14px rgba(110, 80, 200, 0.09), 0 1px 3px rgba(110, 80, 200, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(160, 130, 220, 0.10); color : var(--color-asfalto, #263238); } .light .str_prettier_format:hover { background : linear-gradient(135deg, rgba(235, 228, 255, 0.80) 0%, rgba(225, 238, 255, 0.80) 100%); } @media (prefers-reduced-motion: reduce) { .str_prettier_format { animation: none; } }