/* ==========================================================================
   Planejador de Pastas — estilo
   ========================================================================== */

/* Montserrat (tipografia da marca VPlays), embutida para funcionar offline. Licença: fontes/OFL.txt */
@font-face {
  font-family: "Montserrat";
  src: url("../fontes/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fontes/montserrat-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Paleta do Media Kit VPlays: #000000 · #14171C · #0BCED1 · #20F6E0 · #FA7241 · #2159AD */
:root {
  --fundo: #000000;
  --painel: #14171c;
  --painel-2: #1b1f27;
  --borda: #2a303b;
  --texto: #eaf6f7;
  --suave: #8d9aa6;
  --acento: #0bced1;          /* turquesa VPlays */
  --acento-claro: #20f6e0;
  --acento-escuro: #099fa2;
  --sobre-acento: #031416;    /* texto sobre o turquesa */
  --laranja: #fa7241;         /* laranja do Rotom */
  --azul: #2159ad;
  --gradiente: linear-gradient(135deg, #20f6e0 0%, #0bced1 45%, #2159ad 100%);
  --foco: #20f6e0;
  --capa: #000000;            /* capa da pasta na visualização */
  --pagina: #1c2029;
  --livre: #2b313c;
  --vazio: #fa7241;
  --vazio-fundo: #3a2219;
  --perigo: #ff9a70; --perigo-fundo: #34190f;
  --aviso: #ffd166;  --aviso-fundo: #30270e;
  --info: #7fb0ff;   --info-fundo: #111f38;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .35);
  --raio: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* Padrão de silhuetas do Media Kit, bem discreto, atrás de tudo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/marca/fundo.webp") center / cover no-repeat;
  opacity: .55;
  pointer-events: none;
}

h1, h2 { margin: 0; line-height: 1.2; }
/* Títulos no estilo da marca: itálico, pesado e em caixa alta */
h2 { font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; }
button, input, select { font: inherit; color: inherit; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .92em; background: var(--painel-2); padding: 1px 5px; border-radius: 4px; }
small { color: var(--suave); }
.dica { font-size: 12px; color: var(--suave); }
.aviso-txt { color: var(--aviso); }

/* ---------- Controles genéricos ----------------------------------------- */

select, input[type="number"], input[type="search"], input[type="text"] {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}
select:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

.btn {
  border: 1px solid var(--borda);
  background: var(--painel);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { border-color: var(--acento); color: var(--acento-claro); }
.btn.mini { padding: 4px 9px; font-size: 12px; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--suave); }
.btn.fantasma:hover { color: var(--texto); border-color: var(--borda); }
.btn.primario { background: var(--gradiente); border-color: transparent; color: var(--sobre-acento); font-weight: 800; }
.btn.primario:hover { filter: brightness(1.1); }

.icone {
  width: 28px; height: 28px;
  border: 1px solid var(--borda);
  background: var(--painel);
  border-radius: 7px;
  cursor: pointer;
  line-height: 1;
}
.icone:hover:not(:disabled) { border-color: var(--suave); }
.icone:disabled { opacity: .35; cursor: default; }
.icone.remover:hover { color: var(--perigo); border-color: var(--perigo); }

.segmentado {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--painel-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 5px 10px; border-radius: 7px; font-weight: 700; text-align: center; }
.segmentado small { display: block; font-size: 10px; font-weight: 500; }
.segmentado input:checked + span { background: var(--gradiente); color: var(--sobre-acento); box-shadow: 0 0 12px rgba(11, 206, 209, .35); }
.segmentado input:checked + span small { color: var(--sobre-acento); opacity: .8; }
.segmentado input:focus-visible + span { outline: 2px solid var(--foco); }
.segmentado.pequeno span { padding: 3px 10px; font-size: 12px; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.trilho {
  position: relative;
  flex: none;
  width: 34px; height: 20px;
  border-radius: 99px;
  background: var(--borda);
  transition: background .15s;
}
.trilho::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.switch input:checked + .trilho { background: var(--acento); box-shadow: 0 0 10px rgba(11, 206, 209, .45); }
.switch input:checked + .trilho::after { transform: translateX(14px); }
.switch input:disabled + .trilho { opacity: .5; }
.switch input:focus-visible + .trilho { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Barra superior ---------------------------------------------- */

.topo {
  background: linear-gradient(180deg, rgba(0, 0, 0, .92), rgba(20, 23, 28, .96));
  border-bottom: 1px solid rgba(11, 206, 209, .35);
  box-shadow: 0 0 24px rgba(11, 206, 209, .12);
}
.topo-linha, .config { max-width: 1600px; margin: 0 auto; padding-inline: 20px; }
.topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-block: 14px;
}
.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.marca-texto { display: flex; align-items: center; gap: 12px; }
.marca-logo {
  flex: none;
  width: 52px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(32, 246, 224, .35));
}
.marca h1 {
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marca p { margin: 2px 0 0; color: var(--suave); font-size: 12.5px; }
.marca p b { color: var(--acento-claro); font-style: italic; font-weight: 800; }

/* Convite para seguir no Instagram */
.seguir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--laranja);
  border-radius: 999px;
  background: rgba(250, 114, 65, .12);
  color: var(--texto);
  text-decoration: none;
  line-height: 1.15;
  transition: background .15s, box-shadow .15s;
}
.seguir svg { flex: none; width: 26px; height: 26px; color: var(--laranja); }
.seguir small { display: block; font-size: 10.5px; color: var(--suave); }
.seguir b { font-weight: 800; font-style: italic; }
.seguir:hover { background: var(--laranja); color: #1a0b05; box-shadow: 0 0 16px rgba(250, 114, 65, .45); }
.seguir:hover svg, .seguir:hover small { color: #1a0b05; }
.seguir:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.status {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: end;
  gap: 6px 26px;
  padding: 10px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--painel-2);
}
.status .num span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.status .num strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.status .num em { font-style: normal; color: var(--suave); margin-left: 4px; }
.status.excedido .num:first-child strong { color: var(--perigo); }
.barra { grid-column: 1 / -1; display: flex; height: 8px; overflow: hidden; border-radius: 99px; background: var(--livre); }
.b-cartas { background: var(--gradiente); }
.b-vazios { background: repeating-linear-gradient(45deg, var(--vazio) 0 3px, var(--vazio-fundo) 3px 6px); }

.config {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
  padding-block: 14px 18px;
  border-top: 1px solid var(--borda);
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo .linha { display: flex; gap: 8px; }
.campo #capCustom { width: 110px; }
.legenda { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.regras { gap: 8px; max-width: 360px; }
.regras small { font-size: 11px; }
/* Observação da 1ª regra numa linha própria, para o bloco não alargar ao ligar a 2ª */
#pularNota { display: block; line-height: 1.2; }
#pularNota:empty { display: none; }

/* ---------- Layout ------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}
.centro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.painel, .biblioteca {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.painel { padding: 16px; }
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acoes-topo { display: flex; flex-wrap: wrap; gap: 6px; }

.vazio-msg .rotom { display: block; width: 92px; height: auto; margin: 0 auto 10px; filter: drop-shadow(0 0 10px rgba(32, 246, 224, .3)); }
.vazio-msg { margin: 0; padding: 22px; text-align: center; color: var(--suave); border: 1px dashed var(--borda); border-radius: 10px; }

/* ---------- Biblioteca -------------------------------------------------- */

.biblioteca {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.bib-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.bib-arquivo { display: flex; flex-wrap: wrap; gap: 4px; }
.bib-topo .dica { margin: 0; }

.bloco { border-bottom: 1px solid var(--borda); }
.bloco > summary, .nova > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.bloco > summary::-webkit-details-marker, .nova > summary::-webkit-details-marker { display: none; }
.bloco > summary::before { content: "▸"; color: var(--suave); transition: transform .15s; }
.bloco[open] > summary::before { transform: rotate(90deg); }
.bloco-nome { flex: 1; }
.bloco-meta { font-size: 12px; font-weight: 400; color: var(--suave); white-space: nowrap; }
.bloco-meta b { color: var(--acento); }
.bloco-acoes { display: flex; gap: 4px; padding: 0 14px 6px; }
.bloco ul { list-style: none; margin: 0; padding: 0 8px 10px; }
.bloco li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 8px;
  border-radius: 8px;
}
.bloco li:hover { background: var(--painel-2); }
.bloco li strong { display: block; font-weight: 600; line-height: 1.25; }
.bloco li small { display: block; font-size: 11.5px; }

/* Logo da coleção (ou a sigla, quando não há logo) */
.logo {
  display: block;
  width: 64px;
  height: 32px;
  object-fit: contain;
}
.logo.sem-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--borda);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--suave);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Nome em português, logo abaixo do nome em inglês */
.nome-pt { display: block; font-size: 12px; line-height: 1.3; color: var(--texto); opacity: .78; }
.bloco li.sel { background: color-mix(in srgb, var(--acento) 9%, transparent); }
.toggle {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--painel);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.toggle:hover { border-color: var(--acento); color: var(--acento); }
.toggle[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

.nova > summary { color: var(--acento); }
.form-nova { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.form-nova label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--suave); }
.form-nova input { color: var(--texto); font-weight: 400; }

/* ---------- Alertas ----------------------------------------------------- */

#alertas:empty { display: none; }
#alertas { display: flex; flex-direction: column; gap: 8px; }
.alerta { padding: 11px 14px; border-radius: 10px; border-left: 4px solid; }
.alerta.perigo { background: var(--perigo-fundo); border-color: var(--perigo); color: var(--perigo); }
.alerta.aviso { background: var(--aviso-fundo); border-color: var(--aviso); color: var(--aviso); }
.alerta.info { background: var(--info-fundo); border-color: var(--info); color: var(--info); }

/* ---------- Tabela da ordem -------------------------------------------- */

.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th {
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--suave);
  border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 7px 6px; border-bottom: 1px solid var(--borda); vertical-align: middle; white-space: nowrap; }
.tabela tbody tr[data-hl]:hover { background: var(--painel-2); }
.tabela .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .nome { white-space: normal; min-width: 170px; }
.tabela .nome strong { display: block; }
.tabela .nome small { display: block; font-size: 12px; }
.tabela .colecao { display: flex; align-items: center; gap: 10px; }
.tabela .colecao .logo { flex: none; width: 56px; height: 28px; }
.tabela .qtd input { width: 74px; padding: 4px 6px; }
.tabela .qtd .icone { margin-left: 4px; width: 26px; height: 26px; }
.tabela .acoes { text-align: right; }
.tabela .acoes .icone + .icone { margin-left: 2px; }
.tabela tr.lacuna td { padding: 3px 8px; border-bottom: 1px dashed var(--borda); color: var(--vazio); font-size: 12px; font-weight: 600; white-space: normal; }
.tabela tfoot td { padding-top: 10px; border: 0; color: var(--suave); white-space: normal; }
.tabela small { font-size: 11px; }

.cor {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 7px;
  border-radius: 3px;
  background: var(--c);
  vertical-align: -1px;
}
.cor.vazio { background: repeating-linear-gradient(45deg, var(--vazio) 0 2px, var(--vazio-fundo) 2px 4px); }
.cor.livre { background: var(--livre); box-shadow: inset 0 0 0 1px var(--borda); }

/* ---------- Visualização ------------------------------------------------ */

.legenda-viz { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; font-size: 12px; }
.legenda-viz:empty { display: none; }
.legenda-viz .item { display: inline-flex; align-items: center; cursor: default; }

.viz { --cel: 15px; --gap: 2px; display: flex; flex-direction: column; gap: 14px; }
.viz.zoom-p { --cel: 9px; --gap: 1px; }
.viz.zoom-g { --cel: 28px; --gap: 3px; }

.pasta > summary { cursor: pointer; padding: 4px 0 10px; }
.pasta > summary span { color: var(--suave); font-size: 13px; margin-left: 6px; }
.spreads { display: flex; flex-wrap: wrap; gap: 12px; }
.spread { display: flex; gap: 3px; padding: 5px; border-radius: 7px; background: var(--capa); }
.pag { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 3px; background: var(--pagina); }
.grade { display: grid; grid-template-columns: repeat(var(--cols), var(--cel)); gap: var(--gap); }
.rotulo {
  width: 0; min-width: 100%;
  overflow: hidden;
  font-size: 10px;
  color: var(--suave);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pag.capa {
  justify-content: center;
  align-items: center;
  width: calc(var(--cols) * var(--cel) + (var(--cols) - 1) * var(--gap) + 10px);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .2);
}
.pag.capa span { font-size: 10px; color: rgba(255, 255, 255, .45); text-align: center; }
.zoom-p .pag.capa span { display: none; }

.cel {
  display: block;
  width: var(--cel);
  height: calc(var(--cel) * 1.4);   /* proporção de uma carta (63 × 88 mm) */
  border-radius: 2px;
  background: var(--c);
  transition: opacity .12s;
}
.cel b { display: none; }
.zoom-g .cel b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.cel.livre { background: var(--livre); }
.cel.vazio { background: repeating-linear-gradient(45deg, var(--vazio) 0 2px, var(--vazio-fundo) 2px 5px); }

/* ---------- Explicação -------------------------------------------------- */

.como > summary { cursor: pointer; list-style: none; }
.como > summary::-webkit-details-marker { display: none; }
.como > summary h2::before { content: "▸ "; color: var(--suave); }
.como[open] > summary h2::before { content: "▾ "; }
.formulas { margin-top: 12px; line-height: 1.6; }
.formulas ul, .formulas ol { padding-left: 22px; }

/* ---------- Toast ------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%; bottom: 20px;
  z-index: 50;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--texto);
  color: var(--fundo);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.toast.ok { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.toast.erro { background: var(--laranja); color: #1a0b05; font-weight: 600; }

/* ---------- Responsivo -------------------------------------------------- */

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; padding: 16px; }
  .biblioteca { position: static; max-height: 60vh; }
}

