/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENTOS — o painel do Google Drive (17/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   Azul e branco do CORES.md, com o tema escuro nos mesmos tokens. A entrada
   é em escala a partir do centro, e as linhas da lista entram em cascata:
   movimento que diz de onde a janela veio, e não enfeite. Quem pede menos
   movimento recebe menos movimento, no fim do arquivo.
   ═══════════════════════════════════════════════════════════════════════ */

.dv-bg{
  --dv-fundo:#fff;
  --dv-tinta:#0f2744;
  --dv-suave:#536b84;
  --dv-linha:#d8e3f0;
  --dv-azul:#1f68d5;
  --dv-azul-claro:#2f7ff2;
  --dv-superficie:#f5f8fc;
  --dv-superficie-azul:#e8f1fe;
  --dv-sombra:0 30px 80px rgba(15,39,68,.26),0 6px 16px rgba(15,39,68,.12);
  position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,28,52,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
  font-family:Inter,system-ui,sans-serif;color:var(--dv-tinta);
}
html:not([data-theme="light"]) .dv-bg{
  --dv-fundo:#0e2036;
  --dv-tinta:#e8f0fb;
  --dv-suave:#9db2cc;
  --dv-linha:rgba(140,185,255,.2);
  --dv-azul:#7ab3ff;
  --dv-azul-claro:#2f7ff2;
  --dv-superficie:#0b1a2f;
  --dv-superficie-azul:#13294a;
  --dv-sombra:0 30px 80px rgba(0,0,0,.6);
}
.dv-bg[hidden]{display:none;}
.dv-bg.aberto{opacity:1;pointer-events:auto;}

.dv-janela{width:min(720px,100%);max-height:min(680px,calc(100dvh - 48px));display:flex;flex-direction:column;
  background:var(--dv-fundo);border:1px solid var(--dv-linha);border-radius:22px;box-shadow:var(--dv-sombra);
  overflow:hidden;transform:translateY(14px) scale(.96);opacity:0;
  transition:transform .26s cubic-bezier(.16,1,.3,1),opacity .26s cubic-bezier(.16,1,.3,1);}
.dv-bg.aberto .dv-janela{transform:none;opacity:1;}

.dv-topo{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:20px 22px;
  border-bottom:1px solid var(--dv-linha);flex-shrink:0;
  background:linear-gradient(120deg,var(--dv-superficie-azul),transparent 70%);}
/* O brilho que atravessa o cabeçalho de tempos em tempos: movimento lento e
   raro, do tipo que se nota sem atrapalhar a leitura. */
.dv-topo:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.34) 50%,transparent 66%);
  transform:translateX(-130%);animation:dvBrilho 7.5s cubic-bezier(.4,0,.2,1) infinite;}
