/* ==========================================================================
   Lab 03 — tema do protótipo.
   Reproduz os tokens reais: paleta slate/azul do shadcn, Space Grotesk nos
   títulos e Space Mono nos números, lateral de 256px sobre fundo de cartão,
   raio 0.5rem e o quadro de colunas de 288px. Escrito em CSS puro, mas com os
   mesmos valores que o Tailwind gera no sistema.
   ========================================================================== */

:root {
  --fundo:        #FFFFFF;
  --cartao:       #FFFFFF;
  --tinta:        #020817;
  --suave:        #F1F5F9;
  --suave-tinta:  #64748B;
  --borda:        #E2E8F0;

  --primaria:     #2563EB;
  --primaria-fraca: #EFF6FF;

  --destrutiva:   #EF4444;
  --ambar:        #D97706;
  --ambar-fraca:  #FFFBEB;
  --verde:        #16A34A;
  --roxo:         #7C3AED;

  --raio:         0.5rem;
  --raio-sm:      0.375rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, .marca-nome {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 3px; }

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

.app { display: flex; flex: 1; min-height: 0; }

.lateral {
  width: 256px;
  flex: none;
  background: var(--cartao);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
}

.lateral-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
}

.marca-caixa {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--raio-sm);
  background: var(--primaria);
  color: #fff;
  display: grid; place-items: center;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
}

.marca-nome { font-size: 15px; }
.marca-nome small { display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 400; color: var(--suave-tinta); letter-spacing: 0; }

.navegacao { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; }
.navegacao > * + * { margin-top: 0.25rem; }

.item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  border-radius: var(--raio-sm);
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  color: var(--suave-tinta);
  cursor: pointer;
}

.item:hover { background: var(--suave); color: var(--tinta); }
.item.ativo { background: var(--suave); color: var(--tinta); font-weight: 500; }
.item svg { width: 16px; height: 16px; flex: none; }
.item .seta { margin-left: auto; width: 14px; height: 14px; transition: transform .15s; }
.item[aria-expanded="true"] .seta { transform: rotate(180deg); }

.item .contagem {
  margin-left: auto;
  background: var(--primaria);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 0 0.4rem;
}

.filhos { margin-left: 1.5rem; }
.filhos a { display: block; border-radius: var(--raio-sm); padding: 0.35rem 0.75rem; font-size: 13px; color: var(--suave-tinta); }
.filhos a:hover { background: var(--suave); color: var(--tinta); }
.filhos a.ativo { color: var(--tinta); font-weight: 500; }

.lateral-pe { border-top: 1px solid var(--borda); padding: 0.75rem 1rem; }
.lateral-pe .quem { font-size: 12px; color: var(--suave-tinta); }
.lateral-pe .sair { display: block; margin-top: 0.35rem; font-size: 13px; border-radius: var(--raio-sm); padding: 0.35rem 0; color: var(--suave-tinta); }
.lateral-pe .sair:hover { color: var(--destrutiva); }

/* ------------------------------------------------------------------ topo */

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }

.topo-celular {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borda);
  background: var(--cartao);
}

.botao-icone {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  background: var(--cartao);
  border-radius: var(--raio-sm);
  color: var(--suave-tinta);
  cursor: pointer;
}

.botao-icone svg { width: 16px; height: 16px; }

.conteudo { padding: 1rem; }
@media (min-width: 48rem) { .conteudo { padding: 1.5rem; } }

.cabecalho { margin-bottom: 1rem; }
.cabecalho h1 { font-size: 22px; }
.cabecalho p { margin-top: 0.25rem; font-size: 13px; color: var(--suave-tinta); }

/* ---------------------------------------------------------------- cartão */

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* Teto de 240px por coluna: sem ele, três filtros numa tela larga viram três
   campos gigantes, o que o sistema real nunca mostra. */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 240px));
  gap: 0.5rem;
  padding: 1rem;
}

.filtros input,
.filtros select {
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0.4rem 0.6rem;
  width: 100%;
  min-width: 0;
}

.contador { padding: 0 1rem 0.75rem; font-size: 12px; color: var(--suave-tinta); }

