/* A casca do sistema: a coluna de icones e a area onde a tela vive.
   Mora separada do estilo.css porque o painel de triagem tem CSS proprio e
   carrega so este arquivo - assim os dois lados usam o mesmo rail sem que o
   resto do estilo.css vaze para la.
   Os tokens ficam presos dentro do .rail de proposito: fora dele quem manda
   nas cores e o CSS da pagina que esta hospedando a casca. */

.rail {
  --bg-2: #131317;
  --bg-3: #18181d;
  --bg-4: #1f1f25;
  --gold: #c9a84c;
  --line: rgba(192, 192, 200, 0.10);
  --line-strong: rgba(192, 192, 200, 0.20);
  --radius-sm: 6px;
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --silver-100: #ececef;
  --silver-300: #9a9aa1;
  --silver-50: #fafafa;
  --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- shell ---------- */

.app { display: flex; min-height: 100dvh; }

.rail {
  width: 76px;
  flex: 0 0 76px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 10px;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 30;
}

.rail .marca {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 10px;
}
.rail .marca img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}

.rail a.item {
  width: 60px;
  padding: 9px 4px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--silver-300);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.rail a.item svg { width: 20px; height: 20px; stroke-width: 1.6; }
.rail a.item:hover { background: var(--bg-3); color: var(--silver-50); }
.rail a.item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rail a.item.on {
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border-color: var(--line-strong);
  color: var(--silver-50);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.rail a.item.on::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px; height: 26px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--silver-100), var(--silver-300));
}
.rail a.item { position: relative; }

.rail .espaco { flex: 1; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (max-width: 640px) {
  .app { flex-direction: column; }
  .rail {
    width: 100%; flex: none; height: auto;
    flex-direction: row; justify-content: flex-start;
    overflow-x: auto; padding: 8px 10px;
    border-right: none; border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
  }
  .rail .marca { margin: 0 8px 0 0; width: 34px; height: 34px; }
  .rail .espaco { display: none; }
  .rail a.item { width: auto; min-width: 62px; flex: 0 0 auto; }
  .rail a.item.on::before { left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
}

/* ==========================================================
IDENTIDADE - o brasao no topo do rail e o toque das abas.
Fica aqui (e nao no estilo.css) porque o painel de triagem
carrega so a casca: assim os dois lados se movem igual.
========================================================== */

.rail .marca {
width: 46px; height: 46px;
border-radius: 10px;
transition: transform var(--t-base), filter var(--t-base);
}
.rail a.marca { cursor: pointer; }
.rail .marca:hover { transform: translateY(-1px) scale(1.05); filter: drop-shadow(0 4px 12px rgba(201,168,76,.30)); }
.rail .marca:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* o clique precisa responder antes de a pagina trocar: 140ms, sem esperar o resto */
.rail a.item {
transition: background 140ms cubic-bezier(.4,0,.2,1),
color 140ms cubic-bezier(.4,0,.2,1),
border-color 140ms cubic-bezier(.4,0,.2,1),
transform 140ms cubic-bezier(.4,0,.2,1);
}
.rail a.item svg { transition: transform 140ms cubic-bezier(.4,0,.2,1), color 140ms cubic-bezier(.4,0,.2,1); }
.rail a.item:hover { transform: translateY(-1px); }
.rail a.item:hover svg { transform: scale(1.08); }
.rail a.item:active { transform: translateY(0) scale(.96); }
.rail a.item.on svg { color: var(--gold); }
.rail a.item.on::before { background: linear-gradient(180deg, var(--gold), rgba(201,168,76,.28)); }

@media (max-width: 640px) {
.rail .marca { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
.rail .marca, .rail a.item, .rail a.item svg { transition-duration: .01ms !important; }
.rail .marca:hover, .rail a.item:hover, .rail a.item:hover svg, .rail a.item:active { transform: none !important; }
}