html:not([data-theme="light"]) .dv-topo:after{background:linear-gradient(105deg,transparent 34%,rgba(122,179,255,.16) 50%,transparent 66%);}
@keyframes dvBrilho{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.dv-ico{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;
  background:var(--dv-superficie-azul);color:var(--dv-azul);}
.dv-ico svg{width:22px;height:22px;}
.dv-titulo{min-width:0;display:flex;flex-direction:column;gap:2px;}
.dv-titulo b{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.dv-titulo span{font-size:12.5px;color:var(--dv-suave);}
.dv-fechar{margin-left:auto;width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;padding:0;border:0;
  border-radius:10px;background:var(--dv-superficie);color:var(--dv-suave);cursor:pointer;transition:background .15s,color .15s;}
.dv-fechar svg{width:16px;height:16px;}
.dv-fechar:hover{background:#fdeced;color:#c2334a;}
html:not([data-theme="light"]) .dv-fechar:hover{background:rgba(239,68,68,.18);color:#ff9aa9;}

.dv-corpo{flex:1;min-height:0;overflow-y:auto;padding:22px;}

/* ── Sem conexão: o convite ─────────────────────────────────────────── */
.dv-convite{text-align:center;max-width:460px;margin:0 auto;padding:8px 0 4px;}
/* ── A CENA ────────────────────────────────────────────────────────────
   Três coisas ao mesmo tempo, e cada uma com um papel:
     · PROFUNDIDADE — o ponteiro escreve `--px`/`--py` (de -1 a 1) e cada
       camada anda uma distância diferente. O papel da frente anda muito, o
       aro do fundo quase nada: é isso que dá a sensação de espaço.
     · RESPIRAÇÃO — a flutuação roda sozinha, em ritmos diferentes, para a
       janela não parecer uma imagem parada enquanto a pessoa decide.
     · SENTIDO — as faíscas sobem dos papéis para o ícone do Drive. É o
       anexo indo para a nuvem, que é o que o botão abaixo faz.
   O paralaxe e a flutuação ficam em elementos DIFERENTES (pai e filho): a
   animação manda no `transform` do filho, e o pai fica livre para o
   ponteiro. Num elemento só, uma apagaria a outra. */
.dv-cena{position:relative;height:196px;max-width:420px;margin:0 auto 20px;perspective:900px;--px:0;--py:0;}
.dv-cena-halo{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,127,242,.2),rgba(47,127,242,.05) 60%,transparent 72%);
  animation:dvRespira 6.5s ease-in-out infinite;}
.dv-cena-grade{position:absolute;inset:-10px;opacity:.55;
  background-image:radial-gradient(circle,var(--dv-linha) 1.1px,transparent 1.1px);background-size:17px 17px;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 78%);mask-image:radial-gradient(closest-side,#000 45%,transparent 78%);
  transform:translate3d(calc(var(--px) * 5px),calc(var(--py) * 5px),0);transition:transform .5s ease-out;
  animation:dvDesliza 26s linear infinite;}
.dv-aro{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:1px solid var(--dv-linha);animation:dvPulso 4.4s ease-in-out infinite;}
.dv-aro.dois{width:168px;height:168px;margin:-84px 0 0 -84px;animation-delay:.7s;opacity:.7;}
.dv-aro.tres{width:216px;height:216px;margin:-108px 0 0 -108px;animation-delay:1.4s;opacity:.45;}
@keyframes dvPulso{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.03);opacity:1}}
@keyframes dvRespira{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@keyframes dvDesliza{to{background-position:17px 17px}}

.dv-drive{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:4;
  transform:translate3d(calc(var(--px) * 16px),calc(var(--py) * 13px),0) rotateX(calc(var(--py) * -7deg)) rotateY(calc(var(--px) * 9deg));
  transition:transform .25s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;}
.dv-drive>i{display:grid;place-items:center;width:96px;height:96px;border-radius:28px;
  background:var(--dv-fundo);border:1px solid var(--dv-linha);
  box-shadow:0 22px 46px rgba(31,104,213,.26),0 2px 6px rgba(15,39,68,.1);
  animation:dvFlutua 5.6s ease-in-out infinite;}
.dv-drive svg{width:50px;height:50px;}

.dv-papel{position:absolute;z-index:3;transition:transform .35s ease-out;}
.dv-papel>i{display:grid;place-items:center;width:58px;height:72px;border-radius:14px;color:var(--dv-azul);
  background:var(--dv-fundo);border:1px solid var(--dv-linha);box-shadow:0 12px 26px rgba(15,39,68,.14);
  animation:dvFlutua 6s ease-in-out infinite;}
.dv-papel svg{width:26px;height:26px;}
.dv-papel.n1{left:3%;top:16%;transform:translate3d(calc(var(--px) * 30px),calc(var(--py) * 22px),0);}
.dv-papel.n1>i{--giro:-9deg;animation-duration:6.4s;}
.dv-papel.n2{right:4%;top:10%;transform:translate3d(calc(var(--px) * 24px),calc(var(--py) * 18px),0);}
.dv-papel.n2>i{--giro:7deg;animation-duration:7.2s;animation-delay:-1.2s;}
.dv-papel.n3{left:10%;bottom:6%;transform:translate3d(calc(var(--px) * 18px),calc(var(--py) * 14px),0);}
.dv-papel.n3>i{--giro:5deg;animation-duration:6.8s;animation-delay:-2.4s;width:52px;height:64px;}
.dv-papel.n4{right:11%;bottom:4%;transform:translate3d(calc(var(--px) * 12px),calc(var(--py) * 10px),0);}
.dv-papel.n4>i{--giro:-6deg;animation-duration:7.6s;animation-delay:-3.6s;width:50px;height:62px;}
@keyframes dvFlutua{0%,100%{transform:translateY(0) rotate(var(--giro,0deg))}50%{transform:translateY(-11px) rotate(var(--giro,0deg))}}

/* As faíscas sobem dos papéis até o ícone: o anexo virando arquivo na nuvem. */
.dv-faisca{position:absolute;bottom:26%;width:6px;height:6px;border-radius:50%;z-index:2;
  background:radial-gradient(circle,var(--dv-azul-claro),rgba(47,127,242,0));opacity:0;
  animation:dvSobe 4.6s ease-in-out infinite;}
.dv-faisca.f1{left:26%;animation-delay:.2s;}
.dv-faisca.f2{left:41%;animation-delay:1.5s;}
.dv-faisca.f3{right:31%;animation-delay:2.6s;}
.dv-faisca.f4{right:19%;animation-delay:3.4s;}
@keyframes dvSobe{0%{transform:translateY(0) scale(.7);opacity:0}
  18%{opacity:.95}70%{opacity:.5}100%{transform:translateY(-78px) scale(.35);opacity:0}}
.dv-convite h3{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em;}
.dv-capa-txt{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--dv-suave);}
.dv-capa-txt b{color:var(--dv-tinta);font-weight:600;}
.dv-pontos{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;}
.dv-pontos li{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--dv-linha);
  border-radius:13px;background:var(--dv-superficie);transition:transform .2s,border-color .2s,box-shadow .2s;
  animation:dvEntra .5s cubic-bezier(.16,1,.3,1) both;}
