/* ==========================================================================
   GUEA — folha única. Referência de movimento/forma: app "SOLE" (@dailyflutterui):
   palco escuro com brilho, cartões arredondados, botões-pílula, chips circulares,
   carrossel com destaque central, barra inferior flutuante, painel que sobe de baixo.
   Identidade GUEA mantida (azul institucional). Tokens em :root; tema escuro em [data-tema=escuro].
   Regra: cor nova = token; nunca hex solto nas views.
   ========================================================================== */
:root{
  --azul-900:#0C2F57; --azul-700:#0F3A6B; --azul-500:#1B4E8A; --azul-100:#E7EEF7;
  --fundo:#F4F7FA; --superficie:#FFFFFF; --superficie-2:#F3F6FA; --linha:#D9E1EC;
  --tinta:#1F2C40; --texto:#33415C; --suave:#5B6B84; --ph:#64748B;
  --link:#1B4E8A; --destaque:#0F3A6B;
  --btn:#0F3A6B; --btn-h:#1B4E8A; --btn-cinza:#5B6B84; --btn-cinza-h:#4E5E76; --btn-verm:#A93636; --btn-verm-h:#8E2C2C;
  --acento:#1B4E8A; --acento-tx:#FFFFFF; --acento-suave:#E7EEF7;
  --ok-bg:#E3F3E9; --ok-tx:#166238; --off-bg:#EDF0F4; --off-tx:#4E5E76;
  --info-bg:#E8F0FB; --info-tx:#0F3A6B; --aviso-bg:#FFF4E0; --aviso-tx:#7A4F00;
  --erro:#A93636; --erro-bg:#FBEAEA;
  --campo:#FFFFFF; --code-bg:#E7EEF7; --code-tx:#0C2F57;
  --sombra:0 1px 2px rgba(12,47,87,.05),0 8px 24px rgba(12,47,87,.06);
  --sombra-alta:0 24px 70px rgba(12,32,60,.28);
  --brilho:rgba(27,78,138,.10);
  --vidro:rgba(255,255,255,.78);
  --hero-a:#1B4E8A; --hero-b:#0C2F57; --hero-tx:#FFFFFF; --hero-sub:#C9DAF0;
  --side-a:#0F3A6B; --side-b:#0C2F57;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --raio:18px; --raio-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
[data-tema=escuro]{
  --fundo:#070D18; --superficie:#0F1A2C; --superficie-2:#15233A; --linha:#22324D;
  --tinta:#EEF3FA; --texto:#C6D2E4; --suave:#98A8C1; --ph:#8494AD;
  --link:#8CBCFF; --destaque:#9CC6FF;
  --btn:#2B64B3; --btn-h:#3573C7; --btn-cinza:#34455F; --btn-cinza-h:#40536F; --btn-verm:#B23B3B; --btn-verm-h:#C44848;
  --acento:#6AAEFF; --acento-tx:#04101F; --acento-suave:#16294A;
  --ok-bg:#0E3322; --ok-tx:#7EE2A8; --off-bg:#1B283D; --off-tx:#AEBBD0;
  --info-bg:#132B4D; --info-tx:#9CC6FF; --aviso-bg:#3A2A0C; --aviso-tx:#FFCB6B;
  --erro:#FF9C9C; --erro-bg:#3A1418;
  --campo:#0B1524; --code-bg:#16243C; --code-tx:#BFD8FF;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35);
  --sombra-alta:0 30px 80px rgba(0,0,0,.6);
  --brilho:rgba(90,160,255,.16);
  --vidro:rgba(15,26,44,.72);
  --hero-a:#16294A; --hero-b:#0B1628; --hero-tx:#EEF3FA; --hero-sub:#A9BEDC;
  --side-a:#0B1526; --side-b:#070D18;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Nunito Sans",system-ui,sans-serif;background:var(--fundo);color:var(--texto);display:flex;min-height:100vh;font-size:15px;line-height:1.55}
[data-tema=escuro] body{background:radial-gradient(900px 520px at 78% -8%,var(--brilho),transparent 62%),var(--fundo);background-attachment:fixed}
.skip{position:absolute;left:-9999px;background:var(--azul-700);color:#fff;padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}
.i{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
a{color:var(--link)}

/* ---------- menu lateral: trama de tecido sutil (elemento próprio do GUEA) ---------- */
aside{width:236px;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 6px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 6px),
  linear-gradient(180deg,var(--side-a),var(--side-b));
  color:#C7D5E8;padding:var(--s5) 0;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid rgba(255,255,255,.04)}
aside .lg{display:flex;align-items:center;gap:10px;padding:0 var(--s4) var(--s5);color:#fff;font-weight:800;font-size:1.08rem;letter-spacing:.04em}
aside .lg img{height:32px;border-radius:9px}
aside a{display:block;margin:1px 10px;padding:8px 12px;color:#B5C6DD;text-decoration:none;font-size:.9rem;border-radius:10px;transition:background .2s,color .2s,transform .2s var(--ease)}
aside a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
aside a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #8FBBEF}
aside .sec{padding:var(--s4) 22px var(--s1);font-size:.74rem;font-weight:800;color:#93ABCB;letter-spacing:.06em;text-transform:uppercase}

/* ---------- área principal + topo ---------- */
main{flex:1;padding:var(--s5) var(--s6) var(--s7);min-width:0}
.top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.ola{display:flex;align-items:center;gap:12px;min-width:0}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--btn-h),var(--azul-700));box-shadow:0 0 0 3px var(--superficie),0 0 0 4px var(--linha);flex-shrink:0}
.ola small{display:block;font-size:.76rem;color:var(--suave);line-height:1.2}
.ola b{display:block;color:var(--tinta);font-size:1.02rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acoes-top{margin-left:auto;display:flex;gap:8px;align-items:center}
.rb{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linha);
  background:var(--superficie);color:var(--tinta);cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s,border-color .2s}
.rb:hover{border-color:var(--acento);transform:translateY(-1px)}
.rb:active{transform:scale(.92)}
.rb .ponto{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 2px var(--superficie)}
.rb.tema .i{transition:transform .5s var(--ease)}
.rb.tema.gira .i{transform:rotate(200deg) scale(.7)}
.busca-top{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s var(--ease),opacity .25s,margin .35s var(--ease)}
.busca-top.aberta{max-height:70px;opacity:1;margin-bottom:var(--s4)}
.busca-top form{display:flex;gap:8px;max-width:560px}
.busca-top .btn{margin-top:0}
.tit{font-size:1.5rem;font-weight:800;color:var(--tinta);letter-spacing:-.01em;margin-bottom:var(--s4)}

/* ---------- superfícies ---------- */
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--sombra)}
[data-tema=escuro] .card{background:linear-gradient(165deg,#12203A,var(--superficie) 60%);border-color:rgba(255,255,255,.06)}
a.card{display:block;text-decoration:none;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s;cursor:pointer}
a.card:hover{border-color:var(--acento);transform:translateY(-3px)}
a.card:active{transform:scale(.98)}
.card>b{color:var(--tinta);font-size:1.02rem}
.sec-t{display:flex;align-items:baseline;justify-content:space-between;margin:var(--s5) 0 var(--s3)}
.sec-t h2{font-size:1.08rem;font-weight:800;color:var(--tinta)}
.sec-t a{font-size:.8rem;color:var(--suave);text-decoration:none;display:inline-flex;align-items:center;gap:2px}
.sec-t a:hover{color:var(--link)}
.sec-t a .i{width:14px;height:14px}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:.89rem;margin-top:var(--s2)}
th{text-align:left;color:var(--suave);font-weight:700;font-size:.78rem;padding:var(--s2) var(--s3);border-bottom:2px solid var(--linha)}
td{padding:var(--s3);border-bottom:1px solid var(--linha);color:var(--texto)}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--superficie-2)}
tr.sel td{background:var(--acento-suave)}
td.vazio{color:var(--suave);padding:22px}

/* ---------- badges ---------- */
.badge{display:inline-block;border-radius:999px;padding:3px 11px;font-size:.74rem;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok-tx)}.b-off{background:var(--off-bg);color:var(--off-tx)}
.b-info{background:var(--info-bg);color:var(--info-tx)}.b-aviso{background:var(--aviso-bg);color:var(--aviso-tx)}
.b-erro{background:var(--erro-bg);color:var(--erro)}

