:root{
  --marca:#13697A;
  --ground:#F4F6F7;
  --surface:#FFFFFF;
  --surface-2:#EBF0F1;
  --ink:#141B1F;
  --ink-2:#54666F;
  --ink-3:#7E8F97;
  --line:#DBE3E5;
  --line-2:#BDCACD;
  --ok:#286249;
  --ok-soft:#E2EFE9;
  --alerta:#9E3320;
  --alerta-soft:#F7E6E2;
  --raio:3px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0F1519; --surface:#161F24; --surface-2:#1D272D;
    --ink:#E8EEF0; --ink-2:#98A9B1; --ink-3:#79888F;
    --line:#27353C; --line-2:#3C4E56;
    --ok:#6AC99B; --ok-soft:#132D22;
    --alerta:#E48169; --alerta-soft:#341B15;
  }
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--marca);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--marca);outline-offset:2px;}

/* topo */
.topo{background:var(--surface);border-bottom:1px solid var(--line);}
.topo .faixa{height:3px;background:var(--marca);}
.topo .conteudo{
  max-width:1060px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.marca:hover{text-decoration:none;}
.marca img{height:32px;width:auto;display:block;}
.marca .nome{font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.1;}
.marca .empresa{font-size:11.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14.5px;}
.busca{display:flex;gap:0;}
.busca input{
  border:1px solid var(--line-2);border-right:0;border-radius:var(--raio) 0 0 var(--raio);
  padding:7px 11px;font-size:14px;background:var(--surface);color:var(--ink);min-width:190px;
}
.busca button{
  border:1px solid var(--marca);background:var(--marca);color:#fff;
  border-radius:0 var(--raio) var(--raio) 0;padding:7px 14px;font-size:14px;cursor:pointer;
}

main{max-width:1060px;margin:0 auto;padding:32px 22px 80px;}
h1{font-size:27px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance;}
h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
   margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.sub{color:var(--ink-2);margin:0 0 22px;font-size:15.5px;}
.migalha{font-size:13px;color:var(--ink-3);margin:0 0 8px;}
.migalha a{color:var(--ink-2);}

/* numeros */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:8px;}
.numeros > div{background:var(--surface);padding:16px 18px;}
.numeros .v{font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--marca);
  font-variant-numeric:tabular-nums;line-height:1.1;}
.numeros .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;}

/* discos */
.discos{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 8px;}
.disco{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--raio);padding:8px 13px;font-size:13.5px;}
.bolinha{width:8px;height:8px;border-radius:50%;flex:none;}
.on{background:var(--ok);}
.off{background:var(--alerta);}
.disco .st{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}

/* tabela */
.quadro{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio);overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:15px;}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
   background:var(--surface-2);font-weight:600;white-space:nowrap;}
tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--surface-2);}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2);font-size:14px;}
td .cam{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.vazio{padding:36px 20px;text-align:center;color:var(--ink-3);font-size:15px;}

.etiqueta{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--raio);background:var(--surface-2);color:var(--ink-3);white-space:nowrap;}
.etiqueta.fora{background:var(--alerta-soft);color:var(--alerta);}

/* botoes e formularios */
.btn{display:inline-block;background:var(--marca);color:#fff;border:1px solid var(--marca);
  border-radius:var(--raio);padding:9px 16px;font-size:14.5px;cursor:pointer;text-decoration:none;}
.btn:hover{text-decoration:none;filter:brightness(1.08);}
.btn.fraco{background:transparent;color:var(--ink-2);border-color:var(--line-2);}
.btn.pequeno{padding:5px 11px;font-size:13px;}
label{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;}
input[type=text],input[type=password],input[type=number],input[type=file]{
  width:100%;border:1px solid var(--line-2);border-radius:var(--raio);
  padding:9px 11px;font-size:15px;background:var(--surface);color:var(--ink);}
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio);padding:22px 24px;}
.linha{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.linha > div{flex:1 1 150px;}
.erro{background:var(--alerta-soft);color:var(--alerta);border:1px solid var(--alerta);
  border-radius:var(--raio);padding:11px 15px;font-size:14.5px;margin-bottom:18px;}
.aviso{border-left:3px solid var(--line-2);padding:2px 0 2px 16px;color:var(--ink-2);
  font-size:14.5px;margin:16px 0;}

/* link publico */
.central{max-width:620px;margin:0 auto;}
.entrega{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--marca);
  border-radius:var(--raio);padding:30px 32px;margin-bottom:18px;}
.entrega h1{font-size:24px;}
.copia{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--raio);
  padding:8px 11px;word-break:break-all;color:var(--ink-2);}

