/* ===== Vortex Combat — tema preto + aco + vermelho ===== */
:root {
  --bg: #0a0a0b;
  --bg-2: #111114;
  --panel: #17171b;
  --panel-2: #1e1e24;
  --line: #2a2a31;
  --steel: #d6dade;
  --steel-2: #9aa0a6;
  --red: #c20709;
  --red-2: #8e0507;
  --red-dark: #5a0305;
  --red-bright: #e5141a;
  --red-rgb: 194, 7, 9;
  --red-bright-rgb: 229, 20, 26;
  --text: #ececed;
  --muted: #9a9aa2;
  --ok: #34c759;
  --warn: #ff9f0a;
  --danger: #ff453a;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --steel-grad: linear-gradient(180deg, #f4f5f6 0%, #c7ccd1 45%, #8b9197 55%, #d9dde0 100%);
}

* { box-sizing: border-box; }
/* overflow-x: clip evita scroll horizontal (drawer off-canvas) SEM quebrar o topbar sticky
   — diferente de hidden, clip nao cria contexto de scroll. Fallback hidden pra browsers antigos. */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; overflow-clip-margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -200px, #1a1a20 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--steel); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, h4, .display {
  font-family: 'Oswald', 'Inter', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  font-weight: 600;
}
.steel-text {
  background: var(--steel-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.accent { color: var(--red); }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 860px; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

/* ===== Top nav ===== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(8,8,10,0.92), rgba(8,8,10,0.72));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(150,160,170,0.12);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--red-rgb),0.78), transparent); }
.topbar .container { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; z-index: 2; }
.brand img { height: 40px; width: 40px; object-fit: contain; transition: transform .3s ease; }
.brand:hover img { transform: rotate(-8deg) scale(1.05); }
.brand b { color: #fff; }

.nav-links { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; align-items: center; justify-content: flex-end; }
.nav-links a {
  position: relative; padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--steel-2); text-transform: uppercase; letter-spacing: 0.6px; transition: color .18s;
}
.nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; }
.nav-links a.cta {
  background: var(--red); color: #fff; margin-left: 8px; box-shadow: 0 6px 18px rgba(194,7,9,0.35);
}
.nav-links a.cta::after { display: none; }
.nav-links a.cta:hover { background: var(--red-bright); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--red-rgb), 0.45); }
.nav-links a.ghost-link { border: 1px solid var(--line); }
.nav-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: middle; }

/* Dropdown "Gestão" */
.nav-dd { position: relative; }
.nav-dd > summary { list-style: none; cursor: pointer; padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--steel-2); text-transform: uppercase; letter-spacing: 0.6px; user-select: none; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: "▾"; font-size: 9px; margin-left: 5px; opacity: 0.8; }
.nav-dd > summary:hover, .nav-dd > summary.active { color: #fff; }
.nav-dd[open] > summary::after { transform: rotate(180deg); display: inline-block; }
.nav-dd-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: linear-gradient(180deg, #16161b, #0d0d10); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); z-index: 200; display: flex; flex-direction: column; gap: 2px; }
.nav-dd-menu a { padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--steel-2); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.nav-dd-menu a::after { display: none; }
.nav-dd-menu a:hover { background: var(--panel-2); color: #fff; }

@media (max-width: 860px) {
  .nav-dd { width: 100%; }
  .nav-dd > summary { padding: 14px 16px; font-size: 15px; }
  .nav-dd-menu { position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 6px 10px; min-width: 0; }
  .nav-dd-menu a { padding: 12px 14px; font-size: 14px; }
}

/* Hamburger */
.nav-toggle { display: none; margin-left: 10px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; position: relative; z-index: 120; }
/* Carrinho no topo — canto DIREITO (depois do menu no desktop; antes do hamburguer no mobile) */
.cart-link { margin-left: 8px; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--steel-2); flex: none; z-index: 120; transition: color .15s, background .15s; }
.cart-link:hover { color: #fff; background: var(--panel-2); }
.cart-link svg { width: 22px; height: 22px; }
.cart-badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-family: 'Oswald', sans-serif; font-size: 11px; line-height: 17px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--steel); border-radius: 2px; transition: .25s; }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-scrim { display: none; }

body.nav-open .nav-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* menu vira drawer (sai do fluxo) -> o carrinho assume o empurrao pra direita */
  .cart-link { margin-left: auto; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    background: linear-gradient(180deg, #101014, #0a0a0b);
    border-left: 1px solid var(--line); padding: 84px 18px 24px; margin: 0;
    transform: translateX(105%); transition: transform .32s cubic-bezier(.4,0,.2,1); z-index: 110;
    box-shadow: -20px 0 60px rgba(0,0,0,0.5); overflow-y: auto;
  }
  body.nav-open .nav-links { transform: none; }
  .nav-links a { padding: 14px 16px; font-size: 15px; border-radius: 10px; }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a.active { background: var(--panel-2); }
  .nav-links a.cta { margin: 8px 0 0; text-align: center; }
  .nav-links a.ghost-link { text-align: center; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 105; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 14px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.15s;
}
.btn:hover { border-color: var(--steel-2); color: #fff; }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-bright); border-color: var(--red-bright); color: #fff; box-shadow: 0 8px 24px rgba(var(--red-rgb), 0.4); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
button.btn { font-family: inherit; }

/* ===== Cards / panels ===== */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
/* min-width:0 deixa os itens encolherem abaixo do min-content (evita estouro em mobile) */
.grid > *, .form-row > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ===== Stat cards ===== */
.stat { border-left: 3px solid var(--red); }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.stat .value { font-family: 'Oswald', sans-serif; font-size: 30px; margin-top: 4px; }
.stat .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; font-weight: 600; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-pago { background: rgba(52, 199, 89, 0.15); color: var(--ok); }
.badge-pendente { background: rgba(255, 159, 10, 0.15); color: var(--warn); }
.badge-atrasado { background: rgba(255, 69, 58, 0.18); color: var(--danger); }
.badge-cancelado { background: rgba(154, 154, 162, 0.15); color: var(--muted); }
.badge-aguardando { background: rgba(45,120,235,0.16); color: #5ea0ff; }
.badge-ativo { background: rgba(52, 199, 89, 0.15); color: var(--ok); }
.badge-inativo, .badge-trancado { background: rgba(154, 154, 162, 0.15); color: var(--muted); }

/* ===== Trilha de faixas / graus (tech) ===== */
.belt-card { position: relative; border-left: 3px solid var(--red); overflow: hidden; }
.belt-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(150,160,170,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(150,160,170,0.04) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(120% 80% at 100% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 20%, transparent 70%); }
.belt-card > * { position: relative; }

.belt-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.belt-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 3px; color: var(--red); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.belt-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: dotPulse 2s ease-in-out infinite; }
.belt-now { font-family: 'Oswald', sans-serif; font-size: 30px; text-transform: uppercase; margin-top: 4px; line-height: 1;
  background: linear-gradient(180deg, #fff, #b9bec3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.belt-graus-txt { -webkit-text-fill-color: var(--red); color: var(--red); font-size: 18px; }
.belt-prog-wrap { min-width: 180px; flex: 1; max-width: 280px; }
.belt-prog-num { text-align: right; font-family: 'Oswald', sans-serif; font-size: 22px;
  background: var(--steel-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.belt-prog { height: 10px; background: #0e0e11; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 4px; position: relative; }
.belt-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--red-2), var(--red-bright)); border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); position: relative; box-shadow: 0 0 12px rgba(var(--red-rgb),0.55); }
.belt-prog span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-100%); animation: shineSweep 2.6s ease-in-out infinite; }

.belt-roadmap { display: flex; flex-direction: column; gap: 9px; }
.belt-step { display: flex; align-items: center; gap: 12px; }
.belt-step.futura { opacity: 0.38; filter: grayscale(0.3); }
.belt-bar { flex: 1; height: 40px; border-radius: 7px; display: flex; align-items: center; padding-left: 18px; position: relative; overflow: hidden;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.12); transition: height .25s, box-shadow .25s; }
/* brilho metalico */
.belt-bar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 42%, rgba(0,0,0,0.18)); pointer-events: none; }
.belt-step.atual .belt-bar { height: 52px; box-shadow: 0 0 0 2px var(--red), 0 12px 30px rgba(194,7,9,0.35); animation: beltGlow 2.4s ease-in-out infinite; }
/* shine varrendo a faixa atual */
.belt-step.atual .belt-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg) translateX(-160%); animation: shineSweep 3.2s ease-in-out infinite; }
.belt-name { position: relative; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.belt-tip { position: absolute; right: 0; top: 0; bottom: 0; width: 78px; display: flex; gap: 5px; align-items: center; justify-content: center; }
.belt-tip .grau { width: 6px; height: 58%; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 2px #000; }
.belt-flag { width: 110px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--red); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.belt-step.atual .belt-flag { animation: dotPulse 2s ease-in-out infinite; }
.belt-step.feita .belt-flag { color: var(--ok); font-size: 15px; }
.belt-next { margin: 16px 0 0; color: var(--steel-2); text-transform: none; }

/* ===== Linha do tempo de graduacoes (tech) ===== */
.timeline { position: relative; margin-top: 10px; }
.timeline::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--red), rgba(194,7,9,0.25) 60%, rgba(150,160,170,0.15)); border-radius: 2px; }
.tl-item { position: relative; display: flex; gap: 14px; padding: 0 0 16px 44px; }
.tl-node { position: absolute; left: 6px; top: 4px; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--bg-2);
  box-shadow: 0 0 0 1px var(--line), 0 0 8px rgba(0,0,0,0.5); z-index: 2; }