.dv-pontos li:nth-child(2){animation-delay:.08s}
.dv-pontos li:nth-child(3){animation-delay:.16s}
.dv-pontos li:hover{transform:translateX(3px);border-color:var(--dv-azul-claro);box-shadow:0 8px 20px rgba(15,39,68,.09);}
@keyframes dvEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dv-pontos svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:#0b7f59;}
html:not([data-theme="light"]) .dv-pontos svg{color:#4ade80;}
.dv-pontos span{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.5;color:var(--dv-suave);}
.dv-pontos b{font-size:13.5px;color:var(--dv-tinta);}
.dv-rodape-txt{margin:14px 0 0;font-size:12.5px;color:var(--dv-suave);}
.dv-alerta{margin:0;padding:12px 14px;border-radius:12px;background:#fff7e6;color:#a35d06;font-size:13px;}
html:not([data-theme="light"]) .dv-alerta{background:rgba(245,158,11,.16);color:#fbbf24;}

/* ── Botões ─────────────────────────────────────────────────────────── */
.dv-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 20px;border:0;
  border-radius:12px;font:600 13.5px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;
  transition:background .16s,transform .16s,box-shadow .16s,border-color .16s;text-decoration:none;}
.dv-btn svg{width:17px;height:17px;flex-shrink:0;}
/* O botão de conectar respira devagar: é a ação principal da tela, e a
   pulsação diz isso sem precisar de mais uma frase. */
.dv-btn-cheio{position:relative;background:var(--dv-azul-claro);color:#fff;box-shadow:0 6px 18px rgba(47,127,242,.3);}
#dv-conectar{animation:dvChama 3.6s ease-in-out infinite;}
@keyframes dvChama{0%,100%{box-shadow:0 6px 18px rgba(47,127,242,.3)}50%{box-shadow:0 10px 30px rgba(47,127,242,.5)}}
.dv-btn-cheio:hover{background:var(--dv-azul);transform:translateY(-1px);}
.dv-btn-cheio:disabled{background:var(--dv-superficie);color:var(--dv-suave);box-shadow:none;cursor:default;transform:none;}
.dv-btn-fino{height:36px;padding:0 14px;font-size:12.5px;background:var(--dv-fundo);color:var(--dv-tinta);
  border:1px solid var(--dv-linha);}
.dv-btn-fino:hover{border-color:var(--dv-azul-claro);color:var(--dv-azul);background:var(--dv-superficie-azul);}
.dv-btn-sair:hover{border-color:#e0a3ad;color:#c2334a;background:#fdeced;}
html:not([data-theme="light"]) .dv-btn-sair:hover{border-color:rgba(239,68,68,.4);color:#ff9aa9;background:rgba(239,68,68,.16);}
.dv-btn.ocupado{opacity:.75;cursor:progress;}

/* ── Conectado ──────────────────────────────────────────────────────── */
.dv-conta{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--dv-linha);border-radius:14px;background:var(--dv-superficie-azul);margin-bottom:16px;
  animation:dvEntra .45s cubic-bezier(.16,1,.3,1) both;}
.dv-conta:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.3) 50%,transparent 64%);
  transform:translateX(-130%);animation:dvBrilho 9s cubic-bezier(.4,0,.2,1) infinite;}
html:not([data-theme="light"]) .dv-conta:after{background:linear-gradient(105deg,transparent 36%,rgba(122,179,255,.12) 50%,transparent 64%);}
/* A ESTEIRA: papéis atravessando o cartão da conta, devagar e apagados. É o
   movimento constante que diz "isto aqui é um lugar de arquivos" sem roubar
   a leitura do e-mail e dos botões, que ficam por cima. */
.dv-conta-esteira{position:absolute;inset:0;display:flex;align-items:center;gap:26px;padding-left:12px;
  pointer-events:none;opacity:.14;color:var(--dv-azul);animation:dvEsteira 26s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 62%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 62%,transparent);}
