/* =====================================================================
   EduDefy — Design "B · Institucional"
   Tokens centralizados em :root. Classes antigas foram mantidas para que
   todas as telas recebam o novo visual sem alterar o HTML.
   ===================================================================== */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg: #EEF0F6;
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --row-hover: #F8F8FD;
  --border: #E4E6EF;
  --border-strong: #D5D8E4;
  --text: #0F1530;
  --muted: #5A6180;
  --faint: #8E94AD;

  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft: #EEEDFD;
  --ring: 0 0 0 3px rgba(79, 70, 229, .18);

  --side-w: 264px;
  --side-bg: #0F1530;
  --side-text: #B4BAD0;
  --side-muted: #646C8C;
  --side-hover: rgba(255, 255, 255, .05);
  --side-active: rgba(255, 255, 255, .09);
  --side-accent: #8B85FF;

  --ok: #0E7C4A;      --ok-soft: #E3F5EC;
  --bad: #C2253D;     --bad-soft: #FCEBEE;
  --warn: #A75A06;    --warn-soft: #FDF1DF;
  --info: #4338CA;    --info-soft: #EEEDFD;
  --purple: #6D28D9;  --purple-soft: #F1EBFE;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 21, 48, .04), 0 6px 20px rgba(15, 21, 48, .05);
  --shadow-lg: 0 24px 64px rgba(15, 21, 48, .22);

  --ctl-h: 42px;
  --pad: 32px;
  --gap: 20px;
  --topbar-h: 64px;

  /* Compatibilidade com estilos inline existentes nas views */
  --text-primary: var(--text);
  --text-secondary: var(--muted);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== LAYOUT ===== */
.layout { min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--side-w); background: var(--side-bg); color: var(--side-text);
  display: flex; flex-direction: column; position: fixed;
  top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sidebar-header { display: flex; align-items: center; gap: 12px; padding: 22px 22px 14px; }
.sidebar-logo { height: 28px; width: auto; display: block; filter: invert(1); }
.sidebar-tag {
  font-size: 11px; line-height: 1.25; color: var(--side-muted);
  border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 12px;
}
.rede-ativa {
  margin: 6px 12px 0; padding: 12px; border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); color: #FCD9A0;
  display: flex; flex-direction: column; gap: 2px;
}
.rede-ativa small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.rede-ativa strong { font-size: 14px; color: #fff; }
.rede-ativa form { margin-top: 8px; }
.rede-ativa .btn { width: 100%; justify-content: center; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-group { margin-top: 12px; }
.nav-group:first-child { margin-top: 4px; }
.nav-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--side-muted); padding: 6px 10px;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 11px; height: 37px; padding: 0 10px;
  border-radius: var(--radius-sm); color: var(--side-text); font-size: 14px; font-weight: 500;
  white-space: nowrap; transition: background .15s, color .15s;
}
.sidebar-nav a i { font-size: 18px; width: 20px; text-align: center; flex: none; }
.sidebar-nav a span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: var(--side-active); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--side-accent); }

.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px; }
.sidebar-user-txt { flex: 1; min-width: 0; line-height: 1.25; }
.sidebar-user-txt strong { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-txt small { font-size: 12px; color: var(--side-muted); }
.sidebar-sair {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center;
  color: var(--side-muted); font-size: 17px; flex: none;
}
.sidebar-sair:hover { background: var(--side-hover); color: #FCA5B1; text-decoration: none; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: hsl(var(--h, 245) 65% 92%); color: hsl(var(--h, 245) 45% 30%);
}

.sidebar-scrim {
  display: none; position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 25, .45);
  opacity: 0; transition: opacity .2s;
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50; margin-left: var(--side-w);
  height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--pad);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mobile-toggle {
  display: none; width: 40px; height: 40px; border: 0; background: none; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; font-size: 20px; color: var(--text); cursor: pointer; flex: none;
}
.mobile-toggle:hover { background: var(--surface-2); }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.crumbs i { font-size: 14px; color: var(--faint); }
.crumbs b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar-espaco { flex: 1; }
.topbar-data { font-size: 13px; color: var(--muted); white-space: nowrap; }
.topbar-data::first-letter { text-transform: uppercase; }

/* Main */
.main-content {
  margin-left: var(--side-w); padding: var(--pad);
  min-height: calc(100vh - var(--topbar-h));
}

.page-header { margin-bottom: 26px; }
.page-header h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin-bottom: 4px; }
.page-header p { color: var(--muted); font-size: 14.5px; }

/* ===== CARDS DE ESTATÍSTICA ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap); margin-bottom: 28px;
}
.stat-card {
  background: var(--surface); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
}
.stat-card[onclick] { transition: border-color .15s, box-shadow .15s; }
.stat-card[onclick]:hover { border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(15,21,48,.04), 0 10px 28px rgba(15,21,48,.08); }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 20px;
}
.stat-icon.blue   { background: var(--primary-soft); color: var(--primary); }
.stat-icon.green  { background: var(--ok-soft); color: var(--ok); }
.stat-icon.purple { background: var(--purple-soft); color: var(--purple); }
.stat-icon.orange { background: var(--warn-soft); color: var(--warn); }
.stat-card .stat-info { min-width: 0; }
.stat-card .stat-info h3 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card .stat-info p { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ===== CARD / PAINEL ===== */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border);
  margin-bottom: var(--gap);
}
.card-header {
  padding: 16px 24px; min-height: 64px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-header h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.card-body { padding: 24px; }

/* ===== FORMULÁRIOS ===== */
.form-group { margin-bottom: 18px; }
.form-group label, .form-grid label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.form-control {
  width: 100%; height: var(--ctl-h); padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--faint); }
