/*
  Animación de carga del ERP (Layout/Loading.razor), configurable en /system-branding.
  Antes estos estilos vivían en un <style> dentro del componente y se reinyectaban en cada
  <Loading />; aquí se cargan una sola vez. El color sale del tema activo (--theme-primary).
*/
.tl-loader {
    --tl-color: var(--theme-primary, #4e73df);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 40vh;
    padding: 2rem 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #666;
}

.tl-loader.tl-inline { min-height: 0; padding: 1rem; gap: 8px; }

.tl-caption { font-size: 13px; letter-spacing: .04em; text-align: center; }
.dark-mode .tl-loader { color: #98a2b3; }

.tl-media { display: block; object-fit: contain; max-width: 100%; }
.tl-html { max-width: 100%; }

/* ---------- Preset: módulos (la animación original) ---------- */
.tl-modules .modules-row { display: flex; gap: 20px; align-items: flex-end; }
.tl-modules .module { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tl-modules .mod-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #e8f4ff; animation: tlModLoad 2s ease-in-out infinite; }
.tl-modules .m-inv .mod-icon { background: #e8fff4; animation-delay: .3s; }
.tl-modules .m-fin .mod-icon { background: #fff8e8; animation-delay: .6s; }
.tl-modules .m-bi .mod-icon { background: #f5e8ff; animation-delay: .9s; }
.tl-modules .m-ops .mod-icon { background: #ffe8e8; animation-delay: 1.2s; }
.tl-modules .mod-dot { width: 6px; height: 6px; border-radius: 50%; background: #1a6bc9; animation: tlDotPop 2s ease-in-out infinite; }
.tl-modules .m-inv .mod-dot { background: #1a8a5a; animation-delay: .3s; }
.tl-modules .m-fin .mod-dot { background: #b8780a; animation-delay: .6s; }
.tl-modules .m-bi .mod-dot { background: #7a2ec9; animation-delay: .9s; }
.tl-modules .m-ops .mod-dot { background: #c92e2e; animation-delay: 1.2s; }
.tl-modules .mod-label { font-size: 9px; color: #999; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.tl-progress { width: 200px; height: 3px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.tl-progress-fill { height: 100%; background: var(--tl-color); border-radius: 3px; animation: tlProgress 2.5s ease-in-out infinite; transform-origin: left; }
.dark-mode .tl-modules .mod-icon { background: rgba(255, 255, 255, .05); }
.dark-mode .tl-modules .mod-label { color: #98a2b3; }
.dark-mode .tl-progress { background: rgba(255, 255, 255, .08); }
.tl-inline.tl-modules .modules-row { gap: 10px; }
.tl-inline.tl-modules .mod-icon { width: 28px; height: 28px; font-size: 13px; }
.tl-inline.tl-modules .mod-label, .tl-inline .tl-progress { display: none; }

@keyframes tlModLoad { 0%, 100% { opacity: .4; transform: translateY(4px); } 40%, 60% { opacity: 1; transform: translateY(0); } }
@keyframes tlDotPop { 0%, 100% { transform: scale(.5); opacity: .3; } 40%, 60% { transform: scale(1.4); opacity: 1; } }
@keyframes tlProgress { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Preset: spinner ---------- */
.tl-spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(0, 0, 0, .08); border-top-color: var(--tl-color); animation: tlSpin .8s linear infinite; }
.dark-mode .tl-spinner { border-color: rgba(255, 255, 255, .1); border-top-color: var(--tl-color); }
.tl-inline .tl-spinner { width: 28px; height: 28px; border-width: 3px; }
@keyframes tlSpin { to { transform: rotate(360deg); } }

/* ---------- Preset: puntos ---------- */
.tl-dots { display: flex; gap: 8px; }
.tl-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--tl-color); animation: tlBounce 1.2s ease-in-out infinite; }
.tl-dots span:nth-child(2) { animation-delay: .15s; }
.tl-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tlBounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Preset: barras ---------- */
.tl-bars { display: flex; gap: 5px; align-items: center; height: 40px; }
.tl-bars span { width: 6px; height: 100%; border-radius: 3px; background: var(--tl-color); animation: tlBars 1s ease-in-out infinite; }
.tl-bars span:nth-child(2) { animation-delay: .1s; }
.tl-bars span:nth-child(3) { animation-delay: .2s; }
.tl-bars span:nth-child(4) { animation-delay: .3s; }
.tl-bars span:nth-child(5) { animation-delay: .4s; }
.tl-inline .tl-bars { height: 24px; }
@keyframes tlBars { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Preset: pulso ---------- */
.tl-pulse { position: relative; width: 56px; height: 56px; }
.tl-pulse::before, .tl-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tl-color); opacity: .6; animation: tlPulse 1.6s ease-out infinite; }
.tl-pulse::after { animation-delay: .8s; }
.tl-inline .tl-pulse { width: 32px; height: 32px; }
@keyframes tlPulse { 0% { transform: scale(.2); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }

/* ---------- Preset: logo de la marca ---------- */
.tl-logo { max-width: 96px; max-height: 96px; object-fit: contain; animation: tlLogo 1.6s ease-in-out infinite; }
.tl-inline .tl-logo { max-width: 48px; max-height: 48px; }
@keyframes tlLogo { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .tl-loader *, .tl-loader *::before, .tl-loader *::after { animation-duration: 3s !important; }
}

/* ---------- Capa sobre toda la pantalla (<Loading Overlay="true" />) ---------- */
.tl-loader.tl-overlay { position: fixed; inset: 0; z-index: 2000; min-height: 0; background: rgba(248, 249, 250, .85); }
.dark-mode .tl-loader.tl-overlay { background: rgba(16, 24, 40, .85); }