/* ---------- formulários ---------- */
label{display:block;font-size:.8rem;font-weight:700;color:var(--texto);margin:var(--s3) 0 var(--s1)}
.nota{color:var(--suave);font-weight:400}
.nota-erro{color:var(--erro)}
input,select,textarea{width:100%;border:1.5px solid var(--linha);border-radius:var(--raio-sm);padding:10px var(--s3);font-size:.9rem;outline:none;background:var(--campo);color:var(--tinta);font-family:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 4px var(--brilho)}
input::placeholder{color:var(--ph)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acento)}
.aviso{margin-top:12px;padding:10px 12px;background:var(--aviso-bg);color:var(--aviso-tx);border-radius:10px;font-size:.84rem}
.aviso b{color:inherit}
.destaque-ok{border-left:4px solid var(--ok-tx)}

/* ---------- botões: pílula com toque "afundando" ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--btn);color:#fff;border:0;border-radius:999px;padding:11px 22px;font-weight:700;cursor:pointer;font-size:.87rem;margin-top:var(--s4);text-decoration:none;font-family:inherit;
  transition:background .2s,transform .15s var(--ease),box-shadow .2s}
.btn:hover{background:var(--btn-h);box-shadow:0 8px 22px var(--brilho)}
.btn:active{transform:scale(.96)}
.btn.sm{padding:6px 14px;font-size:.77rem;margin:0}
.btn.cinza{background:var(--btn-cinza)}.btn.cinza:hover{background:var(--btn-cinza-h)}
.btn.verm{background:var(--btn-verm)}.btn.verm:hover{background:var(--btn-verm-h)}
.btn .i{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn:hover .i{transform:translateX(3px)}

/* ---------- chips circulares (tamanhos) — o "Select size" do vídeo ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;margin:0;font-weight:700}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span{min-width:44px;height:44px;padding:0 12px;border-radius:999px;display:grid;place-items:center;font-size:.86rem;
  background:var(--superficie-2);color:var(--tinta);border:1.5px solid var(--linha);transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chip:hover span{border-color:var(--acento)}
.chip input:checked+span{background:var(--acento);color:var(--acento-tx);border-color:var(--acento);animation:pop .3s var(--ease)}
.chip input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.chip.fora span{font-weight:600;color:var(--suave)}
.chip.fora input:checked+span{background:var(--off-bg);color:var(--off-tx);border-color:var(--linha)}
@keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

.row{display:flex;gap:var(--s4)}.row>div{flex:1}
.grid2{display:grid;grid-template-columns:380px 1fr;gap:var(--s4);align-items:start}
code{background:var(--code-bg);color:var(--code-tx);padding:1px 6px;border-radius:6px;font-size:.82em}

/* ---------- dashboard: hero, atalhos, indicadores ---------- */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:28px 30px;margin-bottom:var(--s4);color:var(--hero-tx);
  background:radial-gradient(420px 260px at 85% 40%,rgba(120,180,255,.30),transparent 70%),linear-gradient(135deg,var(--hero-a),var(--hero-b));
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--sombra);min-height:170px;display:flex;align-items:center}
.hero .txt{position:relative;z-index:1;max-width:60%}
.hero h2{font-size:1.45rem;font-weight:800;line-height:1.2;color:var(--hero-tx)}
.hero p{color:var(--hero-sub);font-size:.9rem;margin-top:6px}
.hero .btn{background:#fff;color:#0C2F57;margin-top:16px}
.hero .btn:hover{background:#EAF2FF}
.hero .arte{position:absolute;right:26px;top:50%;width:150px;height:150px;transform:translateY(-50%);color:rgba(255,255,255,.92);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));animation:flutua 6s ease-in-out infinite}
.hero .arte .i{width:100%;height:100%;stroke-width:1.2}
@keyframes flutua{0%,100%{transform:translateY(-50%) rotate(-4deg)}50%{transform:translateY(-58%) rotate(3deg)}}

