:root{
  --primary:#D92323;   /* vermelho principal */
  --accent:#FF6B00;    /* laranja */
  --bg:#ffffff;        /* fundo branco global */
  --card:#ffffff;      /* cards com fundo branco */
  --text:#000000;      /* texto escuro */
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:var(--bg);   /* fundo branco global */
  color:var(--text);
}

header{
  background:#202020;
  border-bottom:1px solid #333;
}

.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:20px;
}
/* Separator for aluno cards (moved from inline in alunos_list.php) */
.aluno-card { position: relative; padding-bottom: 12px; margin-bottom: 12px; box-sizing: border-box; }
.aluno-card::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: #000; }
.aluno-card.last-visible::after { display: none !important; }
.cards .aluno-card:last-child::after { display: none; }

/* header/topbar/button styles left to defaults to preserve existing button theme */

.muted{color:#9ca3af} /* cinza médio para textos secundários */

.btn.accent{background:var(--accent);color:#fff}
img{max-width:100%;height:auto} /* já existia no pack anterior */

/* brand img replaced by responsive rules below */
.brand{display:flex;align-items:center;gap:10px;font-weight:700}

.container{max-width:1000px;margin:24px auto;padding:0 16px}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center}

/* ==== Unificação de botões ==== */
  .btn {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    background: var(--accent);     /* laranja padrão */
    color: #fff;
    border: 0;
    transition: transform .05s ease, opacity .2s ease;
  }
  .btn:hover { opacity: .9; }
  .btn:active { transform: translateY(1px); }
  .btn.danger { background: var(--primary); } /* vermelho só p/ ações críticas */
  .btn.success { background: #16a34a; } /* verde */
  .btn.logout { background: #374151; } /* cinza escuro */

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* Cards responsivos para lista de alunos */
.cards { display: grid; gap: 12px; grid-template-columns: 1fr !important; }
/* Sempre mostrar um aluno por linha (desktop e mobile) */

/* Na lista de alunos, deixar CPF / Tel / Plano / Vencimento em preto para melhor legibilidade */
.aluno-card .meta .muted { color: #000 !important; }
.aluno-card { padding: 12px; border-radius: 10px; background: var(--card); border:1px solid #333; display:flex; flex-direction:column; gap:8px; }
.aluno-card .meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.aluno-card .acoes { display:flex; gap:8px; flex-wrap:wrap; }

/* Forçar tamanhos consistentes para botões em barras de ação */
.topbar a.btn, .aluno-card .acoes .btn { min-width:120px; text-align:center; }

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{
  padding:10px;
  border-bottom:1px solid #333;
  text-align:left
}

.form label{display:block;margin:8px 0 4px}
.form input,.form select{
  width:100%;
  padding:10px;
  border:1px solid #444;
  border-radius:8px;
  background:#a8a8a8;
  color:var(--text)
}

  .saudacao {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 8px;
    color: #ffffff;
  }
  .saudacao strong { color: #222; }

  /* Barra de ações: centro para ações, direita para logout */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* esq | centro | dir */
    align-items: center;
    gap: 12px;
    margin: 12px 0 8px;
  }
  .topbar-center {
    grid-column: 2;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .topbar-logout {
    grid-column: 3;
    justify-self: end;
  }

  /* Opcional: espaço abaixo da saudação */
  .after-saudacao { margin-top: 8px; }
.danger{background:#ef4444}

/* Landing additions (mantidos do pacote original) */
/* --- Layout centralizado no desktop, responsivo no mobile --- */
:root {
  --container-max: 960px;   /* largura alvo no desktop */
  --gutter: 16px;           /* padding lateral */
}

.container,
.page-wrap {
  width: 90vw;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
}

/* Em telas >= 900px (notebook): usa ~70% */
@media (min-width: 900px) {
  .page-wrap { width: 70vw; }
}

.stack > * + * { margin-top: 12px; }
.main-wrap,
.section-wrap {
  max-width: var(--container-max);
  margin: 24px auto;            /* centraliza horizontal no desktop */
  padding: 0 var(--gutter);     /* “respiro” nas laterais */
}

/* Caso existam cards que esticam 100%: */
.card,
.box,
.panel {
  border-radius: 10px;
  border: 1px solid #1f1f1f;
  padding: 16px;
  margin-bottom: 16px;
}

/* Inputs SEM encostar nas bordas (mínimo de 10px), largura total e box-sizing */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea,
.form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;     /* >= 10px de espaço interno */
  border-radius: 8px;
}

/* Em telas grandes, garante centralização do bloco principal */
@media (min-width: 1024px) {
  main, .main, .content {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ajuste suave de tabelas em mobile */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 10px 12px; }

/* --- Login centralizado --- */
.login-wrapper {
  min-height: 100vh; /* ocupa a altura toda */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-card {
  width: 30%;
  max-width: 400px; /* evita ficar muito largo em monitores grandes */
  min-width: 280px;
  background: var(--card, #fff);
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Mobile: ocupa 90% */
@media (max-width: 768px) {
  .login-card { width: 90%; }
}
#foto { display:none; } /* esconde o campo original */

label.btn {
  display: inline-block;
  background: var(--accent, #007bff);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* ====== Ajustes novos ====== */

/* Topbar no mobile: 1 coluna, tudo centralizado */
@media (max-width: 899px) {
  .topbar { grid-template-columns: 1fr; justify-items: center; }
  .topbar-center { grid-column: 1; }
  .topbar-logout { grid-column: 1; justify-self: center; margin-top: 8px; }
}

/* Logo responsiva (mobile menor, desktop maior) */
.brand { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; }
.brand img { height:auto; max-width: 200px; }
@media (min-width: 900px) {
  .brand img { max-width: 260px; }
}

/* grid-2: empilha no mobile, 2 colunas a partir de 768px */
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* Tabela com largura mínima para evitar “amassar” no mobile */
.table { min-width: 720px; }

/* Altura fixa pros gráficos Chart.js */
.chart-wrap { position: relative; height: 280px; }
#pesoChart { width: 100% !important; height: 100% !important; display: block; }


/* Wrapper do gráfico: altura controlada */
.chart-wrap {
  position: relative;
  height: 200px;  /* ajuste aqui: 160px, 180px, 200px */
}
.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Tom para card de próximas pendências (leve destaque) */
.card.pending {
  background: rgba(255, 245, 230, 0.95) !important; /* tom quente/aveludado */
  border-color: rgba(170,120,40,0.6) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.card.pending h3 { color: #7a5d00 !important; }