/* Condutor. A aparência do Chaveiro (pedido do João, 04/11/2026) com o fundo liso: a cor --chao, sem o
   mapa de cidade. Por cima, duas placas de vidro soltas: o menu e o conteúdo (no celular, o cabeçalho e as
   abas). Dentro do conteúdo, folhas quase opacas para o texto. O que está escolhido sobe como uma tecla com
   brilho. Uma cor de destaque, o laranja da Smart, só no que se clica, no item escolhido, no foco e na logo;
   verde, amarelo e vermelho só para dizer situação. */
:root{
  color-scheme:light;
  --chao:#E6EAF0;
  --vidro:rgba(248,250,252,.62);
  --vidro-topo:rgba(249,250,252,.84);
  --vidro-pe:rgba(249,250,252,.30);
  --desfoque:11px;--saturacao:170%;
  --aro:rgba(255,255,255,.98);--aro-2:rgba(255,255,255,.42);
  --sombra-placa:0 0 0 1px rgba(17,26,45,.07),0 30px 60px -30px rgba(17,26,45,.42),0 10px 22px -14px rgba(17,26,45,.14);
  --folha:rgba(255,255,255,.74);
  --folha-forte:rgba(255,255,255,.86);
  --folha-solida:#FFFFFF;
  --folha-2:#F4F6F9;
  --folha-3:rgba(17,26,45,.045);
  --folha-toque:#EEF1F5;
  --funda:rgba(17,26,45,.065);
  --funda-sombra:inset 0 1px 2px rgba(17,26,45,.10);
  --luz:inset 0 1px 0 rgba(255,255,255,.92);
  --sombra-folha:0 0 0 1px rgba(17,26,45,.06),0 1px 2px rgba(17,26,45,.04),0 14px 30px -22px rgba(17,26,45,.34);
  --sombra:var(--luz),var(--sombra-folha);
  --sombra-alta:0 0 0 1px rgba(17,26,45,.08),0 24px 48px -12px rgba(17,26,45,.30),0 6px 14px -6px rgba(17,26,45,.12);
  --tinta:#0E1522;--tinta-2:#344052;--tinta-3:#5A6578;--tinta-4:#8A94A6;
  --fio:rgba(17,26,45,.08);--fio-2:rgba(17,26,45,.13);--fio-3:rgba(17,26,45,.24);
  --marca:#F16000;--marca-tinta:#B84A00;--marca-veu:rgba(241,96,0,.07);--marca-veu-2:rgba(241,96,0,.12);
  --marca-no-escuro:#FF9147;
  --botao-1:#F86B0D;--botao-2:#DD5500;--sobre-botao:#FFFFFF;
  --botao-sombra:0 0 0 1px rgba(160,58,0,.30),0 10px 22px -10px rgba(241,96,0,.70);
  --livre:#14955A;--livre-tinta:#0B7442;--livre-veu:rgba(20,149,90,.11);
  --perto:#DDAD00;--perto-tinta:#7A5800;--perto-veu:rgba(221,173,0,.16);
  --passou:#D63939;--passou-tinta:#AE2323;--passou-veu:rgba(214,57,57,.10);
  --tecla:linear-gradient(180deg,#FFFFFF 0%,#F3F6FA 55%,#E7ECF3 100%);
  --tecla-sombra:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(17,26,45,.06),0 0 0 1px rgba(17,26,45,.09),0 12px 22px -12px rgba(17,26,45,.55),0 2px 5px -1px rgba(17,26,45,.12);
  --tecla-brilho:#FFFFFF;
  --dica-fundo:rgba(15,20,30,.92);--dica-tinta:#F2F5FA;--dica-tinta-2:#A9B4C5;
  --letra:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --letra-mono:"Atkinson Hyperlegible Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --r2:11px;--r3:18px;--r4:22px;--r-placa:28px;
  --curva:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --chao:#05070B;
  --vidro:rgba(12,16,23,.64);
  --vidro-topo:rgba(17,21,29,.86);
  --vidro-pe:rgba(13,17,24,.55);
  --desfoque:9px;--saturacao:160%;
  --aro:rgba(255,255,255,.26);--aro-2:rgba(255,255,255,.06);
  --sombra-placa:0 0 0 1px rgba(0,0,0,.5),0 34px 70px -28px rgba(0,0,0,.85);
  --folha:rgba(23,28,38,.74);
  --folha-forte:rgba(24,30,40,.86);
  --folha-solida:#161B24;
  --folha-2:#11151C;
  --folha-3:rgba(255,255,255,.05);
  --folha-toque:#1F2530;
  --funda:rgba(0,0,0,.32);
  --funda-sombra:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --luz:inset 0 1px 0 rgba(255,255,255,.065);
  --sombra-folha:0 0 0 1px rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.35);
  --sombra-alta:0 0 0 1px rgba(255,255,255,.08),0 24px 56px -12px rgba(0,0,0,.7),0 6px 14px -6px rgba(0,0,0,.4);
  --tinta:#EAEFF6;--tinta-2:#B6BFCD;--tinta-3:#8691A3;--tinta-4:#5E687A;
  --fio:rgba(234,239,246,.08);--fio-2:rgba(234,239,246,.13);--fio-3:rgba(234,239,246,.24);
  --marca:#FF7A1F;--marca-tinta:#FF9147;--marca-veu:rgba(255,122,31,.10);--marca-veu-2:rgba(255,122,31,.16);
  --botao-1:#FF7A1F;--botao-2:#E25A00;
  --botao-sombra:0 0 0 1px rgba(0,0,0,.4),0 12px 26px -12px rgba(255,110,20,.6);
  --livre:#41D68E;--livre-tinta:#62E0A3;--livre-veu:rgba(65,214,142,.13);
  --perto:#F4C430;--perto-tinta:#F7D46A;--perto-veu:rgba(244,196,48,.14);
  --passou:#F26464;--passou-tinta:#FF8F8F;--passou-veu:rgba(242,100,100,.14);
  --tecla:linear-gradient(180deg,#2D333F 0%,#1B2029 100%);
  --tecla-sombra:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07),0 14px 26px -10px rgba(0,0,0,.95),0 3px 8px -2px rgba(0,0,0,.6);
  --tecla-brilho:rgba(255,255,255,.2);
  --dica-fundo:rgba(30,36,48,.94);}}