.dv-conta-esteira span{flex-shrink:0;display:grid;place-items:center;width:26px;height:26px;}
.dv-conta-esteira svg{width:22px;height:22px;}
@keyframes dvEsteira{to{transform:translateX(-50%)}}
.dv-conta-ico{position:relative;z-index:2;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  border-radius:12px;background:var(--dv-fundo);color:var(--dv-azul);box-shadow:0 4px 12px rgba(31,104,213,.18);
  animation:dvBate 4.8s ease-in-out infinite;}
@keyframes dvBate{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.dv-conta-txt,.dv-conta .dv-btn{position:relative;z-index:2;}
.dv-conta-ico svg{width:20px;height:20px;}
.dv-conta-txt{min-width:0;display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.dv-conta-txt>b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-conta-txt>span{font-size:12px;color:var(--dv-suave);}
.dv-conta-txt>span b{color:var(--dv-azul);font-weight:600;}

.dv-barra{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.dv-busca{flex:1;min-width:180px;display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;
  border:1px solid var(--dv-linha);border-radius:12px;background:var(--dv-fundo);cursor:text;}
.dv-busca svg{width:15px;height:15px;color:var(--dv-suave);flex-shrink:0;}
.dv-busca input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 13px Inter,system-ui,sans-serif;color:var(--dv-tinta);}
.dv-busca input::placeholder{color:var(--dv-suave);}
.dv-busca:focus-within{border-color:var(--dv-azul-claro);box-shadow:0 0 0 3px rgba(47,127,242,.15);}

.dv-lista{display:flex;flex-direction:column;gap:8px;}
.dv-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--dv-linha);border-radius:13px;
  background:var(--dv-fundo);color:inherit;text-decoration:none;
  animation:dvLinha .32s cubic-bezier(.16,1,.3,1) both;transition:border-color .16s,transform .16s,box-shadow .16s;}
@keyframes dvLinha{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dv-item:hover{border-color:var(--dv-azul-claro);transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,39,68,.1);}
.dv-item{position:relative;overflow:hidden;}
.dv-item:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(47,127,242,.12) 50%,transparent 62%);
  transform:translateX(-120%);transition:opacity .2s;}