.form-control:hover { border-color: var(--faint); }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
select.form-control {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E94AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select.form-control[multiple] { height: auto; padding: 6px; background-image: none; }
textarea.form-control { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .form-group { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: span 2; }

/* ===== BOTÕES =====
   Só o primário é sólido. Os demais são neutros para dar hierarquia clara. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl-h); padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  vertical-align: middle;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn i { font-size: 16px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-sm i { font-size: 14px; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary, .btn-outline, .btn-success, .btn-warning {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.btn-secondary:hover, .btn-outline:hover, .btn-success:hover, .btn-warning:hover {
  background: var(--surface-2); border-color: var(--faint);
}
.btn-success i { color: var(--ok); }
.btn-warning i { color: var(--warn); }

.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.btn-danger:hover { background: #F8D7DD; }

.btn-ghost { background: none; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Dentro de tabelas, ações por linha ficam neutras: o primário fica reservado à ação principal da tela */
td .btn-primary { background: var(--surface); color: var(--primary-hover); border-color: var(--border-strong); box-shadow: none; }
td .btn-primary:hover { background: var(--primary-soft); border-color: rgba(79, 70, 229, .35); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
td .btn + .btn, td .btn + form, td form + .btn, td form + form { margin-left: 4px; }

/* ===== TABELAS ===== */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body > .table-responsive:only-child { margin: -24px; }
.card-body > .table-responsive:only-child table { border-radius: 0 0 var(--radius) var(--radius); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 14px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
  background: var(--surface-2); color: var(--muted); font-weight: 700; white-space: nowrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 11px; padding-bottom: 11px;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
td strong { font-weight: 600; }

/* ===== ALERTAS ===== */
.alert {
  padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: var(--gap);
  font-size: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid;
}
.alert > i { font-size: 18px; flex: none; }
.alert-success { background: var(--ok-soft); color: var(--ok); border-color: rgba(14, 124, 74, .2); }
.alert-danger  { background: var(--bad-soft); color: var(--bad); border-color: rgba(194, 37, 61, .2); }
.alert-info    { background: var(--info-soft); color: var(--info); border-color: rgba(67, 56, 202, .2); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: rgba(167, 90, 6, .22); }

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
}
.badge-blue   { background: var(--primary-soft); color: var(--primary-hover); }
.badge-green  { background: var(--ok-soft); color: var(--ok); }
.badge-purple { background: var(--purple-soft); color: var(--purple); }
.badge-orange { background: var(--warn-soft); color: var(--warn); }
.badge-red    { background: var(--bad-soft); color: var(--bad); }

/* ===== CHAMADA / PRESENÇA ===== */
.checkbox-group { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.checkbox-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.checkbox-item:last-child { border-bottom: 0; }
.checkbox-item input[type="checkbox"] { width: 20px; height: 20px; }
.checkbox-item label { cursor: pointer; font-size: 14px; font-weight: 500; margin: 0; }
.checkbox-item--aluno { flex-direction: column; align-items: stretch; gap: 8px; }
.checkbox-item--aluno:has(input[type="checkbox"]:not(:checked)) { background: #FDF3F5; }
.checkbox-item__header { display: flex; align-items: center; gap: 12px; }
.obs-presenca { font-size: 13px; min-height: 38px; height: auto; padding: 8px 12px; }

/* ===== SELEÇÃO MÚLTIPLA ===== */
.select-multiple {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  max-height: 220px; overflow-y: auto; padding: 6px; background: var(--surface);
}
.select-multiple label {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px; font-weight: 500; margin: 0;
}
.select-multiple label:hover { background: var(--surface-2); }

/* ===== NOTAS ===== */
.nota-input {
  width: 76px; height: 38px; text-align: center; padding: 0 6px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nota-input:focus, .nota-modelo:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); }
.nota-modelo { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface-2); }
.nota-clamped { border-color: #F59E0B !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25) !important; }
.media-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 28px;
  padding: 0 10px; border-radius: 8px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.media-badge.aprovado  { background: var(--ok-soft); color: var(--ok); }
.media-badge.reprovado { background: var(--bad-soft); color: var(--bad); }
.media-badge.pendente  { background: var(--surface-2); color: var(--faint); font-weight: 600; }

/* ===== BOLETIM ===== */
.boletim-container { max-width: 900px; margin: 0 auto; }
.boletim-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--primary); }
.boletim-header h2 { font-size: 22px; font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 10px; }
.boletim-header p { color: var(--muted); }

/* ===== BARRA DE FILTROS ===== */
.filter-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  margin-bottom: var(--gap); padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); align-items: end;
}
.filter-bar form { display: contents; }
.filter-bar .form-group { margin-bottom: 0; display: flex; flex-direction: column; }
.filter-bar .btn { width: 100%; }

/* ===== ESTADO VAZIO ===== */
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state .empty-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 28px;
}
.empty-state p { font-size: 15px; }

/* ===== MENUS SUSPENSOS (sobrepõe estilos inline das views) ===== */
.dropdown-menu {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important; box-shadow: 0 12px 32px rgba(15, 21, 48, .14) !important;
  padding: 6px !important; margin-top: 4px;
}
.dropdown-menu.show { display: block !important; }
.dropdown-item {
  display: block !important; padding: 9px 12px !important; border-radius: 8px;
  color: var(--text) !important; font-size: 13.5px !important; white-space: nowrap;
}
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }

/* ===== MODAL ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 16, 28, .45); align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.active { display: flex; }
.modal-overlay.active .modal-box { animation: modal-entra .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-box {
  background: var(--surface); border-radius: var(--radius); padding: 28px;
  width: 100%; max-width: 540px; box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
}
.modal-box.modal-lg { max-width: 780px; }
.modal-box h2 { margin-bottom: 20px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.modal-box .alert { margin-bottom: 16px; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin: 24px -28px -28px; padding: 16px 28px; border-top: 1px solid var(--border);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
body.modal-aberto { overflow: hidden; }

/* ===== AUDITORIA ===== */
.audit-total { font-size: 14px; font-weight: 500; color: var(--muted); }
.audit-table td { vertical-align: top; }
.audit-quando { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.audit-muted { color: var(--muted); font-size: 12px; }
.audit-detalhes { margin-top: 6px; font-size: 13px; }
.audit-detalhes summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.audit-grupo { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border); }
.audit-grupo-titulo { font-weight: 600; color: var(--text); }
.audit-linha { margin-top: 2px; overflow-wrap: anywhere; }
.audit-campo { color: var(--muted); }
.audit-de { color: var(--bad); text-decoration: line-through; }
.audit-para { color: var(--ok); font-weight: 600; }
.audit-paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