:root[data-theme="dark"]{color-scheme:dark;
  --chao:#05070B;
  --vidro:rgba(12,16,23,.64);
  --vidro-topo:rgba(17,21,29,.86);
  --vidro-pe:rgba(13,17,24,.55);
  --desfoque:9px;--saturacao:160%;
  --aro:rgba(255,255,255,.26);--aro-2:rgba(255,255,255,.06);
  --sombra-placa:0 0 0 1px rgba(0,0,0,.5),0 34px 70px -28px rgba(0,0,0,.85);
  --folha:rgba(23,28,38,.74);
  --folha-forte:rgba(24,30,40,.86);
  --folha-solida:#161B24;
  --folha-2:#11151C;
  --folha-3:rgba(255,255,255,.05);
  --folha-toque:#1F2530;
  --funda:rgba(0,0,0,.32);
  --funda-sombra:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --luz:inset 0 1px 0 rgba(255,255,255,.065);
  --sombra-folha:0 0 0 1px rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.35);
  --sombra-alta:0 0 0 1px rgba(255,255,255,.08),0 24px 56px -12px rgba(0,0,0,.7),0 6px 14px -6px rgba(0,0,0,.4);
  --tinta:#EAEFF6;--tinta-2:#B6BFCD;--tinta-3:#8691A3;--tinta-4:#5E687A;
  --fio:rgba(234,239,246,.08);--fio-2:rgba(234,239,246,.13);--fio-3:rgba(234,239,246,.24);
  --marca:#FF7A1F;--marca-tinta:#FF9147;--marca-veu:rgba(255,122,31,.10);--marca-veu-2:rgba(255,122,31,.16);
  --botao-1:#FF7A1F;--botao-2:#E25A00;
  --botao-sombra:0 0 0 1px rgba(0,0,0,.4),0 12px 26px -12px rgba(255,110,20,.6);
  --livre:#41D68E;--livre-tinta:#62E0A3;--livre-veu:rgba(65,214,142,.13);
  --perto:#F4C430;--perto-tinta:#F7D46A;--perto-veu:rgba(244,196,48,.14);
  --passou:#F26464;--passou-tinta:#FF8F8F;--passou-veu:rgba(242,100,100,.14);
  --tecla:linear-gradient(180deg,#2D333F 0%,#1B2029 100%);
  --tecla-sombra:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07),0 14px 26px -10px rgba(0,0,0,.95),0 3px 8px -2px rgba(0,0,0,.6);
  --tecla-brilho:rgba(255,255,255,.2);
  --dica-fundo:rgba(30,36,48,.94);}
/* no celular não há a placa do conteúdo por trás: as folhas ficam mais cheias */
@media (max-width:899px){
  :root{--folha:rgba(255,255,255,.9);--folha-forte:rgba(255,255,255,.95)}
  :root[data-theme="dark"]{--folha:rgba(20,25,34,.92);--folha-forte:rgba(23,29,39,.95)}}
