/* Plumb OS — layout, cards, tabelas, badges e botoes. Mobile-first, fundo sempre escuro. */

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

html, body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  min-height:100%;
}

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1, h2, h3{
  font-weight:800;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{ font-size:1.5rem; }
h2{ font-size:1.1rem; }
h3{ font-size:0.95rem; color:var(--muted); margin-top:1.25em; }

/* Cabecalho */
.cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.85rem 1rem;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}
.marca{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--ink);
}
.marca:hover{ text-decoration:none; }
.marca-logo{ height:28px; width:auto; display:block; }
.marca-nome{ font-weight:800; font-size:1.05rem; }
.marca-nome strong{ color:var(--prumo); font-weight:800; }

.nav-principal{
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-size:0.9rem;
}
.nav-principal a{ color:var(--muted); }
.nav-principal a:hover{ color:var(--ink); }

.form-embutido{ display:inline; margin:0; }

/* Conteudo */
.conteudo{
  max-width:720px;
  margin:0 auto;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.titulo-pagina{ margin-bottom:0.1em; }
.subtitulo{ color:var(--muted); margin:0 0 0.5rem; font-size:0.9rem; }

/* Cards */
.cartao{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1rem 1.1rem;
  position:relative;
}
.cartao::before{
  content:"";
  position:absolute;
  left:0; top:0.9rem; bottom:0.9rem;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg, var(--prumo) 0%, var(--prumo-soft) 100%);
}
.cartao{ padding-left:1.4rem; }

.cartao-login{
  max-width:360px;
  margin:2.5rem auto;
}

/* Tabelas */
.tabela-scroll{ overflow-x:auto; }
.tabela{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
  margin-top:0.4rem;
}
.tabela th, .tabela td{
  text-align:left;
  padding:0.45rem 0.5rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tabela thead th{
  color:var(--muted);
  font-weight:600;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.tabela tfoot th{
  border-top:1px solid var(--line);
  border-bottom:none;
  color:var(--ink);
  font-weight:800;
}

/* Listas de definicao (pares chave/valor) */
.lista-definicao{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0.4rem 0.75rem;
  margin:0;
  font-size:0.95rem;
}
.lista-definicao dt{ color:var(--muted); }
.lista-definicao dd{ margin:0; text-align:right; font-weight:600; }

.texto-vazio{ color:var(--muted-2); font-size:0.9rem; margin:0.4rem 0 0; }

/* Badges de alerta */
.badge{
  display:inline-flex;
  align-items:center;
  padding:0.15rem 0.55rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:600;
  line-height:1.4;
}
.badge-verde{ background:var(--prumo-soft); color:var(--prumo); }
.badge-ambar{ background:var(--amber-soft); color:var(--amber); }
.badge-vermelho{ background:var(--red-soft); color:var(--red); }

.linha-maed{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; color:var(--muted); font-size:0.9rem; }

/* Alertas de formulario */
.alerta{
  padding:0.6rem 0.75rem;
  border-radius:var(--radius);
  font-size:0.9rem;
  margin:0 0 0.75rem;
}
.alerta-vermelho{ background:var(--red-soft); color:var(--red); }

/* Formularios */
form.form-login, form.form-lancamento{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
label{ font-size:0.85rem; color:var(--muted); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:0.55rem 0.65rem;
  font-size:1rem;
  font-family:inherit;
  width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--prumo);
  outline-offset:1px;
}

/* Botoes */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  padding:0.6rem 1rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
}
.botao-primario{
  background:var(--prumo);
  color:var(--prumo-ink);
}
.botao-primario:hover{ filter:brightness(1.05); }
.botao-secundario{
  background:transparent;
  border-color:var(--line);
  color:var(--muted);
}
.botao-secundario:hover{ color:var(--ink); border-color:var(--muted-2); }

/* Rodape */
.rodape{
  max-width:720px;
  margin:1rem auto 2rem;
  padding:0 1rem;
  color:var(--muted-2);
  font-size:0.8rem;
  text-align:center;
}

/* Telas maiores: um pouco mais de respiro, sem mudar a ordem mobile-first */
@media (min-width:640px){
  .conteudo{ padding:1.5rem; gap:1.25rem; }
  .cabecalho{ padding:1rem 1.5rem; }
}