.dv-item:hover:before{opacity:1;animation:dvBrilho 1.6s cubic-bezier(.4,0,.2,1);}
.dv-item-ico{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;
  background:var(--dv-superficie-azul);color:var(--dv-azul);transition:transform .2s;}
.dv-item:hover .dv-item-ico{transform:translateY(-2px) rotate(-4deg);}
.dv-item-ico svg{width:18px;height:18px;}
.dv-item-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.dv-item-txt b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-item-txt small{font-size:12px;color:var(--dv-suave);}
.dv-item-abrir{flex-shrink:0;color:var(--dv-suave);display:grid;place-items:center;}
.dv-item-abrir svg{width:16px;height:16px;}
.dv-item:hover .dv-item-abrir{color:var(--dv-azul);}
.dv-vazio{padding:12px 12px 24px;text-align:center;font-size:13px;color:var(--dv-suave);}
/* Pasta vazia não é uma frase solta: é a cena, menor, com a frase embaixo.
   O painel continua vivo enquanto não há nada para listar. */
.dv-vazio-cena{padding-top:6px;}
.dv-cena.compacta{height:150px;max-width:330px;margin-bottom:4px;}
.dv-cena.compacta .dv-drive{width:74px;height:74px;margin:-37px 0 0 -37px;}
.dv-cena.compacta .dv-drive>i{width:74px;height:74px;border-radius:22px;}
.dv-cena.compacta .dv-drive svg{width:38px;height:38px;}
.dv-cena.compacta .dv-papel>i{width:46px;height:58px;border-radius:12px;}
.dv-cena.compacta .dv-papel svg{width:20px;height:20px;}
.dv-cena.compacta .dv-aro{width:96px;height:96px;margin:-48px 0 0 -48px;}
.dv-cena.compacta .dv-aro.dois{width:134px;height:134px;margin:-67px 0 0 -67px;}
.dv-cena.compacta .dv-aro.tres{width:172px;height:172px;margin:-86px 0 0 -86px;}

@media (max-width:768px){
  .dv-bg{padding:0;align-items:flex-end;}
  .dv-janela{width:100%;max-height:calc(100dvh - var(--mb-nav-h,62px) - var(--mb-safe-b,0px) - 12px);
    border-radius:22px 22px 0 0;transform:translateY(24px);}
  .dv-corpo{padding:18px 16px calc(18px + var(--mb-safe-b,0px));}
  .dv-conta{flex-wrap:wrap;}
  .dv-conta-txt{width:100%;margin-right:0;}
  .dv-barra .dv-btn{flex:1;}
  .dv-busca{min-width:100%;height:42px;}
  .dv-busca input{font-size:16px;}
}

/* Quem pediu menos movimento recebe a mesma tela, parada. */
@media (prefers-reduced-motion:reduce){
  .dv-bg,.dv-janela,.dv-item,.dv-item:before,.dv-item-ico,.dv-conta,.dv-conta-ico,.dv-conta-esteira,
  .dv-pontos li,.dv-topo:after,.dv-conta:after,
  .dv-cena-halo,.dv-cena-grade,.dv-aro,.dv-drive,.dv-drive>i,.dv-papel,.dv-papel>i,.dv-faisca,#dv-conectar{
    transition:none!important;animation:none!important;}
  .dv-janela{transform:none;}
  .dv-faisca{display:none;}
}

/* ── O ANEXO QUE MORA NO DRIVE ─────────────────────────────────────────
   Na lista de anexos da nota, a linha do arquivo que está no Drive ganha um
   fio azul à esquerda. Quem olha a nota precisa saber onde o arquivo está
   antes de clicar — é o que explica por que ele abre noutra aba. */
.f-item.f-item-drive{border-left:2px solid #2f7ff2;padding-left:6px;}
.f-item.f-item-drive .f-name:after{content:'Drive';margin-left:7px;padding:1px 6px;border-radius:6px;
  background:rgba(47,127,242,.16);color:#7ab3ff;font-size:.58rem;font-weight:700;letter-spacing:.04em;vertical-align:middle;}
html[data-theme="light"] .f-item.f-item-drive .f-name:after{background:#e8f1fe;color:#1f68d5;}