/* ===== FICHA DO ALUNO ===== */
.ficha-tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 5px; margin-bottom: var(--gap);
}
.ficha-tabs a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
}
.ficha-tabs a:hover { color: var(--text); background: var(--surface-2); }
.ficha-tabs a.active { color: var(--primary-hover); background: var(--primary-soft); }
.ficha-subtitulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 8px 0 12px; }
.ficha-nota { font-size: 12.5px; color: var(--muted); margin: 4px 0 12px; }
.ficha-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.busca-resultados { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.busca-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.busca-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.busca-item strong { color: var(--text); }
.ocorrencia-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.linha-config { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.linha-config .form-control { flex: 1; min-width: 100px; }

/* =====================================================================
   COMPONENTES DO REDESIGN
   ===================================================================== */

/* Cabeçalho de página com ações à direita */
.page-header.com-acoes { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-acoes .form-control { width: auto; }

/* Abas em pílula (bimestres, navegação da turma) */
.abas {
  display: flex; width: fit-content; max-width: 100%; overflow-x: auto; gap: 4px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: var(--gap);
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 16px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.abas a small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.abas a small i { font-size: 12px; }
.abas a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.abas a.active { background: var(--primary-soft); color: var(--primary-hover); }
.abas a.active small { color: var(--primary); }
.abas-linha a { flex-direction: row; align-items: center; gap: 8px; }
.abas-linha a i { font-size: 16px; }
.abas-turma { margin-bottom: 18px; }

/* Barra de salvar fixa no rodapé */
.barra-salvar {
  position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  margin: var(--gap) calc(var(--pad) * -1) calc(var(--pad) * -1); padding: 12px var(--pad);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.barra-salvar .status { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.barra-salvar .status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.barra-salvar.sujo .status { color: var(--warn); font-weight: 600; }
.barra-salvar.sujo .status::before { background: var(--warn); }

/* Lista com busca */
.lista-ferramentas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.busca { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.busca > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px; pointer-events: none; }
.busca .form-control { padding-left: 38px; }
.lista-contagem { color: var(--muted); font-size: 13px; margin-left: auto; white-space: nowrap; }
.sem-resultado { display: none; padding: 36px 20px; text-align: center; color: var(--muted); }
.sem-resultado.visivel { display: block; }

/* Pessoa (avatar + nome + detalhe) */
.pessoa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pessoa > div { min-width: 0; }
.pessoa strong { display: block; font-weight: 600; }
.pessoa small, .linha-detalhe { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.col-acoes { text-align: right; white-space: nowrap; width: 1%; }
.so-celular { display: none; }

/* Menu "⋯" de ações por linha */
.menu-acoes { position: relative; display: inline-block; vertical-align: middle; }
.menu-acoes > summary {
  list-style: none; width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center;
  cursor: pointer; color: var(--muted); font-size: 18px; user-select: none;
}
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes > summary:hover, .menu-acoes[open] > summary { background: var(--surface-2); color: var(--text); }
.menu-acoes-lista {
  position: fixed; z-index: 500; min-width: 210px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(15, 21, 48, .16); padding: 6px; text-align: left;
}
.menu-acoes-lista a, .menu-acoes-lista button {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap;
}
.menu-acoes-lista a i, .menu-acoes-lista button i { font-size: 16px; color: var(--muted); width: 18px; text-align: center; }
.menu-acoes-lista a:hover, .menu-acoes-lista button:hover { background: var(--surface-2); text-decoration: none; }
.menu-acoes-lista .perigo, .menu-acoes-lista .perigo i { color: var(--bad); }
.menu-acoes-lista form { margin: 0 !important; display: block !important; }
.menu-acoes-lista hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }

td:has(> details.menu-acoes) { text-align: right; white-space: nowrap; width: 1%; }
table:has(td > details.menu-acoes) thead th:last-child { text-align: right; }

/* Botão só com ícone */
.icone-btn {
  width: 36px; height: 36px; border: 0; background: none; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center; color: var(--muted); cursor: pointer; font-size: 17px;
}
.icone-btn:hover { background: var(--surface-2); color: var(--text); }
.icone-btn.tem { color: var(--primary); }

/* Chamada (presença P/F) */
.chamada-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.chamada-grid > .card { margin-bottom: 0; }
.chamada-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chamada-cabecalho small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.chamada-placar { display: flex; gap: 6px; }
.chamada-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 13px; }
.chamada-item {
  display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 9px 20px; border-bottom: 1px solid var(--border); transition: background .15s;
}
.chamada-item:last-child { border-bottom: 0; }
.chamada-item:has(.pf input:not(:checked)) { background: #FDF3F5; }
.chamada-num { font-size: 12px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.chamada-nome { min-width: 0; }
.chamada-nome strong { display: block; font-weight: 600; }
.chamada-nome small { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chamada-obs { grid-column: 3 / -1; display: none; padding-bottom: 4px; }
.chamada-item.obs-aberta .chamada-obs { display: block; }
.pf { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; user-select: none; background: var(--surface); position: relative; }
.pf input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pf span { width: 46px; height: 38px; display: grid; place-items: center; font-weight: 700; color: var(--faint); transition: background .12s, color .12s; }
.pf span + span { border-left: 1px solid var(--border-strong); }
.pf input:checked ~ .pf-p { background: var(--ok); color: #fff; }
.pf input:not(:checked) ~ .pf-f { background: var(--bad); color: #fff; }
.pf:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Lista de aulas */
.aula-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.aula-item:last-child { border-bottom: 0; }
.aula-data { width: 52px; text-align: center; background: var(--primary-soft); color: var(--primary-hover); border-radius: 12px; padding: 6px 0; line-height: 1.1; }
.aula-data b { display: block; font-size: 19px; font-weight: 800; }
.aula-data small { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.aula-corpo { min-width: 0; }
.aula-corpo > strong { display: block; font-weight: 600; margin-bottom: 4px; }
.aula-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 12.5px; }
.aula-obs { color: var(--muted); font-size: 13px; margin-top: 6px; }
.aula-faltas { margin-top: 8px; font-size: 13px; color: var(--muted); }
.aula-faltas b { color: var(--bad); font-weight: 600; }

/* Grade de notas */
.nota-grade th, .nota-grade td { padding: 7px 4px; text-align: center; }
.nota-grade th { font-size: 10.5px; }
.nota-grade thead tr:first-child th:first-child, .nota-grade td:first-child {
  text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface); padding-left: 18px; padding-right: 10px; min-width: 180px;
}
.nota-grade thead tr:first-child th:first-child { background: var(--surface-2); z-index: 2; }
.nota-grade tbody tr:hover td:first-child { background: var(--row-hover); }
.nota-grade td:last-child, .nota-grade th:last-child { padding-right: 14px; }
.nota-grade input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding: 0 4px; }
.nota-grade input[type="number"]::-webkit-inner-spin-button,
.nota-grade input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nota-grade .inicio-grupo { border-left: 1px solid var(--border); }
.nota-grade th.grupo { color: var(--text); letter-spacing: .04em; border-bottom: 0; padding-bottom: 2px; }
.nota-grade th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.nota-grade .nota-input, .nota-grade .nota-modelo { width: 58px !important; height: 36px; margin: 0 auto; font-size: 13.5px; }
.nota-grade .media-badge { min-width: 50px; padding: 0 6px; }
.nota-input.alterada, .nota-modelo.alterada { background: #FFF6E5; border-color: #EBC17A; }
.nota-input.baixa, .nota-modelo.baixa { color: var(--bad); }
.nota-input:disabled, .nota-modelo:disabled { background: transparent; border-color: transparent; color: var(--muted); cursor: not-allowed; }
.grade-dica { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12.5px; }
.grade-dica kbd { font: 600 11px var(--font); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--surface); }
.resumo-linha { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.resumo-linha b { color: var(--text); font-size: 16px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.resumo-linha b.ruim { color: var(--bad); }
.resumo-linha b.atencao { color: var(--warn); }

/* Notas no celular: lista-resumo + janela de edição */
.nm-lista { display: none; }
.nm-cab { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.nm-cab b { color: var(--text); font-size: 14px; }
.nm-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.nm-item:last-child { border-bottom: 0; }
.nm-item.pisca { animation: nm-pisca 1.4s ease-out; }
@keyframes nm-pisca { from { background: var(--ok-soft); } to { background: transparent; } }
.nm-item > strong { font-weight: 600; line-height: 1.25; }
.nm-medias { display: flex; gap: 6px; }
.nm-media { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nm-media small { font-size: 10px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.nm-media .media-badge { min-width: 46px; height: 26px; font-size: 12.5px; padding: 0 6px; }
.nm-grupo { grid-column: 1 / -1; }
.nm-grupo > small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 4px; }
.nm-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.nm-notas button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 7px 9px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left;
}
.nm-notas button small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.nm-notas button b { font-size: 16px; font-variant-numeric: tabular-nums; }
.nm-notas button.baixa b { color: var(--bad); }
.nm-notas button.vazia { border-style: dashed; border-color: var(--border-strong); background: var(--surface); }
.nm-notas button.vazia b { font-size: 18px; line-height: 1; color: var(--primary); }
.nm-notas button.alterada { background: #FFF6E5; border-color: #EBC17A; }
.nm-notas button:disabled { cursor: default; }
.nm-notas button:disabled.vazia b { color: var(--faint); }

.folha-fundo { position: fixed; inset: 0; z-index: 1100; background: rgba(12, 16, 28, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.folha-fundo.aberta { opacity: 1; pointer-events: auto; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101; max-width: 560px; margin: 0 auto;
  background: var(--surface); border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); visibility: hidden; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s;
}
.folha.aberta { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -20px 60px rgba(10, 15, 30, .2); }
.folha-alca { width: 40px; height: 5px; border-radius: 9px; background: var(--border-strong); margin: 4px auto 14px; }
.folha-topo { display: flex; gap: 12px; align-items: center; }
.folha-topo > div { flex: 1; min-width: 0; }
.folha-topo h2 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.folha-topo p { font-size: 13px; color: var(--muted); }
.folha-campo {
  display: block; width: 100%; height: 72px; margin-top: 18px; text-align: center; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; border: 2px solid var(--primary); border-radius: var(--radius); background: var(--surface);
  color: var(--text); outline: none; box-shadow: var(--ring);
}
.folha-campo::placeholder { color: var(--border-strong); }
.folha-campo.invalida { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(194, 37, 61, .15); }
.folha-erro { min-height: 20px; margin-top: 6px; text-align: center; color: var(--bad); font-size: 12.5px; font-weight: 600; }
.folha-botoes { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 10px; }
.folha-botoes.um { grid-template-columns: 1fr; }
.folha-botoes .btn { height: 50px; font-size: 15px; }
.folha-prox { text-align: center; font-size: 12px; color: var(--faint); margin-top: 10px; }

/* Cartões de turma (professor) */
.turmas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gap); margin-bottom: 28px; }
.turma-cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.turma-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.turma-cartao h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.turma-cartao-topo small { display: block; color: var(--muted); font-size: 13px; }
.turma-cartao-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secao-titulo { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.secao-titulo .badge { font-size: 12px; }

/* Dashboard */
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.painel-grade > div > .card:last-child { margin-bottom: 0; }
.pendencia { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.pendencia:last-child { border-bottom: 0; }
.pendencia-icone { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 17px; flex: none; }
.pendencia-icone.atencao { background: var(--warn-soft); color: var(--warn); }
.pendencia-icone.ruim { background: var(--bad-soft); color: var(--bad); }
.pendencia-icone.info { background: var(--info-soft); color: var(--info); }
.pendencia-icone.bom { background: var(--ok-soft); color: var(--ok); }
.pendencia > div { flex: 1; min-width: 0; }
.pendencia strong { display: block; font-weight: 600; }
.pendencia small { color: var(--muted); font-size: 13px; }
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px; }
.atalho {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px;
}
.atalho i { color: var(--primary); font-size: 18px; }
.atalho:hover { border-color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.tudo-certo { display: flex; align-items: center; gap: 12px; padding: 20px 24px; color: var(--ok); font-weight: 600; }

/* ===== LOGIN ===== */
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
.auth-brand {
  position: sticky; top: 0; height: 100vh;
  background:
    linear-gradient(to top, rgba(15, 21, 48, .97) 0%, rgba(15, 21, 48, .82) 34%, rgba(15, 21, 48, .15) 62%, rgba(15, 21, 48, .45) 100%),
    url('/public/image/login.webp') center 18% / cover no-repeat, var(--side-bg);
  color: #fff; padding: 44px 56px; display: flex; flex-direction: column; gap: 32px; overflow: hidden;
}
.auth-brand > img { height: 34px; width: auto; filter: invert(1); align-self: flex-start; }
.auth-brand-texto { margin-top: auto; }
.auth-brand h2 { font-size: 36px; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; max-width: 460px; }
.auth-brand p { opacity: .82; margin-top: 14px; max-width: 430px; font-size: 15.5px; }
.auth-pontos { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.auth-pontos li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.auth-pontos i { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 15px; flex: none; }
.auth-brand > small { opacity: .6; font-size: 12px; }
.auth-lado { display: grid; place-items: center; padding: 32px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-logo-mobile { display: none; height: 28px; width: auto; margin-bottom: 32px; }
.auth-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); margin: 6px 0 28px; }
.auth-senha { position: relative; }
.auth-senha .form-control { padding-right: 46px; }
.auth-senha button {
  position: absolute; right: 3px; top: 3px; width: 36px; height: 36px; border: 0; background: none;
  border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 17px;
}
.auth-senha button:hover { background: var(--surface-2); color: var(--text); }
.btn-block { width: 100%; height: 48px; font-size: 15px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 12.5px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px;
  border: 1px solid #747775; border-radius: var(--radius-sm); background: #fff; color: #1F1F1F;
  font-weight: 600; font-size: 15px; transition: background .15s, box-shadow .15s;
}
.btn-google:hover { background: #F8F9FA; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); text-decoration: none; }
.btn-google svg { flex: none; }
.login-rodape { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; }
.login-rodape a { color: var(--muted); }

/* Login com Google sem cadastro */
.sem-cadastro-icone {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--warn-soft); color: var(--warn); font-size: 24px; margin-bottom: 18px;
}
.sem-cadastro-texto { color: var(--muted); line-height: 1.55; margin-top: 10px; overflow-wrap: anywhere; }
.sem-cadastro-texto strong { color: var(--text); }
.sem-cadastro-conta {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 18px 0 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0;
}
.sem-cadastro-conta div { min-width: 0; }
.sem-cadastro-conta strong { display: block; font-weight: 600; }
.sem-cadastro-conta small { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-top: 22px;
  border-radius: var(--radius-sm); background: #1A7F4B; color: #fff; font-weight: 700; font-size: 15px; transition: background .15s;
}
.btn-whatsapp:hover { background: #146B3E; text-decoration: none; }
.sem-cadastro-voltar { margin-top: 8px; }

/* ===== POLÍTICA DE PRIVACIDADE ===== */
.politica-pagina { padding: 32px 16px; }
.politica {
  max-width: 760px; margin: 0 auto; background: var(--surface); border-radius: var(--radius);
  padding: 40px; box-shadow: var(--shadow); border: 1px solid var(--border);
  color: #334155; font-size: 15px; line-height: 1.7;
}
.politica-topo { text-align: center; margin-bottom: 28px; }
.politica-logo { max-width: 160px; margin-bottom: 12px; }
.politica h1 { font-size: 26px; color: var(--text); font-weight: 800; }
.politica-data { color: var(--muted); font-size: 13px; }
.politica h2 { font-size: 18px; color: var(--text); font-weight: 700; margin: 28px 0 10px; }
.politica h3 { font-size: 15px; color: var(--text); font-weight: 700; margin: 16px 0 6px; }
.politica p { margin-bottom: 12px; }
.politica ul { margin: 0 0 12px 22px; }
.politica li { margin-bottom: 6px; }
.politica code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.politica-voltar { margin-top: 32px; text-align: center; }

/* ===== RESPONSIVO ===== */
@media (max-width: 1100px) {
  :root { --pad: 24px; }
}

@media (max-width: 900px) {
  :root { --pad: 16px; --topbar-h: 58px; }
  .sidebar { transform: translateX(-102%); box-shadow: 0 0 40px rgba(0, 0, 0, .25); width: 284px; }
  .sidebar.open { transform: none; }
  body.menu-aberto { overflow: hidden; }
  body.menu-aberto .sidebar-scrim { display: block; opacity: 1; }
  .topbar, .main-content { margin-left: 0; }
  .topbar { padding: 0 10px; gap: 6px; }
  .mobile-toggle { display: inline-flex; }
  .topbar-data, .crumbs span, .crumbs i { display: none; }
  .main-content { padding: 16px; overflow-x: hidden; }
  .page-header.com-acoes { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-acoes > .btn, .page-acoes > .dropdown, .page-acoes > .form-control { flex: 1; }
  .page-acoes > .dropdown > .btn { width: 100%; }
  .abas { width: auto; }
  .so-celular { display: block; }
  .so-desktop { display: none !important; }
  .lista-ferramentas { padding: 12px 14px; }
  .busca { max-width: none; }
  .lista-contagem { margin-left: 0; }
  .barra-salvar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .barra-salvar .status { display: none; }
  .barra-salvar .btn { flex: 1; height: 46px; }

  .chamada-grid { grid-template-columns: 1fr; }
  .chamada-grid > .card-chamada { order: -1; }
  .chamada-item { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 10px 14px; gap: 10px; }
  .chamada-num { display: none; }
  .chamada-obs { grid-column: 1 / -1; }
  .chamada-acoes { padding: 10px 14px; }
  .pf span { width: 50px; height: 44px; font-size: 15px; }

  .aula-item { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
  .aula-item > .page-acoes, .aula-item > .menu-acoes { grid-column: 2; justify-self: start; }

  .nota-grade-wrap.tem-lista { display: none; }
  .nm-lista { display: block; }
  .grade-dica { display: none; }

  .painel-grade { grid-template-columns: 1fr; }
  .pendencia { padding: 14px 16px; flex-wrap: wrap; }
  .pendencia .btn { margin-left: 52px; }
  .atalhos { padding: 16px; }
  .turmas-grade { grid-template-columns: 1fr; gap: 12px; }
  .page-header { margin-bottom: 18px; }
  .page-header h1 { font-size: 23px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stats-grid:has(.stat-card[onclick]) { grid-template-columns: 1fr; margin-left: 0 !important; }
  .stat-card { padding: 14px; gap: 12px; }
  .stat-card .stat-icon { width: 38px; height: 38px; font-size: 17px; }
  .stat-card .stat-info h3 { font-size: 22px; }
  .card-header { padding: 14px 16px; min-height: 56px; }
  .card-body { padding: 16px; }
  .card-body > .table-responsive:only-child { margin: -16px; }
  .form-row { grid-template-columns: 1fr; }
  .form-group { margin-bottom: 14px; }
  .filter-bar { grid-template-columns: 1fr; padding: 14px; }
  th, td { padding: 12px 10px; font-size: 13.5px; }
  td:first-child > strong, td:first-child .pessoa strong { white-space: nowrap; }

  /* Modal vira painel que sobe de baixo */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box, .modal-box.modal-lg {
    max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-overlay.active .modal-box { animation: modal-sobe .24s cubic-bezier(.2, .8, .2, 1); }
  .modal-actions { margin: 20px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-radius: 0; }
  .modal-actions .btn { flex: 1; height: 46px; }

  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-logo-mobile { display: block; }
}
@keyframes modal-sobe { from { transform: translateY(100%); } }

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .politica-pagina { padding: 16px; }
  .politica { padding: 24px 18px; font-size: 14px; }
}

/* ===== IMPRESSÃO ===== */
@media print {
  .sidebar, .topbar, .sidebar-scrim, .no-print, .mobile-toggle, .barra-salvar, .abas, .menu-acoes, .nm-lista { display: none !important; }
  .nota-grade-wrap { display: block !important; }
  .main-content { margin-left: 0; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  body { background: #fff; }
}

/* =====================================================================
   FINANCEIRO
   ===================================================================== */
[hidden] { display: none !important; }
.stats-grid.moeda .stat-info h3 { font-size: 22px; white-space: nowrap; }
.stat-info small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat-info small b { color: var(--text); font-weight: 600; }
.resumo-linha > span { white-space: nowrap; }
.valor, td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num, th.num { text-align: right; }
.valor-sub { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.valor-ruim { color: var(--bad); font-weight: 700; }
.valor-bom { color: var(--ok); font-weight: 600; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); }
.grade-2 > div > .card:last-child { margin-bottom: 0; }
.tabela-cartao td:first-child .pessoa strong { white-space: nowrap; }

.progresso { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progresso > span { width: 72px; height: 6px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.progresso > span > i { display: block; height: 100%; background: var(--primary); border-radius: 9px; }

/* Gráficos de colunas (public/js/financeiro.js) */
.grafico { padding: 8px 20px 16px; min-height: 250px; }
.grafico svg { display: block; overflow: visible; }
.grafico .eixo { font: 500 11px var(--font); fill: var(--faint); }
.grafico .grade { stroke: var(--border); stroke-width: 1; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda i.hach { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, #fff 2px 5px); box-shadow: inset 0 0 0 1.5px var(--muted); }
.dica-grafico {
  position: fixed; z-index: 2500; pointer-events: none; background: var(--text); color: #fff; border-radius: 10px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 10px 30px rgba(15,21,48,.25); display: none; min-width: 170px;
}
.dica-grafico b { display: block; margin-bottom: 2px; }
.dica-grafico .lin { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.dica-grafico .lin i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* Faixas de atraso */
.faixa { display: grid; grid-template-columns: 110px minmax(0, 1fr) 128px; gap: 14px; align-items: center; padding: 11px 24px; border-bottom: 1px solid var(--border); color: inherit; }
.faixa:last-child { border-bottom: 0; }
a.faixa:hover { background: var(--row-hover); text-decoration: none; }
a.faixa.active { background: var(--primary-soft); }
.faixa > b { font-size: 13.5px; }
.faixa-barra { height: 14px; border-radius: 0 4px 4px 0; background: var(--surface-2); position: relative; }
.faixa-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.faixa > div:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.faixa > div:last-child small { display: block; color: var(--muted); font-size: 12px; }

/* Resumo de cálculo (receber, contrato, acordo) */
.calc { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; }
.calc-linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.calc-linha span { color: var(--muted); }
.calc-linha b { white-space: nowrap; }
.calc-linha.menos b { color: var(--ok); }
.calc-linha.mais b { color: var(--bad); }
.calc-total { border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 10px; font-size: 18px; }
.calc-total span { color: var(--text); font-weight: 700; font-size: 14px; }
.calc-total b { font-weight: 800; }
.calc-nota { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.lista-check { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.lista-check label { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; margin: 0; font-weight: 500; }
.lista-check label:last-child { border-bottom: 0; }
.lista-check label:hover { background: var(--row-hover); }
.lista-check label > span { flex: 1; min-width: 0; }
.lista-check label small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.lista-check label .valor { font-weight: 600; }
.lista-check label.desligado { cursor: not-allowed; background: var(--surface-2); color: var(--muted); }
.lista-check .vazio { padding: 14px; color: var(--muted); font-size: 13.5px; }
.sugestao { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.mini-tabela th, .mini-tabela td { padding: 8px 12px; font-size: 13px; }
.mini-tabela-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-height: 280px; overflow-y: auto; }

/* Régua de cobrança */
.etapa { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.etapa:last-child { border-bottom: 0; }
.etapa-dia { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; text-align: center; line-height: 1.05; background: var(--primary-soft); color: var(--primary-hover); }
.etapa-dia b { font-size: 18px; font-weight: 800; display: block; }
.etapa-dia small { font-size: 10.5px; font-weight: 600; }
.etapa-dia.depois { background: var(--warn-soft); color: var(--warn); }
.etapa-corpo strong { display: block; font-weight: 600; }
.etapa-corpo small { color: var(--muted); font-size: 13px; display: block; }
.etapa.inativa .etapa-dia, .etapa.inativa .etapa-corpo { opacity: .5; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { border: 1px solid rgba(79, 70, 229, .25); background: var(--primary-soft); color: var(--primary-hover); border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: ui-monospace, Consolas, monospace; }
.previa-email { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 14px 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.previa-email b { display: block; margin-bottom: 6px; }

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; margin: 0; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span { width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
.switch > span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
button.switch { border: 0; background: none; padding: 0; color: inherit; }
button.switch > span { display: inline-block; }
button.switch.ligado > span { background: var(--primary); }
button.switch.ligado > span::after { transform: translateX(18px); }

.info-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.info-lista div small { display: block; font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.info-lista div span { font-weight: 500; overflow-wrap: anywhere; }
.nota-gateway { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.seletor-escola { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.seletor-escola label { margin: 0; font-weight: 500; }
.seletor-escola .form-control { height: 36px; width: auto; min-width: 220px; font-size: 13.5px; }

@media (max-width: 900px) {
  .grade-2 { grid-template-columns: 1fr; }
  .grade-2.lado-primeiro > div:last-child { order: -1; }
  .stats-grid.moeda .stat-info h3 { font-size: 18px; white-space: normal; }
  .info-lista { grid-template-columns: 1fr; }
  .faixa { grid-template-columns: 80px minmax(0, 1fr); padding: 10px 16px; }
  .faixa > div:last-child { grid-column: 2; text-align: left; }
  .etapa { grid-template-columns: 56px minmax(0, 1fr); padding: 14px 16px; }
  .etapa > :last-child { grid-column: 2; }
  .grafico { padding: 4px 12px 12px; }
  .seletor-escola label { display: none; }
  .seletor-escola .form-control { min-width: 0; max-width: 170px; }

  /* Listas viram cartões: <table class="tabela-cartao">; o app.js copia o título da coluna para data-rotulo */
  .tabela-cartao, .tabela-cartao tbody { display: block; }
  .tabela-cartao thead { display: none; }
  .tabela-cartao tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .tabela-cartao tbody tr:last-child { border-bottom: 0; }
  .tabela-cartao tbody tr:hover td { background: none; }
  .tabela-cartao td { display: block; padding: 0; border: 0; min-width: 0; text-align: left !important; }
  .tabela-cartao td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; font-size: 10.5px; font-weight: 700; color: var(--faint);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
  }
  .tabela-cartao td:first-child, .tabela-cartao td.col-acoes { grid-column: 1 / -1; }
  .tabela-cartao td:first-child::before { display: none; }
  .tabela-cartao td.col-acoes { width: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .tabela-cartao td.col-acoes::before { display: none; }
  .tabela-cartao td.col-acoes > .btn, .tabela-cartao td.col-acoes > form { flex: 1; }
  .tabela-cartao td.col-acoes > form .btn { width: 100%; }
  .tabela-cartao td.col-acoes .menu-acoes { margin-left: auto; }
}
@media print { .seletor-escola { display: none !important; } }

/* =====================================================================
   CENTRAL DE AJUDA, PAINEL "AJUDA" E TOUR GUIADO
   ===================================================================== */
[data-tema] { --t: var(--primary); --t-soft: var(--primary-soft); }
[data-tema="verde"] { --t: var(--ok); --t-soft: var(--ok-soft); }
[data-tema="roxo"] { --t: var(--purple); --t-soft: var(--purple-soft); }
[data-tema="ambar"] { --t: var(--warn); --t-soft: var(--warn-soft); }
[data-tema="cinza"] { --t: #475069; --t-soft: #ECEEF4; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ajuda-icone {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: inline-grid; place-items: center;
  background: var(--t-soft, var(--primary-soft)); color: var(--t, var(--primary)); font-size: 20px;
}
.ajuda-icone.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.ajuda-icone.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 30px; }

/* Botões e itens de menu desenhados dentro do texto */
.ui-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; margin: 1px 0; border-radius: 7px;
  font-size: .9em; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: baseline;
}
.ui-chip i { font-size: 1em; }
.ui-chip-btn { background: var(--primary); color: #fff; }
.ui-chip-btn2 { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.ui-chip-menu { background: var(--side-bg); color: #fff; }
.ui-chip-aba { background: var(--primary-soft); color: var(--primary); border-radius: 999px; }

/* ----- Central ----- */
.ajuda-hero {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 30px 32px; margin-bottom: 24px;
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #4F46E5 100%); color: #fff;
  display: grid; gap: 18px; box-shadow: var(--shadow);
}
.ajuda-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 133, 255, .45), transparent 70%); pointer-events: none;
}
.ajuda-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.ajuda-hero p { color: #C7C9F5; max-width: 640px; }
.ajuda-busca { position: relative; display: block; max-width: 640px; z-index: 1; }
.ajuda-busca i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; z-index: 1; }
.ajuda-busca .form-control { height: 52px; padding-left: 46px; font-size: 15.5px; border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(10, 8, 40, .25); }
.ajuda-hero-dicas { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #C7C9F5; position: relative; z-index: 1; }
.ajuda-hero-dicas span { display: inline-flex; align-items: center; gap: 6px; }
.ajuda-hero-dicas b { color: #fff; }

.ajuda-trilha .card-header h2 { display: flex; align-items: center; gap: 10px; }
.trilha { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; padding: 22px 24px 24px; }
.trilha li { position: relative; }
.trilha li + li::before {
  content: ""; position: absolute; top: 19px; right: calc(50% + 24px); width: calc(100% - 40px); height: 2px;
  background: linear-gradient(90deg, var(--border-strong), var(--t)); opacity: .5;
}
.trilha a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text); padding: 0 4px 6px; border-radius: var(--radius-sm); }
.trilha a:hover { text-decoration: none; }
.trilha-n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--t-soft); color: var(--t); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--t-soft);
  position: relative; z-index: 1; transition: background .15s, color .15s, transform .15s;
}
.trilha a:hover .trilha-n { background: var(--t); color: #fff; transform: scale(1.08); }
.trilha-rotulo { font-size: 13px; font-weight: 600; line-height: 1.25; }

.ajuda-tema { margin-bottom: 28px; }
.ajuda-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ajuda-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ajuda-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--t); opacity: .85; }
.ajuda-card:hover { border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(15,21,48,.04), 0 12px 30px rgba(15,21,48,.09); transform: translateY(-2px); }
.ajuda-card[hidden], .ajuda-tema[hidden], .ajuda-trilha[hidden] { display: none; }
.ajuda-card-topo { display: flex; align-items: center; justify-content: space-between; }
.ajuda-card-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ajuda-card h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.ajuda-card h3 a { color: var(--text); }
.ajuda-card p { color: var(--muted); font-size: 13.5px; flex: 1; }
.ajuda-card-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ajuda-card-acoes .btn { flex: 1; }

/* ----- Página do guia ----- */
.ajuda-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.ajuda-guia-hero {
  display: flex; align-items: center; gap: 22px; padding: 26px 28px; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  background-image: linear-gradient(120deg, var(--t-soft) 0%, transparent 55%);
}
.ajuda-guia-txt { flex: 1; min-width: 0; }
.ajuda-tema-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t); }
.ajuda-guia-txt h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 4px 0; }
.ajuda-guia-txt p { color: var(--muted); }
.ajuda-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ajuda-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ajuda-guia-acoes .btn { height: 46px; padding: 0 20px; }

.ajuda-passos { list-style: none; display: grid; gap: 16px; margin-bottom: 24px; }
.ajuda-passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; position: relative; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.ajuda-passo:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: -18px; width: 2px; background: var(--border-strong); }
.ajuda-passo-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--t); color: #fff; box-shadow: 0 0 0 5px var(--t-soft); position: relative; z-index: 1;
}
.ajuda-passo-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 22px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
}
.ajuda-passo-card:has(> :only-child) { grid-template-columns: 1fr; }
.ajuda-passo-texto h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.ajuda-passo-texto p { color: var(--text); line-height: 1.75; }
.ajuda-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 13.5px; }
.ajuda-link i { transition: transform .15s; }
.ajuda-link:hover i { transform: translateX(3px); }

.ajuda-captura { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.ajuda-captura img { display: block; width: 100%; height: auto; }
.ajuda-marcador {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: #E11D48; color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .3), 0 4px 10px rgba(0, 0, 0, .25);
}

.ajuda-dicas { display: grid; gap: 12px; margin-bottom: 24px; }
.ajuda-dica { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid; }
.ajuda-dica > i { font-size: 22px; flex: none; margin-top: 1px; }
.ajuda-dica > div > strong { display: block; margin-bottom: 2px; }
.ajuda-dica p { color: var(--text); line-height: 1.7; }
.ajuda-dica-dica { background: var(--ok-soft); border-color: rgba(14, 124, 74, .2); }
.ajuda-dica-dica > i, .ajuda-dica-dica > div > strong { color: var(--ok); }
.ajuda-dica-atencao { background: var(--warn-soft); border-color: rgba(167, 90, 6, .22); }
.ajuda-dica-atencao > i, .ajuda-dica-atencao > div > strong { color: var(--warn); }
.ajuda-dica-erro { background: var(--bad-soft); border-color: rgba(194, 37, 61, .2); }
.ajuda-dica-erro > i, .ajuda-dica-erro > div > strong { color: var(--bad); }

.ajuda-cta {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 28px; border-radius: var(--radius);
  background: var(--side-bg); color: #fff;
}
.ajuda-cta > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ajuda-cta strong { font-size: 17px; }
.ajuda-cta span { color: var(--side-text); font-size: 13.5px; }
.ajuda-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ajuda-sugestao {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 14px;
  transition: border-color .15s, background .15s;
}
.ajuda-sugestao:hover { text-decoration: none; border-color: var(--t); background: var(--t-soft); }
.ajuda-sugestao > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ajuda-sugestao small { color: var(--muted); font-weight: 500; font-size: 12px; }
.ajuda-sugestao > i { color: var(--faint); }

/* ----- Esquema "onde clicar" ----- */
.esq { margin: 0; width: 100%; }
.esq-tela {
  aspect-ratio: 16 / 10; display: flex; border-radius: 12px; overflow: hidden; position: relative;
  background: var(--bg); border: 1px solid var(--border);
}
.esq figcaption { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.esq-side { width: 30%; background: var(--side-bg); padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }
.esq-side > span:not(.esq-alvo) { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.esq-corpo { flex: 1; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.esq-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esq-h { display: block; height: 10px; width: 42%; border-radius: 5px; background: #C9CDDC; flex: none; }
.esq-row { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface); }
.esq-row b { width: 14px; height: 14px; border-radius: 50%; background: #DDE0EA; flex: none; }
.esq-row i { height: 6px; flex: 1; border-radius: 3px; background: #E4E6EF; }
.esq-row i + i { flex: .6; }
.esq-row-alvo { box-shadow: 0 0 0 1px var(--border-strong); }
.esq-pf { font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: var(--ok); border-radius: 4px; padding: 1px 5px; }
.esq-pf.falta { background: var(--bad); }
.esq-abas { display: flex; gap: 5px; }
.esq-abas > span:not(.esq-alvo) { width: 34px; height: 14px; border-radius: 999px; background: #DDE0EA; }
.esq-filtros { display: flex; gap: 6px; align-items: center; }
.esq-campo { display: block; height: 16px; flex: 1; border-radius: 5px; background: var(--surface); border: 1px solid #DDE0EA; }
.esq-campo.curto { flex: none; width: 50%; }
.esq-ghost { display: block; width: 34px; height: 16px; border-radius: 5px; background: #DDE0EA; flex: none; }
.esq-escuro { background: rgba(15, 21, 48, .35); align-items: center; justify-content: center; }
.esq-modal { width: 80%; background: var(--surface); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.esq-modal-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 2px; }
.esq-menu { align-self: flex-end; width: 46%; background: var(--surface); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.1); margin-top: -2px; }
.esq-menu span { height: 7px; border-radius: 3px; background: #E4E6EF; }
.esq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.esq-card { background: var(--surface); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; min-width: 0; }
.esq-card b { height: 8px; width: 70%; border-radius: 4px; background: #C9CDDC; }
.esq-card i { height: 6px; width: 50%; border-radius: 3px; background: #E4E6EF; }
.esq-card .esq-btn-sm, .esq-card .esq-ghost { margin-left: 0; align-self: flex-start; }

.esq-alvo {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 6px; padding: 5px 8px;
  background: var(--primary); color: #fff; position: relative; animation: esq-pulso 1.8s ease-out infinite;
}
.esq-alvo span { overflow: hidden; text-overflow: ellipsis; }
.esq-alvo i { font-size: 11px; }
.esq-btn-sm { margin-left: auto; padding: 4px 7px; font-size: 10px; }
.esq-item { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--side-accent); }
.esq-aba { background: var(--primary-soft); color: var(--primary); border-radius: 999px; }
.esq-campo-alvo { flex: 1.4; background: var(--surface); color: var(--text); border: 1.5px solid var(--primary); justify-content: flex-start; }
@keyframes esq-pulso {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .55); }
  70% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* ----- Botão e painel "Ajuda" ----- */
.topbar-ajuda {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; flex: none;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.topbar-ajuda i { font-size: 18px; color: var(--primary); }
.topbar-ajuda:hover, .topbar-ajuda[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.ajuda-scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(10, 14, 25, .4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ajuda-painel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; width: min(420px, 100vw);
  background: var(--bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility .25s; visibility: hidden;
}
body.ajuda-aberta .ajuda-scrim { opacity: 1; pointer-events: auto; }
body.ajuda-aberta .ajuda-painel { transform: none; visibility: visible; }
body.ajuda-aberta { overflow: hidden; }
.ajuda-painel:focus { outline: none; }
.ajuda-painel-topo { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ajuda-painel-topo > div { flex: 1; display: flex; flex-direction: column; }
.ajuda-painel-topo strong { font-size: 16px; }
.ajuda-painel-topo small { color: var(--muted); font-size: 12.5px; }
.ajuda-painel-corpo { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ajuda-painel-bv {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, #312E81, #4F46E5); color: #fff; text-align: left; cursor: pointer; font: inherit;
}
.ajuda-painel-bv[hidden] { display: none; }
.ajuda-painel-bv > i { font-size: 20px; }
.ajuda-painel-bv span { flex: 1; display: flex; flex-direction: column; }
.ajuda-painel-bv small { color: #C7C9F5; font-size: 12.5px; }
.ajuda-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ajuda-mini header { display: flex; align-items: center; gap: 12px; }
.ajuda-mini h3 { font-size: 15px; font-weight: 800; line-height: 1.3; }
.ajuda-mini header small { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.ajuda-mini-passos { list-style: none; display: grid; gap: 6px; }
.ajuda-mini-passos li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ajuda-mini-passos .n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--t-soft); color: var(--t); }
.ajuda-mini-acoes { display: flex; gap: 8px; }
.ajuda-mini-acoes .btn { flex: 1; }
.ajuda-mini-acoes .btn[hidden] { display: none; }
.ajuda-painel-vazio { color: var(--muted); font-size: 13.5px; }
.ajuda-painel-rodape {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; font-weight: 700;
  background: var(--surface); border-top: 1px solid var(--border);
}

/* ----- Tour guiado ----- */
.tour-bloqueio { position: fixed; inset: 0; z-index: 2000; }
.tour-luz {
  position: fixed; z-index: 2001; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(139, 133, 255, .9), 0 0 0 9999px rgba(10, 14, 32, .58);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-luz-cheia { inset: 0; border-radius: 0; box-shadow: none; background: rgba(10, 14, 32, .58); }
.tour-balao {
  position: fixed; z-index: 2002; width: min(360px, calc(100vw - 24px)); padding: 18px 18px 14px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: tour-entra .22s cubic-bezier(.2, .8, .2, 1);
}
.tour-balao.tour-centro { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: none; }
.tour-balao.tour-folha-baixo, .tour-balao.tour-folha-topo { left: 12px; right: 12px; width: auto; }
.tour-balao.tour-folha-baixo { bottom: calc(12px + env(safe-area-inset-bottom)); }
.tour-balao.tour-folha-topo { top: 12px; }
.tour-balao.tour-chama { animation: tour-chama .35s ease; }
.tour-balao.tour-centro.tour-chama { animation: none; }
.tour-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-contagem { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; }
.tour-x { width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.tour-x:hover { background: var(--surface-2); color: var(--text); }
.tour-balao h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.tour-balao p { color: var(--muted); font-size: 14px; }
.tour-pontos { display: flex; gap: 5px; margin: 14px 0 12px; }
.tour-pontos span { width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); transition: width .2s; }
.tour-pontos span.feito { background: var(--primary); opacity: .45; }
.tour-pontos span.atual { width: 20px; background: var(--primary); }
.tour-acoes { display: flex; align-items: center; gap: 8px; }
.tour-espaco { flex: 1; }
@keyframes tour-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes tour-chama { 30% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  .esq-alvo, .tour-balao { animation: none; }
  .tour-luz, .ajuda-painel, .ajuda-card { transition: none; }
}

@media (max-width: 900px) {
  .topbar-ajuda { padding: 0; width: 40px; justify-content: center; border-color: transparent; background: none; }
  .topbar-ajuda span { display: none; }
  .topbar-ajuda i { font-size: 21px; }
  .ajuda-hero { padding: 22px 18px; }
  .ajuda-hero h1 { font-size: 23px; }
  .ajuda-guia-hero { flex-direction: column; align-items: flex-start; padding: 20px; gap: 14px; }
  .ajuda-guia-txt h1 { font-size: 22px; }
  .ajuda-guia-acoes, .ajuda-guia-acoes .btn { width: 100%; }
  .ajuda-passo-card { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .ajuda-passo-card .esq { max-width: 320px; }
  .ajuda-cta { flex-direction: column; align-items: stretch; }
  .ajuda-cta .btn { width: 100%; }
}
@media (max-width: 600px) {
  .trilha { grid-template-columns: 1fr; gap: 0; padding: 14px 16px 16px; }
  .trilha li + li::before { left: 23px; right: auto; top: -10px; width: 2px; height: 20px; background: var(--border-strong); opacity: 1; }
  .trilha a { flex-direction: row; text-align: left; gap: 12px; padding: 5px 4px; }
  .trilha-n { width: 36px; height: 36px; font-size: 14px; }
  .trilha-rotulo { font-size: 14px; }
  .ajuda-grade { grid-template-columns: 1fr; }
  .ajuda-passo { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .ajuda-passo-n { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 0 0 4px var(--t-soft); }
  .ajuda-passo:not(:last-child)::before { left: 16px; top: 38px; }
}
@media print {
  .ajuda-painel, .ajuda-scrim, .topbar-ajuda, .tour-bloqueio, .tour-luz, .tour-balao { display: none !important; }
}