footer{max-width:1060px;margin:0 auto;padding:22px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:12.5px;}
@media (max-width:640px){
  .topo nav{width:100%;margin-left:0;}
  .busca input{min-width:0;flex:1;}
  h1{font-size:23px;}
}

/* ---------- areas (fase 2) ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);margin-top:22px;}
.area{display:block;background:var(--surface);padding:20px 22px;text-decoration:none;color:var(--ink);}
.area:hover{background:var(--surface-2);text-decoration:none;}
.area h3{font-size:19px;margin:8px 0 4px;letter-spacing:-.01em;}
.area .desc{font-size:14.5px;color:var(--ink-2);margin:0 0 8px;}
.area .meta{font-size:13px;color:var(--ink-3);margin:0;font-variant-numeric:tabular-nums;}
.area.fora{opacity:.62;}

td.acoes{white-space:nowrap;display:flex;gap:6px;align-items:center;}

/* ---------- visor de arquivo ---------- */
.visor{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--raio);
  padding:14px;display:flex;justify-content:center;align-items:center;min-height:220px;}
.visor video,.visor img{max-width:100%;max-height:72vh;display:block;border-radius:2px;}
.visor audio{width:100%;}
.visor iframe{width:100%;height:72vh;border:0;background:var(--surface);border-radius:2px;}
.visor .vazio{padding:40px 10px;}

.busca input[type=search]{
  border:1px solid var(--line-2);border-right:0;border-radius:var(--raio) 0 0 var(--raio);
  padding:7px 11px;font-size:14px;background:var(--surface);color:var(--ink);min-width:190px;
  -webkit-appearance:none;appearance:none;}
@media (max-width:640px){.busca input[type=search]{min-width:0;flex:1;}}

/* ---------- barra lateral + area de trabalho (fase 7) ---------- */
.trabalho{display:grid;grid-template-columns:236px minmax(0,1fr);gap:26px;align-items:start;}
@media (max-width:820px){ .trabalho{grid-template-columns:1fr;gap:14px;} }

.lateral{position:sticky;top:16px;font-size:14.5px;}
@media (max-width:820px){ .lateral{position:static;} }
.lateral h4{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 8px;font-weight:600;}
.lateral .grupo{margin-bottom:22px;}
.lateral a{display:block;padding:6px 10px;border-radius:var(--raio);color:var(--ink-2);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.lateral a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink);}
.lateral a.aqui{background:var(--surface-2);color:var(--marca);font-weight:600;}
.lateral a.raiz{font-weight:600;color:var(--ink);}
.lateral .conta{float:right;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums;
  font-weight:400;padding-left:8px;}
.lateral .vazia{padding:6px 10px;color:var(--ink-3);font-size:13.5px;}
.lateral .acao{margin-top:10px;}

/* zona de soltar */
.solta{position:relative;}
.solta.ativa::after{content:"Solte para enviar para esta pasta";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;z-index:5;
  background:color-mix(in srgb, var(--marca) 12%, var(--surface));
  border:2px dashed var(--marca);border-radius:var(--raio);
  color:var(--marca);font-size:16px;font-weight:600;pointer-events:none;}

/* fila de envios */
.envios{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.envio{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio);
  padding:11px 14px;font-size:14px;}
.envio .topo-linha{display:flex;gap:12px;align-items:baseline;}
.envio .nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.envio .estado{color:var(--ink-3);font-size:12.5px;white-space:nowrap;}
.envio.falhou .estado{color:var(--alerta);}
.envio.feito .estado{color:var(--ok);}
.barra{height:4px;background:var(--surface-2);border-radius:2px;margin-top:8px;overflow:hidden;}
.barra i{display:block;height:100%;width:0;background:var(--marca);transition:width .18s linear;}
.envio.feito .barra i{background:var(--ok);}
.envio.falhou .barra i{background:var(--alerta);}
.barra.indefinida i{width:35%;animation:vaievem 1.1s ease-in-out infinite;}
@keyframes vaievem{0%{margin-left:-35%}100%{margin-left:100%}}

.barra-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px;}
.barra-acoes .esquerda{margin-right:auto;}
.lateral .grupo{max-height:56vh;overflow-y:auto;}
.lateral .grupo:first-child{max-height:none;overflow:visible;}

/* ---------- grade de miniaturas (fase 8) ---------- */
/* display de autor ganha do atributo hidden. Sem esta linha, a grade com
   display:grid nunca some e as duas visualizacoes aparecem juntas. */