@media (max-width:899px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]){--folha:rgba(20,25,34,.92);--folha-forte:rgba(23,29,39,.95)}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
/* o fundo liso: só a cor do chão, sem desenho (pedido do João) */
body{margin:0;min-height:100dvh;background:var(--chao);color:var(--tinta);font:15px/1.5 var(--letra);-webkit-font-smoothing:antialiased}
/* a faixa do relógio do celular: o conteúdo que rola some embaixo dela */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--chao)}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button,a,.chip,.aba,.nav-item,label.opcao,label.confirma{touch-action:manipulation;-webkit-user-select:none;user-select:none}
input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
code,.mono{font-family:var(--letra-mono);font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.icone{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--marca-tinta);text-underline-offset:3px}
em{font-style:normal;color:var(--tinta-3);font-weight:400}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* O vidro: tinta translúcida, desfoque do que está atrás, um aro de luz mais forte no alto à esquerda */
.vidro{isolation:isolate;background:var(--vidro);-webkit-backdrop-filter:blur(var(--desfoque)) saturate(var(--saturacao));backdrop-filter:blur(var(--desfoque)) saturate(var(--saturacao));box-shadow:var(--sombra-placa)}
.vidro::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(158deg,var(--aro) 0%,var(--aro-2) 16%,transparent 38%,transparent 70%,var(--aro-2) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* A marca: um volante numa tecla */
.marca{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.022em}
.selo-marca{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;background:var(--tecla);box-shadow:var(--tecla-sombra);color:var(--marca)}
.selo-marca .icone{width:23px;height:23px;stroke-width:1.9}

/* Entrar (e as páginas do QR e do convite): a marca e uma caixa de vidro */
.entrada{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding-block:max(32px,env(safe-area-inset-top,0px)) 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.entrada-col{width:min(420px,100%);display:grid;gap:22px}
.entrada .marca{justify-content:center;gap:13px;font-size:25px}
.entrada .selo-marca{width:46px;height:46px;border-radius:15px}
.entrada .selo-marca .icone{width:31px;height:31px}
.entrada-caixa{position:relative;display:grid;gap:16px;padding:28px 26px 26px;border-radius:var(--r-placa);background:var(--vidro-topo)}
.entrada-caixa h1{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.entrada-sub{font-size:14.5px;color:var(--tinta-3);margin-top:-10px}
.entrada-nota{font-size:13px;color:var(--tinta-3)}
.entrada-nota .icone{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--livre-tinta)}
.carregando .entrada,.carregando .app,.carregando .abas{display:none!important}

/* Estrutura: no computador, o menu e o conteúdo soltos sobre o chão; o conteúdo rola dentro da placa */
.app{position:relative;z-index:1}
.trilho,.principal{background:linear-gradient(180deg,var(--vidro-topo) 0%,var(--vidro-topo) 30%,var(--vidro-pe) 100%)}
.trilho{position:relative;display:flex;flex-direction:column;min-height:0;padding:22px 14px 14px;border-radius:var(--r-placa)}
.trilho-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 0 8px}
.nav{position:relative;display:grid;gap:3px;margin-top:28px}
/* a tecla do item escolhido: o aparencia.js põe em cima do item e escorrega até o novo */
.nav-pilula{position:absolute;left:0;top:0;width:0;height:0;z-index:0;border-radius:13px;background:var(--tecla);box-shadow:var(--tecla-sombra);overflow:hidden;pointer-events:none;opacity:0}
.nav-pilula::after{content:"";position:absolute;inset:-1px;background:linear-gradient(112deg,transparent 24%,var(--tecla-brilho) 36%,transparent 50%),linear-gradient(112deg,transparent 52%,color-mix(in srgb,var(--tecla-brilho) 45%,transparent) 58%,transparent 64%)}
.nav-item{position:relative;z-index:1;display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 12px;border-radius:13px;color:var(--tinta-2);font-weight:500;font-size:14.5px;transition:color .2s,background-color .2s}
.nav-item .icone{width:18px;height:18px;color:var(--tinta-3);transition:color .2s}
.nav-item[aria-current="page"]{color:var(--tinta);font-weight:600}
.nav-item[aria-current="page"] .icone{color:var(--marca)}
.nav-item .contagem{margin-left:auto;font-size:12px;font-weight:500;color:var(--tinta-3)}
.nav-item .contagem.vivo{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:99px;background:var(--livre-veu);color:var(--livre-tinta);font-weight:600}
.contagem:empty{display:none}
@media (hover:hover) and (pointer:fine){.nav-item:not([aria-current="page"]):hover{background:var(--folha-3);color:var(--tinta)}}
.trilho-pe{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:16px}
/* Claro ou Escuro: o tema novo se espalha a partir do botão */
.tema{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--funda);box-shadow:var(--funda-sombra)}
.tema button{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:10px;font-size:13px;font-weight:600;color:var(--tinta-3);transition:color .2s}
.tema button[aria-pressed="true"]{background:var(--tecla);box-shadow:var(--tecla-sombra);color:var(--tinta)}
.tema button[aria-pressed="true"] .icone{color:var(--marca)}
@media (hover:hover) and (pointer:fine){.tema button[aria-pressed="false"]:hover{color:var(--tinta)}}
.eu{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--folha);box-shadow:var(--sombra)}
.eu-txt{flex:1;min-width:0}
.eu b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu small{display:block;font-size:12px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;font-size:13px;font-weight:700;background:var(--marca-veu-2);color:var(--marca-tinta)}
.fechar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--tinta-3);flex:none}
.fechar .icone{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.fechar:hover{background:var(--folha-3);color:var(--tinta)}}
.principal{position:relative;min-width:0;border-radius:var(--r-placa);overflow:hidden}
.rolo{height:100%;overflow:auto;overscroll-behavior:contain;padding:30px 34px 48px;scrollbar-width:thin;scrollbar-color:var(--fio-3) transparent;container:principal/inline-size}
.principal.rolou .rolo{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px);mask-image:linear-gradient(to bottom,transparent 0,#000 30px)}
@media (min-width:900px){
  html,body{height:100%}
  .app{height:100%;min-height:600px;display:grid;grid-template-columns:256px minmax(0,1fr);gap:16px;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topo,.abas{display:none!important}}

/* O aviso de conexão: uma pílula solta no alto, centrada no conteúdo */
.aviso-rede{position:fixed;z-index:45;top:24px;left:calc(50% + 136px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;max-width:min(560px,calc(100% - 320px));padding:7px 15px;border-radius:99px;font-size:13px;font-weight:600;color:var(--perto-tinta);background:var(--folha-solida);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--perto) 45%,transparent),var(--sombra-alta);animation:aviso-desce .32s var(--curva)}
.aviso-rede .icone{width:15px;height:15px;color:var(--perto)}
@keyframes aviso-desce{from{opacity:0;transform:translate(-50%,-8px)}}

/* A faixa da conta: a plataforma não aceita mais a entrada (a senha foi trocada) */
.faixa-conta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:20px;padding:14px 18px;border-radius:var(--r3);background:var(--passou-veu);color:var(--passou-tinta);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--passou) 30%,transparent)}
.faixa-conta > .icone{width:20px;height:20px}
.faixa-conta p{flex:1 1 280px;font-size:14px;font-weight:600}
.faixa-conta p small{display:block;font-weight:400;color:var(--tinta-2);margin-top:2px}