/* ---------------------------------------------------------------- tabela */

.tabela-rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  background: rgba(241, 245, 249, .5);
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--suave-tinta);
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--borda);
}

thead th .ordenar { color: var(--tinta); }

tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--borda); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(241, 245, 249, .5); }

td .titulo { font-weight: 500; }
td .depto { display: block; font-size: 11px; color: var(--suave-tinta); }
td.mono { font-family: "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.vazio { color: var(--suave-tinta); }

.oculta-md { display: none; }
@media (min-width: 48rem) { .oculta-md { display: table-cell; } }

/* --------------------------------------------------------------- crachás */

.cracha {
  display: inline-block;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.cracha.alta     { background: #FEF2F2; color: var(--destrutiva); }
.cracha.media    { background: var(--ambar-fraca); color: var(--ambar); }
.cracha.baixa    { background: var(--suave); color: var(--suave-tinta); }
.cracha.andamento{ background: var(--primaria-fraca); color: var(--primaria); }
.cracha.concluida{ background: #F0FDF4; color: var(--verde); }
.cracha.revisao  { background: #F5F3FF; color: var(--roxo); }

/* ---------------------------------------------------------------- quadro */

.aviso-quadro {
  border: 1px solid rgba(217, 119, 6, .5);
  background: rgba(217, 119, 6, .08);
  color: var(--ambar);
  border-radius: var(--raio);
  padding: 0.6rem 0.9rem;
  font-size: 13px;
  margin-bottom: 0.75rem;
}

.quadro { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }

.coluna { width: 288px; flex: none; }

.coluna-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 0.5rem 0.75rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.coluna-topo .quantos { margin-left: auto; font-family: "Space Mono", monospace; font-size: 11px; font-weight: 400; opacity: .7; }

.coluna.pendente  .coluna-topo { background: #475569; }
.coluna.andamento .coluna-topo { background: var(--primaria); }
.coluna.aguardando .coluna-topo { background: var(--ambar); }
.coluna.revisao   .coluna-topo { background: var(--roxo); }
.coluna.concluida .coluna-topo { background: var(--verde); }

.coluna-corpo {
  border: 1px solid var(--borda);
  border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--cartao);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 4rem;
}

.ficha {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0.6rem;
  background: var(--cartao);
}

.ficha:hover { border-color: var(--primaria); }
.ficha .nome { font-size: 13px; font-weight: 500; line-height: 1.35; }
.ficha .onde { margin-top: 0.2rem; font-size: 11px; color: var(--suave-tinta); }
.ficha .pe { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.ficha .prazo { margin-left: auto; font-family: "Space Mono", monospace; font-size: 11px; color: var(--suave-tinta); }

.mover { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }

.mover button {
  border: 1px solid var(--borda);
  background: var(--cartao);
  border-radius: var(--raio-sm);
  font-size: 11px;
  color: var(--suave-tinta);
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}

.mover button:hover { border-color: var(--primaria); color: var(--primaria); }

/* ----------------------------------------------------------------- login */

.tela-login {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--suave);
}

.caixa-login { width: 100%; max-width: 340px; }
.caixa-login .marca-topo { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.caixa-login .cartao { padding: 1.5rem; }
.caixa-login h1 { font-size: 18px; margin-bottom: 1rem; }

.campo { margin-bottom: 0.85rem; }
.campo label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 0.3rem; }

.campo input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0.5rem 0.65rem;
}

.campo input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-fraca); }

.botao {
  width: 100%;
  border: 0;
  border-radius: var(--raio-sm);
  background: var(--primaria);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 0.55rem;
  cursor: pointer;
}

.botao:hover { filter: brightness(1.08); }
.pe-login { margin-top: 1rem; text-align: center; font-size: 11px; color: var(--suave-tinta); }

/* --------------------------------------------------------------- celular */

@media (max-width: 64rem) {
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .lateral.aberta { transform: none; }
  .topo-celular { display: flex; }

  .veu { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; border: 0; }
  .veu[hidden] { display: none; }
}

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