[hidden]{display:none !important;}

.alterna{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--raio);overflow:hidden;}
.alterna button{background:var(--surface);border:0;padding:7px 13px;font-size:13.5px;cursor:pointer;
  color:var(--ink-2);border-right:1px solid var(--line-2);}
.alterna button:last-child{border-right:0;}
.alterna button.ligado{background:var(--marca);color:#fff;}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;padding:16px;}
.item{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--raio);overflow:hidden;background:var(--surface);}
.item:hover{text-decoration:none;border-color:var(--line-2);}
.item .capa{aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;
  justify-content:center;overflow:hidden;position:relative;}
.item .capa img{width:100%;height:100%;object-fit:cover;display:block;}
.item .capa .simbolo{font-size:30px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;}
.item .capa .play{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.62);color:#fff;
  border-radius:2px;font-size:10.5px;padding:2px 6px;letter-spacing:.06em;}
.item .rotulo{padding:9px 11px;font-size:13.5px;line-height:1.3;}
.item .rotulo .nome{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.item .rotulo .meta{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px;
  font-variant-numeric:tabular-nums;}
.item.pasta .capa{background:var(--surface-2);}
.item.pasta .capa .simbolo{color:var(--marca);}
.grade .acoes-item{display:flex;gap:6px;padding:0 11px 10px;}

/* ---------- selecao e lixeira (fase 9) ---------- */
/* NAO chamar de "marca": .marca ja e a logo do cabecalho, que tem
   display:flex. A celula herdaria isso, sairia do layout de tabela e abriria
   um vao branco na linha. */
td.sel, th.sel{width:38px;padding-right:0;}
td.sel input, th.sel input{width:16px;height:16px;cursor:pointer;accent-color:var(--marca);}
tr.escolhida{background:var(--ok-soft);}
tr.escolhida:hover{background:var(--ok-soft);}

.item{position:relative;}
.item .marca-grade{position:absolute;left:8px;top:8px;z-index:2;width:18px;height:18px;
  cursor:pointer;accent-color:var(--marca);}
.item.escolhida{outline:2px solid var(--marca);outline-offset:-2px;}

.selecao{display:none;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--marca);border-radius:var(--raio);padding:10px 14px;margin-bottom:12px;}
.selecao.aberta{display:flex;}
.selecao .quantos{font-weight:600;margin-right:auto;}
.btn.perigo{background:var(--alerta);border-color:var(--alerta);}

/* ---------- icones (fase 10) ---------- */
.ico{display:block;flex:none;}
td.tipo, th.tipo{width:34px;padding-right:0;color:var(--ink-3);}
td.tipo .ico{margin:0 auto;}
tr:hover td.tipo{color:var(--ink-2);}
td.tipo.pasta-cor{color:var(--marca);}
.nome-linha{display:flex;align-items:center;gap:2px;}

.item .capa .ico{width:46px;height:46px;color:var(--ink-3);}
.item.pasta .capa .ico{width:52px;height:52px;color:var(--marca);}
.item .capa .rotulo-ext{position:absolute;bottom:8px;font-size:10px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;}

/* ---------- polimento ---------- */
.entrega{padding:34px 34px 30px;}
.entrega h1{margin-bottom:10px;}
.rodape-entrega{margin:18px 2px 0;color:var(--ink-3);font-size:13px;line-height:1.55;}
.central .quadro table td{padding:14px 16px;}
.central .quadro tr:hover{background:var(--surface-2);}

/* estados vazios com menos cara de erro */
.vazio{padding:44px 20px;}
.vazio strong{display:block;color:var(--ink-2);font-size:16px;margin-bottom:4px;font-weight:600;}

/* respiro geral */
h2{margin-top:38px;}
.quadro table td:first-child{padding-left:16px;}
tbody tr{transition:background .1s ease;}
.btn{transition:filter .12s ease;}
.migalha{letter-spacing:.01em;}
.sub{line-height:1.5;}

/* ---------- tela inicial moderna (fase 11) ---------- */
:root{ --raio-cartao:14px; --sombra:0 1px 2px rgba(16,26,32,.05), 0 4px 14px rgba(16,26,32,.05); }
@media (prefers-color-scheme: dark){
  :root{ --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28); }
}

.numeros{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:none;
  border:0;margin-bottom:20px;}
/* ">" e essencial: sem ele a regra pega tambem os div de dentro (.v e .l)
   e cada numero ganha uma caixa dentro da caixa. */
.numeros > div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--raio-cartao);padding:18px 20px;box-shadow:var(--sombra);}
.numeros > div > div{background:none;border:0;border-radius:0;padding:0;box-shadow:none;}
.numeros .v{font-size:27px;}