/* Cabeça da página */
.cabeca{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-bottom:20px}
.cabeca h1{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.028em;text-wrap:balance}
.cabeca p{margin-top:6px;color:var(--tinta-3);font-size:14.5px;max-width:62ch}
.cabeca-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ao-vivo{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;border-radius:99px;font-size:13px;color:var(--tinta-2);background:var(--folha);box-shadow:var(--sombra)}
.ao-vivo i{width:8px;height:8px;border-radius:50%;background:var(--livre);animation:pulso 2.4s ease-out infinite}
.ao-vivo[data-estado="atrasado"] i{background:var(--perto);animation:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--livre) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--livre) 0%,transparent)}}
.secao{margin-top:28px}
.secao:first-of-type{margin-top:0}
.secao-topo{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:12px}
.secao-topo h2{font-size:17px;font-weight:700;letter-spacing:-.012em}
.secao-topo p{font-size:13px;color:var(--tinta-3);margin-top:2px}

/* Botões: o principal é laranja com o brilho de cima; o secundário é uma folha clara */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;font-weight:600;font-size:14.5px;white-space:nowrap;text-decoration:none;transition:transform .12s var(--curva),filter .15s,background-color .15s,color .15s}
.btn:active{transform:scale(.97)}
.btn.pri{color:var(--sobre-botao);background:linear-gradient(180deg,var(--botao-1),var(--botao-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.16),var(--botao-sombra)}
.btn.sec{color:var(--tinta);background:var(--folha-forte);box-shadow:var(--luz),0 0 0 1px var(--fio-2),0 6px 14px -10px rgba(0,0,0,.35)}
.btn.perigo{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--passou) 86%,#fff),var(--passou));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--passou) 70%,#000),0 10px 22px -12px color-mix(in srgb,var(--passou) 80%,transparent)}
.btn.texto{height:auto;padding:4px 2px;color:var(--marca-tinta);border-radius:6px;background:none;box-shadow:none}
.btn.texto.perigo{color:var(--passou-tinta)}
.btn.vermelho{color:var(--passou-tinta);background:var(--passou-veu);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--passou) 38%,transparent)}
.btn.peq{height:34px;padding:0 13px;font-size:13.5px;border-radius:10px}
.btn.larga{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn.copiado{color:var(--livre-tinta)}
.btn.ocupado{opacity:.7;cursor:progress}
@media (hover:hover) and (pointer:fine){.btn.vermelho:hover{background:color-mix(in srgb,var(--passou) 18%,transparent)}.btn.pri:not([disabled]):hover,.btn.perigo:not([disabled]):hover{filter:brightness(1.07)}.btn.sec:not([disabled]):hover{background:var(--folha-toque)}.btn.texto:hover{text-decoration:underline}}
.rotulo{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.pilula{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 11px;border-radius:99px;font-size:13px;font-weight:700}
.pilula .icone{width:14px;height:14px;stroke-width:2.2}
.pilula.livre{background:var(--livre-veu);color:var(--livre-tinta)}
.pilula.perto{background:var(--perto-veu);color:var(--perto-tinta)}
.pilula.passou{background:var(--passou-veu);color:var(--passou-tinta)}
.selo{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;flex:none}
.selo .icone{width:12px;height:12px;stroke-width:2.2}
.selo.marca-s{background:var(--marca-veu-2);color:var(--marca-tinta)}
.selo.livre{background:var(--livre-veu);color:var(--livre-tinta)}
.selo.perto{background:var(--perto-veu);color:var(--perto-tinta)}
.selo.passou{background:var(--passou-veu);color:var(--passou-tinta)}
.selo.neutro{background:var(--folha-3);color:var(--tinta-3)}
/* a bolinha de quem está dirigindo agora */
.vivo-ponto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--livre);box-shadow:0 0 0 3px var(--livre-veu);flex:none}
.cartao{padding:20px 22px 22px;border-radius:var(--r3);background:var(--folha);box-shadow:var(--sombra)}
.cartao h2{font-size:15.5px;font-weight:700;letter-spacing:-.012em}
.sub{font-size:13px;color:var(--tinta-3);margin-top:2px}
.nota{font-size:12.5px;color:var(--tinta-3)}
.nota[data-tipo="ok"]{color:var(--livre-tinta)}
.nota[data-tipo="erro"]{color:var(--perto-tinta)}

/* Estado vazio grande */
.vazio-grande{display:grid;justify-items:start;gap:10px;padding:28px 28px 30px;background:var(--folha);border-radius:var(--r4);box-shadow:var(--sombra);max-width:640px}
.vazio-grande h2{font-size:20px;font-weight:700;letter-spacing:-.015em}
.vazio-grande p{font-size:14.5px;color:var(--tinta-2);max-width:56ch}
.vg-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.vg-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tecla);box-shadow:var(--tecla-sombra);color:var(--marca)}
.vg-ic .icone{width:22px;height:22px}
.vazio{padding:28px 16px;text-align:center;color:var(--tinta-3);font-size:14px}

