/* ============================================================ DevGlam Studio — ui-feedback.css Toast / Alert system + Loader / Skeleton system Tema: body.theme-dark (clase en ) ============================================================ */ /* ── Variables de tema ─────────────────────────────────────── */ :root { --uf-bg: rgba(255, 255, 255, 0.94); --uf-bg-overlay: rgba(245, 241, 236, 0.72); --uf-border: rgba(50, 43, 38, 0.10); --uf-text: #272320; --uf-text-sub: #8b8580; --uf-shadow: 0 4px 6px rgba(39,35,32,.06), 0 20px 50px rgba(39,35,32,.10); --uf-shadow-heavy: 0 8px 12px rgba(39,35,32,.08), 0 28px 60px rgba(39,35,32,.14); --uf-radius: .75rem; --uf-blur: 18px; /* Colores de tipo */ --uf-success-bg: rgba(127, 155, 135, 0.12); --uf-success-line: #7f9b87; --uf-success-icon: #7f9b87; --uf-success-text: #3d5e45; --uf-error-bg: rgba(159, 79, 86, 0.11); --uf-error-line: #9f4f56; --uf-error-icon: #9f4f56; --uf-error-text: #7a2f35; --uf-warning-bg: rgba(201, 155, 82, 0.12); --uf-warning-line: #c99b52; --uf-warning-icon: #c99b52; --uf-warning-text: #7a5a1e; --uf-info-bg: rgba(183, 110, 121, 0.10); --uf-info-line: #b76e79; --uf-info-icon: #b76e79; --uf-info-text: #7a3f48; --uf-loading-bg: rgba(139, 133, 128, 0.10); --uf-loading-line: #b76e79; --uf-loading-icon: #8b8580; --uf-loading-text: #272320; /* Skeleton */ --uf-skel-base: rgba(234, 216, 210, 0.60); --uf-skel-shine: rgba(255, 255, 255, 0.82); /* Loader overlay */ --uf-overlay-bg: rgba(39, 35, 32, 0.38); } body.theme-dark { --uf-bg: rgba(38, 32, 29, 0.97); --uf-bg-overlay: rgba(22, 19, 17, 0.72); --uf-border: rgba(247, 239, 233, 0.13); --uf-text: #fff8f2; --uf-text-sub: rgba(247, 239, 233, 0.58); --uf-shadow: 0 4px 6px rgba(0,0,0,.18), 0 20px 50px rgba(0,0,0,.34); --uf-shadow-heavy: 0 8px 12px rgba(0,0,0,.24), 0 28px 60px rgba(0,0,0,.46); --uf-success-bg: rgba(127, 155, 135, 0.16); --uf-success-text: #a8d4b0; --uf-error-bg: rgba(159, 79, 86, 0.18); --uf-error-text: #e89fa6; --uf-warning-bg: rgba(201, 155, 82, 0.16); --uf-warning-text: #e8c080; --uf-info-bg: rgba(183, 110, 121, 0.16); --uf-info-text: #e8a0ac; --uf-loading-bg: rgba(139, 133, 128, 0.15); --uf-loading-text: #fff8f2; --uf-skel-base: rgba(62, 48, 43, 0.70); --uf-skel-shine: rgba(82, 65, 58, 0.70); --uf-overlay-bg: rgba(10, 8, 7, 0.62); } /* ══════════════════════════════════════════════════════════════ SECCIÓN 1 — TOAST SYSTEM ══════════════════════════════════════════════════════════════ */ /* Contenedor raíz de toasts */ #uf-toast-container { position: fixed; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; width: calc(100vw - 2rem); } /* Posiciones */ #uf-toast-container[data-position="top-right"] { top: 1.25rem; right: 1.25rem; align-items: flex-end; } #uf-toast-container[data-position="top-left"] { top: 1.25rem; left: 1.25rem; align-items: flex-start; } #uf-toast-container[data-position="top-center"] { top: 1.25rem; left: 50%; transform: translateX(-50%); align-items: center; } #uf-toast-container[data-position="bottom-right"] { bottom: 5.5rem; right: 1.25rem; align-items: flex-end; flex-direction: column-reverse; } #uf-toast-container[data-position="bottom-left"] { bottom: 5.5rem; left: 1.25rem; align-items: flex-start; flex-direction: column-reverse; } #uf-toast-container[data-position="bottom-center"]{ bottom: 5.5rem; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; } @media (min-width: 1024px) { #uf-toast-container[data-position="bottom-right"], #uf-toast-container[data-position="bottom-left"], #uf-toast-container[data-position="bottom-center"] { bottom: 1.5rem; } } /* ── Card base ─────────────────────────────────────────────── */ .uf-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: .75rem; width: 100%; max-width: 22rem; padding: .875rem 1rem .75rem; border-radius: var(--uf-radius); border: 1px solid var(--uf-border); background: var(--uf-bg); box-shadow: var(--uf-shadow); backdrop-filter: blur(var(--uf-blur)); -webkit-backdrop-filter: blur(var(--uf-blur)); overflow: hidden; will-change: transform, opacity; /* Entrada */ animation: uf-toast-in .32s cubic-bezier(.22, .75, .18, 1) both; } .uf-toast.uf-toast--leaving { animation: uf-toast-out .28s cubic-bezier(.55, 0, 1, .55) both; } /* Barra lateral de color */ .uf-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--uf-radius) 0 0 var(--uf-radius); } /* Por tipo — fondo + línea */ .uf-toast--success { background: var(--uf-success-bg); border-color: rgba(127,155,135,.22); } .uf-toast--success::before { background: var(--uf-success-line); } .uf-toast--error { background: var(--uf-error-bg); border-color: rgba(159,79,86,.22); } .uf-toast--error::before { background: var(--uf-error-line); } .uf-toast--warning { background: var(--uf-warning-bg); border-color: rgba(201,155,82,.22); } .uf-toast--warning::before { background: var(--uf-warning-line); } .uf-toast--info { background: var(--uf-info-bg); border-color: rgba(183,110,121,.22); } .uf-toast--info::before { background: var(--uf-info-line); } .uf-toast--loading { background: var(--uf-loading-bg); border-color: var(--uf-border); } .uf-toast--loading::before { background: var(--uf-loading-line); } /* Icono */ .uf-toast__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .05rem; } .uf-toast--success .uf-toast__icon { color: var(--uf-success-icon); } .uf-toast--error .uf-toast__icon { color: var(--uf-error-icon); } .uf-toast--warning .uf-toast__icon { color: var(--uf-warning-icon); } .uf-toast--info .uf-toast__icon { color: var(--uf-info-icon); } .uf-toast--loading .uf-toast__icon { color: var(--uf-loading-icon); } /* Spinner para loading */ .uf-spinner { width: 1.25rem; height: 1.25rem; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(183, 110, 121, .25); border-top-color: #b76e79; animation: uf-spin .75s linear infinite; } /* Contenido de texto */ .uf-toast__body { flex: 1; min-width: 0; } .uf-toast__title { font-family: Manrope, ui-sans-serif, system-ui; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: var(--uf-text); margin-bottom: .125rem; } .uf-toast__msg { font-family: Manrope, ui-sans-serif, system-ui; font-size: .75rem; font-weight: 500; line-height: 1.4; color: var(--uf-text-sub); } /* Título solo (sin mensaje secundario) */ .uf-toast__title--only { font-size: .8125rem; font-weight: 600; margin-bottom: 0; } /* Botón cerrar */ .uf-toast__close { flex-shrink: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .375rem; color: var(--uf-text-sub); background: transparent; border: none; cursor: pointer; opacity: .7; transition: opacity .15s, background .15s; margin-top: -.1rem; } .uf-toast__close:hover { opacity: 1; background: rgba(139,133,128,.14); } /* Barra de progreso */ .uf-toast__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left; animation: uf-progress linear forwards; } .uf-toast--success .uf-toast__progress { background: var(--uf-success-line); } .uf-toast--error .uf-toast__progress { background: var(--uf-error-line); } .uf-toast--warning .uf-toast__progress { background: var(--uf-warning-line); } .uf-toast--info .uf-toast__progress { background: var(--uf-info-line); } .uf-toast--loading .uf-toast__progress { display: none; } /* ══════════════════════════════════════════════════════════════ SECCIÓN 2 — LOADER FULLSCREEN ══════════════════════════════════════════════════════════════ */ /* El loader es un