/* armazenamentos com barra de espaco */
.discos{gap:12px;margin:0 0 22px;}
.disco{flex:1 1 260px;flex-direction:column;align-items:stretch;gap:0;
  border-radius:var(--raio-cartao);padding:15px 18px;box-shadow:var(--sombra);}
.disco .cabeca{display:flex;align-items:center;gap:8px;}
.disco .cabeca strong{flex:1;font-size:14.5px;}
.disco .medida{margin-top:11px;font-size:12.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums;}
.trilho{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:8px;}
.trilho i{display:block;height:100%;border-radius:99px;background:var(--marca);
  transition:width .5s ease;}
.trilho i.cheio{background:var(--alerta);}
.trilho i.quase{background:#B7791F;}

/* areas como blocos */
.areas{grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px;background:none;border:0;}
.area{border:1px solid var(--line);border-radius:var(--raio-cartao);padding:20px 22px 18px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.area::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--marca);opacity:0;transition:opacity .16s ease;}
.area:hover{background:var(--surface);transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:0 2px 4px rgba(16,26,32,.06), 0 12px 28px rgba(16,26,32,.1);}
.area:hover::before{opacity:1;}
.area:hover .ico-area{transform:scale(1.06);}
.area .ico-area{color:var(--marca);margin-bottom:12px;transition:transform .16s ease;}
.area h3{margin:0 0 5px;font-size:18.5px;}
.area .etiqueta{position:absolute;top:16px;right:16px;}
.area.fora{opacity:.55;}
.area.fora:hover{transform:none;box-shadow:var(--sombra);}
@media (prefers-reduced-motion: reduce){
  .area, .area .ico-area{transition:none;}
  .area:hover{transform:none;}
}

/* ---------- janela de compartilhar (fase 12) ---------- */
.veu{position:fixed;inset:0;background:rgba(12,20,24,.55);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .16s ease;}
.veu.aberto{opacity:1;pointer-events:auto;}
.janela{background:var(--surface);border-radius:var(--raio-cartao);width:100%;max-width:520px;
  box-shadow:0 18px 60px rgba(0,0,0,.3);max-height:88vh;overflow-y:auto;
  transform:translateY(10px) scale(.985);transition:transform .16s ease;}
.veu.aberto .janela{transform:none;}
.janela .cabeca{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 0;}
.janela .cabeca h3{margin:0;font-size:20px;letter-spacing:-.01em;flex:1;}
.janela .cabeca .sobre{margin:5px 0 0;color:var(--ink-2);font-size:14.5px;}
.janela .fechar{background:none;border:0;font-size:24px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px;}
.janela .fechar:hover{color:var(--ink);}
.janela .miolo{padding:18px 24px 24px;}
.janela .rodape{display:flex;gap:10px;justify-content:flex-end;padding:0 24px 22px;}
.janela label{margin-top:14px;}
.janela .linha > div{flex:1 1 130px;}

.pronto-link{background:var(--ok-soft);border:1px solid var(--ok);border-radius:var(--raio);
  padding:14px 16px;}
.pronto-link .endereco{display:flex;gap:8px;align-items:center;margin-top:10px;}
.pronto-link .endereco input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;background:var(--surface);}
.pronto-link .detalhe{margin:10px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5;}

/* ---------- caminho de volta, clicavel de verdade (fase 13) ----------
   Antes: todo mundo cinza igual, e o ultimo pedaco (a pasta onde voce ja
   esta) era link para ela mesma. O que parecia clicavel nao levava a lugar
   nenhum, e o que levava nao parecia clicavel.
   Agora: quem navega vira pastilha; onde voce esta vira texto forte. */
.migalha{font-size:13.5px;color:var(--ink-3);margin:0 0 14px;line-height:2.2;}
.migalha a{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;
  padding:3px 11px;line-height:1.5;
  transition:color .12s ease,border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.migalha a:hover{
  color:var(--marca);border-color:var(--marca);text-decoration:none;
  box-shadow:0 1px 3px rgba(16,26,32,.08);transform:translateY(-1px);
}
.migalha a .ico{opacity:.7;}
.migalha a:hover .ico{opacity:1;}
.migalha .sep{color:var(--line-2);margin:0 3px;vertical-align:middle;}
.migalha .aqui{color:var(--ink);font-weight:600;vertical-align:middle;}
@media (prefers-reduced-motion: reduce){ .migalha a{transition:none;} .migalha a:hover{transform:none;} }