/* =====================================================================
   LOADING SCREEN · EasyFleet — HTML + CSS puro (sem JS, sem dependências)
   Cole o bloco <style> + <div class="ef-splash"> no seu index.html,
   dentro de <div id="app"> ... </div>.
   ===================================================================== */
:root{
    --primary:#2F7CD6;--primary-dark:#2668BA;
    --bg:#F5F6F8;--surface:#FFFFFF;--lines:#E2E4E8;
    --text:rgba(0,0,0,0.87);--text-sec:rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    --primary:#4C93E0;--primary-dark:#3C7EC4;
    --bg:#17181B;--surface:#212226;--lines:#2C2D31;
    --text:rgba(255,255,255,0.90);--text-sec:rgba(255,255,255,0.55);
}}
:root[data-theme="dark"]{
    --primary:#4C93E0;--primary-dark:#3C7EC4;
    --bg:#17181B;--surface:#212226;--lines:#2C2D31;
    --text:rgba(255,255,255,0.90);--text-sec:rgba(255,255,255,0.55);
}

.ef-splash{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    background:var(--bg);color:var(--text);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ----- Logo + anel ----- */
.ef-logo-wrap{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center}

/* anel girando (arco com conic-gradient + máscara) */
.ef-ring{
    position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(var(--primary) 0deg, color-mix(in srgb,var(--primary) 12%, transparent) 110deg, transparent 300deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation:ef-spin 1s linear infinite;
}

/* quadradinho azul com o caminhão (mesma identidade do brand-logo) */
.ef-logo{
    width:64px;height:64px;border-radius:16px;flex-shrink:0;
    background:linear-gradient(140deg,var(--primary),var(--primary-dark));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 26px -10px color-mix(in srgb,var(--primary) 70%,transparent);
    animation:ef-pulse 1.8s ease-in-out infinite;
}
.ef-logo svg{width:36px;height:36px;fill:#fff}

/* ----- Wordmark ----- */
.ef-name{font-size:26px;font-weight:800;letter-spacing:.4px}
.ef-name .ef-accent{color:var(--primary)}
.ef-sub{margin-top:-16px;font-size:13px;color:var(--text-sec);font-weight:500}
.ef-sub::after{content:"";animation:ef-dots 1.4s steps(4,end) infinite}

/* ----- Barra indeterminada ----- */
.ef-bar{position:relative;width:200px;height:4px;border-radius:4px;overflow:hidden;background:var(--lines)}
.ef-bar::before{
    content:"";position:absolute;top:0;left:0;height:100%;width:40%;border-radius:4px;
    background:linear-gradient(90deg,transparent,var(--primary),transparent);
    animation:ef-slide 1.3s ease-in-out infinite;
}

@keyframes ef-spin{to{transform:rotate(360deg)}}
@keyframes ef-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ef-slide{0%{left:-40%}100%{left:100%}}
@keyframes ef-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
    .ef-ring,.ef-logo,.ef-bar::before,.ef-sub::after{animation:none}
    .ef-ring{background:conic-gradient(var(--primary) 0deg,transparent 300deg)}
}

/* botão só para pré-visualizar o tema neste esboço (NÃO precisa no index.html) */
.ef-theme{position:fixed;top:16px;right:16px;background:var(--surface);border:1px solid var(--lines);color:var(--text);border-radius:20px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit;box-shadow:0 1px 3px rgba(0,0,0,.1)}