/* =====================================================================
   LOADER DA SOLANE
   O contorno do "S" da logo (sem preenchimento) com um brilho que percorre o
   traço. Usado em toda tela de carregamento, skeleton e botão ocupado dos
   portais (imobiliária, prestador, vendedor, admin) e do site.

   Marcação e API: solane-loader.js (SolaneLoader.svg / bloco / tela).
   O verde vem de --accent da página; --sl-cor e --sl-brilho podem ser trocados
   por elemento (botões e telas escuras fazem isso).
   ===================================================================== */
.sl {
    --sl-cor: var(--accent, #10b981);
    --sl-brilho: var(--accent-hover, #34d399);
    --sl-dur: 1.8s;
    --sl-k: 1;
    display: inline-block;
    height: 56px;
    width: auto;
    aspect-ratio: 57 / 94;
    flex: none;
    overflow: visible;
    vertical-align: middle;
}
.sl-xs { height: 20px; --sl-k: 2.4; }
.sl-sm { height: 34px; --sl-k: 1.5; }
.sl-md { height: 56px; --sl-k: 1; }
.sl-lg { height: 96px; --sl-k: 0.85; }
.sl-xl { height: 132px; --sl-k: 0.75; }

.sl path {
    fill: none;
    stroke: var(--sl-cor);
    stroke-linejoin: round;
    stroke-linecap: round;
}
.sl .sl-base { stroke-width: calc(2.4px * var(--sl-k)); stroke-opacity: 0.34; }
.sl .sl-c { stroke-dashoffset: 0; animation-duration: var(--sl-dur); animation-timing-function: linear; animation-iteration-count: infinite; }
.sl .sl-cauda { stroke-width: calc(2.6px * var(--sl-k)); stroke-opacity: 0.4; stroke-dasharray: 34 66; animation-name: sl-corre-cauda; }
.sl .sl-meio { stroke-width: calc(2.8px * var(--sl-k)); stroke-opacity: 0.72; stroke-dasharray: 20 80; animation-name: sl-corre-meio; }
.sl .sl-halo { stroke-width: calc(7px * var(--sl-k)); stroke-opacity: 0.28; stroke-dasharray: 9 91; animation-name: sl-corre-halo; }
.sl .sl-cabeca { stroke: var(--sl-brilho); stroke-width: calc(3.4px * var(--sl-k)); stroke-dasharray: 5 95; animation-name: sl-corre-cabeca; }

/* Todas as camadas terminam na mesma posição (a "cabeça" do brilho): cada
   keyframe começa com o deslocamento igual ao comprimento do traço. */
@keyframes sl-corre-cauda { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -66; } }
@keyframes sl-corre-meio { from { stroke-dashoffset: 20; } to { stroke-dashoffset: -80; } }
@keyframes sl-corre-halo { from { stroke-dashoffset: 9; } to { stroke-dashoffset: -91; } }
@keyframes sl-corre-cabeca { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -95; } }

/* Movimento reduzido: sem percurso; o contorno inteiro só "respira". */
@media (prefers-reduced-motion: reduce) {
    .sl .sl-cauda, .sl .sl-meio, .sl .sl-halo { display: none; }
    .sl .sl-cabeca {
        stroke-dasharray: none;
        animation: sl-respira 2.4s ease-in-out infinite !important;
    }
}
@keyframes sl-respira { 0%, 100% { stroke-opacity: 0.25; } 50% { stroke-opacity: 1; } }

/* ---------- bloco (no lugar de skeleton / "Carregando...") ---------- */
.sl-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 44px 16px;
    width: 100%;
    color: var(--text-muted, var(--muted, #64748b));
    font-size: 13px;
    text-align: center;
}
.sl-bloco-curto { padding: 20px 12px; }
.chamado-card-list > .sl-bloco, .table-container > .sl-bloco { grid-column: 1 / -1; }
.sl-texto { letter-spacing: 0.02em; }
tr.sl-linha > td { padding: 0 !important; border: 0 !important; }

/* ---------- tela cheia ---------- */
.sl-tela {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--sl-fundo, var(--bg-body, #f8fafc));
    color: var(--text-muted, var(--muted, #64748b));
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: opacity 0.25s ease;
}
.sl-tela.sl-saindo { opacity: 0; pointer-events: none; }
.sl-tela-escura {
    --sl-fundo: radial-gradient(circle at 50% 42%, #16213b 0%, #0f172a 65%);
    color: rgba(255, 255, 255, 0.72);
}
.sl-tela-escura .sl { --sl-cor: #10b981; --sl-brilho: #6ee7b7; }
.sl-marca { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 5px; opacity: 0.9; margin-top: -6px; }

/* ---------- sobre o conteúdo (upload, salvando...) ---------- */
.sl-veu {
    position: fixed;
    inset: 0;
    z-index: 3900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.sl-veu-cartao {
    background: var(--bg-surface, var(--surface, #fff));
    color: var(--text-main, var(--text, #0f172a));
    border-radius: 14px;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 280px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
}

/* ---------- dentro de botões (ver setBtnLoading) ---------- */
.sl-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 22px;
    transform: translate(-50%, -50%);
    --sl-k: 2.2;
    --sl-cor: #fff;
    --sl-brilho: #fff;
    pointer-events: none;
}
.btn-outline .sl-btn,
.btn-outline-danger .sl-btn,
.btn-ghost .sl-btn,
.btn-soft .sl-btn { --sl-cor: var(--accent, #10b981); --sl-brilho: var(--accent-hover, #059669); }
.btn-outline-danger .sl-btn { --sl-cor: var(--danger, #dc2626); --sl-brilho: var(--danger, #dc2626); }

/* ---------- ao lado de um texto ("Salvando...", "Buscando endereço...") ---------- */
.sl-inline {
    height: 16px;
    --sl-k: 3.2;
    --sl-cor: currentColor;
    --sl-brilho: currentColor;
    margin-right: 8px;
    vertical-align: -3px;
}