/* ==========================================================================
   Lab 02 — tema do protótipo.
   Reproduz os tokens reais: azul-royal de ação, lateral de 264px com o topo
   alto reservado à marca, barra superior de 60px sem título, raio 10px e
   tabelas compactas. Classes semânticas em português, como no original.
   ========================================================================== */

:root {
  --marca:          #2F5B98;
  --marca-escura:   #234872;
  --marca-clara:    #1E82C2;
  --marca-suave:    #E8F0FA;

  --fundo:          #F4F6F9;
  --fundo-painel:   #FFFFFF;
  --fundo-sutil:    #EDF1F6;

  --texto:          #16202C;
  --texto-suave:    #4F5D70;
  --texto-fraco:    #647388;

  --borda:          #DBE2EC;
  --borda-forte:    #C0CAD8;

  --erro:           #B3382B;  --erro-fundo:    #FBEAE8;
  --aviso:          #8A6100;  --aviso-fundo:   #FCF3DC;
  --sucesso:        #2C6B44;  --sucesso-fundo: #E7F3EB;
  --info:           #12658F;  --info-fundo:    #E6F1F9;

  --raio:           10px;
  --raio-pequeno:   6px;
  --raio-grande:    16px;
  --sombra: 0 1px 2px rgba(16, 28, 44, .06), 0 4px 12px rgba(16, 28, 44, .07);

  --menu-largura:     264px;
  --menu-topo-altura: 96px;
  --barra-altura:     60px;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  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 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 700; }

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

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

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

.menu-lateral {
  width: var(--menu-largura);
  flex: none;
  background: var(--fundo-painel);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
}

/* O topo alto existe porque no sistema real ele abriga a marca do cliente. */
.menu-topo {
  height: var(--menu-topo-altura);
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
}

.marca-quadro {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--raio);
  background: var(--marca);
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

.marca-nome { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.marca-nome small { display: block; font-size: .72rem; font-weight: 600; color: var(--texto-fraco); letter-spacing: 0; }

.menu-navegacao { flex: 1; overflow-y: auto; padding: 0 12px; }

.menu-grupo-titulo {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-fraco);
  padding: 16px 10px 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  border-radius: var(--raio-pequeno);
  padding: 9px 10px;
  font-size: .92rem;
  color: var(--texto-suave);
  cursor: pointer;
}

.menu-item:hover { background: var(--fundo-sutil); color: var(--texto); }
.menu-item.ativo { background: var(--marca-suave); color: var(--marca-escura); font-weight: 600; }
.menu-item svg { width: 17px; height: 17px; flex: none; }

.menu-item.bloqueado { color: var(--texto-fraco); cursor: not-allowed; }
.menu-item.bloqueado svg.cadeado { margin-left: auto; width: 14px; height: 14px; }

.menu-pe { border-top: 1px solid var(--borda); padding: 12px; }

.usuario { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }

.iniciais {
  width: 34px; height: 34px; flex: none;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--marca-escura);
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
}

.usuario .quem { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.usuario .quem small { display: block; font-size: .72rem; font-weight: 500; color: var(--texto-fraco); }

.menu-pe .link-pe {
  display: block;
  border-radius: var(--raio-pequeno);
  padding: 8px 10px;
  font-size: .85rem;
  color: var(--texto-suave);
}

.menu-pe .link-pe:hover { background: var(--fundo-sutil); }

/* ------------------------------------------------------------------- barra */

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

.barra-titulo {
  height: var(--barra-altura);
  flex: none;
  background: var(--fundo-painel);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
}

.barra-titulo .espacador { flex: 1; }

.botao-tema {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  background: var(--fundo-painel);
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
  cursor: pointer;
}

.botao-tema svg { width: 16px; height: 16px; }
.abrir-menu { display: none; }

.pagina { padding: 22px; }
.pagina > p.introducao { margin-top: 6px; color: var(--texto-suave); font-size: .92rem; max-width: 70ch; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-radius: var(--raio);
  padding: 11px 14px;
  margin-top: 16px;
  font-size: .88rem;
}

.aviso.atencao { background: var(--aviso-fundo); color: var(--aviso); }
.aviso a { font-weight: 700; text-decoration: underline; }

/* --------------------------------------------------------------- cartões */

.cartao {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.mini { padding: 14px 16px; }
.mini .quanto { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; }
.mini .faixa { margin-top: 6px; }

.cartao.sem-espaco { padding: 0; }

/* --------------------------------------------------------------- filtros */

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borda);
}

.barra-filtros input[type="search"],
.barra-filtros select {
  font: inherit;
  font-size: .88rem;
  color: var(--texto);
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: 8px 10px;
}

.barra-filtros input[type="search"] { flex: 1 1 240px; min-width: 0; }
.barra-filtros label.marcavel { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-suave); }

.botao {
  border: 0;
  border-radius: var(--raio-pequeno);
  background: var(--marca);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
}

.botao:hover { background: var(--marca-escura); }
.botao.secundario { background: var(--fundo-painel); color: var(--texto-suave); border: 1px solid var(--borda); }

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

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

table.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }

table.tabela thead th {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  background: var(--fundo-sutil);
  text-align: left;
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--borda);
}

table.tabela tbody td { padding: 9px 10px; border-bottom: 1px solid var(--borda); }
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: var(--fundo-sutil); }

.tabela .nome { font-weight: 600; color: var(--marca-escura); }
.tabela .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.tabela .data { font-variant-numeric: tabular-nums; white-space: nowrap; }

.rodape-tabela { padding: 11px 14px; font-size: .82rem; color: var(--texto-fraco); border-top: 1px solid var(--borda); }

/* --------------------------------------------------------------- pílulas */

.faixa {
  display: inline-block;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  padding: 1px 10px;
  white-space: nowrap;
}

.faixa-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.faixa-marca   { background: var(--marca-suave);  color: var(--marca-escura); }
.faixa-aviso   { background: var(--aviso-fundo);  color: var(--aviso); }
.faixa-erro    { background: var(--erro-fundo);   color: var(--erro); }
.faixa-info    { background: var(--info-fundo);   color: var(--info); }
.faixa-neutra  { background: var(--fundo-sutil);  color: var(--texto-fraco); }

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

.tela-login {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.caixa-login { width: 100%; max-width: 380px; text-align: center; }
.caixa-login .marca-quadro { margin: 0 auto 14px; width: 48px; height: 48px; font-size: 15px; }
.caixa-login .cartao { text-align: left; padding: 26px; }
.caixa-login h1 { font-size: 1.3rem; margin-bottom: 16px; }

.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 5px; }

.campo input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--texto);
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: 10px 11px;
}

.campo input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.botao.largo { width: 100%; padding: 11px; }
.pe-login { margin-top: 14px; font-size: .78rem; color: var(--texto-fraco); }

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

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

  .menu-lateral.aberta { transform: none; }
  .abrir-menu { display: grid; }

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

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