/* historico.css — Histórico completo ("Ver tudo"): tela cheia que desliza da direita, com a lista de todas as pedras.
   Tocar numa pedra abre o dossiê (dossie.css); a lixeira exclui a pedra. */

.hist-tela {
  --hist-verde: #235048;
  --hist-acento: #235048;
  position: fixed; inset: 0; z-index: 10005;
  display: flex; flex-direction: column;
  background: var(--card, #fff); color: var(--ink, #2E1F17);
  font-family: 'Manrope', 'Inter', sans-serif;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, .9, .3, 1);
}
.hist-tela[hidden] { display: none; }
.hist-tela.aberto { transform: none; }
:root[data-theme="dark"] .hist-tela { --hist-acento: #F5EFE6; }

.hist-topo {
  /* É um <header>: sem isto herda o `header { position: fixed }` global e a lista passa por trás dele. */
  position: relative; top: auto; left: auto; right: auto; z-index: 1; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--card, #fff); border-bottom: 1px solid var(--line, rgba(46, 31, 23, .1));
  flex: none; display: flex; align-items: center; gap: 12px;
  width: min(100%, 640px); margin: 0 auto; box-sizing: border-box;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
}
.hist-voltar {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--card-alt, #F1E7DA); color: var(--ink, #2E1F17);
}
.hist-voltar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hist-titulo h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--hist-acento); }
.hist-titulo small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-mute, #6B5B4E); }

.hist-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  width: min(100%, 640px); margin: 0 auto; box-sizing: border-box;
  padding: 4px 16px calc(28px + env(safe-area-inset-bottom));
}
.hist-status { margin: 24px 4px; text-align: center; font-size: 15px; color: var(--ink-mute, #6B5B4E); }
.hist-status[hidden] { display: none; }

.hist-lista { border: 1px solid var(--line, rgba(46, 31, 23, .1)); border-radius: 20px; overflow: hidden; background: var(--card, #fff); }
.hist-lista:empty { display: none; }
.hist-linha { display: flex; align-items: center; border-bottom: 1px solid var(--line, rgba(46, 31, 23, .1)); }
.hist-linha:last-child { border-bottom: 0; }

.hist-item {
  display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px;
  padding: 12px 4px 12px 14px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.hist-thumb {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; overflow: hidden;
  border-radius: 14px; background: var(--hist-verde); color: #fff; font-size: 18px;
}
.hist-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hist-copia { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.hist-copia strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; }
.hist-copia small { font-size: 13px; color: var(--ink-mute, #6B5B4E); }
.hist-valor { flex: none; font-size: 15px; font-weight: 800; color: var(--hist-acento); }
.hist-valor.sem-valor { font-size: 13px; font-weight: 700; color: var(--ink-mute, #6B5B4E); }

.hist-excluir {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 8px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-mute, #6B5B4E); cursor: pointer;
}
.hist-excluir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hist-excluir:hover, .hist-excluir:focus-visible { color: var(--danger, #C1502E); background: rgba(193, 80, 46, .10); }
.hist-item:focus-visible, .hist-voltar:focus-visible, .hist-excluir:focus-visible { outline: 2px solid var(--hist-verde); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) { .hist-tela { transition: none; } }

/* ===== Selecionar várias pedras ===== */
.hist-selecionar {
  flex: none; margin-left: auto; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card-alt, #F1E7DA); color: var(--hist-verde); font: inherit; font-size: 13px; font-weight: 800;
}
.hist-selecionar[hidden] { display: none; }
.hist-check {
  display: none; flex: none; width: 24px; height: 24px; margin-left: 14px; box-sizing: border-box;
  border: 2px solid var(--ink-mute, #6B5B4E); border-radius: 50%; place-items: center;
}
.hist-tela.selecionando .hist-check { display: grid; }
.hist-tela.selecionando .hist-excluir { display: none; }
.hist-tela.selecionando .hist-item { padding-left: 10px; }
.hist-linha.selecionada { background: rgba(35, 80, 72, .09); }
.hist-linha.selecionada .hist-check { background: var(--hist-verde); border-color: var(--hist-verde); }
.hist-linha.selecionada .hist-check::after {
  content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.hist-barra {
  flex: none; display: none; align-items: center; gap: 10px;
  width: min(100%, 640px); margin: 0 auto; box-sizing: border-box;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, rgba(46, 31, 23, .1)); background: var(--card, #fff);
}
.hist-tela.selecionando .hist-barra { display: flex; }
.hist-barra-texto { flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-mute, #6B5B4E); }
.hist-barra-todas { flex: none; padding: 10px 4px; border: 0; background: transparent; color: var(--hist-verde); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.hist-barra-excluir {
  flex: none; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--danger, #C1502E); color: #fff; font: inherit; font-size: 14px; font-weight: 800;
}
.hist-barra-excluir:disabled { opacity: .45; cursor: not-allowed; }
:root[data-theme="dark"] .hist-selecionar, :root[data-theme="dark"] .hist-barra-todas { color: #F5EFE6; }