@media (max-width: 640px) {
  .topo-linha, .config { padding-inline: 16px; }
  .status { grid-template-columns: repeat(2, auto); width: 100%; gap: 6px 18px; }
  .status .num strong { font-size: 17px; }
  .segmentado span { padding: 5px 9px; }
  .painel { padding: 12px; }
}

/* ---------- Impressão --------------------------------------------------- */

@media print {
  /* No papel, volta para cores claras */
  :root {
    --fundo: #fff; --painel: #fff; --painel-2: #f1f3f5; --borda: #d5dae0;
    --texto: #111; --suave: #555; --pagina: #f4f5f7; --livre: #e3e6eb; --capa: #c9ced6;
    --vazio-fundo: #fde3d8;
    color-scheme: light;
  }
  body::before, .seguir { display: none !important; }
  .marca h1 { color: #099fa2; background: none; }
  .biblioteca, .config, .acoes-topo, .segmentado.pequeno, .tabela .acoes, .tabela .qtd .icone, .toast { display: none !important; }
  .layout { display: block; padding: 0; }
  body, .painel, .topo { background: #fff; box-shadow: none; }
  .tabela .qtd input { border: 0; padding: 0; width: auto; }
  .spread, .pasta { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Coleção cuja quantidade de cartas ainda não foi divulgada */
.tabela .qtd input.pendente { border-color: var(--aviso); background: var(--aviso-fundo); }