/* Busca e filtros */
.ferramentas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.busca{position:relative;flex:1 1 240px;max-width:360px}
.busca input{width:100%;height:40px;padding:0 12px 0 38px;border:0;border-radius:12px;background:var(--funda);box-shadow:var(--funda-sombra);outline:none;transition:background-color .15s,box-shadow .15s}
.busca input::placeholder{color:var(--tinta-3)}
.busca input:focus{background:var(--folha-solida);box-shadow:0 0 0 1.5px var(--marca),0 0 0 4.5px var(--marca-veu-2)}
.busca .icone{position:absolute;left:12px;top:50%;margin-top:-8px;color:var(--tinta-3);pointer-events:none}
.chips{position:relative;display:inline-flex;flex-wrap:wrap;gap:3px;max-width:100%;padding:3px;border-radius:13px;background:var(--funda);box-shadow:var(--funda-sombra)}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--tinta-3);transition:color .15s}
.chip .n{font-weight:500;color:var(--tinta-4);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--tecla);box-shadow:var(--tecla-sombra);color:var(--tinta)}
.chip[aria-pressed="true"] .n{color:var(--tinta-3)}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed="false"]:hover{color:var(--tinta)}}
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-bottom:14px}
.filtros .campo{flex:1 1 170px;max-width:260px}
.filtros .campo > span{font-size:12.5px;color:var(--tinta-3);font-weight:600}

/* Tabelas e listas em cartões (no celular, os cartões no lugar da tabela) */
.tabela-env{background:var(--folha);border-radius:var(--r3);box-shadow:var(--sombra);overflow-x:auto}
table.tabela{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;font-weight:600;color:var(--tinta-3);padding:11px 14px;background:var(--folha-3);border-bottom:1px solid var(--fio);white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--fio);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr[data-abre]{cursor:pointer;transition:background-color .12s}
.tabela tr.escolhida{background:var(--marca-veu)}
.tabela tr.apagada{opacity:.6}
@media (hover:hover) and (pointer:fine){.tabela tbody tr[data-abre]:not(.escolhida):hover{background:var(--folha-3)}}
.tabela .t-caixa{width:1%;padding-right:0}
.tabela .t-acao{text-align:right;white-space:nowrap}
.tabela .t-nada{color:var(--tinta-4);font-size:13px;white-space:nowrap}
.quem{display:block;min-width:0;text-align:left}
.quem b{display:block;font-weight:600}
.quem small,.t-sub{display:block;font-size:12.5px;color:var(--tinta-3)}
.agora{display:flex;align-items:center;gap:9px;min-width:0}
.agora b{font-weight:600;color:var(--tinta)}
.agora small{display:block;font-size:12.5px;color:var(--tinta-3)}
.lista-cartoes{display:none;gap:10px}
.cartao-linha{display:grid;gap:10px;padding:14px 16px;background:var(--folha);border-radius:var(--r3);box-shadow:var(--sombra)}
.cartao-linha.escolhida{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--marca) 40%,transparent),var(--sombra)}
.cartao-linha.apagada{opacity:.65}
.cl-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;width:100%;text-align:left}
.cl-topo .quem{flex:1}
.cl-topo b{font-size:15px}
.cl-pe{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--tinta-3)}
@container principal (max-width:720px){.tabela-env{display:none}.lista-cartoes{display:grid}}
.mais-linha{display:flex;justify-content:center;margin-top:16px}

/* A caixinha de escolher (veículos para imprimir) */
.caixinha{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border-radius:7px;border:1.5px solid var(--fio-3);background:var(--folha-solida);cursor:pointer;flex:none;transition:background-color .12s,border-color .12s,transform .12s var(--curva)}
.caixinha::after{content:"";width:11px;height:6px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .16s var(--curva)}
.caixinha:checked{background:var(--marca);border-color:var(--marca)}
.caixinha:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.caixinha:indeterminate{background:var(--marca);border-color:var(--marca)}
.caixinha:indeterminate::after{width:10px;height:0;border-left:0;border-bottom:2.2px solid #fff;transform:none}
.caixinha:active{transform:scale(.9)}
.caixinha:disabled{opacity:.4;cursor:not-allowed}

/* A barra dos escolhidos: solta no pé do conteúdo (no celular, acima das abas) */
.barra-escolha{position:fixed;z-index:44;left:calc(50% + 136px);bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 320px);padding:8px 8px 8px 18px;border-radius:18px;background:var(--folha-solida);box-shadow:var(--luz),var(--sombra-alta);animation:barra-sobe .3s var(--curva)}
.barra-escolha b{font-size:14px;font-weight:700}
@keyframes barra-sobe{from{opacity:0;transform:translate(-50%,12px)}}