.tl-atual .tl-node { box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(194,7,9,0.6); animation: dotPulse 2s ease-in-out infinite; }
.tl-card { flex: 1; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.tl-atual .tl-card { border-color: rgba(194,7,9,0.45); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.tl-data { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--red); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.tl-data .tl-atual-badge { background: var(--red); color: #fff; padding: 1px 7px; border-radius: 999px; font-size: 9px; }
.tl-faixa { font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-mini { display: inline-flex; gap: 3px; align-items: center; }
.tl-mini i { width: 4px; height: 14px; background: #fff; border-radius: 1px; box-shadow: 0 0 4px rgba(255,255,255,0.7); }
.tl-nivel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.tl-del { margin-left: auto; align-self: center; }
/* reveal: cada item entra com stagger */
.timeline .tl-item { opacity: 0; transform: translateX(-10px); animation: tlIn .45s cubic-bezier(.2,.8,.2,1) forwards; }
.timeline .tl-item:nth-child(2){ animation-delay:.07s } .timeline .tl-item:nth-child(3){ animation-delay:.14s } .timeline .tl-item:nth-child(4){ animation-delay:.21s } .timeline .tl-item:nth-child(5){ animation-delay:.28s } .timeline .tl-item:nth-child(n+6){ animation-delay:.35s }

@keyframes tlIn { to { opacity: 1; transform: none; } }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes beltGlow { 0%,100% { box-shadow: 0 0 0 2px var(--red), 0 12px 30px rgba(194,7,9,0.28); } 50% { box-shadow: 0 0 0 2px var(--red), 0 12px 40px rgba(194,7,9,0.55); } }
@keyframes shineSweep { 0% { transform: translateX(-160%) skewX(-18deg); } 55%,100% { transform: translateX(320%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .belt-bar, .belt-prog span::after, .belt-step.atual .belt-bar::after, .tl-node, .belt-label::before, .belt-flag { animation: none !important; } .tl-item { opacity: 1; transform: none; } }
@media (max-width: 560px) { .belt-flag { width: 58px; font-size: 10px; } .belt-name { font-size: 13px; } .belt-now { font-size: 24px; } }

/* ===== Forms ===== */
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; background: #0e0e11; border: 1px solid var(--line);
  border-radius: 9px; color: var(--text); font-size: 16px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.help { color: var(--muted); font-size: 12px; margin-top: 4px; }
.inline-form { display: inline; }

/* ===== Modal de confirmacao ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 500; padding: 20px; }
.modal-overlay.open { display: flex; animation: modalFade .15s ease; }
.modal-box { background: linear-gradient(180deg, #16161b, #0d0d10); border: 1px solid var(--line); border-radius: 16px; padding: 28px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,0.6); animation: modalPop .18s cubic-bezier(.2,.8,.2,1); }
.modal-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: rgba(194,7,9,0.14); color: var(--red); display: grid; place-items: center; font-size: 26px; font-family: 'Oswald', sans-serif; font-weight: 700; }
.modal-msg { color: var(--text); font-size: 15px; margin: 0 0 22px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { min-width: 120px; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Flash ===== */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.flash-ok { background: rgba(52, 199, 89, 0.1); border-color: rgba(52, 199, 89, 0.4); color: #b8f0c6; }
.flash-erro { background: rgba(255, 69, 58, 0.1); border-color: rgba(255, 69, 58, 0.4); color: #ffc4bf; }

/* ===== Layout helpers ===== */
.page { padding: 32px 0 60px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 26px; }
.page-head .spacer { margin-left: auto; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; }
.mb-2 { margin-bottom: 20px; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.right { text-align: right; }
.big-money { font-family: 'Oswald', sans-serif; font-size: 28px; }
.section-title { font-size: 16px; color: var(--steel-2); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; }

/* ===== Landing ===== */
.hero { position: relative; text-align: center; padding: 70px 0 50px; }
.hero-logo { width: min(360px, 78vw); filter: drop-shadow(0 20px 40px rgba(194,7,9, 0.25)); }
.hero h1 { font-size: clamp(34px, 6vw, 60px); margin-top: 18px; }
.hero p.lead { color: var(--steel-2); font-size: clamp(15px, 2.4vw, 19px); max-width: 640px; margin: 8px auto 26px; text-transform: none; font-family: 'Inter', sans-serif; letter-spacing: 0; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.divider-red { height: 3px; width: 80px; background: var(--red); margin: 10px auto 0; border-radius: 3px; }

.section { padding: 56px 0; border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(24px, 4vw, 34px); text-align: center; margin-bottom: 8px; }
.section .sub { text-align: center; color: var(--muted); margin-bottom: 36px; text-transform: none; }

.prof-card { text-align: center; }
.prof-avatar {
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--steel-grad); color: #111; display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 34px; font-weight: 700; border: 3px solid var(--red);
}
.prof-card .modalidade { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.prof-card .grad { color: var(--muted); font-size: 13px; }

.plano-card { text-align: center; display: flex; flex-direction: column; }
.plano-card .preco { font-family: 'Oswald', sans-serif; font-size: 40px; margin: 8px 0; }
.plano-card .preco small { font-size: 15px; color: var(--muted); }
.plano-card .modalidade-tag { color: var(--red); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.plano-card p { color: var(--muted); flex: 1; }

.footer { position: relative; border-top: 1px solid var(--line); padding: 30px 0; color: var(--muted); font-size: 14px; text-align: center; }
/* fio superior crimson espelhando .topbar::after — fecha a pagina com a assinatura da marca */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--red-rgb),0.55), transparent); }
.footer-partner { margin-top: 12px; display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
.fp-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.fp-logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 3px 10px rgba(0,0,0,0.45); }
.fp-logo img { width: 100%; height: auto; display: block; }
.fp-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--steel-2); }

/* ===== Pix box ===== */
.pix-box { text-align: center; }
.pix-qr { background: #fff; padding: 12px; border-radius: 12px; display: inline-block; }
.pix-code { word-break: break-all; background: #0e0e11; border: 1px dashed var(--line); border-radius: 10px; padding: 12px; font-family: monospace; font-size: 12px; color: var(--steel-2); margin: 14px 0; max-height: 120px; overflow: auto; }
.copy-ok { color: var(--ok); font-size: 13px; }

/* ===== Central Financeira ===== */
.fin-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.fin-tab { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.fin-tab:hover { color: var(--text); }
.fin-tab.active { color: var(--red); border-bottom-color: var(--red); }
.fin-pane { display: none; }
.fin-pane.show { display: block; animation: finFade .25s ease; }
@keyframes finFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.donut { flex-shrink: 0; }

.hbar { margin-bottom: 12px; }
.hbar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.hbar-top span { color: var(--muted); }
.hbar-track { height: 8px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, var(--warn), var(--red)); border-radius: 6px; }

.proj-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.proj-row:last-child { border-bottom: none; }
.proj-row span { color: var(--muted); }
.proj-total { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); font-size: 15px; font-weight: 700; }

/* ===== Relatório (print) ===== */
.rel-toolbar { display: flex; justify-content: space-between; margin-bottom: 20px; }
.rel-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.rel-head h1 { margin: 0; font-size: 26px; }
.rel-sub { color: var(--muted); margin: 4px 0 0; }
.rel-logo { height: 54px; }
.rel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.rel-kpis > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.rel-kpis span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.rel-kpis b { font-size: 20px; }
.rel-kpis .neg { color: var(--warn); }
.rel-kpis .pos { color: var(--ok); }
.rel-h2 { font-size: 16px; margin: 24px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.rel-table { width: 100%; border-collapse: collapse; }
.rel-table th, .rel-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rel-table th.right, .rel-table td.right { text-align: right; }
.rel-table thead th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.rel-foot { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media print {
  .topbar, .footer, .no-print, .nav-scrim { display: none !important; }
  body, .rel-body { background: #fff !important; color: #111 !important; }
  main { padding: 0 !important; }
  .rel-doc { max-width: 100% !important; }
  .rel-head, .rel-h2, .rel-table th, .rel-table td, .rel-foot, .rel-kpis > div, .proj-total { border-color: #ccc !important; }
  .rel-sub, .rel-kpis span, .rel-table thead th, .rel-foot, .muted { color: #555 !important; }
  .rel-kpis .neg { color: #b45309 !important; }
  .rel-kpis .pos { color: #15803d !important; }
  .rel-logo { filter: none; }
}

/* ===== Barra de filtros + paginação (painel) ===== */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.filterbar .fb-field { display: flex; flex-direction: column; gap: 4px; }
.filterbar label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0; }
.filterbar select, .filterbar input { min-width: 130px; }
.filterbar input.fb-search { min-width: 200px; }
.filterbar .fb-actions { display: flex; gap: 8px; margin-left: auto; }
.filterbar .fb-grow { flex: 1; }
@media (max-width: 640px) { .filterbar .fb-actions { margin-left: 0; width: 100%; } .filterbar select, .filterbar input { min-width: 0; width: 100%; } .filterbar .fb-field { flex: 1 1 45%; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--steel); }
.chip a { color: var(--muted); font-weight: 700; }
.chip a:hover { color: var(--red); }
.chip-clear { color: var(--red); font-size: 12px; font-weight: 600; align-self: center; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.pager-info { color: var(--muted); font-size: 13px; }
.pager-info strong { color: var(--steel); }
.pager-mid { display: flex; gap: 4px; align-items: center; margin: 0 auto; }
.pager-btn { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--steel); font-size: 14px; font-weight: 600; transition: .15s; }
.pager-btn:hover { border-color: var(--red); color: #fff; }
.pager-btn.atual { background: var(--red); border-color: var(--red); color: #fff; }
.pager-btn.off { opacity: .35; pointer-events: none; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.pager-per { display: flex; align-items: center; gap: 8px; }
.pager-per select { padding: 6px 8px; }
.pager-per-form { margin: 0; }
@media (max-width: 640px) { .pager { justify-content: center; } .pager-mid { margin: 0; order: -1; width: 100%; justify-content: center; } }

/* KPIs compactos em faixa (topo das listas) */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); position: relative; overflow: hidden; }
.kpi .k-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kpi .k-value { font-size: 24px; font-family: 'Oswald', sans-serif; margin-top: 2px; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.accent { border-color: rgba(194,7,9,0.4); }

/* ===== Recibo ===== */
.recibo-badge { display: inline-block; padding: 6px 16px; border-radius: 8px; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 15px; }
.recibo-badge.ok { background: rgba(52,199,89,0.15); color: var(--ok); border: 1px solid var(--ok); }
.recibo-badge.pend { background: rgba(255,159,10,0.12); color: var(--warn); border: 1px solid var(--warn); }
.recibo-frase { margin-top: 18px; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--steel); line-height: 1.6; text-transform: none; }
@media print {
  .recibo-badge.ok { color: #15803d !important; border-color: #15803d !important; background: #eafbf0 !important; }
  .recibo-badge.pend { color: #b45309 !important; border-color: #b45309 !important; background: #fff7ed !important; }
  .recibo-frase { border-color: #ccc !important; color: #111 !important; }
}

/* ===== Botão flutuante "Instalar app" (PWA) ===== */
.vx-install {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 300;
  align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  font-family: 'Rajdhani', 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;
  box-shadow: 0 12px 30px rgba(194,7,9,0.4); animation: vxInPop .3s cubic-bezier(.2,.8,.2,1);
}
.vx-install span { font-size: 15px; }
.vx-install:hover { background: var(--red-2); transform: translateY(-2px); }
@keyframes vxInPop { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media print { .vx-install { display: none !important; } }

/* Tabelas de relatório/recibo: rolam na horizontal no mobile (não cortam) */
.rel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media print { .rel-scroll { overflow: visible; } }

/* ===== Badge de modalidade (cor propria por arte) ===== */
.mod-badge { border: 1px solid transparent; }
.mod-jiu-jitsu { background: rgba(45,120,235,0.16); color: #5ea0ff; border-color: rgba(45,120,235,0.35); }
.mod-muay-thai { background: rgba(194,7,9,0.16); color: #ff6a5d; border-color: rgba(194,7,9,0.4); }
.mod-boxe { background: rgba(255,159,10,0.16); color: var(--warn); border-color: rgba(255,159,10,0.35); }
.mod-krav-maga { background: rgba(154,160,166,0.18); color: var(--steel); border-color: rgba(154,160,166,0.35); }
.mod-combo { background: rgba(150,80,200,0.18); color: #b98cff; border-color: rgba(150,80,200,0.35); }
.mod-geral, .mod- { background: rgba(154,154,162,0.15); color: var(--muted); }

/* ===== Conquistas / streak (aluno) ===== */
.conq-card { border-left: 3px solid var(--red); }
.conq-num { font-family: 'Oswald', sans-serif; font-size: 30px; line-height: 1; color: #fff; }
.conq-lab { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.conq-guerreiro { background: linear-gradient(90deg, #b8860b, #ffd700); color: #1a1a1a; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,215,0,0.25); }
.conq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.conq-badge { text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; background: var(--panel-2); opacity: .42; filter: grayscale(.7); transition: .2s; }
.conq-badge.on { opacity: 1; filter: none; border-color: rgba(194,7,9,0.4); background: radial-gradient(120% 120% at 50% 0%, rgba(194,7,9,0.12), transparent 70%), var(--panel-2); }
.conq-emoji { display: block; font-size: 26px; line-height: 1; }
.conq-name { display: block; font-size: 11px; color: var(--steel-2); margin-top: 6px; text-transform: uppercase; letter-spacing: .3px; }
.conq-badge.on .conq-name { color: var(--steel); }

/* ===== Termo de responsabilidade ===== */
.termo-box { max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.6;
  color: var(--steel-2); background: #0e0e11; border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-transform: none; }

/* ===== Assistente de dúvidas (chat) ===== */
.vx-chat-btn { position: fixed; left: 16px; bottom: 16px; z-index: 300; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 999px; background: var(--red); color: #fff; border: none; cursor: pointer;
  font-family: 'Rajdhani','Inter',sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .5px;
  box-shadow: 0 12px 30px rgba(194,7,9,0.4); }
.vx-chat-btn span { font-size: 13px; }
.vx-chat-btn:hover { background: var(--red-2); }
.vx-chat-btn.on { transform: scale(.9); opacity: .8; }

.vx-chat { position: fixed; left: 16px; bottom: 74px; z-index: 301; width: min(360px, calc(100vw - 32px)); height: min(70vh, 520px);
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #16161b, #0c0c0e); box-shadow: 0 30px 70px rgba(0,0,0,0.6); animation: vxInPop .25s ease; }
.vx-chat[hidden] { display: none; }  /* precisa vencer o display:flex acima */
.vx-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(194,7,9,0.2), transparent); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.vx-chat-head .vx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; box-shadow: 0 0 8px var(--ok); }
.vx-chat-head button { background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--steel); width: 30px; height: 30px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: .15s; }
.vx-chat-head button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.vx-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vx-msg { display: flex; flex-direction: column; align-items: flex-start; }
.vx-msg.user { align-items: flex-end; }
.vx-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.vx-msg.bot .vx-bubble { background: var(--panel-2); color: var(--steel); border-bottom-left-radius: 4px; }
.vx-msg.user .vx-bubble { background: var(--red); color: #fff; border-bottom-right-radius: 4px; }
.vx-typing { color: var(--muted); letter-spacing: 3px; }
.vx-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vx-links a { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(194,7,9,0.14); color: #ff8a7d; border: 1px solid rgba(194,7,9,0.3); }
.vx-links a:hover { background: var(--red); color: #fff; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vx-chip { font-size: 12.5px; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--steel-2); border: 1px solid var(--line); cursor: pointer; font-family: inherit; }
.vx-chip:hover { border-color: var(--red); color: #fff; }
.vx-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.vx-chat-form input { flex: 1; }
.vx-chat-form button { flex: none; width: 44px; border: none; border-radius: 10px; background: var(--red); color: #fff; font-size: 16px; cursor: pointer; }
@media print { .vx-chat-btn, .vx-chat { display: none !important; } }

/* ============================================================
   CARTEIRINHA DIGITAL (card flip frente/verso) + validacao
   ============================================================ */
.vcard-wrap { perspective: 1600px; width: min(470px, 96vw); margin: 4px auto 0; }
.vcard {
  position: relative; width: 100%; aspect-ratio: 1.58;
  transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1);
  cursor: pointer; will-change: transform;
}
@media (max-width: 440px) { .vcard { aspect-ratio: 1.42; } }
.vcard.flipped { transform: rotateY(180deg); }
.vcard:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 6px; border-radius: 22px; }
.vcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; overflow: hidden; padding: 18px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* FRENTE: aco escuro + campo de sangue crimson */
.vcard-front {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--red-rgb),0.28), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(90,3,5,0.5), transparent 60%),
    linear-gradient(160deg, #1a1a20 0%, #0c0c0e 60%, #0a0a0b 100%);
}
.vcard-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--red-rgb),0.20), transparent 55%),
    linear-gradient(160deg, #17171c 0%, #0b0b0d 100%);
}
/* brilho holografico varrendo (sutil, dinamico) */
.vcard-sheen {
  position: absolute; inset: -30% -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.10) 47%, rgba(var(--red-bright-rgb),0.10) 50%, rgba(255,255,255,0.10) 53%, transparent 62%);
  transform: translateX(-30%); animation: vcardSheen 5.5s ease-in-out infinite;
}
@keyframes vcardSheen { 0%,100% { transform: translateX(-34%); } 50% { transform: translateX(34%); } }
.vcard-face > *:not(.vcard-sheen) { position: relative; z-index: 1; }

.vcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcard-brand { display: inline-flex; align-items: center; gap: 7px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--steel-2); }
.vcard-brand img { height: 22px; width: auto; }
.vcard-brand b { color: #fff; }
.vcard-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.vcard-status.on { color: #4ade80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.10); }
.vcard-status.off { color: var(--muted); border-color: var(--line); background: rgba(0,0,0,0.2); }

.vcard-body { display: flex; align-items: center; gap: 15px; margin: 12px 0; flex: 1; min-height: 0; }
.vcard-photo {
  width: clamp(94px, 26vw, 112px); aspect-ratio: 1; flex: none; border-radius: 13px; overflow: hidden; align-self: center;
  background: linear-gradient(135deg, #23232a, #0c0c0e); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.vcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.vcard-mono { font-family: 'Oswald', sans-serif; font-size: 40px; color: var(--steel-2); }
.vcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vcard-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--red); }
.vcard-name { font-family: 'Oswald', sans-serif; font-size: clamp(18px, 4.6vw, 24px); text-transform: uppercase; line-height: 1.05; color: #fff; margin: 2px 0 5px; word-break: break-word; }
.vcard-code { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2px; color: var(--steel-2); }

/* modalidades: arte + faixa + graduação (uma linha por matrícula) — empurradas pro rodapé do card */
.vcard-mods { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vcard-mod-row { display: flex; align-items: center; gap: 8px; }
.vcard-mod-badge .badge { font-size: 10px; padding: 2px 8px; }
.vcard-belt-bar { width: 38px; height: 12px; flex: none; border-radius: 3px; border: 1px solid rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.vcard-mod-grad { font-size: 12.5px; color: var(--steel); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* VERSO (deitado): QR à esquerda, dados à direita */
.vcard-back-grid { display: flex; align-items: stretch; gap: 16px; flex: 1; min-height: 0; }
.vcard-qr { flex: none; align-self: center; background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
.vcard-qr img { display: block; width: clamp(104px, 30vw, 150px); height: auto; }
.vcard-back-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.vcard-qr-hint { color: var(--steel-2); font-size: 12px; text-transform: none; margin: 8px 0 0; flex: 1; }
.vcard-back-foot { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.vcard-partner { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.vcard-partner-plate { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; padding: 2px; }
.vcard-partner-plate img { width: 100%; height: auto; }

.vcard-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.vcard-photo-form { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { .vcard { transition: none; } .vcard-sheen { animation: none; opacity: .5; } }

/* pagina publica de validacao do QR */
.vf-card { max-width: 420px; margin: 10px auto; text-align: center; }
.vf-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; border: 1px solid; margin-bottom: 16px; }
.vf-badge.on { color: #4ade80; border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.10); }
.vf-badge.off { color: var(--warn); border-color: rgba(255,159,10,0.4); background: rgba(255,159,10,0.10); }
.vf-photo { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg,#23232a,#0c0c0e); display: grid; place-items: center; border: 1px solid var(--line); }
.vf-photo img { width: 100%; height: 100%; object-fit: cover; }
.vf-photo span { font-family: 'Oswald', sans-serif; font-size: 56px; color: var(--steel-2); }
.vf-title { font-size: clamp(24px, 6vw, 32px); margin: 0 0 4px; }
.vf-code { font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; color: var(--steel-2); margin-bottom: 16px; }
.vf-mods { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 18px; }
.vf-mod { display: inline-flex; align-items: center; gap: 8px; }
.vf-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.vf-icon { font-size: 40px; margin-bottom: 8px; }
.vf-icon.vf-bad { color: var(--danger); }

/* impressao: aplaina o flip 3D e imprime FRENTE + VERSO empilhados (sem espelho/sobreposicao).
   ESCOPADO a body.carteira-print — senao o "visibility:hidden" vazava e imprimia OUTRAS paginas (recibo) em branco. */
@media print {
  body.carteira-print * { visibility: hidden !important; }
  body.carteira-print .vcard-wrap, body.carteira-print .vcard-wrap * { visibility: visible !important; }
  body.carteira-print .vcard-wrap { position: absolute; left: 0; top: 0; width: 470px; perspective: none; }
  .vcard { position: static; transform: none !important; height: auto; aspect-ratio: auto; }
  .vcard-face {
    position: static !important; inset: auto; transform: none !important;
    -webkit-backface-visibility: visible !important; backface-visibility: visible !important;
    width: 470px; aspect-ratio: 1.58; margin: 0 0 16px; box-shadow: none; border: 1px solid #888;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid; page-break-inside: avoid;
  }
  .vcard-sheen { display: none !important; }
  .vcard-actions, .vcard-photo-form { display: none !important; }
}

/* atalho da carteirinha no dashboard do aluno */
.carteira-cta { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; margin-bottom: 16px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--red-rgb),0.14), transparent 55%), linear-gradient(180deg, var(--panel), var(--bg-2));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.carteira-cta:hover { transform: translateY(-2px); border-color: rgba(var(--red-rgb),0.5); box-shadow: 0 16px 34px rgba(0,0,0,0.45), 0 0 26px rgba(var(--red-rgb),0.12); color: inherit; }
.cc-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--red-bright); background: rgba(var(--red-rgb),0.12); border: 1px solid rgba(var(--red-rgb),0.3); }
.cc-ico svg { width: 26px; height: 26px; }
.cc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-txt strong { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.cc-txt .muted { text-transform: none; font-size: 13px; }
.cc-go { margin-left: auto; flex: none; color: var(--red); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
@media (max-width: 520px) { .cc-go { display: none; } }

/* ===== Abas do portal do aluno ===== */
.atabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1px solid var(--line); margin: 6px 0 22px;
  position: sticky; top: 62px; z-index: 50;
  background: linear-gradient(180deg, var(--bg) 60%, rgba(10,10,11,0.9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.atabs::-webkit-scrollbar { display: none; }
.atab { flex: none; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--steel-2);
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; font-weight: 600;
  padding: 13px 16px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.atab:hover { color: #fff; }
.atab.active { color: #fff; border-bottom-color: var(--red); }
.atab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: 2px; vertical-align: middle; box-shadow: 0 0 8px rgba(255,159,10,0.6); }
.apanel { display: none; }
.apanel.active { display: block; animation: apanelIn .28s ease; }
@keyframes apanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .apanel.active { animation: none; } }

/* info da modalidade (topo da aba) */
.mod-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Foto em "Meus dados" */
.foto-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foto-atual { width: 96px; height: 96px; flex: none; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg,#23232a,#0c0c0e); display: grid; place-items: center; border: 1px solid var(--line); }
.foto-atual img { width: 100%; height: 100%; object-fit: cover; }
.foto-atual span { font-family: 'Oswald', sans-serif; font-size: 42px; color: var(--steel-2); }
.foto-form { display: flex; flex-direction: column; gap: 6px; }

/* ===== Composição da turma (distribuição de faixas) no painel ===== */
.turma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 14px; }
.turma-mod-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.turma-bars { display: flex; flex-direction: column; gap: 9px; }
.turma-row { display: grid; grid-template-columns: 128px 1fr 30px; align-items: center; gap: 10px; }
.turma-belt { font-size: 13px; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turma-track { height: 16px; background: #0e0e11; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.turma-fill { display: block; height: 100%; border-radius: 5px; min-width: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.turma-count { font-family: 'Oswald', sans-serif; font-size: 15px; text-align: right; color: #fff; }
@media (max-width: 520px) { .turma-row { grid-template-columns: 92px 1fr 26px; gap: 8px; } .turma-belt { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .turma-fill { transition: none; } }

/* ===== Preview de modelos de e-mail ===== */
.email-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 18px; }
.email-head { margin-bottom: 12px; }
.email-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0a0a0b; }
.email-preview iframe { width: 100%; height: 520px; border: 0; display: block; background: #0a0a0b; }

/* ===== Cards de dashboard clicáveis (com ação) ===== */
a.stat { display: block; text-decoration: none; color: inherit; position: relative; transition: transform .18s ease, border-left-color .18s ease, box-shadow .18s ease; }
a.stat:hover { transform: translateY(-3px); border-left-color: var(--red-bright); box-shadow: 0 16px 32px rgba(0,0,0,0.45), 0 0 22px rgba(var(--red-rgb),0.12); color: inherit; }
.stat-go { position: absolute; top: 14px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
a.stat:hover .stat-go { opacity: 1; transform: none; }
a.kpi { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.kpi:hover { transform: translateY(-2px); border-color: rgba(var(--red-rgb), 0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.35); color: inherit; }

/* ===== Central de comunicacao ===== */
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 4px; }
@media (max-width: 900px) { .comm-grid { grid-template-columns: 1fr; } }
.pub-opt { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: var(--panel); }
.pub-opt input { width: auto; }
.pub-count { margin-left: auto; font-family: 'Oswald', sans-serif; font-size: 14px; color: var(--steel-2); background: var(--panel-2); border-radius: 999px; padding: 1px 10px; }
.pub-sub { margin: -2px 0 12px 30px; }
.sel-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.sel-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sel-row:hover { background: var(--panel-2); }
.sel-row input { width: auto; flex: none; }

/* bloco recém-atualizado por ação "ao vivo" (data-live) — brilho suave que some */
@keyframes liveSwap {
  0% { box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.55), 0 0 26px rgba(var(--red-rgb), 0.22); }
  100% { box-shadow: none; }
}
.live-swap { animation: liveSwap .95s ease; }
@media (prefers-reduced-motion: reduce) { .live-swap { animation: none; } }

/* ===== Loader global: barra no topo + overlay com frase ===== */
#vxBar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--red-dark), var(--red), var(--red-bright));
  box-shadow: 0 0 12px rgba(var(--red-rgb), 0.6); opacity: 0; transition: width .3s ease, opacity .3s ease; }
#vxBar.on { opacity: 1; }
#vxLoader { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center;
  background: rgba(8,8,10,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#vxLoader.on { opacity: 1; pointer-events: auto; }
.vx-loader-box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vx-loader-logo { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.vx-loader-logo img { width: 66px; height: 66px; object-fit: contain; animation: vxPulse 1.6s ease-in-out infinite; }
.vx-loader-logo::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(var(--red-rgb), 0.18); border-top-color: var(--red-bright); animation: vxSpin 0.9s linear infinite; }
.vx-loader-frase { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--steel); animation: vxFraseIn .35s ease; }
@keyframes vxSpin { to { transform: rotate(360deg); } }
@keyframes vxPulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(var(--red-rgb),0.35)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(var(--red-rgb),0.55)); } }
@keyframes vxFraseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-loader-logo img, .vx-loader-logo::before { animation: none; } .vx-loader-frase { animation: none; } }

/* botao de acao ao vivo em andamento (data-live) */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: vxSpin .7s linear infinite; }

/* ===== Caixa de recorte de foto ===== */
.crop-overlay { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 16px;
  background: rgba(6,6,8,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.crop-overlay.open { opacity: 1; pointer-events: auto; }
.crop-modal { width: min(360px, 94vw); background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
.crop-title { margin: 0 0 4px; font-size: 18px; }
.crop-hint { color: var(--muted); text-transform: none; font-size: 13px; margin: 0 0 14px; }
.crop-stage { position: relative; width: min(280px, 74vw); aspect-ratio: 1; margin: 0 auto; border-radius: 14px;
  overflow: hidden; background: #000; touch-action: none; cursor: grab; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; width: auto; height: auto;
  user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-frame { position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(var(--red-rgb),0.6), inset 0 0 0 2000px rgba(0,0,0,0); }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 16px 2px 2px; color: var(--steel-2); font-size: 16px; }
.crop-zoom input { flex: 1; accent-color: var(--red); }
.crop-actions { display: flex; gap: 10px; margin-top: 16px; }
.crop-actions .btn { flex: 1; }

/* ===== Trilha de aprendizado (checklist do aluno) ===== */
.trilha-list { display: flex; flex-direction: column; }
.trilha-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.trilha-item:last-child { border-bottom: none; }
.trilha-check { margin: 0; }
.trilha-check label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.trilha-check input { width: auto; flex: none; margin-top: 3px; accent-color: var(--red); transform: scale(1.15); }
.trilha-tit { font-weight: 600; }
.trilha-item.done .trilha-tit { color: var(--ok); text-decoration: line-through; text-decoration-color: rgba(52,199,89,0.5); }
.trilha-desc { font-size: 13px; text-transform: none; margin: 2px 0 0 28px; }
.trilha-media { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 28px; flex-wrap: wrap; }
.trilha-media img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.trilha-futura { margin: 4px 0 0; padding-left: 18px; font-size: 13px; text-transform: none; color: var(--muted); }

/* ===== Pontos (Vortex XP) ===== */
.xp-card { background: radial-gradient(120% 120% at 0% 0%, rgba(var(--red-rgb),0.14), transparent 55%), linear-gradient(180deg, var(--panel), var(--bg-2)); }
.xp-saldo { font-family: 'Oswald', sans-serif; font-size: 44px; line-height: 1; color: #fff; margin: 2px 0; }
.xp-regras { list-style: none; padding: 0; margin: 0; }
.xp-regras li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); text-transform: none; }
.xp-regras li:last-child { border-bottom: none; }
.xp-regras strong { color: var(--red); font-family: 'Oswald', sans-serif; white-space: nowrap; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.xp-rec { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.xp-rec img { width: 100%; height: 110px; object-fit: cover; }
.xp-rec-b { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.xp-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.xp-custo { font-family: 'Oswald', sans-serif; color: var(--red); font-size: 16px; }
.kpi.xp .k-value { color: var(--red); }

/* ============================================ SINO DE AVISOS (topbar) */
.bell-dd { position: relative; margin-left: 6px; flex: none; z-index: 121; }
.bell-dd > summary { list-style: none; cursor: pointer; }
.bell-dd > summary::-webkit-details-marker { display: none; }
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--steel-2, #9aa3ad); transition: color .15s, background .15s; }
.bell-btn:hover, .bell-dd[open] .bell-btn { color: #fff; background: var(--panel-2); }
.bell-btn svg { width: 21px; height: 21px; }
.bell-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--red); color: #fff; font-family: 'Oswald', sans-serif; font-size: 10px; line-height: 16px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.45); animation: bellpulse 2.4s ease-in-out infinite; }
@keyframes bellpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb),0.55); } 50% { box-shadow: 0 0 0 5px rgba(var(--red-rgb),0); } }
.bell-menu { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, 92vw); background: linear-gradient(180deg, #16161b, #0d0d10); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 26px 64px rgba(0,0,0,0.6); z-index: 220; overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; }
.bell-head strong { font-size: 14px; letter-spacing: .3px; }
.bell-clear { background: none; border: none; color: var(--red-bright); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.bell-clear:hover { text-decoration: underline; }
.bell-list { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .14s; }
.bell-item:hover { background: var(--panel-2); }
.bell-item.unread { background: rgba(var(--red-rgb), 0.08); box-shadow: inset 3px 0 0 var(--red); }
.bell-ico { flex: none; font-size: 18px; line-height: 1.3; width: 22px; text-align: center; }
.bell-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-t { font-size: 13.5px; font-weight: 600; color: #fff; }
.bell-c { font-size: 12px; color: var(--muted); line-height: 1.35; }
.bell-empty { padding: 18px 12px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.bell-foot { display: block; text-align: center; padding: 10px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--red-bright); text-decoration: none; border-top: 1px solid var(--line); }
.bell-foot:hover { background: var(--panel-2); }

/* ============================================ PÁGINA DE AVISOS */
.avisos-vazio { text-align: center; padding: 40px 22px; }
.avisos-vazio .av-sino { font-size: 44px; margin-bottom: 10px; filter: grayscale(.2); }
.avisos-vazio h3 { margin: 0 0 6px; }
.avisos-list { display: flex; flex-direction: column; gap: 8px; }
.aviso-row { display: flex; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .12s, background .15s; }
.aviso-row:hover { border-color: rgba(var(--red-rgb), 0.5); transform: translateX(2px); }
.aviso-row.unread { background: rgba(var(--red-rgb), 0.07); border-left: 3px solid var(--red); }
.aviso-ico { flex: none; font-size: 22px; width: 30px; text-align: center; }
.aviso-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.aviso-top { display: flex; align-items: center; gap: 8px; }
.aviso-titulo { font-weight: 700; font-size: 15px; }
.aviso-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.18); }
.aviso-corpo { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.aviso-data { font-size: 12px; color: var(--muted); opacity: .8; margin-top: 2px; }

@media (max-width: 860px) {
  .bell-dd { margin-left: auto; }
  .bell-dd + .cart-link { margin-left: 8px; }
}

/* ============================================ ACESSOS (analytics) */
.seg { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg-btn { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; }
.seg-btn:hover { color: #fff; }
.seg-btn.on { background: var(--red); color: #fff; }
.acc-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.acc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.acc-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.acc-split { display: flex; flex-direction: column; gap: 6px; }
.acc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.acc-row span { color: var(--muted); text-transform: none; }
.acc-row strong { font-family: 'Oswald', sans-serif; letter-spacing: .3px; }
.acc-bar { height: 9px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin-bottom: 4px; }
.acc-bar > div { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); min-width: 2px; }
.kpi.acesso .k-value { color: var(--red-bright); }

/* ============================================ CAIXA DE PIX */
.pix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pix-card { display: flex; gap: 14px; padding: 14px; border-left: 3px solid var(--warn); }
.pix-doc { flex: 0 0 128px; }
.pix-doc a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.pix-doc img { width: 128px; height: 170px; object-fit: cover; display: block; transition: transform .2s; }
.pix-doc a:hover img { transform: scale(1.04); }
.pix-file { display: flex; align-items: center; justify-content: center; width: 128px; height: 170px; font-size: 13px; color: var(--muted); text-align: center; padding: 10px; }
.pix-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pix-valor { font-size: 14px; color: var(--muted); }
.pix-valor strong { color: var(--ok); font-family: 'Oswald', sans-serif; font-size: 17px; letter-spacing: .3px; }
@media (max-width: 480px) {
  .pix-card { flex-direction: column; }
  .pix-doc { flex: none; }
  .pix-doc img, .pix-file { width: 100%; height: 150px; }
}

/* ============================================ CARD DE GRADUAÇÃO */
.grad-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.grad-canvas { width: min(420px, 92vw); height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 40px rgba(var(--red-rgb),0.15); }
.grad-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.gpub-card { text-align: center; padding: 44px 24px 36px; background: linear-gradient(180deg, #141418, #0c0c0f); border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden; }
.gpub-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(var(--red-rgb),0.22), transparent 60%); pointer-events: none; }
.gpub-eyebrow { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red-bright); margin-bottom: 18px; }
.gpub-foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid var(--red); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.gpub-mono { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 56px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--red-dark), var(--red)); border: 4px solid var(--red); }
.gpub-nome { font-size: clamp(26px, 6vw, 40px); margin: 16px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
.gpub-rotulo { font-size: 16px; color: var(--muted); text-transform: none; }
.gpub-rotulo strong { color: #fff; }
.gpub-belt { position: relative; height: 26px; border-radius: 6px; margin: 22px auto 0; max-width: 420px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.gpub-ponta { position: absolute; right: 0; top: 0; bottom: 0; width: 22%; }
.gpub-meta { margin-top: 16px; font-size: 13.5px; color: var(--muted); text-transform: none; }
.gpub-cta { margin-top: 18px; text-align: center; }
.gpub-cta .flex { justify-content: center; }

/* ============================================ AVALIAÇÃO GOOGLE */
.aval-sugestoes { display: flex; flex-direction: column; gap: 8px; }
.aval-sug { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 14px; line-height: 1.5; cursor: pointer; transition: border-color .15s, background .15s; text-transform: none; font-family: inherit; }
.aval-sug:hover { border-color: rgba(var(--red-rgb), 0.55); background: rgba(var(--red-rgb), 0.06); }
.aval-copy { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red-bright); }

/* ============================================ SIDEBAR (app admin/professor/aluno) */
.sidenav { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 150; display: flex; flex-direction: column; background: linear-gradient(180deg, #101014, #0a0a0c 55%, #0e0708); border-right: 1px solid var(--line); }
.sidenav::after { content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(var(--red-rgb),0.55), transparent 35%, transparent 72%, rgba(var(--red-rgb),0.35)); }
.sn-brand { display: flex; align-items: center; gap: 10px; padding: 15px 16px 13px; font-family: 'Oswald', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); flex: none; }
.sn-brand img { width: 36px; height: 36px; object-fit: contain; transition: transform .3s ease; }
.sn-brand:hover img { transform: rotate(-8deg) scale(1.05); }
.sn-brand b { color: #fff; }
.sn-brand em { font-style: normal; color: var(--red-bright); }
.sn-nav { flex: 1; overflow-y: auto; padding: 8px 10px 14px; scrollbar-width: thin; scrollbar-color: #26262c transparent; }
.sn-label { font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); opacity: .7; margin: 16px 8px 6px; }
.sn-nav .sn-label:first-child { margin-top: 6px; }
.sn-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin: 1px 0; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--steel-2); letter-spacing: .2px; transition: background .15s, color .15s, transform .15s; }
.sn-link svg { width: 17px; height: 17px; flex: none; opacity: .8; transition: opacity .15s, color .15s; }
.sn-link > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-link .sn-badge { flex: none; }
.sn-link:hover { color: #fff; background: var(--panel-2); transform: translateX(2px); }
.sn-link:hover svg { opacity: 1; }
.sn-link.active { color: #fff; background: linear-gradient(90deg, rgba(var(--red-rgb),0.18), rgba(var(--red-rgb),0.03)); box-shadow: inset 3px 0 0 var(--red); }
.sn-link.active svg { opacity: 1; color: var(--red-bright); }
.sn-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-family: 'Oswald', sans-serif; animation: bellpulse 2.4s ease-in-out infinite; }
.sn-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.25); }
.sn-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--red-dark), var(--red)); box-shadow: 0 4px 12px rgba(var(--red-rgb),0.35); }
.sn-user { flex: 1; min-width: 0; }
.sn-user b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-user span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; }
.sn-sair { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--steel-2); transition: .15s; }
.sn-sair svg { width: 17px; height: 17px; }
.sn-sair:hover { color: #fff; background: var(--red-2); }

/* layout com sidebar (desktop) */
body.has-sidebar .topbar, body.has-sidebar main, body.has-sidebar .footer { margin-left: 248px; }
.topbar-app .brand { display: none; }
.topbar-app .container { justify-content: flex-end; min-height: 56px; max-width: none; padding-right: 16px; }
.topbar-app .bell-dd { margin-left: 0; }
.topbar-app .cart-link { margin-left: 4px; }

/* botao Sair na topbar (modo app, logado) */
.topbar-sair { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; margin-left: 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--steel-2); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; flex: none; z-index: 120; transition: color .15s, background .15s, border-color .15s; }
.topbar-sair svg { width: 18px; height: 18px; }
.topbar-sair:hover { color: #fff; background: var(--red-2); border-color: transparent; }

@media (max-width: 1024px) {
  body.has-sidebar .topbar, body.has-sidebar main, body.has-sidebar .footer { margin-left: 0; }
  .sidenav { width: min(302px, 84vw); transform: translateX(-105%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: 20px 0 60px rgba(0,0,0,0.5); z-index: 160; }
  body.nav-open .sidenav { transform: none; }
  .topbar-app .brand { display: flex; margin-right: auto; }
  .topbar-app .container { justify-content: flex-start; padding-right: 16px; }
  .topbar-app .nav-toggle { display: block; }
  .topbar-app .bell-dd { margin-left: 0; }
  .topbar-app .cart-link { margin-left: 4px; }
  /* no mobile o Sair vira so icone (quadrado) pra caber sem apertar */
  .topbar-sair { margin-left: 4px; padding: 0; width: 40px; justify-content: center; }
  .topbar-sair .lbl { display: none; }
  body.has-sidebar.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 155; }
}

@media print { .sidenav { display: none !important; } body.has-sidebar main, body.has-sidebar .topbar { margin-left: 0 !important; } }

/* ============================================ KIT INICIANTE (order bump) */
.kit-card { border: 1px solid rgba(var(--red-rgb), 0.4); background: linear-gradient(180deg, rgba(var(--red-rgb),0.07), var(--panel)); }
.kit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kit-eyebrow { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--red-bright); }
.kit-preco { text-align: right; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kit-preco s { color: var(--muted); font-size: 14px; }
.kit-preco strong { font-family: 'Oswald', sans-serif; font-size: 24px; color: var(--ok); }
.kit-off { background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.kit-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kit-item { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.kit-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.kit-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.kit-item-info strong { font-size: 13.5px; line-height: 1.25; }
.kit-item-info select { padding: 6px 8px; font-size: 13px; margin-top: 2px; }

/* ============================================ RESUMO DO MÊS (painel) */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rm-card { display: block; padding: 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); transition: border-color .15s, transform .12s; }
.rm-card:hover { border-color: rgba(var(--red-rgb), 0.5); transform: translateY(-2px); }
.rm-card.rm-destaque { background: linear-gradient(160deg, rgba(var(--red-rgb),0.10), var(--panel-2)); border-color: rgba(var(--red-rgb),0.35); }
.rm-ico { font-size: 18px; margin-bottom: 4px; }
.rm-val { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; color: #fff; }
.rm-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--steel-2); margin-top: 2px; }
.rm-sub { font-size: 11.5px; color: var(--muted); text-transform: none; margin-top: 3px; }
.rm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 560px) { .rm-grid { grid-template-columns: repeat(2, 1fr); } .rm-val { font-size: 21px; } }

/* ============================================ MODAL DE DOCUMENTO (recibo, comprovante) */
.doc-modal { position: fixed; inset: 0; z-index: 520; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.doc-modal.open { display: flex; animation: modalFade .15s ease; }
.doc-box { display: flex; flex-direction: column; width: min(600px, 100%); height: min(88vh, 920px); background: linear-gradient(180deg, #16161b, #0d0d10); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.65); animation: modalPop .18s cubic-bezier(.2,.8,.2,1); }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); flex: none; }
.doc-title { font-family: 'Oswald', sans-serif; letter-spacing: .5px; font-size: 16px; color: #fff; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-body { position: relative; flex: 1; background: #eceded; min-height: 0; }
.doc-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.doc-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) { .doc-box { height: 92vh; width: 100%; } .doc-title { font-size: 14px; } }

/* ===== Assinatura ===== */
.sign-pad{ width:100%; height:150px; border:1px dashed #9aa0ad; border-radius:10px; background:#fff; touch-action:none; cursor:crosshair; display:block; transition:opacity .25s, filter .25s; }
.sign-pad.locked{ opacity:.4; filter:grayscale(.4); pointer-events:none; cursor:not-allowed; }
.btn:disabled, button:disabled{ opacity:.45; filter:grayscale(.4); cursor:not-allowed; box-shadow:none; }
.termo-hint{ font-size:12.5px; color:var(--muted); margin:8px 0 0; display:flex; align-items:center; gap:6px; }
.termo-hint.ok{ color:var(--ok, #34c759); font-weight:600; }
/* checkbox de aceite desabilitado enquanto não leu */
input[name="aceite"]:disabled + span, label:has(input[name="aceite"]:disabled){ opacity:.5; }
.sign-clear{ background:none; border:none; color:#8a8f99; text-decoration:underline; cursor:pointer; font-size:.82rem; }
.sign-img{ background:#fff; border:1px solid var(--line,#2a2f3a); border-radius:8px; padding:4px; max-width:260px; }

/* ===== Evolução física ===== */
.evo-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.evo-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; }
.evo-card .k{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:#8a8f99; }
.evo-card .v{ font-size:1.4rem; font-weight:800; margin-top:2px; }
.evo-card .d{ font-size:.8rem; font-weight:700; margin-top:2px; }
.evo-card .d.up{ color:#ff7a6b; } .evo-card .d.down{ color:#41d18a; } .evo-card .d.flat{ color:#8a8f99; }
.evo-chart{ width:100%; height:auto; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; }
.evo-chart-wrap{ margin-top:4px; }
.evo-list{ display:flex; flex-direction:column; }

/* ===== Cabeçalho do aluno (aba Cadastro) ===== */
.al-head{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.al-avatar-form{ margin:0; }
.al-avatar{ position:relative; width:84px; height:84px; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#1b1b21,#111114); border:1px solid var(--line); cursor:pointer; flex:none; }
.al-avatar img{ width:100%; height:100%; object-fit:cover; }
.al-avatar-mono{ font-family:'Oswald',sans-serif; font-weight:700; font-size:38px; color:var(--red); }
.al-avatar-cam{ position:absolute; right:4px; bottom:4px; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:rgba(194,7,9,.92); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.al-avatar-cam svg{ width:14px; height:14px; }
.al-avatar:hover .al-avatar-cam{ background:var(--red-bright,#e5141a); }
.al-head-info{ flex:1; min-width:220px; }
.al-head-name{ margin:0 0 8px; font-family:'Oswald',sans-serif; font-size:24px; }
.al-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.al-chip{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--steel-2,#c9cdd6); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:rgba(255,255,255,.02); white-space:nowrap; }
.al-chip.ok{ color:var(--ok); border-color:rgba(52,199,89,.4); background:rgba(52,199,89,.08); }
.al-chip.warn{ color:var(--warn); border-color:rgba(255,159,10,.4); background:rgba(255,159,10,.08); }
.al-chip.off{ color:#9a9aa2; }
.al-complete{ margin-top:12px; }
.al-complete-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.al-complete-bar span{ display:block; height:100%; width:0; border-radius:999px; background:var(--red); transition:width .5s ease, background .4s ease; }
.al-complete-lbl{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted); }
.al-complete-lbl strong{ color:var(--txt); }
/* badges inline nos labels */
.idade-badge, .cpf-badge, .cep-status{ font-size:11px; font-weight:700; margin-left:6px; }
.idade-badge{ color:var(--red); }
.cpf-badge.ok, .cep-status.ok{ color:var(--ok); }
.cpf-badge.bad, .cep-status.bad{ color:var(--danger,#ff453a); }
.cep-status{ color:var(--muted); }
@media (max-width:600px){ .al-head{ gap:12px; } .al-avatar{ width:66px; height:66px; } }
.evo-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); }
.evo-row .data{ font-family:var(--mono,monospace); font-size:.82rem; color:#c9cdd6; min-width:78px; }
.evo-row .peso{ font-weight:800; }
.evo-row .medidas{ font-size:.8rem; color:#8a8f99; flex:1; }
.evo-thumb{ width:38px; height:38px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.1); }

/* ===== Usuários & equipe ===== */
.u-tipos { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.u-tipo { position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 14px 12px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; background:rgba(255,255,255,.02); transition:border-color .15s, background .15s, transform .1s; }
.u-tipo:hover { border-color:rgba(var(--red-rgb),.5); }
.u-tipo.on { border-color:var(--red); background:rgba(var(--red-rgb),.08); }
.u-tipo input { position:absolute; opacity:0; pointer-events:none; }
.u-tipo-emoji { font-size:22px; }
.u-tipo-nome { font-weight:700; color:#fff; }
.u-tipo-desc { font-size:12px; color:var(--muted); line-height:1.3; }
@media (max-width:640px){ .u-tipos { grid-template-columns:1fr; } }

.u-invite { border-left:3px solid #34c759; }
.u-invite-head { display:flex; align-items:center; gap:12px; }
.u-invite-ic { flex:0 0 34px; height:34px; border-radius:50%; background:rgba(52,199,89,.15); color:#34c759; display:flex; align-items:center; justify-content:center; font-weight:800; }
.u-link { width:100%; font-family:var(--mono,monospace); font-size:13px; background:#0e0e11; border:1px solid var(--line); color:#c7ccd1; padding:10px 12px; border-radius:8px; }
.u-invite-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn-wa { background:#25d366 !important; color:#062b17 !important; border-color:#25d366 !important; font-weight:700; }

.u-table td { vertical-align:middle; }
.u-hl { animation:uHl 2s ease; }
@keyframes uHl { 0%,40% { background:rgba(var(--red-rgb),.14); } 100% { background:transparent; } }
.u-inline { display:inline; margin:0; }
.u-inline select { padding:5px 8px; font-size:13px; }
.u-acts { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.btn-xs { padding:4px 9px !important; font-size:12px !important; border-radius:7px !important; }
.u-tag { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.u-tag-aluno { background:rgba(80,140,255,.14); color:#7aa5ff; }
.u-tag-prof { background:rgba(var(--red-rgb),.14); color:var(--red-bright); }
.u-tag-dir { background:rgba(255,190,60,.16); color:#ffbe3c; }
.u-st { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.u-st-on { background:rgba(52,199,89,.14); color:#34c759; }
.u-st-pend { background:rgba(255,190,60,.16); color:#ffbe3c; }
.u-st-off { background:rgba(255,255,255,.07); color:var(--muted); }