/* Estilo do visualizador, compartilhado pela página do cliente e pela prévia do painel. */
:root {
  --fundo: #0b2229; --superficie: #143741; --borda: #24505c;
  --texto: #eef3f4; --suave: #9fb6bc; --ouro: #bf9b30; --erro: #e58a7a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 15px/1.4 Calibri, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
}
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.cartao {
  position: fixed; background: rgba(20, 55, 65, .94); border: 1px solid var(--borda);
  border-radius: 12px; backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
#painel { top: 12px; left: 12px; width: 268px; padding: 14px 14px 10px; }
.marca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.marca .simbolo { flex: none; width: 34px; }
.marca .simbolo svg { display: block; width: 100%; height: auto; }
.marca span { color: var(--suave); font-size: 13px; }
h1 { font-size: 19px; margin: 0; font-weight: 600; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#btn-painel { display: none; width: auto; padding: 6px 12px; min-height: 36px; font-size: 13px; }
.rotulo { font-size: 13px; font-weight: 600; color: var(--suave); margin: 0 0 6px; }

.disc { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.disc:hover { background: rgba(255, 255, 255, .05); }
.disc input, .opcao input { width: 18px; height: 18px; accent-color: var(--ouro); margin: 0; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.disc .nome { flex: 1; }
.qtd { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.qtd.erro { color: var(--erro); }

.linha { border-top: 1px solid var(--borda); margin: 8px 0; }
.opcao { display: flex; align-items: center; gap: 9px; padding: 7px 4px; min-height: 40px; cursor: pointer; }
button {
  font: inherit; color: var(--texto); background: transparent; border: 1px solid var(--borda);
  border-radius: 8px; padding: 9px 12px; cursor: pointer; width: 100%; min-height: 40px;
}
button:hover { border-color: var(--ouro); }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

#painel { max-height: calc(100% - 24px); overflow-y: auto; }
#fundos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#fundos button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; font-size: 13px; }
#fundos button[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro); }
#fundos i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); flex: none; }
body[data-fundo="claro"] .dica, body[data-fundo="cinza"] .dica { color: #26444d; }
details.tudo { margin-top: 10px; }
details.tudo .prop { font-size: 12px; }
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--suave); font-size: 13px; padding: 6px 4px; }
#diag { top: auto; }
.tabela { overflow-x: auto; }
table { border-collapse: collapse; font-size: 12px; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 4px 6px; white-space: nowrap; border-top: 1px solid var(--borda); }
th { color: var(--suave); font-weight: 400; border-top: 0; }

#status { top: 12px; left: 50%; transform: translateX(-50%); padding: 8px 14px; font-size: 13px; color: var(--suave); }
#status[hidden], #info[hidden] { display: none; }

#info { top: 12px; right: 12px; width: 300px; max-height: calc(100% - 24px); display: flex; flex-direction: column; }
#info header { padding: 14px 44px 10px 14px; border-bottom: 1px solid var(--borda); position: relative; }
#info-titulo { font-size: 16px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
#info-sub { font-size: 12px; color: var(--suave); margin: 2px 0 0; }
#info-fechar { position: absolute; top: 8px; right: 8px; width: 34px; min-height: 34px; padding: 0; border: 0; font-size: 20px; color: var(--suave); }
#info-props { overflow-y: auto; padding: 6px 14px 12px; }
.prop { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(36, 80, 92, .6); font-size: 13px; }
.prop span { color: var(--suave); }
.prop strong { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.vazio { color: var(--suave); font-size: 13px; }

.dica { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--suave); pointer-events: none; white-space: nowrap; }

@media (max-width: 720px) {
  #painel { width: auto; right: 12px; max-height: 62%; overflow-y: auto; padding-bottom: 12px; }
  #btn-painel { display: block; }
  #painel.recolhido .topo { margin-bottom: 0; }
  #painel.recolhido #painel-corpo { display: none; }
  #info { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 45%; }
  #status { top: auto; bottom: 40px; }
  .dica { display: none; }
}

/* Demo do Instagram: identidade Leo Marques (Paleta B) por cima do visor.css do portal.
   Marinho #0B1B33, gelo #F4F6F9, azul #1F4E9A, céu #6FA8FF, cinza-azul #9FB3C8. Nada de dourado. */
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("fontes/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("fontes/inter.woff2") format("woff2"); }

:root {
  --fundo: #0b1b33; --superficie: #11264a; --borda: #26406a;
  --texto: #f4f6f9; --suave: #9fb3c8; --ouro: #6fa8ff; --erro: #ff9a8a;
  --azul: #1f4e9a; --ceu: #6fa8ff; --gelo: #f4f6f9;
  --titulo: "Archivo", "Arial Black", system-ui, sans-serif;
}
/* o atributo hidden sempre vence (botões e blocos com display próprio) */
[hidden] { display: none !important; }
body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 15px; }
h1, h2 { font-family: var(--titulo); font-weight: 800; letter-spacing: -.01em; }
.cartao { background: rgba(11, 27, 51, .94); }
.prop { border-bottom-color: rgba(38, 64, 106, .7); }
button:hover { border-color: var(--ceu); }
body[data-fundo="claro"] .dica, body[data-fundo="cinza"] .dica { color: #26406a; }

/* enquanto a porta está aberta, o visualizador fica fora do foco e da leitura */
body.na-porta #painel, body.na-porta #recursos, body.na-porta .dica, body.na-porta #info, body.na-porta #status { visibility: hidden; }

/* ---------- painel do visualizador ---------- */
#painel h1 { font-size: 18px; }
#sub-projeto { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }
#btn-recomecar { margin-bottom: 4px; }
.canal { display: block; margin: 10px 2px 2px; font-size: 13px; color: var(--suave); text-decoration: none; line-height: 1.35; }
.canal b { color: var(--ceu); font-weight: 600; }
.canal:hover b { text-decoration: underline; }

/* ---------- recursos com cadeado ---------- */
#recursos { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
#recursos button {
  position: relative; width: auto; min-height: 40px; padding: 7px 12px 7px 10px; display: flex; align-items: center; gap: 7px;
  background: rgba(11, 27, 51, .9); border-color: var(--borda); color: var(--suave); font-size: 13px; border-radius: 999px;
  backdrop-filter: blur(8px);
}
#recursos button:hover { color: var(--texto); }
#recursos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cadeado { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--azul); border: 1px solid var(--fundo); }
.cadeado::before { content: ""; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 4px; border: 1.4px solid var(--gelo); border-bottom: 0; border-radius: 3px 3px 0 0; }
.cadeado::after { content: ""; position: absolute; left: 4px; top: 6.5px; width: 7.5px; height: 5.5px; background: var(--gelo); border-radius: 1.5px; }
body:has(#info:not([hidden])) .dica { display: none; }

/* ---------- aviso do recurso ---------- */
.fundo-escuro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(4, 10, 20, .62); }
.fundo-escuro[hidden] { display: none; }
.caixa { width: min(380px, 100%); background: var(--fundo); border: 1px solid var(--borda); border-radius: 16px; padding: 22px 20px 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
.caixa h2 { font-size: 22px; margin: 4px 0 8px; }
.caixa p { margin: 0 0 12px; line-height: 1.5; color: var(--texto); }
.caixa .nota { color: var(--suave); font-size: 13px; }
.selo { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ceu) !important; margin: 0 !important; }

/* ---------- botões e links ---------- */
.botao, .principal {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 16px; margin: 6px 0;
  background: var(--ceu); color: var(--fundo); border: 0; border-radius: 10px; font: 600 15px/1.2 "Inter", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.botao:hover, .principal:hover { background: #8dbbff; }
.principal:disabled { opacity: .45; cursor: default; }
.secundario { min-height: 48px; margin: 6px 0; border-color: var(--borda); color: var(--texto); border-radius: 10px; }
.secundario small, .discreto small { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; font-weight: 400; }

/* ---------- porta: abertura, lista, carga ---------- */
#porta {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--fundo); display: flex; flex-direction: column;
  background-image: linear-gradient(rgba(159, 179, 200, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 179, 200, .05) 1px, transparent 1px);
  background-size: 32px 32px;
}
#porta[hidden] { display: none; }
.porta-coluna { width: min(460px, 100%); margin: 0 auto; padding: max(40px, env(safe-area-inset-top)) 16px 24px; flex: 1; }
.rotulo-alto { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ceu); margin: 0 0 10px; }
.titulo { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.06; margin: 0 0 14px; }
.titulo-2 { font-size: 28px; line-height: 1.1; margin: 0 0 8px; }
.lead { color: var(--suave); font-size: 16px; line-height: 1.5; margin: 0 0 18px; }
.privado { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: rgba(31, 78, 154, .16); font-size: 14px; line-height: 1.45; color: var(--suave); }
.privado b { color: var(--texto); font-weight: 600; }
.privado svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ceu); stroke-width: 1.8; stroke-linejoin: round; margin-top: 1px; }

#soltar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 132px; padding: 18px;
  border: 2px dashed #3a5784; border-radius: 14px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
#soltar strong { font-size: 17px; font-weight: 600; color: var(--texto); }
#soltar span { font-size: 13px; color: var(--suave); }
#soltar:hover, #soltar.sobre, #soltar:focus-visible { border-color: var(--ceu); background: rgba(111, 168, 255, .07); outline: none; }
.so-cel { display: none; }
@media (pointer: coarse) { .so-pc { display: none; } .so-cel { display: inline; } }
#btn-exemplo { margin-top: 12px; }
.discreto { display: block; margin: 18px 0 0; text-align: center; color: var(--ceu); font-size: 14px; text-decoration: none; }
.discreto:hover { text-decoration: underline; }
.discreto[hidden] { display: none; }
.erro { color: var(--erro); font-size: 14px; line-height: 1.45; margin: 12px 0 0; }
.erro[hidden], .alerta[hidden] { display: none; }
.alerta { color: #ffd58a; background: rgba(255, 213, 138, .08); border: 1px solid rgba(255, 213, 138, .3); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }

#lista-arquivos, #lista-carga { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.arq { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; background: rgba(17, 38, 74, .7); }
.arq-cabeca { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.arq-nome { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.arq-tam, .arq-pct { font-size: 12px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.arq-campos { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.arq-disc { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; }
.arq-disc:focus-visible { outline: 2px solid var(--ceu); outline-offset: 1px; }
.arq-alinhar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); white-space: nowrap; min-height: 40px; cursor: pointer; }
.arq-alinhar input { width: 18px; height: 18px; accent-color: var(--ceu); margin: 0; }
.arq-remover { width: 40px; flex: none; padding: 0; font-size: 20px; color: var(--suave); }
.arq-barra { height: 6px; border-radius: 3px; background: rgba(159, 179, 200, .18); margin-top: 8px; overflow: hidden; }
.arq-barra i { display: block; height: 100%; width: 0; background: var(--ceu); border-radius: 3px; transition: width .25s; }
.arq-estado { margin: 6px 0 0; font-size: 13px; color: var(--suave); line-height: 1.4; }
.arq.erro { border-color: rgba(255, 154, 138, .5); }
.arq.erro .arq-estado { color: var(--erro); }
.arq.erro .arq-barra i { background: var(--erro); }
.arq.pronto .arq-estado { color: var(--texto); }
.explica { font-size: 13px; color: var(--suave); line-height: 1.5; margin: 0 0 14px; }
.explica b { color: var(--texto); font-weight: 600; }
.acoes { display: grid; gap: 0; }

.porta-rodape { width: min(460px, 100%); margin: 0 auto; padding: 18px 16px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(38, 64, 106, .7); }
.porta-rodape p { margin: 10px 0 0; font-size: 12px; color: var(--suave); line-height: 1.45; }
.quem { display: flex; align-items: center; gap: 12px; color: var(--gelo); text-decoration: none; }
.quem .assinatura { width: 170px; height: auto; color: var(--gelo); }
/* contorno leve: os traços mais finos da assinatura somem abaixo de 1 px */
.quem .assinatura use { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.quem span { font-size: 13px; color: var(--suave); }

@media (max-width: 720px) {
  #recursos { top: 76px; bottom: auto; right: 12px; flex-direction: column; align-items: flex-end; }
  #recursos button span { display: none; }
  #recursos button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  body:has(#painel:not(.recolhido)) #recursos { display: none; }
}

/* ---------- bordas do iPhone (entalhe, barra de início, barras do Safari e do Instagram) ----------
   A página vai até embaixo do entalhe (viewport-fit=cover) e "100%" no iPhone é a altura maior, com as barras
   recolhidas. Os painéis usam a área segura e a altura que aparece de verdade (dvh), para nada ficar cortado. */
:root {
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --alto: 100vh;
}
@supports (height: 100dvh) { :root { --alto: 100dvh; } }
html, body { height: var(--alto); }
#cena { height: var(--alto); }
#painel { top: calc(12px + var(--sa-t)); left: calc(12px + var(--sa-l)); max-height: calc(var(--alto) - 24px - var(--sa-t) - var(--sa-b)); }
/* no computador o painel de dados termina acima dos cadeados */
#info { top: calc(12px + var(--sa-t)); right: calc(12px + var(--sa-r)); max-height: calc(var(--alto) - 84px - var(--sa-t) - var(--sa-b)); }
#info-props { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#painel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#recursos { right: calc(12px + var(--sa-r)); bottom: calc(12px + var(--sa-b)); }

@media (max-width: 720px) {
  #painel { right: calc(12px + var(--sa-r)); max-height: calc(var(--alto) * .62 - var(--sa-t)); }
  #info { top: auto; bottom: calc(12px + var(--sa-b)); left: calc(12px + var(--sa-l)); right: calc(12px + var(--sa-r)); max-height: calc(var(--alto) * .5 - var(--sa-b)); }
  #recursos { top: calc(76px + var(--sa-t)); bottom: auto; }
}

/* celular deitado (pouca altura): painel recolhível como no celular em pé, e os cadeados saem
   da frente enquanto os dados de uma peça estão abertos */
@media (max-height: 500px) {
  #btn-painel { display: block; }
  #painel { width: 248px; padding: 10px 12px 8px; }
  #painel.recolhido .topo { margin-bottom: 0; }
  #painel.recolhido #painel-corpo { display: none; }
  #painel .topo { margin-bottom: 8px; }
  .disc, .opcao { min-height: 34px; padding: 4px; }
  #info { width: 280px; max-height: calc(var(--alto) - 24px - var(--sa-t) - var(--sa-b)); }
  #recursos { top: auto; bottom: calc(12px + var(--sa-b)); flex-direction: row; }
  #recursos button span { display: none; }
  #recursos button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .dica { display: none; }
}
body:has(#info:not([hidden])) #recursos { visibility: hidden; }
@media (min-width: 721px) and (min-height: 501px) { body:has(#info:not([hidden])) #recursos { visibility: visible; } }