.atalhos{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.atalhos::-webkit-scrollbar{display:none}
.atalho{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--texto);font-size:.78rem;font-weight:700;min-width:64px;scroll-snap-align:start}
.atalho .c{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--superficie);border:1px solid var(--linha);color:var(--tinta);
  transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.atalho .c .i{width:24px;height:24px}
.atalho:hover .c{transform:translateY(-3px);box-shadow:0 10px 24px var(--brilho)}
.atalho:active .c{transform:scale(.92)}
.atalho.prim .c{background:var(--acento);color:var(--acento-tx);border-color:var(--acento);box-shadow:0 8px 24px var(--brilho)}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:var(--s4)}
.kpi{margin:0;padding:18px 18px 16px}
.kpi .v{font-size:1.6rem;font-weight:800;color:var(--destaque);line-height:1.15;letter-spacing:-.01em}
.kpi .l{font-size:.8rem;color:var(--suave);margin-top:2px}

/* ---------- barra inferior flutuante (celular) ---------- */
.bnav{display:none}

/* ---------- toasts e confirmação ---------- */
#toasts{position:fixed;top:var(--s4);right:var(--s4);z-index:999;display:flex;flex-direction:column;gap:var(--s2)}
.toast{background:#166238;color:#fff;border-radius:14px;padding:12px var(--s4);font-size:.86rem;box-shadow:0 10px 30px rgba(12,47,87,.28);animation:tin .35s var(--ease)}
.toast.err{background:#A93636}
@keyframes tin{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
#conf{position:fixed;inset:0;background:rgba(6,16,32,.55);display:none;align-items:center;justify-content:center;z-index:998;backdrop-filter:blur(3px)}
#conf .box{background:var(--superficie);border:1px solid var(--linha);border-radius:22px;padding:var(--s5);max-width:400px;width:92%;box-shadow:var(--sombra-alta);animation:sobe .4s var(--ease)}
#conf p{margin-bottom:var(--s4);font-size:.95rem;color:var(--tinta)}#conf .acts{display:flex;gap:var(--s2);justify-content:flex-end}
@keyframes sobe{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- entrada das telas: cascata ---------- */
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main>.top,main>.tit,main>.hero,main>.card,main>.grid2>*,main>.kpis>*,main>.atalhos>*,main>.sec-t,main>form,main>div:not(.busca-top):not(.kpis):not(.atalhos){animation:entra .55s var(--ease) backwards}
/* backwards (não both): terminado o efeito, hover/escala do carrossel voltam a mandar no transform */
main>.tit{animation-delay:.04s}
main>:nth-child(3){animation-delay:.08s}main>:nth-child(4){animation-delay:.12s}main>:nth-child(5){animation-delay:.16s}
main>:nth-child(6){animation-delay:.2s}main>:nth-child(n+7){animation-delay:.24s}
.kpis>:nth-child(1){animation-delay:.14s}.kpis>:nth-child(2){animation-delay:.18s}.kpis>:nth-child(3){animation-delay:.22s}
.kpis>:nth-child(4){animation-delay:.26s}.kpis>:nth-child(5){animation-delay:.3s}.kpis>:nth-child(n+6){animation-delay:.34s}
.atalhos>:nth-child(1){animation-delay:.1s}.atalhos>:nth-child(2){animation-delay:.14s}.atalhos>:nth-child(3){animation-delay:.18s}
.atalhos>:nth-child(4){animation-delay:.22s}.atalhos>:nth-child(5){animation-delay:.26s}.atalhos>:nth-child(n+6){animation-delay:.3s}
.grid2>:nth-child(2){animation-delay:.12s}
html.trocando-tema,html.trocando-tema *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}

.mbar{display:none}
#mnav-ov{display:none}

/* ---------- celular / tablet ---------- */
@media(max-width:900px){
  body{display:block}
  .grid2{grid-template-columns:1fr}
  main{padding:var(--s4) var(--s4) 110px;overflow-x:hidden}
  .tit{font-size:1.3rem}
  .ola small{display:none}
  .rb{width:40px;height:40px}
  .acoes-top .so-desk{display:none}
  .row{flex-direction:column;gap:0}
  form[method=get]{flex-wrap:wrap}
  input,select{min-width:0}
  .hero{padding:22px;min-height:150px;border-radius:22px}
  .hero .txt{max-width:64%}
  .hero h2{font-size:1.2rem}
  .hero .arte{width:110px;height:110px;right:10px}
  /* indicadores: carrossel com destaque central (o "Spotlight") */
  .kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 21vw 14px;margin:0 calc(-1*var(--s4)) var(--s3);scrollbar-width:none}
  .kpis::-webkit-scrollbar{display:none}
  .kpis>.kpi{flex:0 0 58vw;scroll-snap-align:center;transition:transform .3s var(--ease),opacity .3s;transform:scale(var(--k,1));opacity:var(--o,1)}
  /* tabelas: cada linha vira cartão com rótulos */
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp thead,table.resp tr.resp-head{display:none}
  table.resp tr{border:1px solid var(--linha);border-radius:14px;margin:0 0 10px;padding:8px 12px;background:var(--superficie)}
  table.resp tr:hover td{background:transparent}
  table.resp td{border:0;padding:5px 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
  table.resp td::before{content:attr(data-label);font-weight:700;font-size:.72rem;color:var(--suave);min-width:92px;flex-shrink:0}
  table.resp td[data-label=""]::before,table.resp td:not([data-label])::before{content:none;min-width:0}
  /* gaveta lateral */
  aside{position:fixed;top:0;left:0;bottom:0;width:280px;height:100vh;z-index:80;transform:translateX(-105%);transition:transform .35s var(--ease);box-shadow:14px 0 40px rgba(4,16,34,.35)}
  aside.open{transform:none}
  #mnav-ov{position:fixed;inset:0;background:rgba(8,20,40,.55);z-index:70;backdrop-filter:blur(2px)}
  #mnav-ov.open{display:block}
  body.travado{overflow:hidden}
  /* barra inferior flutuante */
  .bnav{display:flex;position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
    gap:4px;padding:6px;border-radius:999px;background:var(--vidro);border:1px solid var(--linha);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 14px 40px rgba(4,16,34,.28);
    transition:transform .4s var(--ease),opacity .3s}
  .bnav.some{transform:translate(-50%,140%);opacity:0}
  .bnav a,.bnav button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--texto);background:transparent;border:0;cursor:pointer;
    transition:background .25s,color .25s,transform .2s var(--ease)}
  .bnav a:active,.bnav button:active{transform:scale(.88)}
  .bnav .on{background:var(--acento);color:var(--acento-tx)}
  .bnav .i{width:21px;height:21px}
  /* confirmação vira painel que sobe de baixo */
  #conf{align-items:flex-end}
  #conf .box{width:100%;max-width:none;border-radius:24px 24px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom));animation:sobeSheet .45s var(--ease)}
  #conf .box::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:var(--linha);margin:-12px auto 16px}
  #conf .acts .btn{flex:1;padding:12px}
  #toasts{left:var(--s4);right:var(--s4);align-items:center}
}
@keyframes sobeSheet{from{transform:translateY(100%)}to{transform:none}}

/* ==========================================================================
   LOGIN / SENHA — palco escuro com brilho → marca surge → sobe → painel desliza de baixo
   ========================================================================== */
body.lp{display:block;min-height:100vh;min-height:100dvh;overflow:hidden;color:#EEF3FA;
  background:radial-gradient(ellipse 70% 42% at 50% 32%,rgba(60,130,230,.30),transparent 70%),linear-gradient(180deg,#0B1A30,#050B16)}
.lp-palco{position:relative;min-height:100vh;min-height:100dvh}
.lp-marca{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;transition:top .8s var(--ease),transform .8s var(--ease)}
.lp-brilho{position:absolute;left:50%;top:48%;width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(90,160,255,.35),transparent 65%);filter:blur(10px);animation:pulsa 3.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.lp-logo{position:relative;width:96px;height:96px;margin:0 auto;border-radius:26px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  animation:logoIn 1s var(--ease) both}
.lp-logo img{width:100%;height:100%;border-radius:26px;display:block}
@keyframes logoIn{from{opacity:0;transform:scale(.6) translateY(20px) rotate(-8deg)}to{opacity:1;transform:none}}
.lp-nome{position:relative;margin-top:18px;font-size:1.9rem;font-weight:800;letter-spacing:.42em;padding-left:.42em;animation:txtIn .9s .25s var(--ease) both}
.lp-tag{position:relative;margin-top:4px;font-size:.66rem;font-weight:700;letter-spacing:.34em;color:#9DB6D8;text-transform:uppercase;animation:txtIn .9s .4s var(--ease) both}
@keyframes txtIn{from{opacity:0;letter-spacing:.8em}to{opacity:1}}
.lp-prog{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));width:120px;height:3px;transform:translateX(-50%);border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;transition:opacity .3s}
.lp-prog span{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#5AA2FF,#B9D8FF);animation:carrega 1.4s var(--ease) forwards}
@keyframes carrega{to{width:100%}}
.lp-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;color:#1F2C40;border-radius:30px 30px 0 0;padding:14px 24px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .8s var(--ease),opacity .45s;box-shadow:0 -20px 60px rgba(0,0,0,.35)}
.lp-grab{width:42px;height:5px;border-radius:9px;background:#D9E1EC;margin:0 auto 18px}
.lp-sheet h1{font-size:1.55rem;font-weight:800;text-align:center;color:#1F2C40}
.lp-sub{text-align:center;color:#5B6B84;font-size:.88rem;margin:4px 0 18px}
.lp-campo{margin-top:12px}
.lp-campo label{margin:0 0 6px;color:#33415C}
.lp-in{display:flex;align-items:center;gap:10px;border:1.5px solid #D9E1EC;border-radius:16px;padding:0 14px;background:#F7F9FC;transition:border-color .2s,box-shadow .2s,background .2s}
.lp-in:focus-within{border-color:#1B4E8A;background:#fff;box-shadow:0 0 0 4px rgba(27,78,138,.12)}
.lp-in .i{color:#5B6B84;width:19px;height:19px}
.lp-in input{border:0;background:transparent;padding:14px 0;box-shadow:none;color:#1F2C40;font-size:.95rem}
.lp-in input:focus,.lp-in input:focus-visible{box-shadow:none;outline:none}
.lp-tag span{display:inline}
@media(max-width:699px){.lp-tag span{display:block;line-height:1.9}.lp-tag i{display:none}}
.lp-in input::placeholder{color:#64748B}
.lp-olho{border:0;background:transparent;color:#5B6B84;cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.lp-btn{width:100%;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:15px;font-size:1rem;font-weight:800;cursor:pointer;color:#fff;font-family:inherit;
  background:linear-gradient(135deg,#1B4E8A,#0F3A6B);box-shadow:0 12px 30px rgba(15,58,107,.35);transition:transform .15s var(--ease),box-shadow .2s}
.lp-btn:hover{box-shadow:0 16px 36px rgba(15,58,107,.45)}
.lp-btn:active{transform:scale(.97)}
.lp-btn .i{transition:transform .25s var(--ease)}.lp-btn:hover .i{transform:translateX(4px)}
.lp-btn[disabled]{opacity:.75;cursor:progress}
.lp-erro{background:#FBEAEA;color:#8E2C2C;border-radius:12px;padding:10px 12px;font-size:.86rem;margin-top:14px;text-align:center}
.lp-ok{background:#E3F3E9;color:#166238;border-radius:12px;padding:10px 12px;font-size:.86rem;margin-top:14px;text-align:center}
.lp-pe{text-align:center;margin-top:18px;font-size:.76rem;color:#5B6B84}
.lp-pe a{color:#1B4E8A;text-decoration:none;font-weight:700}
.lp-item{opacity:0;transform:translateY(16px)}
/* estados */
body.lp.pronto .lp-marca{top:17%;transform:translate(-50%,-50%) scale(.72)}
body.lp.pronto .lp-prog{opacity:0}
body.lp.pronto .lp-sheet{transform:none}
body.lp.pronto .lp-item{animation:entra .6s var(--ease) forwards;animation-delay:calc(.35s + var(--i,0)*.07s)}
body.lp.saindo .lp-sheet{opacity:0;transform:translateY(30px)}
body.lp.saindo .lp-marca{opacity:0;transition:opacity .4s}
.lp-sheet.treme{animation:treme .45s}
@keyframes treme{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@media(min-width:700px){
  .lp-sheet{left:50%;right:auto;bottom:auto;top:56%;width:420px;border-radius:28px;padding:22px 32px 28px;transform:translate(-50%,-30%);opacity:0;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  body.lp.pronto .lp-sheet{transform:translate(-50%,-50%);opacity:1}
  body.lp.pronto .lp-marca{top:15%}
  .lp-grab{display:none}
}
@media(min-width:700px) and (max-height:760px){body.lp.pronto .lp-marca{top:12%;transform:translate(-50%,-50%) scale(.55)}body.lp.pronto .lp-sheet{top:58%}}
@media(max-width:699px) and (max-height:700px){body.lp{overflow:auto}body.lp.pronto .lp-marca{top:12%;transform:translate(-50%,-50%) scale(.55)}}

/* ---------- menos movimento ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .lp-item{opacity:1;transform:none}
  .hero .arte{animation:none}
}
.lp-tag i{font-style:normal}
.lp-marca{width:max-content;max-width:94vw}.lp-tag span{white-space:nowrap}

/* ==========================================================================
   BOTÕES SÓ COM ÍCONE (regra do produto: nenhum botão escrito)
   O texto original vira aria-label + data-tip; dica própria aparece no hover/foco.
   ========================================================================== */
.btn.ico{width:44px;height:44px;padding:0;border-radius:50%;gap:0;flex-shrink:0;vertical-align:middle}
.btn.ico.sm{width:36px;height:36px}
.btn.ico .i{width:20px;height:20px}
.btn.ico.sm .i{width:17px;height:17px}
.btn.ico:hover .i{transform:none}
.btn.ico:hover{transform:translateY(-2px)}
.btn.ico:active{transform:scale(.9)}
.hero .btn.ico{width:52px;height:52px}
.hero .btn.ico .i{width:22px;height:22px}
.busca-top .btn.ico,form .btn.ico+.btn.ico{margin-left:6px}
td .btn.ico{margin:2px 4px 2px 0}
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,4px);
  background:var(--tinta);color:var(--superficie);font-size:.74rem;font-weight:700;line-height:1.2;white-space:nowrap;
  padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .15s,transform .2s var(--ease);z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.18)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media(hover:none){[data-tip]:hover::after{opacity:0}}
/* login: botão Entrar redondo e grande, gira enquanto entra */
.lp-btn{width:64px;height:64px;padding:0;border-radius:50%;margin:24px auto 0}
.lp-btn .i{width:26px;height:26px}
.lp-btn.carregando .i{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ==========================================================================
   NAVEGAÇÃO POR ÁREAS (6 itens) + ABAS DA ÁREA
   ========================================================================== */
aside .areas{display:flex;flex-direction:column;gap:2px;margin-top:6px}
aside .areas a,aside .conta a{display:flex;align-items:center;gap:12px;margin:1px 12px;padding:11px 14px;font-size:.95rem;border-radius:14px}
aside .areas a .i,aside .conta a .i{width:21px;height:21px;opacity:.9}
aside .areas a.on{background:rgba(255,255,255,.14);box-shadow:none}
aside .areas a.on .i{opacity:1}
aside .areas .n{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#4ADE80;color:#052e16;font-size:.75rem;font-weight:800;display:grid;place-items:center}
aside .conta{margin-top:24px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
aside .conta a{font-size:.88rem;padding:9px 14px;color:#9FB4D1}
.abas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px 0 var(--s5);padding:4px;background:var(--superficie);border:1px solid var(--linha);border-radius:999px;width:max-content;max-width:100%}
.abas::-webkit-scrollbar{display:none}
.abas a{flex-shrink:0;padding:8px 16px;border-radius:999px;text-decoration:none;color:var(--texto);font-size:.86rem;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.abas a:hover{background:var(--superficie-2)}
.abas a.on{background:var(--acento);color:var(--acento-tx)}
.abas .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:#4ADE80;color:#052e16;font-size:.72rem}
.bnav a{position:relative}
.bnav .ponto{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 2px var(--superficie)}
@media(max-width:900px){.abas{width:auto;margin-left:calc(-1*var(--s4));margin-right:calc(-1*var(--s4));border-radius:0;border-left:0;border-right:0;padding:6px var(--s4)}}

/* ---------- ficha do funcionário ---------- */
.ficha-topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ficha-id{display:flex;align-items:center;gap:14px;min-width:0}
.av.grande{width:58px;height:58px;font-size:1.3rem}
.ficha-acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ficha-acoes .btn{margin-top:0}
.sim-nao{position:relative;display:block;margin-top:12px;padding:12px 14px 12px 46px;border-radius:14px;font-size:.92rem}
.sim-nao>.i{position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.sim-nao.ok{background:var(--ok-bg);color:var(--ok-tx)}.sim-nao.nao{background:var(--aviso-bg);color:var(--aviso-tx)}
.sim-nao b{color:inherit}
.motivos{margin:10px 0 0 18px;font-size:.86rem;color:var(--texto)}
.motivos li{margin:4px 0}
a.lk-forte{color:var(--tinta);font-weight:700;text-decoration:none}
a.lk-forte:hover{color:var(--link);text-decoration:underline}
@media(max-width:900px){.ficha-acoes{margin-left:0;width:100%}}
/* ---------- solicitação em lote ---------- */
.lote-tams{display:flex;flex-wrap:wrap;gap:8px}
.lote-tam{display:flex;flex-direction:column;gap:2px;margin:0;font-size:.72rem;font-weight:700;color:var(--suave)}
.lote-tam select{padding:6px 8px;font-size:.84rem;min-width:92px}
tr.inativo td{opacity:.72}
/* ---------- o que precisa de você ---------- */
.tarefas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:var(--s4)}
.tarefa{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--tinta);font-weight:700;font-size:.92rem;
  background:var(--superficie);border:1px solid var(--linha);box-shadow:var(--sombra);transition:transform .25s var(--ease),border-color .2s}
.tarefa:hover{transform:translateY(-2px);border-color:var(--acento)}
.tarefa .c{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.tarefa>.i{margin-left:auto;color:var(--suave);width:18px;height:18px}
.t-aviso .c{background:var(--aviso-bg);color:var(--aviso-tx)}.t-ok .c{background:var(--ok-bg);color:var(--ok-tx)}.t-info .c{background:var(--info-bg);color:var(--info-tx)}
.tarefa.vazia{font-weight:600;color:var(--texto)}
.tarefas>*{animation:entra .5s var(--ease) backwards}.tarefas>:nth-child(2){animation-delay:.06s}.tarefas>:nth-child(3){animation-delay:.12s}.tarefas>:nth-child(n+4){animation-delay:.18s}