/* reciclagem-de-reliquias.css -- página /estrutura/conversor-de-reliquias-antigas/reciclagem.
   Depende de codex.css e pals-list.css (cabeçalho e busca). Tom: verde-água da Árvore Mundial e ouro antigo. */
.rc-pagina{
  --rc-cor: #6fd3c4;
  --rc-soft: rgba(111,211,196,.12);
  --rc-line: rgba(111,211,196,.36);
  --rc-ouro: #e6c36a;
}
.rc-trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1rem; font-size:.8rem; color: var(--text-dim); }
.rc-trilha a{ color: var(--text-dim); text-decoration:none; }
.rc-trilha a:hover{ color: var(--rc-cor); }
.rc-trilha i{ font-size:.65rem; opacity:.6; }
.rc-trilha span{ color: var(--text); }

.rc-hero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
  margin-bottom:1.5rem; padding:1.6rem 1.8rem; border:1px solid var(--rc-line); border-radius:20px;
  background: radial-gradient(90% 140% at 0% 0%, var(--rc-soft), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(230,195,106,.08), transparent 60%), var(--panel);
}
.rc-hero-texto{ text-align:left; margin:0; flex:1 1 380px; }
.rc-hero-texto h1 em{ color: var(--rc-cor); }
.rc-hero-texto p{ max-width:62ch; }
.rc-resumo{ display:flex; gap:.6rem; margin:0; }
.rc-resumo div{ min-width:5.2rem; padding:.6rem .9rem; text-align:center; background: rgba(10,13,20,.45); border:1px solid var(--hairline); border-radius:14px; }
.rc-resumo dt, .rc-tabela thead th{ font-family: var(--font-mono); font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim); }
.rc-resumo dd{ margin:.15rem 0 0; font-family: var(--font-display); font-weight:700; font-size:1.7rem; line-height:1; color: var(--rc-ouro); font-variant-numeric: tabular-nums; }

.rc-painel{ margin-bottom:1.5rem; padding:1.25rem; border-radius:18px; border:1px solid var(--hairline); background: var(--panel); scroll-margin-top:90px; }
.rc-titulo{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 0 .9rem; font-size:1.05rem; font-weight:700; color: var(--text-bright); }
.rc-titulo i{ color: var(--rc-cor); }
.rc-qtd{ font-size:.75rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; background: rgba(0,0,0,.3); color: var(--text-dim); }
.rc-sub{ margin:-.4rem 0 1rem; font-size:.85rem; color: var(--text-dim); max-width:90ch; }
.rc-nota{ margin:.85rem 0 0; font-size:.75rem; color: var(--text-dim); max-width:110ch; }
.rc-nota code{ font-family: var(--font-mono); color: var(--text); }
.rc-apt{ width:20px; height:20px; object-fit:contain; vertical-align:-4px; }

.rc-passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:.75rem; }
.rc-passos li{ display:flex; gap:.75rem; padding:.85rem; border-radius:12px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05); }
.rc-passos li > span{ flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-weight:800; color:#0d1a18; background: var(--rc-cor); }
.rc-passos p{ margin:0; font-size:.86rem; color: var(--text); }
.rc-passos b{ color: var(--text-bright); }
.rc-passos a{ color: var(--rc-cor); }

.rc-controles{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-bottom:1rem; }
.rc-campo{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; color: var(--text); }
.rc-campo input{ width:5.5rem; padding:.35rem .55rem; border-radius:10px; border:1px solid var(--hairline); background: var(--panel-2); color: var(--text-bright); font-variant-numeric: tabular-nums; }
.rc-campo input:focus{ outline:none; border-color: var(--rc-line); box-shadow: 0 0 0 .2rem var(--rc-soft); }
.rc-switch{ display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; color: var(--text); cursor:pointer; }

.rc-tabela-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:12px; background: var(--panel-2); }
.rc-tabela-wrap.is-alta{ max-height:560px; overflow-y:auto; }
.rc-tabela{ width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric: tabular-nums; font-size:.84rem; }
.rc-tabela th, .rc-tabela td{ padding:.45rem .5rem; text-align:center; border-bottom:1px solid var(--hairline); color: var(--text); }
.rc-tabela tbody tr:last-child > *{ border-bottom:0; }
.rc-tabela thead th{ position:sticky; top:0; z-index:2; padding-top:.55rem; padding-bottom:.5rem; background:#12161f; }
.rc-tabela thead img{ width:28px; height:28px; object-fit:contain; }
.rc-tabela td b{ color: var(--text-bright); }
.rc-tabela td small{ display:block; font-size:.7rem; color: var(--text-dim); }
.rc-tabela .rc-col-item{ position:sticky; left:0; z-index:1; text-align:left; min-width:11rem; background: var(--panel-2); border-right:1px solid var(--hairline); }
.rc-tabela thead .rc-col-item{ z-index:3; background:#12161f; }
.rc-col-item a{ display:flex; align-items:center; gap:.5rem; color: var(--text-bright); text-decoration:none; font-weight:600; line-height:1.2; }
.rc-col-item a:hover span{ color: var(--rc-cor); }
.rc-col-item img{ width:28px; height:28px; flex-shrink:0; object-fit:contain; border-radius:8px; background: rgba(10,13,20,.5); border:1px solid color-mix(in srgb, var(--item-cor, var(--hairline)) 55%, transparent); }
.rc-col-item small{ font-family: var(--font-mono); font-size:.66rem; font-weight:500; color: var(--text-dim); }
.rc-col-item em{ font-style:normal; font-size:.72rem; font-weight:500; color: var(--rc-ouro); margin-left:.2rem; }
.rc-pool-link i{ display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:8px; background: var(--rc-soft); color: var(--rc-cor); }
.rc-tabela td.rc-vazio{ color: var(--text-dim); opacity:.5; }
.rc-busca{ max-width:380px; margin-bottom:.75rem; }

.rc-reliquias{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:.6rem; }
.rc-reliquia{ display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:12px; text-decoration:none; background: var(--panel-2); border:1px solid color-mix(in srgb, var(--item-cor) 40%, var(--hairline)); }
.rc-reliquia:hover{ border-color: var(--item-cor); }
.rc-reliquia img{ width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.rc-reliquia span{ display:flex; flex-direction:column; min-width:0; }
.rc-reliquia b{ color: var(--text-bright); font-size:.86rem; line-height:1.2; }
.rc-reliquia small{ color: var(--text-dim); font-size:.74rem; }
@media (max-width:640px){ .rc-hero{ padding:1.2rem; } .rc-tabela .rc-col-item{ min-width:9rem; } }