/* Gaveta e janelas: folhas inteiras */
dialog{padding:0;border:0;color:var(--tinta);background:var(--folha-solida);max-width:none;max-height:none;overflow:hidden}
dialog::backdrop{background:rgba(6,10,18,.46);opacity:0;transition:opacity .22s}
dialog.aberto::backdrop{opacity:1}
.gaveta{margin:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) auto;width:min(460px,calc(100% - 24px));height:auto;max-height:none;border-radius:var(--r4);box-shadow:var(--luz),var(--sombra-alta);transform:translateX(calc(100% + 28px));transition:transform .34s var(--curva)}
.gaveta[open],.modal[open]{display:flex;flex-direction:column}
.gaveta.aberto{transform:none}
.modal{margin:auto;width:min(560px,calc(100% - 32px));max-height:min(820px,calc(100dvh - 48px));border-radius:var(--r4);box-shadow:var(--luz),var(--sombra-alta);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .2s,transform .3s var(--curva)}
.modal.aberto{opacity:1;transform:none}
@media (min-width:641px){.modal.largo{width:min(680px,calc(100% - 32px))}.modal.pergunta{width:min(460px,calc(100% - 32px))}}
.m-caixa,.modal form,.gaveta form{display:flex;flex-direction:column;flex:1;min-height:0}
.g-cabeca,.m-cabeca{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--fio)}
.g-cabeca h2,.m-cabeca h2{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.m-cabeca p,.g-cabeca p{font-size:13.5px;color:var(--tinta-3);margin-top:4px}
.rotulo-claro{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:3px}
.g-cabeca .fechar,.m-cabeca .fechar{margin:-4px -6px 0 0}
.g-corpo,.m-corpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 22px 22px;display:flex;flex-direction:column;gap:18px}
.g-corpo > *,.m-corpo > *{flex-shrink:0}
.g-pe,.m-pe{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--fio);background:var(--folha-2)}
.g-pe{justify-content:flex-start}
.g-pe .empurra{margin-left:auto}
.g-h3{font-size:13px;font-weight:700;margin-bottom:-10px}
.dados{display:grid;gap:1px;background:var(--fio);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--fio)}
.dados div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:var(--folha-solida);font-size:13.5px}
.dados dt{color:var(--tinta-3);flex:none}
.dados dd{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
.historico li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:10px 0;border-top:1px solid var(--fio);font-size:13.5px}
.historico li:first-child{border-top:0}
.historico b{font-weight:600}
.historico .h-dir{text-align:right;color:var(--tinta-2)}
.historico small{grid-column:1/-1;color:var(--tinta-3);font-size:12.5px}
.caixa-agora{display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--livre-veu);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--livre) 22%,transparent)}
.caixa-agora.parado{background:var(--folha-2);box-shadow:inset 0 0 0 1px var(--fio)}
.caixa-agora .agora b{font-size:15px}
.caixa-agora .btn{justify-self:start}
.celulares li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--fio)}
.celulares li:first-child{border-top:0}
.celulares li > .icone{width:20px;height:20px;color:var(--tinta-3)}
.celulares li > span{flex:1;min-width:0;display:grid;gap:1px}
.celulares b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.celulares small{font-size:12.5px;color:var(--tinta-3)}
.celulares li.cancelado{opacity:.55}
.m-intro{font-size:14.5px;color:var(--tinta-2)}
.instrucoes{display:grid;gap:8px;counter-reset:passo}
.instrucoes li{counter-increment:passo;position:relative;min-height:22px;padding-left:34px;font-size:14px;color:var(--tinta-2)}
.instrucoes li::before{content:counter(passo);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--folha-3);font-size:12px;font-weight:700;color:var(--tinta-2)}
.instrucoes b{color:var(--tinta);font-weight:600}
.resultado{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:14px;background:var(--livre-veu);color:var(--livre-tinta)}
.resultado .icone{width:18px;height:18px;margin-top:2px}
.resultado.atencao{background:var(--perto-veu);color:var(--perto-tinta)}
.resultado.perigo{background:var(--passou-veu);color:var(--passou-tinta)}
.campo{display:grid;gap:6px;align-content:start}
.campo > span{font-size:13.5px;font-weight:600}
.campo input:not([type="checkbox"]),.campo textarea,.campo select{width:100%;height:42px;padding:0 12px;border-radius:11px;border:1px solid var(--fio-2);background:var(--folha-2);outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.campo select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-3) 50%),linear-gradient(135deg,var(--tinta-3) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.campo textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.45}
.campo input:not([type="checkbox"]):focus,.campo textarea:focus,.campo select:focus{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-veu-2);background-color:var(--folha-solida)}
.campo small{font-size:12.5px;color:var(--tinta-3)}
.erro-forma{font-size:13.5px;font-weight:600;color:var(--passou-tinta)}
.erro-forma:empty{display:none}
.linha-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pergunta .m-corpo{gap:10px}
.q-texto{display:grid;gap:10px;font-size:14.5px;color:var(--tinta-2)}
.q-texto b{color:var(--tinta);font-weight:600;overflow-wrap:anywhere}
/* Trazer da plataforma: a lista de condutores com a caixinha */
.escolha-lista{border-radius:14px;box-shadow:inset 0 0 0 1px var(--fio-2);overflow:hidden}
.escolha-lista li{border-top:1px solid var(--fio)}
.escolha-lista li:first-child{border-top:0}
.escolha-lista label{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.escolha-lista label > span{flex:1;min-width:0;display:grid;gap:1px}
.escolha-lista b{font-weight:600;overflow-wrap:anywhere}
.escolha-lista small{font-size:12.5px;color:var(--tinta-3)}
.escolha-lista li.ja{opacity:.6}
.escolha-lista li.ja label{cursor:default}
@media (hover:hover) and (pointer:fine){.escolha-lista li:not(.ja) label:hover{background:var(--folha-3)}}
@media (max-width:640px){
  .modal{margin:auto 0 0;width:100%;max-height:92dvh;border-radius:22px 22px 0 0;opacity:1;transform:translateY(100%)}
  .gaveta{margin:auto 0 0;width:100%;height:auto;max-height:90dvh;border-radius:22px 22px 0 0;transform:translateY(100%)}
  .modal.aberto,.gaveta.aberto{transform:none}
  .m-pe .btn{flex:1}
  .linha-campos{grid-template-columns:minmax(0,1fr)}}

/* O QR na tela (o convite e a prévia das etiquetas): sempre preto no branco, numa folha clara */
.qr-caixa{display:grid;justify-items:center;gap:12px;padding:18px;border-radius:var(--r3);background:#FFFFFF;box-shadow:0 0 0 1px var(--fio-2),0 14px 30px -20px rgba(17,26,45,.5)}
.qr-caixa svg{display:block;width:min(260px,100%);height:auto}
.qr-caixa p{font-size:13px;color:#4B5566;text-align:center}
.link-caixa{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 6px 6px 12px;border-radius:12px;background:var(--folha-2);box-shadow:inset 0 0 0 1px var(--fio-2)}
.link-caixa code{flex:1 1 0;width:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.link-caixa .btn{flex:none}
.botoes{display:flex;flex-wrap:wrap;gap:8px}

/* A folha de QR: na tela, a prévia das etiquetas; na impressão, folhas A4 com 6 etiquetas cada */
.etiquetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.etiqueta{display:grid;justify-items:center;align-content:start;gap:6px;padding:16px 14px 14px;border-radius:var(--r3);background:#FFFFFF;color:#0E1522;text-align:center;box-shadow:0 0 0 1px var(--fio-2),0 14px 30px -22px rgba(17,26,45,.5)}
.etiqueta .e-marca{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#5A6578}
.etiqueta .e-marca .icone{width:16px;height:16px;color:#F16000}
.etiqueta .e-nome{font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.etiqueta .e-placa{font-family:var(--letra-mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:#344052}
.etiqueta svg.e-qr{display:block;width:100%;max-width:190px;height:auto;margin:4px 0}
.etiqueta .e-pe{font-size:12px;line-height:1.35;color:#344052}
.etiqueta .e-pe b{color:#0E1522}
.impressao{display:none}
.folha-aviso{margin-bottom:16px}

/* Registro */
.reg-caixa{padding:6px 20px}
.reg-lista > li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--fio)}
.reg-lista > li:first-child{border-top:0}
.reg-lista > li.reg-dia{display:block;padding:16px 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-4);border-top:0}
.reg-lista > li.reg-dia + li{border-top:0}
.reg-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--folha-3);color:var(--tinta-3)}
.reg-ic .icone{width:16px;height:16px}
.reg-ic.turno{background:var(--livre-veu);color:var(--livre-tinta)}
.reg-ic.qr,.reg-ic.convite{background:var(--marca-veu-2);color:var(--marca)}
.reg-ic.conta{background:var(--passou-veu);color:var(--passou-tinta)}
.reg-corpo{min-width:0}
.reg-corpo b{display:block;font-weight:600;font-size:14.5px}
.reg-corpo p{font-size:13.5px;color:var(--tinta-2);margin-top:2px;overflow-wrap:anywhere}
.reg-corpo small{display:block;font-size:12.5px;color:var(--tinta-3);margin-top:3px}

/* Turnos: quem está dirigindo agora, em cartões */
.dirigindo{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cartao-turno{display:grid;gap:12px;padding:16px 18px;border-radius:var(--r3);background:var(--folha);box-shadow:var(--sombra)}
.ct-topo{display:flex;align-items:center;gap:12px;min-width:0}
.ct-topo .avatar{background:var(--livre-veu);color:var(--livre-tinta)}
.ct-quem{flex:1;min-width:0}
.ct-quem b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-quem small{display:block;font-size:12.5px;color:var(--tinta-3)}
.ct-veiculo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--folha-3);font-size:14px}
.ct-veiculo .icone{width:18px;height:18px;color:var(--marca)}
.ct-veiculo span{min-width:0}
.ct-veiculo b{display:block;font-weight:600;overflow-wrap:anywhere}
.ct-veiculo small{display:block;font-family:var(--letra-mono);font-size:12px;color:var(--tinta-3)}
.ct-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--tinta-2)}
.vazio-linha{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r3);background:var(--folha);box-shadow:var(--sombra);font-size:14px;color:var(--tinta-3)}
.vazio-linha .icone{width:20px;height:20px}

/* Ajustes */
.ajustes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@container principal (min-width:960px){.ajustes{grid-template-columns:repeat(2,minmax(0,1fr))}.ajustes .largo{grid-column:1/-1}}
.ajustes .cartao{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.ajustes .cartao > p{font-size:14px;color:var(--tinta-2)}
.form-linha{display:grid;gap:12px}
.form-linha .botoes{justify-content:flex-end}
.estado-ligacao{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:13px;font-size:13.5px;background:var(--folha-3);box-shadow:inset 0 0 0 1px var(--fio)}
.estado-ligacao .icone{width:18px;height:18px;margin-top:1px;flex:none}
.estado-ligacao.ok{background:var(--livre-veu);box-shadow:none}
.estado-ligacao.ok .icone{color:var(--livre-tinta)}
.estado-ligacao.atencao{background:var(--passou-veu);box-shadow:none}
.estado-ligacao.atencao .icone{color:var(--passou-tinta)}
.estado-ligacao b{display:block;font-weight:600}
.estado-ligacao span{color:var(--tinta-2)}

/* Avisos */
.torradas{position:fixed;inset:auto auto calc(28px + env(safe-area-inset-bottom,0px)) 50%;transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;overflow:visible;width:min(460px,calc(100% - 32px));display:grid;gap:8px;pointer-events:none;z-index:90}
.torrada{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:15px;background:var(--dica-fundo);color:var(--dica-tinta);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;line-height:1.4;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 36px -14px rgba(0,0,0,.6);animation:sobe .32s var(--curva);transition:opacity .2s,transform .2s}
.torrada .icone{width:18px;height:18px;margin-top:1px;color:var(--marca-no-escuro)}
.torrada.sai{opacity:0;transform:translateY(6px)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}}

/* Celular: cabeçalho e abas de vidro soltos; o conteúdo rola por baixo deles, direto sobre o chão */
.topo{display:none}
.abas{display:none}
.topo-tema .lua{display:none}
:root[data-theme="dark"] .topo-tema .sol{display:none}
:root[data-theme="dark"] .topo-tema .lua{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topo-tema .sol{display:none}:root:not([data-theme="light"]) .topo-tema .lua{display:block}}
@media (max-width:899px){
  .trilho{display:none}
  .principal{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;overflow:visible}
  .principal::before{display:none}
  .rolo{height:auto;overflow:visible;padding-block:16px calc(118px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topo{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:30;display:flex;align-items:center;gap:10px;height:58px;margin:calc(env(safe-area-inset-top,0px) + 10px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));padding:0 10px 0 12px;border-radius:20px}
  .topo .marca{flex:none;gap:9px;font-size:17px}
  .topo .selo-marca{width:32px;height:32px}
  .topo-tema{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--tinta-2);background:var(--tecla);box-shadow:var(--tecla-sombra);flex:none}
  .topo-tema .icone{width:18px;height:18px}
  .topo-eu{flex:0 1 auto;margin-left:auto;min-width:0;display:grid;justify-items:end;padding:4px 2px 4px 8px;border-radius:12px;text-align:right;line-height:1.2}
  .topo-eu small{font-size:11.5px;font-weight:500;color:var(--tinta-3)}
  .topo-eu b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:-.01em}
  .abas{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:2px;padding:6px;border-radius:24px}
  .abas .nav-pilula{border-radius:18px}
  .aba{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border-radius:18px;font-size:11.5px;font-weight:600;color:var(--tinta-3);transition:color .2s}
  .aba .icone{width:21px;height:21px}
  .aba[aria-current="page"]{color:var(--tinta)}
  .aba[aria-current="page"] .icone{color:var(--marca)}
  /* os filtros ficam numa linha só, que rola de lado */
  .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .ferramentas .chips,.busca input{background:linear-gradient(var(--funda),var(--funda)),var(--folha-forte);box-shadow:var(--funda-sombra),0 0 0 1px var(--fio)}
  .busca input:focus{background:var(--folha-solida)}
  .busca{max-width:none}
  .aviso-rede{top:calc(env(safe-area-inset-top,0px) + 78px);left:50%;max-width:calc(100% - 32px);font-size:12.5px}
  .torradas{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .barra-escolha{left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px)}
  .cabeca h1{font-size:26px}}
@container principal (max-width:760px){
  .cartao{padding:16px}
  .reg-caixa{padding:4px 16px}
  .filtros .campo{max-width:none}}

/* A troca de tema: o tema novo se espalha a partir do botão, com a borda macia */
@property --vt-r{syntax:"<length>";inherits:false;initial-value:0px}
html.vt *,html.vt *::before,html.vt *::after{transition:none!important}
html.vt-circulo::view-transition-old(root),html.vt-circulo::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-circulo::view-transition-new(root){-webkit-mask-image:radial-gradient(circle at var(--vt-x,50%) var(--vt-y,0px),#000 calc(var(--vt-r) - 260px),transparent var(--vt-r));mask-image:radial-gradient(circle at var(--vt-x,50%) var(--vt-y,0px),#000 calc(var(--vt-r) - 260px),transparent var(--vt-r))}
html.vt-fade::view-transition-old(root),html.vt-fade::view-transition-new(root){animation-duration:.35s}
html.tema-suave,html.tema-suave *{transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s,fill .5s,stroke .5s!important}

/* Quem pede menos transparência: o vidro vira folha inteira */
@media (prefers-reduced-transparency:reduce){
  .vidro{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--folha-solida)}
  .trilho,.principal{background:var(--folha-solida)}
  .torrada{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* A impressão: só as folhas de etiquetas, sempre claras (A4, 6 por folha, com o risco de cortar) */
@page{size:A4;margin:10mm}
@media print{
  :root{color-scheme:light}
  html,body{height:auto!important;background:#FFFFFF!important}
  body::before{display:none}
  body > *{display:none!important}
  body > .impressao{display:block!important}
  /* 6 por folha: as linhas nunca crescem (minmax 0) e a etiqueta corta o que sobrar, para nada passar para a folha seguinte */
  .pagina{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:190mm;height:276mm;overflow:hidden;break-after:page;page-break-after:always;break-inside:avoid}
  .pagina:last-child{break-after:auto;page-break-after:auto}
  .pagina .etiqueta{border-radius:0;box-shadow:none;outline:.2mm dashed #B9C0CC;outline-offset:-.1mm;padding:4mm 5mm;gap:1.4mm;align-content:center;overflow:hidden}
  .pagina .etiqueta .e-marca{font-size:9pt}
  .pagina .etiqueta .e-marca .icone{width:4.5mm;height:4.5mm}
  .pagina .etiqueta .e-nome{font-size:13pt}
  .pagina .etiqueta .e-placa{font-size:11pt}
  .pagina .etiqueta svg.e-qr{width:48mm;max-width:none;margin:.5mm 0}
  .pagina .etiqueta .e-pe{font-size:8.5pt}}