/* =========================================================
   MSE Club · programa de pontos dos encarregados
   Identidade herdada do MSE Vision (tokens, cabeçalho-carimbo navy, abas com
   traço deslizante, IBM Plex) e do MSE Relatórios (loader da caneta).
   Novidade do Club: o OURO é a cor dos pontos — só aparece em saldo/pontos.
   ========================================================= */

:root {
  --mse: #2563eb;
  --mse-dark: #1a4fc4;
  --mse-rgb: 37 99 235;

  --bg-0: #e8eaee;
  --bg-1: #f0f2f6;
  --bg-2: #e8eaee;
  --surface: #ffffff;
  --border: #e4e7ec;
  --border-strong: #cfd5dd;
  --text: #192231;
  --text-2: #4d5868;
  --text-3: #66758a;

  --green: #1f9d57;
  --amber: #d9911a;
  --red: #d23b3b;
  --roxo: #7c5cd6;

  /* Pontos */
  --ouro: #c98a0e;          /* texto/ícone de pontos sobre fundo claro (contraste AA) */
  --ouro-vivo: #f2b941;     /* estrela/realce sobre o navy */
  --ouro-rgb: 224 165 38;

  /* Critérios: sempre as mesmas cores em gráfico, legenda e card */
  --c-ader: #2563eb;
  --c-qual: #1f9d57;
  --c-assid: #7c5cd6;

  --navy-1: #13223b;
  --navy-2: #1f3a63;

  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --font-marca: 'Lora', Georgia, serif;
  --mse-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 733 217'%3E%3Cpath fill-rule='evenodd' d='M399.0 215.9C371.2 212.5 348.3 198.5 337.8 178.4C333.2 169.7 330.8 161.3 331.2 155.8L331.5 151.5L354.9 151.5L378.3 151.5L379.7 155.4C381.9 161.9 385.8 166.0 392.9 169.4C399.1 172.3 400.3 172.5 413.0 172.8C427.5 173.2 433.0 172.0 440.4 166.9C449.7 160.6 451.9 147.1 444.9 140.1C440.8 135.9 432.9 133.7 409.3 130.0C382.7 125.9 374.2 123.7 363.4 118.5C351.8 112.9 342.7 103.8 338.7 93.8C334.8 84.1 333.4 72.0 334.9 61.4C337.7 41.1 347.7 25.1 363.7 14.9C378.4 5.6 392.7 2.0 414.4 2.0C441.9 2.0 459.1 8.1 474.6 23.5C483.6 32.4 488.7 41.3 491.6 53.2C493.8 62.1 493.1 64.6 488.3 65.4C483.2 66.2 454.5 66.1 449.6 65.2C446.2 64.6 445.5 64.0 444.8 61.2C443.5 56.1 436.4 49.6 429.5 47.0C424.2 45.1 422.2 44.9 413.0 45.3C399.6 46.0 396.3 47.0 390.1 52.6C384.5 57.6 382.4 62.7 383.3 69.1C384.7 79.5 391.5 82.7 424.0 88.1C453.1 92.9 464.2 96.3 474.8 103.3C490.9 114.1 499.0 131.4 497.6 152.0C496.8 162.8 495.0 169.7 490.5 178.5C481.3 196.6 462.9 209.3 438.5 214.5C429.0 216.5 409.5 217.2 399.0 215.9ZM604.0 214.4C577.5 208.7 557.8 197.0 542.8 178.1C535.2 168.6 526.7 151.3 523.4 138.5C516.8 113.2 520.0 81.0 531.3 58.5C538.2 44.7 550.6 30.0 562.6 21.4C570.5 15.7 585.3 8.7 596.5 5.3C605.1 2.7 606.4 2.6 627.5 2.6C648.6 2.6 649.9 2.7 658.3 5.3C676.1 10.8 689.6 18.6 701.9 30.4C711.2 39.4 716.9 47.3 722.5 59.1C729.6 74.2 732.1 85.5 732.7 104.8C733.3 120.8 733.2 121.1 731.0 123.5L728.7 126.0L659.6 126.0C621.6 126.0 586.1 126.3 580.7 126.7L570.9 127.3L571.5 130.4C574.0 142.6 586.0 158.1 597.7 164.3C609.3 170.3 614.6 171.5 631.0 171.4C650.6 171.4 660.4 168.7 670.7 160.4L674.8 157.0L697.8 157.0C723.0 157.0 723.9 157.2 722.5 162.7C721.3 167.7 712.7 180.4 705.5 187.6C692.9 200.4 678.4 208.2 657.1 213.6C648.8 215.7 645.6 216.0 629.1 215.9C617.2 215.9 608.2 215.3 604.0 214.4ZM2.0 212.0C0.7 211.2 0.5 203.0 0.2 149.8C0.0 112.6 0.3 84.8 0.9 79.0C2.4 65.1 5.3 54.8 10.9 43.5C19.4 26.4 29.1 16.7 45.7 8.8C59.6 2.1 66.8 0.7 87.0 0.6C102.9 0.6 103.8 0.7 112.7 3.6C128.1 8.8 139.4 16.3 149.1 27.7C151.4 30.3 153.5 32.8 153.9 33.3C154.3 33.7 156.9 31.2 159.7 27.7C168.6 16.6 180.8 8.7 197.0 3.5C203.7 1.4 208.2 0.7 218.7 0.3C247.2 -1.0 265.9 5.7 283.6 23.4C291.4 31.2 293.4 33.9 297.4 42.1C299.9 47.3 303.2 56.1 304.7 61.6L307.3 71.5L308.1 140.5C308.7 202.4 308.7 209.7 307.3 211.2C305.9 212.8 303.3 213.0 282.9 213.0C263.5 213.0 259.9 212.8 258.6 211.4C257.2 210.0 257.0 203.3 257.0 152.2C257.0 120.2 256.5 90.6 256.0 85.8C254.1 69.4 248.9 60.1 238.4 54.3C230.2 49.9 223.1 48.6 213.4 50.0C209.2 50.5 203.8 51.9 201.5 52.9C192.3 57.0 184.6 67.1 182.1 78.2C181.5 80.8 180.8 110.1 180.4 146.6C180.0 186.1 179.4 211.0 178.7 211.8C177.3 213.5 131.7 213.5 130.2 211.7C129.5 210.9 129.0 188.8 128.7 147.0C128.4 91.5 128.1 82.7 126.6 77.0C123.6 65.5 116.6 57.0 106.0 52.1C101.2 49.9 99.2 49.6 91.0 49.7C85.6 49.7 79.5 50.4 76.8 51.3C66.7 54.5 57.9 63.5 54.3 74.5C52.7 79.0 52.5 86.4 52.2 144.5C52.0 202.6 51.7 209.6 50.3 211.2C48.8 212.8 46.5 213.0 26.1 213.0C13.6 213.0 2.8 212.5 2.0 212.0ZM682.0 85.6C682.0 84.9 680.2 80.6 677.9 76.1C671.3 62.8 661.9 54.6 647.3 49.3C641.9 47.4 639.0 47.0 628.7 47.0C608.7 47.0 598.3 50.8 586.3 62.6C579.5 69.2 574.9 76.7 572.5 84.8L571.9 87.0L626.9 87.0C673.2 87.0 682.0 86.8 682.0 85.6Z'/%3E%3C/svg%3E");
  --serra: polygon(50.00% 0.00%,55.87% 5.38%,62.94% 1.70%,67.22% 8.43%,75.00% 6.70%,77.39% 14.30%,85.36% 14.64%,85.70% 22.61%,93.30% 25.00%,91.57% 32.78%,98.30% 37.06%,94.62% 44.13%,100.00% 50.00%,94.62% 55.87%,98.30% 62.94%,91.57% 67.22%,93.30% 75.00%,85.70% 77.39%,85.36% 85.36%,77.39% 85.70%,75.00% 93.30%,67.22% 91.57%,62.94% 98.30%,55.87% 94.62%,50.00% 100.00%,44.13% 94.62%,37.06% 98.30%,32.78% 91.57%,25.00% 93.30%,22.61% 85.70%,14.64% 85.36%,14.30% 77.39%,6.70% 75.00%,8.43% 67.22%,1.70% 62.94%,5.38% 55.87%,0.00% 50.00%,5.38% 44.13%,1.70% 37.06%,8.43% 32.78%,6.70% 25.00%,14.30% 22.61%,14.64% 14.64%,22.61% 14.30%,25.00% 6.70%,32.78% 8.43%,37.06% 1.70%,44.13% 5.38%);
  --ouro-nome: #b07a0b;   /* "Club" da marca sobre fundo claro */

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 4px rgba(25,34,49,.025), 0 8px 24px rgba(25,34,49,.025);
  --shadow-md: 0 10px 32px rgba(25,34,49,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --mse: #5b8def;
  --mse-dark: #3f74e0;
  --mse-rgb: 91 141 239;
  --bg-0: #0b1220;
  --bg-1: #0f1729;
  --bg-2: #0b1220;
  --surface: #162034;
  --border: rgba(148,163,184,.16);
  --border-strong: rgba(148,163,184,.32);
  --text: #e2e8f0;
  --text-2: #a8b3c4;
  --text-3: #8d99ab;
  --ouro: #f2b941;
  --c-ader: #5b8def;
  --c-qual: #3cc47c;
  --c-assid: #a48cf0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 10px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .ld { --ld-ink: #a8c4f5; --ld-paper: #1c2840; --ld-line: #34445f; color: var(--text-2); }
[data-theme="dark"] .ld-fold { fill: #26344e; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--text);
  background: var(--bg-1);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--mse); }

.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ─── SHELL ─── */
.app-shell { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 100vh; max-width: 1280px; margin: 0 auto; }
.main { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.rodape { text-align: center; color: var(--text-3); font-size: 11.5px; padding: 14px 0 10px; }

/* ─── CABEÇALHO-CARIMBO (igual ao Vision) ─── */
.app-header {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(640px 360px at 85% -30%, rgba(64,120,210,.5), transparent 62%),
    linear-gradient(118deg, var(--navy-1) 0%, #193053 68%, var(--navy-2) 100%);
  box-shadow: 0 2px 8px rgba(19,34,59,.12);
  color: #fff;
  display: flex; align-items: stretch; flex-wrap: wrap;
}
.hd-marca { display: flex; align-items: center; padding: 12px 20px; flex-shrink: 0; }
.hd-marca .marca { --s: 36px; }
.hd-carimbo { display: flex; flex: 1; min-width: 0; border-left: 1px solid rgba(255,255,255,.14); }
.hd-campo {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 8px 18px; border-right: 1px solid rgba(255,255,255,.14); min-width: 0;
}
.hd-campo:last-child { border-right: 0; }
.hd-campo small { font-size: 11px; color: rgba(255,255,255,.62); }
.hd-campo b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-quem { flex: 1 1 auto; }
.hd-saldo b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ouro-vivo); display: inline-flex; align-items: center; gap: 6px; }
.hd-saldo b i { font-size: 13px; }
.hd-portal {
  display: inline-flex; align-items: center; gap: 8px; align-self: center; flex-shrink: 0;
  min-height: 40px; padding: 0 12px; margin: 6px 12px 6px auto;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600;
}
.hd-portal:hover { background: rgba(255,255,255,.12); }
.hd-portal:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ─── NAVEGAÇÃO ─── */
.top-nav { padding: 4px 8px; display: flex; align-items: center; gap: 8px; position: sticky; top: 4px; z-index: 40; }
.top-nav-tabs { position: relative; display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top-nav-tabs::-webkit-scrollbar { display: none; }
.tn-ind { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; border-radius: 2px; background: var(--mse); opacity: 0; pointer-events: none; }
.tn-ind.on { opacity: 1; transition: transform .35s var(--ease), width .35s var(--ease); }
.tn-sep { width: 1px; background: var(--border); margin: 8px 6px; flex-shrink: 0; }
.tni-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 8px;
  border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .18s ease, color .18s ease; white-space: nowrap;
}
.tni-btn i { font-size: 12px; color: var(--text-3); transition: color .18s ease; }
.tni-btn:hover { background: var(--bg-2); color: var(--text); }
.tni-btn.active { color: var(--text); font-weight: 600; }
.tni-btn.active i { color: var(--mse); }
.tni-btn .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.top-nav-acoes { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; display: inline-grid; place-items: center; transition: all .15s;
}
.icon-btn:hover { border-color: var(--mse); color: var(--mse); background: rgb(var(--mse-rgb) / .08); }

/* ─── BOTÕES / CAMPOS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--mse); color: var(--mse); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--mse); border-color: var(--mse); color: #fff; }
.btn.primary:hover { background: var(--mse-dark); border-color: var(--mse-dark); color: #fff; box-shadow: 0 6px 16px rgb(var(--mse-rgb) / .3); }
.btn.ouro { background: linear-gradient(180deg, #f2b941, #d9971a); border-color: #c98a0e; color: #2a1d02; }
.btn.ouro:hover { color: #2a1d02; box-shadow: 0 6px 16px rgb(var(--ouro-rgb) / .4); border-color: #b07a0a; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--text); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.btn.danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: .78rem; }
:focus-visible { outline: 3px solid rgb(var(--mse-rgb) / .55); outline-offset: 2px; }

.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.campo input, .campo textarea, .campo select, .inp {
  font: inherit; font-size: .88rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px; min-height: 40px; width: 100%;
}
.campo textarea { min-height: 76px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus, .inp:focus { outline: none; border-color: var(--mse); box-shadow: 0 0 0 3px rgb(var(--mse-rgb) / .15); }
.campo .dica { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade-form .inteiro { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }

/* ─── CARDS / SEÇÕES ─── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; min-width: 0; }
.card-tit { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-tit h2 { font-size: 1rem; }
.card-tit .sub { color: var(--text-3); font-size: 12px; }
.card-tit .acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.empty-state { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 28px 18px; text-align: center; color: var(--text-3); }
.empty-state i { font-size: 22px; display: block; margin-bottom: 8px; color: var(--text-3); }

/* ─── INÍCIO: saldo ─── */
.saldo-hero {
  position: relative; overflow: hidden; color: #fff; border: 0;
  background:
    radial-gradient(420px 260px at 100% 0%, rgb(var(--ouro-rgb) / .35), transparent 65%),
    radial-gradient(520px 300px at 0% 120%, rgba(64,120,210,.45), transparent 60%),
    linear-gradient(135deg, var(--navy-1), #1b3256 70%, var(--navy-2));
}
.saldo-hero .eyebrow { color: rgba(255,255,255,.62); }
.saldo-num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: var(--ouro-vivo); margin: 8px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.saldo-num small { font-size: 1rem; color: rgba(255,255,255,.7); font-weight: 500; }
.saldo-linha { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.saldo-linha div { display: flex; flex-direction: column; gap: 2px; }
.saldo-linha small { font-size: 11px; color: rgba(255,255,255,.6); }
.saldo-linha b { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.saldo-estrela { position: absolute; right: -18px; top: -24px; font-size: 150px; color: rgb(var(--ouro-rgb) / .12); transform: rotate(14deg); pointer-events: none; }
.prox-premio { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.82); }
.prox-premio .barra { margin-top: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.prox-premio .barra i { display: block; height: 100%; background: linear-gradient(90deg, #f2b941, #ffd77a); border-radius: 3px; width: var(--p, 0%); transition: width 1s var(--ease); }

/* ─── Último dia: 3 anéis por critério ─── */
.dia-crits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crit { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 4px; }
.anel { --v: 0; --cor: var(--mse); width: 84px; height: 84px; position: relative; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .trilho { fill: none; stroke: var(--bg-2); stroke-width: 3.4; }
.anel .valor { fill: none; stroke: var(--cor); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1s var(--ease); }
.anel .rot { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-family: var(--font-mono); }
.anel .rot b { font-size: 1.15rem; font-weight: 600; line-height: 1; }
.anel .rot small { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.crit-nome { font-weight: 600; font-size: 13px; }
.crit-det { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.dia-total { display: flex; align-items: baseline; gap: 8px; margin-left: auto; font-family: var(--font-mono); }
.dia-total b { font-size: 1.5rem; color: var(--ouro); }
.selo-10 { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgb(var(--ouro-rgb) / .16); color: var(--ouro); }

/* ─── Régua de pontos (barrinhas empilhadas, herdeira da régua do Vision) ─── */
.regua { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 130px; padding-top: 8px; }
.regua .dia { display: flex; flex-direction: column-reverse; height: 100%; border-radius: 3px; background: var(--bg-2); overflow: hidden; cursor: pointer; position: relative; border: 0; padding: 0; }
.regua .dia.folga { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--bg-2) 3px 6px); cursor: default; }
.regua .dia span { display: block; width: 100%; flex: none; }
.regua .dia .a { background: var(--c-ader); }
.regua .dia .q { background: var(--c-qual); }
.regua .dia .p { background: var(--c-assid); }
.regua .dia.sel { outline: 2px solid var(--ouro); outline-offset: 1px; }
.regua .dia.dez::after { content: '★'; position: absolute; top: 1px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; }
.regua-eixo { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); margin-top: 6px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .regua .dia span { animation: cresce .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 12ms); transform-origin: bottom; }
}
@keyframes cresce { from { transform: scaleY(0); } }

/* ─── Tabelas ─── */
.tabela-wrap { overflow-x: auto; margin: 0 -4px; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab th { text-align: left; font-weight: 600; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tab td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab .dir { text-align: right; }
.tab tbody tr:hover td { background: rgb(var(--mse-rgb) / .03); }
.pts { font-family: var(--font-mono); font-weight: 600; color: var(--ouro); white-space: nowrap; }
.pts.neg { color: var(--red); }
.pts.zero { color: var(--text-3); }
.mini-pts { display: inline-flex; gap: 4px; font-family: var(--font-mono); font-size: 11.5px; }
.mini-pts span { padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--text-3); }
.mini-pts span.on.a { background: color-mix(in srgb, var(--c-ader) 14%, transparent); color: var(--c-ader); }
.mini-pts span.on.q { background: color-mix(in srgb, var(--c-qual) 14%, transparent); color: var(--c-qual); }
.mini-pts span.on.p { background: color-mix(in srgb, var(--c-assid) 14%, transparent); color: var(--c-assid); }

/* ─── Status (pílulas) ─── */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; --st: var(--text-3); color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent); }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.PENDENTE { --st: var(--amber); }
.st.APROVADO { --st: var(--mse); }
.st.ENTREGUE { --st: var(--green); }
.st.RECUSADO { --st: var(--red); }
.st.CANCELADO { --st: var(--text-3); }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.pilula { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.pilula.on { background: var(--mse); border-color: var(--mse); color: #fff; }

/* ─── PRÊMIOS ─── */
.premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.premio { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform .2s var(--ease), box-shadow .2s; }
.premio:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.premio-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--navy-1), var(--navy-2)); display: grid; place-items: center; position: relative; overflow: hidden; }
.premio-img img { width: 100%; height: 100%; object-fit: cover; }
.premio-img .ph { font-size: 38px; color: rgb(var(--ouro-rgb) / .8); }
.premio-custo { position: absolute; right: 10px; bottom: 10px; background: rgba(10,18,32,.78); backdrop-filter: blur(6px); color: var(--ouro-vivo); font-family: var(--font-mono); font-weight: 600; padding: 4px 10px; border-radius: 8px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.premio-corpo { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.premio-corpo h3 { font-size: .98rem; }
.premio-corpo p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; flex: 1; }
.premio-estoque { font-size: 11.5px; color: var(--text-3); }
.premio .falta { font-size: 11.5px; color: var(--text-3); }
.premio .barra { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.premio .barra i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #f2b941, #d9971a); }
.premio.inativo { opacity: .6; }

/* ─── RANKING ─── */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 16px; }
.podio-lugar { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.podio-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--navy-1)); border: 3px solid var(--m, #c0c6cf); }
.podio-nome { font-weight: 600; font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.podio-base { width: 100%; border-radius: 10px 10px 4px 4px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: #fff; padding: 10px 4px; background: linear-gradient(180deg, var(--m), color-mix(in srgb, var(--m) 70%, #000)); }
.podio-base small { display: block; font-size: 11px; font-weight: 500; opacity: .9; }
.p1 { --m: #d9a21b; } .p1 .podio-base { min-height: 112px; }
.p2 { --m: #8e9aab; } .p2 .podio-base { min-height: 84px; }
.p3 { --m: #b8743d; } .p3 .podio-base { min-height: 64px; }
.pos { font-family: var(--font-mono); font-weight: 600; color: var(--text-3); width: 34px; }
tr.eu td { background: rgb(var(--ouro-rgb) / .1) !important; }
tr.eu td:first-child { box-shadow: inset 3px 0 0 var(--ouro); }

/* ─── REGRAS ─── */
.regras { display: grid; gap: 10px; }
.regra { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bg-1); }
[data-theme="dark"] .regra { background: rgba(255,255,255,.03); }
.regra i { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 16px; background: var(--cor); }
.regra b { display: block; font-size: 13px; }
.regra span { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.regra .max { font-family: var(--font-mono); font-weight: 600; color: var(--ouro); white-space: nowrap; }

/* ─── MODAL / TOAST ─── */
.modal-fundo { position: fixed; inset: 0; z-index: 900; background: rgba(8,14,26,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: aparece .2s ease; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); animation: sobe .28s var(--ease); }
.modal-cab { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-cab h3 { font-size: 1rem; flex: 1; }
.modal-corpo { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.modal-rod { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--navy-1); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-md); font-size: 13px; display: flex; gap: 10px; align-items: center; animation: sobe .25s var(--ease); max-width: 380px; }
.toast.erro { background: #8f1f1f; }
.toast i { color: var(--ouro-vivo); }
.toast.erro i { color: #ffb3b3; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } }

/* ─── Confete de resgate ─── */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 1100; overflow: hidden; }
.confete i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: cai 1.6s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes cai { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .9; } }

/* ─── Tela sem sessão ─── */
.sem-sessao { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(118deg, var(--navy-1) 0%, #193053 68%, var(--navy-2) 100%); color: #fff; text-align: center; }
.sem-sessao .caixa { max-width: 420px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.sem-sessao img { width: 220px; }
.sem-sessao p { color: rgba(255,255,255,.78); line-height: 1.5; margin: 0; }
.sem-sessao a { color: #fff; }

/* ─── Marca: roseta (M1) + "Club" em Lora 600 dourado ─── */
.marca { --s: 34px; display: inline-flex; align-items: center; gap: calc(var(--s) * .22); line-height: 1; color: var(--ouro-nome); }
.marca-nome { font: 600 calc(var(--s) * .62) / 1 var(--font-marca); letter-spacing: -.025em; color: inherit; }
.sobre-navy .marca, .app-header .marca, #entrada .marca, .sem-sessao .marca { color: var(--ouro-vivo); }
.roseta { --metal-1: #fbe08a; --metal-2: #a8730a; --aro: rgba(242,185,65,.7);
  position: relative; display: grid; place-items: center; flex: none; width: var(--s); aspect-ratio: 1; color: #fff; }
.roseta::before { content: ''; position: absolute; inset: 0; clip-path: var(--serra);
  background: conic-gradient(from 20deg, var(--metal-1), var(--metal-2), var(--metal-1), var(--metal-2), var(--metal-1)); }
.roseta::after { content: ''; position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #24426e, var(--navy-1) 72%); box-shadow: inset 0 0 0 calc(var(--s) * .03) var(--aro); }
.roseta > * { position: relative; z-index: 1; }
.roseta.prata { --metal-1: #f2f4f7; --metal-2: #8e9aab; --aro: rgba(214,220,229,.75); }
.roseta.bronze { --metal-1: #f0bf8c; --metal-2: #8a4f22; --aro: rgba(232,170,115,.7); }
.mse-marca { display: block; width: 58%; aspect-ratio: 733 / 217; background: currentColor;
  -webkit-mask: var(--mse-mask) center / contain no-repeat; mask: var(--mse-mask) center / contain no-repeat; }
.roseta .ini { font: 700 calc(var(--s) * .3) / 1 var(--font); letter-spacing: -.02em; }

/* ─── Entrada: a roseta cai girando, "Club" se revela, o placar conta até 10 ─── */
#entrada {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; align-content: center; gap: 22px;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(64,120,210,.45), transparent 62%),
    radial-gradient(600px 400px at 20% 110%, rgb(var(--ouro-rgb) / .18), transparent 60%),
    linear-gradient(118deg, var(--navy-1) 0%, #193053 68%, var(--navy-2) 100%);
  color: #fff;
}
#entrada .marca { --s: min(120px, 24vw); }
.en-placar { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); color: var(--ouro-vivo); font-size: 30px; font-weight: 600; opacity: 0; animation: en-aparece .35s 1.4s ease-out forwards; }
.en-placar .en-mais, .en-placar .en-pts { font-size: 15px; color: rgba(255,255,255,.65); font-weight: 500; }
.en-txt { font-size: 13px; color: rgba(255,255,255,.66); opacity: 0; animation: en-aparece .4s 2.1s ease-out forwards; }
@media (prefers-reduced-motion: no-preference) {
  #entrada .roseta { animation: en-roseta .9s .1s cubic-bezier(.3,1.4,.5,1) both; }
  #entrada .roseta::before { animation: en-serra 1.6s .1s cubic-bezier(.2,.7,.2,1) both; }
  #entrada .marca-nome { animation: en-nome .7s .7s cubic-bezier(.2,.7,.2,1) both; }
  #entrada.saindo { opacity: 0; transition: opacity .45s .15s ease; }
  #entrada.saindo .marca { transform: scale(1.06); transition: transform .6s ease; }
}
@keyframes en-roseta { from { transform: translateY(-110px) rotate(-160deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes en-serra { from { transform: rotate(-90deg); } to { transform: none; } }
@keyframes en-nome { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes en-aparece { to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .main > * { animation: conteudo-entra .38s var(--ease) backwards; }
  .main > *:nth-child(2) { animation-delay: .05s; }
  .main > *:nth-child(3) { animation-delay: .1s; }
}
@keyframes conteudo-entra { from { opacity: 0; transform: translateY(8px); } }

/* ─── Barra inferior (celular) ─── */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-around; gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.bi-btn { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 10.5px; font-weight: 600; border-radius: 10px; cursor: pointer; position: relative; }
.bi-btn i { font-size: 17px; }
.bi-btn.active { color: var(--mse); }
.bi-btn.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--mse); }
.bi-btn .badge { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-size: 9.5px; display: grid; place-items: center; padding: 0 4px; }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  body.tem-barra .app-shell { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.tem-barra #nav { display: none; }
  .hd-marca { padding: 10px 14px; order: -2; }
  .hd-marca .marca { --s: 28px; }
  .hd-portal { order: -1; margin: 6px 10px 6px auto; min-width: 40px; padding: 0 10px; }
  .hd-portal span { display: none; }
  .hd-carimbo { flex-basis: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .hd-campo { padding: 8px 12px; }
  .hd-oculta-cel { display: none; }
  .card { padding: 14px; }
  .grade-form { grid-template-columns: minmax(0, 1fr); }
  .toasts { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .regua { height: 110px; gap: 2px; }
  .anel { width: 72px; height: 72px; }
}
@media (min-width: 801px) { .barra-inferior { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─── Ordenação (Core.js): cabeçalho clicável com seta ─── */
table.tab thead th:not([data-nosort]):not(:empty) { cursor: pointer; user-select: none; }
table.tab thead th:not([data-nosort]):not(:empty):hover { color: var(--text); }
table.tab thead th:not([data-nosort]):not(:empty)::after { content: '\2195'; margin-left: 5px; opacity: .35; font-size: 10px; }
table.tab thead th[aria-sort="ascending"]::after { content: '\25B2'; opacity: .9; color: var(--mse); }
table.tab thead th[aria-sort="descending"]::after { content: '\25BC'; opacity: .9; color: var(--mse); }

/* Pódio com empate: avatares lado a lado no mesmo degrau */
.podio-avs { display: flex; justify-content: center; }
.podio-avs .podio-av + .podio-av { margin-left: -12px; }
.podio-bonus { margin-top: 4px; display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-weight: 700; }

/* =========================================================
   Revisão visual (Layout A · Carimbo) — 01/10/2026
   Navy só no cabeçalho; detalhes do Relatórios: malha de 36 px no
   cabeçalho, eyebrow com traço, marca azul no topo dos indicadores.
   ========================================================= */
.app-header { isolation: isolate; }
.app-header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none;
  background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.22) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.15) 50%, transparent 50.2%);
  background-size: 36px 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.hd-semana b { font-family: var(--font-mono); }

.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--mse); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: none; }

/* Frase-resumo (herdada do Início do Vision) */
.resumo { display: grid; gap: 10px; }
.resumo-frase { margin: 0; font-size: 1.28rem; line-height: 1.38; max-width: 38ch; text-wrap: balance; }
.resumo-frase b { font-weight: 600; }
.resumo-frase .pt { font-family: var(--font-mono); color: var(--ouro); font-weight: 600; }
.resumo-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.resumo-acoes .falta { font-size: 12.5px; color: var(--text-2); }
.prox { display: grid; gap: 6px; max-width: 420px; }
.prox .barra { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.prox .barra i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: linear-gradient(90deg, #f2b941, #d9971a); transition: width 1s var(--ease); }

/* Indicadores da semana: cards com a marca azul do Relatórios */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px 13px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); min-width: 0; }
.kpi::before { content: ''; position: absolute; left: 15px; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--kc, var(--mse)); }
.kpi small { font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kpi b { font: 600 1.45rem / 1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi b span { font-size: .8rem; font-weight: 400; color: var(--text-3); }
.kpi .tr { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.kpi .tr i { display: block; height: 100%; border-radius: 3px; background: var(--kc, var(--mse)); width: 0; transition: width .9s var(--ease); }
.kpi .det { font-size: 11.5px; color: var(--text-3); }

/* Saldo em card claro (o navy fica só no cabeçalho) */
.saldo-card { display: grid; gap: 12px; align-content: start; }
.saldo-card .num { font: 600 2.6rem / 1 var(--font-mono); color: var(--ouro); display: flex; align-items: baseline; gap: 8px; }
.saldo-card .num small { font: 500 .9rem var(--font); color: var(--text-3); }
.saldo-linha2 { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.saldo-linha2 div { display: grid; gap: 2px; }
.saldo-linha2 small { font-size: 11px; color: var(--text-3); }
.saldo-linha2 b { font: 600 1rem var(--font-mono); }

.ver-mais { justify-self: start; margin-top: 4px; }

/* Pódio compacto com rosetas de metal */
.podio { margin-bottom: 12px; gap: 8px; }
.podio-av { width: auto; height: auto; border: 0; background: none; }
.podio-av .roseta { --s: 46px; }
.podio-avs .podio-av + .podio-av { margin-left: -10px; }
.p1 .podio-base { min-height: 66px; } .p2 .podio-base { min-height: 52px; } .p3 .podio-base { min-height: 42px; }
.podio-base { padding: 7px 4px; font-size: 13px; }

@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .resumo-frase { font-size: 1.1rem; }
  .regua .dia.antigo { display: none; }   /* celular: só os últimos 12 dias */
  .regua-eixo .antigo { display: none; }
  .kpi b { font-size: 1.2rem; }
}
.regua-eixo .so-cel { display: none; }
@media (max-width: 800px) { .regua-eixo .so-cel { display: inline; } }

/* =========================================================
   Alinhamento com Vision/Relatórios — 02/10/2026
   Claro por padrão, fundo #e8eaee, cabeçalho de página (intro) do
   Relatórios, azul como ação e cores de critério só em tom claro.
   O ouro fica restrito aos números de pontos.
   ========================================================= */
body { background: var(--bg-0); }

/* Cabeçalho da página (intro do Relatórios) */
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 6px 6px; }
.intro-txt { display: grid; gap: 6px; min-width: 0; }
.intro .eyebrow { margin-bottom: 2px; }
.intro h1 { font: 600 30px / 1.15 var(--font); letter-spacing: -.035em; color: var(--text); }
.intro .lead { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.intro .resumo-frase { font-size: 14px; max-width: 62ch; }
.intro .lead b { color: var(--text); }
.intro .resumo-acoes { flex-shrink: 0; }

/* Botão de troca: ação é azul, como nos outros apps */
.btn.ouro { background: var(--mse); border-color: var(--mse); color: #fff; }
.btn.ouro:hover { background: var(--mse-dark); border-color: var(--mse-dark); color: #fff; box-shadow: 0 6px 16px rgb(var(--mse-rgb) / .3); }

/* Coluna lateral (saldo + regras) */
.coluna { display: grid; gap: 12px; align-content: start; min-width: 0; }
.saldo-card .prox { max-width: none; }
.saldo-card .prox .falta { font-size: 12.5px; color: var(--text-2); }

/* Regras como lista de linhas (report-row), ícone em tom claro */
.regras { gap: 0; }
.regra { background: none; border-radius: 0; padding: 12px 2px; border-top: 1px solid var(--border); }
.regra:first-child { border-top: 0; padding-top: 2px; }
[data-theme="dark"] .regra { background: none; }
.regra { grid-template-columns: 36px 1fr auto; }
.regra i { width: 36px; height: 36px; border-radius: 9px; font-size: 14px; color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, transparent); }

/* Pódio sóbrio: base clara com a cor do metal só no traço e no número */
.podio-base { color: var(--text); border: 1px solid var(--border); border-top: 3px solid var(--m);
  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 14%, var(--surface)), var(--surface)); }
.podio-base small { opacity: 1; color: var(--text-2); }
.podio-bonus { background: rgb(var(--ouro-rgb) / .16); color: var(--ouro); }

/* Marca azul do topo dos indicadores no tamanho do Relatórios */
.kpi::before { width: 54px; }

@media (max-width: 800px) {
  .intro { padding: 12px 4px 2px; align-items: stretch; }
  .intro h1 { font-size: 24px; }
  .intro .resumo-acoes { width: 100%; }
  .intro .resumo-acoes .btn { flex: 1; }
}

/* =========================================================
   v3 · 02/10/2026 — duas abas (Ranking e Vitrine), borda a borda.
   Uma faixa navy contínua (cabeçalho + abas + topo da tela) e o
   conteúdo claro embaixo. O momento animado de cada tela:
   Ranking = prédios em obra subindo andar por andar;
   Vitrine = saldo contando e etiquetas dos prêmios alcançáveis balançando.
   ========================================================= */
:root {
  --pad: clamp(14px, 3.4vw, 48px);
  --andar: clamp(11px, 2vh, 19px);
  --faixa-1: #13223b;
  --faixa-2: #1a3157;
  --fachada: #23406b;
  --janela: rgba(185, 210, 250, .34);
  --janela-lider: rgba(242, 185, 65, .78);
  --font-tit: 'Lora', Georgia, serif;
}

/* Shell sem margens */
.app-shell { max-width: none; padding: 0; gap: 0; }
.app-header { border-radius: 0; box-shadow: none; padding-inline: max(0px, calc(var(--pad) - 20px)); background: linear-gradient(118deg, var(--faixa-1), var(--faixa-2)); }
.app-header::before { display: none; }
.main { gap: 0; padding: 0 0 36px; }
.main > .card, .main > .grid-2, .main > .grid-3, .main > section:not(.rk):not(.vt):not(.pc) { margin: 18px var(--pad) 0; }
.rodape { padding: 18px var(--pad) 22px; }

/* Abas na faixa navy */
.top-nav { position: sticky; top: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 max(0px, calc(var(--pad) - 12px));
  background: var(--faixa-2); border-top: 1px solid rgba(255,255,255,.08); }
.top-nav .tni-btn { color: rgba(255,255,255,.7); min-height: 46px; }
.top-nav .tni-btn i { color: rgba(255,255,255,.5); }
.top-nav .tni-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.top-nav .tni-btn.active { color: #fff; }
.top-nav .tni-btn.active i { color: var(--ouro-vivo); }
.top-nav .tn-ind { background: var(--ouro-vivo); height: 3px; bottom: 0; border-radius: 3px 3px 0 0; }
.top-nav .tn-sep { background: rgba(255,255,255,.16); }
.top-nav .icon-btn { border-color: rgba(255,255,255,.2); color: #fff; }
.top-nav .icon-btn:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

/* Faixa navy de topo de tela (continua a das abas) */
.faixa { position: relative; isolation: isolate; color: #fff; padding: clamp(20px, 3.2vw, 36px) var(--pad) 0;
  background: linear-gradient(180deg, var(--faixa-2), var(--faixa-1)); overflow: hidden; }
.faixa::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.faixa h1 { font: 600 clamp(28px, 4.2vw, 46px) / 1.05 var(--font-tit); letter-spacing: -.02em; margin: 0; }
.faixa p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; max-width: 60ch; }

/* Seletor segmentado (escuro na faixa, claro no conteúdo) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.seg button { border: 0; background: none; color: rgba(255,255,255,.78); font: 500 13px var(--font); padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .2s, color .2s; min-height: 34px; }
.seg button:hover { color: #fff; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--faixa-1); font-weight: 600; }
.seg.claro { background: var(--surface); border-color: var(--border); }
.seg.claro button { color: var(--text-2); }
.seg.claro button:hover { color: var(--text); }
.seg.claro button[aria-pressed="true"] { background: var(--faixa-1); color: #fff; }
.seg-sel { font: 500 13px var(--font); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 0 30px 0 12px; min-height: 42px; }
.seg-sel option { color: var(--text); background: var(--surface); }

/* Metal extra da roseta: 4º e 5º */
.roseta.aco { --metal-1: #e3e8ef; --metal-2: #66758a; --aro: rgba(200,210,224,.6); }

/* ─── RANKING ─── */
.rk-palco-wrap { padding-bottom: 44px; }
.rk-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.rk-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rk-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; background: rgba(31,157,87,.22); color: #8fe3b4; font-size: 12px; font-weight: 600; }
.rk-palco { position: relative; min-height: calc(14 * var(--andar) + 150px); display: flex; align-items: flex-end; margin-top: 10px; }
.rk-carregando, .rk-palco-vazio { width: 100%; align-self: center; text-align: center; color: rgba(255,255,255,.75); }
.rk-carregando .ld { color: rgba(255,255,255,.8); }
.rk-sky { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(6px, 2.2vw, 30px); align-items: end; }
.rk-col { --subida: calc(var(--andares) * 55ms); display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rk-topo { height: 64px; display: flex; align-items: flex-end; padding-bottom: 8px; }
.rk-topo .roseta { --s: clamp(36px, 4.6vw, 54px); animation: rk-pousa .55s calc(var(--atraso) + var(--subida)) cubic-bezier(.3,1.5,.5,1) both; }
.rk-col.lider .rk-topo .roseta { --s: clamp(44px, 5.6vw, 66px); }
.rk-topo .roseta .ini { font-family: var(--font-tit); font-size: calc(var(--s) * .34); }
.rk-predio { position: relative; width: min(100%, 150px); height: calc(var(--andares) * var(--andar));
  background-color: var(--fachada);
  background-image:
    linear-gradient(180deg, var(--fachada) 0 3px, transparent 3px calc(var(--andar) - 4px), var(--fachada) calc(var(--andar) - 4px)),
    repeating-linear-gradient(90deg, var(--fachada) 0 7px, var(--jan, var(--janela)) 7px 17px, var(--fachada) 17px 20px);
  background-size: 100% var(--andar), 100% 100%;
  background-position: 0 0, 50% 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset -10px 0 0 rgba(0,0,0,.12);
  border-radius: 3px 3px 0 0;
  animation: rk-sobe var(--subida) var(--atraso) steps(var(--andares), end) both; }
.rk-predio::before { content: ''; position: absolute; left: 8%; right: 8%; top: -5px; height: 5px; background: var(--fachada); border-radius: 2px 2px 0 0; }
.rk-col.lider .rk-predio { --jan: var(--janela-lider); }
.rk-placa { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  background: var(--ouro-vivo); color: #2a1d02; font: 700 12px var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: rk-aparece .3s calc(var(--atraso) + var(--subida) + .35s) ease-out both; }
.rk-chao { position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); bottom: 58px; height: 8px;
  background: repeating-linear-gradient(135deg, var(--ouro-vivo) 0 10px, var(--faixa-1) 10px 20px); opacity: .9; }
.rk-rotulo { height: 66px; padding-top: 18px; display: grid; justify-items: center; gap: 1px; min-width: 0; max-width: 100%; text-align: center; }
.rk-rotulo b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rk-rotulo .nome-curto { display: none; }
.rk-num { font: 600 18px / 1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--ouro-vivo); }
.rk-col.eu .rk-rotulo b::after { content: ' (você)'; color: var(--ouro-vivo); font-weight: 500; }

@keyframes rk-sobe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rk-pousa { 0% { opacity: 0; transform: translateY(-46px) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@keyframes rk-aparece { from { opacity: 0; transform: translate(-50%, 6px); } }

.rk-baixo { padding: 0 var(--pad); }
.rk-eu-faixa { position: relative; z-index: 1; margin-top: -24px; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ouro-vivo); border-radius: 12px; box-shadow: var(--shadow-md); }
.rk-eu-faixa .roseta { --s: 40px; }
.rk-eu-faixa .roseta .ini { font-family: var(--font-tit); font-size: 13px; }
.rk-eu-faixa p { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.rk-eu-faixa p b { color: var(--text); }
.rk-lista-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; }
.rk-lista-cab h2 { font: 600 22px var(--font-tit); }
.rk-lista-cab > span { color: var(--text-3); font-size: 13px; }
.rk-busca { margin-left: auto; position: relative; display: flex; align-items: center; }
.rk-busca i { position: absolute; left: 12px; color: var(--text-3); font-size: 12px; pointer-events: none; }
.rk-busca input { font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px 0 32px; min-height: 40px; width: min(280px, 60vw); }
.rk-busca input:focus { outline: none; border-color: var(--mse); box-shadow: 0 0 0 3px rgb(var(--mse-rgb) / .15); }
.rk-ol { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rk-linha { display: grid; grid-template-columns: 48px minmax(0, 1.3fr) minmax(60px, 1fr) minmax(76px, auto); gap: 16px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--border); }
.rk-linha:first-child { border-top: 0; }
.rk-pos { font: 600 17px var(--font-tit); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rk-linha:nth-child(-n+3) .rk-pos { color: var(--ouro); }
.rk-quem { min-width: 0; display: grid; }
.rk-quem b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-quem small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-voce { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--faixa-1); color: var(--ouro-vivo); font-size: 10.5px; font-weight: 600; vertical-align: 2px; }
.rk-trilho { height: 6px; border-radius: 3px; background: var(--bg-1); overflow: hidden; }
.rk-trilho i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--fachada), var(--mse)); }
.rk-pts { text-align: right; font: 600 15px var(--font); font-variant-numeric: tabular-nums; color: var(--ouro); display: grid; }
.rk-pts small { font-size: 11px; font-weight: 500; color: var(--text-3); }
.rk-linha.eu { background: rgb(var(--ouro-rgb) / .09); box-shadow: inset 4px 0 0 var(--ouro-vivo); }
.rk-linha.pisca { animation: rk-pisca 1.4s ease-out; }
@keyframes rk-pisca { 0%, 40% { background: rgb(var(--ouro-rgb) / .35); } }
[data-theme="dark"] .rk-trilho { background: rgba(255,255,255,.06); }

/* ─── VITRINE ─── */
.vt-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 32px; flex-wrap: wrap; padding-bottom: clamp(22px, 3vw, 34px); }
.vt-saldo { display: grid; justify-items: end; line-height: 1; }
.vt-saldo small { font-size: 13px; color: rgba(255,255,255,.66); margin-bottom: 6px; }
.vt-saldo b { font: 600 clamp(42px, 6.4vw, 72px) / 1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ouro-vivo); }
.vt-saldo span { font-size: 13px; color: rgba(255,255,255,.66); margin-top: 4px; }
.vt-barra-ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px var(--pad); }
.vt-link { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--mse); font-weight: 600; font-size: 13.5px; text-decoration: none; min-height: 40px; }
.vt-link:hover { text-decoration: underline; }
.vt-lista { padding: 0 var(--pad); }
.vt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.vt-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.vt-vitrine { position: relative; aspect-ratio: 4 / 3; border-radius: 13px 13px 0 0; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff, #e6eaf0); }
[data-theme="dark"] .vt-vitrine { background: radial-gradient(120% 90% at 50% 20%, #22304a, #141d2f); }
.vt-vitrine img { width: 100%; height: 100%; object-fit: cover; }
.vt-ph { font-size: 56px; color: var(--fachada); opacity: .22; }
/* Etiqueta de loja presa por um barbante */
.vt-etiqueta { position: absolute; top: 18px; right: 16px; display: grid; justify-items: center; padding: 14px 6px 8px; width: 76px;
  background: var(--surface); color: var(--text); border-radius: 4px 4px 8px 8px;
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); filter: drop-shadow(0 3px 6px rgba(19,34,59,.18));
  transform-origin: 50% -14px; }
.vt-vitrine::after { content: ''; position: absolute; top: 0; right: calc(16px + 38px); width: 1px; height: 24px; background: rgba(19,34,59,.35); }
.vt-furo { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--border-strong); margin-bottom: 4px; }
.vt-etiqueta b { font: 600 19px / 1 var(--font); font-variant-numeric: tabular-nums; }
.vt-etiqueta small { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.vt-item.pode .vt-etiqueta { background: linear-gradient(180deg, #f8d27a, #e2a52a); color: #2a1d02; animation: vt-balanca 1.8s calc(.9s + var(--k) * .09s) ease-out both; }
.vt-item.pode .vt-etiqueta small { color: #5b3f05; }
.vt-item.pode { border-color: rgb(var(--ouro-rgb) / .55); }
@keyframes vt-balanca { 0% { transform: rotate(0); } 18% { transform: rotate(16deg); } 38% { transform: rotate(-10deg); } 58% { transform: rotate(6deg); } 78% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.vt-corpo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.vt-corpo h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.vt-corpo p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vt-estoque { font-size: 11.5px; color: var(--text-3); }
.vt-acao { margin-top: auto; padding-top: 10px; display: grid; gap: 6px; }
.vt-trocar { width: 100%; }
.vt-falta { font-size: 12.5px; color: var(--text-2); }
.vt-falta b { color: var(--text); font-variant-numeric: tabular-nums; }
.vt-barra { height: 6px; border-radius: 3px; background: var(--bg-1); overflow: hidden; }
.vt-barra i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #f2b941, #d9971a); transition: width 1.1s var(--ease); }
.vt-item.esgotado { opacity: .62; }
.vt-item.esgotado .vt-vitrine { filter: grayscale(1); }
.vt-item.inativo { opacity: .55; border-style: dashed; }
.vt-vazio-filtro, .vt-sem-pedido { color: var(--text-3); font-size: 13.5px; margin: 14px 0 0; }
.vt-ped-sec { padding: 34px var(--pad) 0; scroll-margin-top: 60px; }
.vt-ped-sec h2 { font: 600 22px var(--font-tit); margin-bottom: 12px; }
.vt-pedidos { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.vt-pedidos li { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.vt-pedidos li:first-child { border-top: 0; }
.vt-ped-nome { display: grid; min-width: 0; }
.vt-ped-nome b { font-size: 14px; }
.vt-ped-nome small { font-size: 12px; color: var(--text-3); }
.vt-ped-pts { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ─── Celular ─── */
@media (max-width: 640px) {
  :root { --andar: 12px; }
  .rk-cab, .vt-cab { align-items: stretch; }
  .rk-ctrl { width: 100%; }
  .rk-ctrl .seg-sel { flex: 1; }
  .rk-predio { width: 100%; }
  .rk-rotulo .nome-longo { display: none; }
  .rk-rotulo .nome-curto { display: inline; }
  .rk-rotulo b { font-size: 12px; }
  .rk-num { font-size: 14px; }
  .rk-placa { font-size: 10px; padding: 1px 5px; top: 6px; }
  .rk-col.eu .rk-rotulo b::after { content: ''; }
  .rk-eu-faixa { flex-wrap: wrap; }
  .rk-busca { margin-left: 0; width: 100%; }
  .rk-busca input { width: 100%; }
  .rk-linha { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 11px 14px; }
  .rk-trilho { display: none; }
  .vt-saldo { justify-items: start; }
  .vt-link { margin-left: 0; }
  .vt-pedidos li { grid-template-columns: minmax(0, 1fr) auto; }
  .vt-pedidos li .st { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-predio, .rk-topo .roseta, .rk-placa, .vt-item.pode .vt-etiqueta, .rk-linha.pisca { animation: none; }
  .vt-barra i { transition: none; }
}
/* Vitrine no celular: card horizontal (vitrine à esquerda) para caber mais prêmios na tela */
@media (max-width: 640px) {
  .vt-grade { gap: 10px; }
  .vt-item { flex-direction: row; }
  .vt-vitrine { flex: 0 0 116px; aspect-ratio: auto; min-height: 132px; border-radius: 13px 0 0 13px; }
  .vt-ph { display: none; }   /* sem foto, a etiqueta é o destaque */
  .vt-etiqueta { top: 16px; left: 50%; right: auto; margin-left: -34px; width: 68px; padding: 12px 4px 6px; }
  .vt-etiqueta b { font-size: 16px; }
  .vt-vitrine::after { right: auto; left: 50%; height: 22px; }
  .vt-corpo { padding: 12px 14px; }
  .vt-corpo p { -webkit-line-clamp: 2; }
}

/* =========================================================
   v4 · 02/10/2026 — Ranking só semanal e com a animação em destaque;
   aba Encarregados (cards + memória de cálculo em modal).
   ========================================================= */
:root { --andar: clamp(12px, 3vh, 26px); }
.rk-palco { min-height: calc(14 * var(--andar) + 150px); margin-top: 18px; }
.rk-palco-wrap { padding-bottom: 52px; }
.rk-replay { width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.rk-replay:hover { background: rgba(255,255,255,.16); }
.rk-replay:hover i { transform: rotate(120deg); }
.rk-replay i { transition: transform .4s var(--ease); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rk-baixo { padding-bottom: 8px; }

/* Aba Encarregados */
.pc-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding-bottom: clamp(22px, 3vw, 34px); }
.pc-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px var(--pad); }
.pc-ctrl .rk-busca { margin-left: 0; }
.pc-obra { width: auto; min-width: 200px; max-width: 100%; }
.pc-n { margin-left: auto; color: var(--text-3); font-size: 13px; }
.pc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(10px, 1.4vw, 16px); padding: 0 var(--pad); }
.pc-card { display: grid; gap: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); }
.pc-card:hover { border-color: rgb(var(--mse-rgb) / .45); box-shadow: 0 8px 22px rgba(19,34,59,.1); transform: translateY(-2px); }
.pc-card:hover .pc-ver { color: var(--mse); }
.pc-card:hover .pc-ver i { transform: translateX(3px); }
.pc-card.eu { border-color: rgb(var(--ouro-rgb) / .6); box-shadow: inset 4px 0 0 var(--ouro-vivo), var(--shadow-sm); }
.pc-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-topo .roseta { --s: 40px; }
.pc-topo .roseta .ini, .mc-cab .roseta .ini { font-family: var(--font-tit); font-size: 13px; }
.pc-quem { display: grid; min-width: 0; }
.pc-quem b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-quem small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Seis prédios pequenos: um por dia, altura = pontos do dia (de 10) */
.pc-dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 64px; align-items: end; }
.pc-dia { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 3px; }
.pc-dia i { align-self: end; display: block; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--mse), var(--fachada)); }
.pc-dia.dez i { background: linear-gradient(180deg, var(--ouro-vivo), #c98a0e); }
.pc-dia.vazio i { height: 3px; background: var(--border-strong); }
.pc-dia small { text-align: center; font-size: 10.5px; color: var(--text-3); }
.pc-rod { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pc-pts { font-size: 12.5px; color: var(--text-3); }
.pc-pts b { font: 600 20px var(--font); font-variant-numeric: tabular-nums; color: var(--ouro); }
.pc-bonus { padding: 1px 8px; border-radius: 999px; background: rgb(var(--ouro-rgb) / .14); color: var(--ouro); font-size: 11.5px; font-weight: 600; }
.pc-ver { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 500; white-space: nowrap; }
.pc-ver i { font-size: 10px; transition: transform .18s; }
@media (prefers-reduced-motion: no-preference) {
  .pc-dia i { animation: pc-cresce .5s calc(var(--k) * 45ms) var(--ease) both; transform-origin: bottom; }
}
@keyframes pc-cresce { from { transform: scaleY(0); } }

/* Memória de cálculo */
.modal.modal-largo { width: min(720px, 100%); }
.mc-kpis { margin-top: 14px; }
.mc-graf { display: grid; gap: 12px; margin: 12px 0 14px; }
.mc-graf .card { margin: 0; }
.mc-regua .regua { gap: 8px; height: 120px; }
.mc-regua .regua .dia { border-radius: 5px; }
.mc-regua .regua-eixo { gap: 4px; font-size: 10px; }
.mc-regua .regua-eixo span { flex: 1 1 0; text-align: center; white-space: nowrap; overflow: hidden; }
@media (max-width: 520px) { .mc-regua .regua-eixo { font-size: 9px; } .mc-regua .regua-eixo span { white-space: normal; } }
.mc-cab { display: flex; align-items: center; gap: 12px; }
.mc-cab .roseta { --s: 44px; }
.mc-cab b { display: block; font-size: 15px; }
.mc-cab small { font-size: 12.5px; color: var(--text-3); }
.mc-dias { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mc-dia { display: grid; grid-template-columns: 92px minmax(0, 1fr) 56px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.mc-dia:first-child { border-top: 0; }
.mc-dia.vazio { color: var(--text-3); background: var(--bg-1); }
[data-theme="dark"] .mc-dia.vazio { background: rgba(255,255,255,.03); }
.mc-data { font-size: 13px; color: var(--text-2); }
.mc-data b { color: var(--text); text-transform: capitalize; }
.mc-sem { font-size: 12.5px; }
.mc-crit { display: grid; gap: 4px; }
.mc-c { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.mc-c b { font-variant-numeric: tabular-nums; font-size: 13.5px; text-align: right; }
.mc-c small { font-size: 12.5px; color: var(--text-2); }
.mc-c.a b { color: var(--c-ader); } .mc-c.q b { color: var(--c-qual); } .mc-c.p b { color: var(--c-assid); }
.mc-tot { text-align: right; font: 600 17px var(--font); font-variant-numeric: tabular-nums; color: var(--ouro); }
.mc-soma { margin: 0; display: grid; gap: 4px; padding: 0 14px; }
.mc-soma div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.mc-soma dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.mc-soma .tot { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text); font-weight: 600; }
.mc-soma .tot dd { color: var(--ouro); font-size: 18px; }
.mc-regra { font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 10px; }
.mc-regra summary { cursor: pointer; font-weight: 600; color: var(--mse); min-height: 32px; display: flex; align-items: center; }
.mc-regra ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }

@media (max-width: 640px) {
  .pc-n { margin-left: 0; width: 100%; }
  .pc-ctrl .rk-busca, .pc-obra { flex: 1 1 100%; }
  .mc-dia { grid-template-columns: minmax(0, 1fr) auto; }
  .mc-dia .mc-crit { grid-column: 1 / -1; grid-row: 2; }
  .mc-dia .mc-tot { grid-column: 2; grid-row: 1; }
  .rk-ctrl .seg-sel { flex: 1; }
}

/* Consulta pessoal da memória de cálculo. */
.memoria { display: grid; gap: 18px; }
.mem-cab { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; padding-bottom: clamp(22px, 3vw, 34px); border-radius: 14px; }
.mem-cab .eyebrow { color: var(--ouro-vivo); }
.mem-cab p { margin-bottom: 0; }
.mem-meses { display: flex; align-items: center; gap: 12px; }
.mem-meses strong { display: block; min-width: 155px; text-align: center; }
.mem-meses strong::first-letter { text-transform: uppercase; }
.mem-mes-cab { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.mem-mes-cab h2 { font: 600 22px var(--font-tit); margin: 0; }
.mem-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mem-resumo > div { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.mem-resumo small { color: var(--text-3); }
.mem-resumo b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--ouro); }
.mem-lista { display: grid; gap: 10px; }
.mem-dia { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mem-dia summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; padding: 15px 18px; }
.mem-dia summary::marker { content: ''; }
.mem-dia summary span { display: grid; gap: 3px; }
.mem-dia summary small, .mem-conta small { color: var(--text-3); }
.mem-dia summary strong { color: var(--ouro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-dia[open] { border-color: rgb(var(--mse-rgb) / .45); }
.mem-conta { display: grid; gap: 0; padding: 0 18px 10px; }
.mem-conta > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.mem-conta > div > span { display: grid; gap: 3px; }
.mem-conta > div > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-bonus { list-style: none; padding: 0; margin: 12px 0 0; }
.mem-bonus li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.mem-bonus b { color: var(--ouro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-nota { color: var(--text-3); font-size: 13px; margin: 0; }
@media (max-width: 640px) {
  .mem-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mem-resumo > div:last-child { grid-column: 1 / -1; }
  .mem-meses { width: 100%; justify-content: space-between; }
}

/* Meus pontos: cabeçalho, indicadores e cards na mesma largura. */
.main > .intro, .main > .kpis { margin: 18px var(--pad) 0; }
.main > .intro { padding-left: 0; padding-right: 0; }

/* Extrato: os três critérios aparecem por nome em cada dia. */
.ex-dias, .ex-movs { list-style: none; margin: 0; padding: 0; }
.ex-dia { display: grid; grid-template-columns: 145px minmax(0, 1fr) 76px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.ex-dia:first-child { border-top: 0; padding-top: 0; }
.ex-dia-top { display: contents; }
.ex-dia-top time { grid-column: 1; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ex-dia-top strong { grid-column: 3; grid-row: 1; text-align: right; color: var(--ouro); font: 600 16px var(--font-mono); white-space: nowrap; }
.ex-dia-top strong small, .ex-mov strong small { font: 500 11px var(--font); }
.ex-partes { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-parcela { display: grid; gap: 2px; padding-left: 8px; border-left: 3px solid var(--c-ader); min-width: 0; }
.ex-parcela.q { border-color: var(--c-qual); }
.ex-parcela.p { border-color: var(--c-assid); }
.ex-parcela small { font-size: 10.5px; color: var(--text-3); }
.ex-parcela b { font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.ex-subtitulo { font-size: 13px; margin: 18px 0 5px; }
.ex-mov { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ex-mov > span { display: grid; gap: 3px; min-width: 0; }
.ex-mov > span b { font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.ex-mov > span small { font-size: 11px; color: var(--text-3); }
.ex-mov > strong { flex: none; font: 600 13px var(--font-mono); }
@media (max-width: 700px) {
  .ex-dia { display: block; padding: 13px 0; }
  .ex-dia-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
  .ex-partes { gap: 5px; }
  .ex-parcela { padding-left: 6px; }
}
@media (max-width: 360px) {
  .dia-crits { grid-template-columns: 1fr; gap: 0; }
  .crit { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 2px 10px; text-align: left; padding: 9px 0; border-top: 1px solid var(--border); }
  .crit:first-child { border-top: 0; }
  .crit .anel { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .crit .anel .rot b { font-size: 14px; }
  .crit .anel .rot small { font-size: 8px; }
  .crit-nome, .crit-det { grid-column: 2; }
}

/* Campanha vetorial: o capacete em perspectiva é desenhado por traços. */
.rd-demo { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-1); }
.rd-hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 250px; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 83% 23%, rgba(77,134,213,.58), transparent 42%), linear-gradient(125deg, #11233f, #204372 70%, #254f84); }
.rd-copy { position: relative; z-index: 1; padding: 22px 0 20px 20px; display: flex; flex-direction: column; align-items: flex-start; }
.rd-kicker { color: #f7c75f; font: 700 10px var(--font-mono); letter-spacing: .1em; }
.rd-copy h3 { font: 600 clamp(20px, 2vw, 25px)/1.15 var(--font-tit); letter-spacing: -.025em; margin: 8px 0; max-width: 14ch; }
.rd-copy p { margin: 0; max-width: 25ch; color: #d5e5f8; font-size: 11.5px; line-height: 1.45; }
.rd-placar { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.rd-placar strong { color: #ffca57; font: 700 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; text-shadow: 0 3px 18px rgba(242,185,65,.2); }
.rd-placar span { font-size: 10.5px; line-height: 1.2; color: #e1ecfa; }
.rd-vitrine { border: 1px solid #ffe2a0; border-radius: 8px; background: #ffd475; color: #2b210c; padding: 8px 12px; font: 700 11.5px var(--font); cursor: pointer; box-shadow: 0 5px 16px rgba(0,0,0,.15); }
.rd-vitrine:hover { background: #ffe3a4; }
.rd-vitrine span { margin-left: 4px; font-size: 14px; }
.rd-arte { display: block; width: 100%; height: auto; align-self: center; overflow: visible; }
.rd-arte path, .rd-arte ellipse { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rd-casco { stroke: var(--cap-ink); stroke-width: 2.3; }
.rd-relevo { stroke: var(--cap-ink); stroke-width: 1.6; }
.rd-detalhe { stroke: var(--cap-side); stroke-width: 1.25; }
.rd-presente { stroke: var(--cap-gold); stroke-width: 1.8; }
.rd-fio { stroke: var(--cap-gold); stroke-width: 1.2; opacity: .65; }
.rd-sombra { stroke: var(--cap-side); stroke-width: .7; opacity: .16; }
.rd-traco { stroke-dasharray: var(--rd-comprimento, 10000); stroke-dashoffset: var(--rd-comprimento, 10000); }
.rd-desenhando .rd-traco { animation: rd-tracar var(--rd-duracao, 1.8s) cubic-bezier(.3,.05,.3,1) var(--rd-espera, 0s) forwards; }
@keyframes rd-tracar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd-desenhando .rd-traco { animation: none; stroke-dashoffset: 0; }
}

/* A cena inicial acompanha o tema e usa o saldo real do encarregado. */
.pontos-home { margin: 18px var(--pad) 0; }
/* Tamanhos e quebra de coluna pela largura do PRÓPRIO cartão (container query), não da janela:
   o número de pontos cabe na coluna de texto e nunca invade o desenho. */
.pontos-cena { margin: 0; border-radius: 18px; box-shadow: var(--shadow-sm);
  --cap-ink: #294b6c; --cap-side: #7792a9; --cap-gold: #b88328;
  container: cena / inline-size; }
.pontos-cena .rd-copy { container: cena-texto / inline-size; min-width: 0; }
.pontos-cena .rd-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: min(70vh, 660px);
  color: var(--text); background: linear-gradient(125deg, #ffffff, #f4f8fc); }
.pontos-cena .rd-copy { justify-content: center; padding: clamp(26px, 4vw, 64px); }
.pontos-cena .rd-kicker { color: #805605; font-size: 12px; }
.pontos-cena .rd-copy h1 { max-width: 15ch; font: 500 clamp(28px, 9cqi, 54px)/1.12 var(--font-tit); letter-spacing: -.035em; margin: 14px 0; }
.pontos-cena .rd-copy p { color: var(--text-2); max-width: 34ch; font-size: clamp(14px, 3.4cqi, 17px); }
.pontos-cena .rd-placar { gap: 6px 14px; margin: 28px 0; flex-wrap: wrap; max-width: 100%; }
/* ~7 dígitos mono ≈ 4,2em: 18cqi deixa o saldo dentro da coluna mesmo na casa do milhar */
.pontos-cena .rd-placar strong { color: var(--ouro); font-size: clamp(44px, 18cqi, 110px); white-space: nowrap; }
.pontos-cena .rd-placar span { color: var(--text-2); font-size: 15px; font-weight: 600; }
.pontos-cena-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pontos-cena .rd-vitrine { font-size: 13px; padding: 12px 16px; }
.rd-memoria { border: 1px solid var(--border-strong); border-radius: 8px; background: color-mix(in srgb, var(--surface) 65%, transparent);
  color: var(--text); padding: 12px 16px; font: 600 13px var(--font); cursor: pointer; }
.rd-memoria:hover { border-color: var(--mse); }
.pontos-cena .rd-arte { max-height: 560px; align-self: center; padding-right: 20px; }
[data-theme="dark"] .pontos-cena .rd-hero { color: #fff;
  background: linear-gradient(125deg, #14243e, #203a5e); }
[data-theme="dark"] .pontos-cena .rd-kicker { color: #f7c75f; }
[data-theme="dark"] .pontos-cena .rd-copy p, [data-theme="dark"] .pontos-cena .rd-placar span { color: #d5e5f8; }
[data-theme="dark"] .pontos-cena .rd-placar strong { color: #ffca57; }
[data-theme="dark"] .pontos-cena { --cap-ink: #b4cee4; --cap-side: #8aa3ba; --cap-gold: #e4b960; }
[data-theme="dark"] .rd-memoria { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); color: #fff; }
.mem-historico { display: grid; gap: 14px; margin-top: 6px; }
.mem-historico .faixa { border-radius: 12px; padding: 18px 22px; }
.mem-historico .faixa h2 { margin: 4px 0 0; }
.mem-historico .faixa p { margin: 5px 0 0; }
#mem-graficos { display: grid; gap: 12px; }
/* Cartão estreito (celular, tablet em pé, janela dividida ou com menu lateral): texto em cima, capacete embaixo. */
@container cena (max-width: 860px) {
  .pontos-cena .rd-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pontos-cena .rd-copy { padding: 28px 22px 0; }
  .pontos-cena .rd-copy h1 { font-size: clamp(28px, 7.5cqi, 42px); }
  .pontos-cena .rd-placar { margin: 22px 0; }
  .pontos-cena .rd-placar strong { font-size: clamp(44px, 14cqi, 76px); }
  .pontos-cena .rd-arte { height: auto; max-height: 48vh; margin: 14px auto 16px; padding: 0 12px; }
}
/* Tela baixa (celular deitado): o desenho não empurra o saldo para fora da vista. */
@media (max-height: 520px) {
  .pontos-cena .rd-hero { min-height: 0; }
  .pontos-cena .rd-arte { max-height: 70vh; }
}
@media (max-width: 390px) {
  .pontos-cena-acoes { align-items: stretch; flex-direction: column; }
  .pontos-cena-acoes button { width: 100%; }
}

/* Resgates: linha cuja situação no Portal acabou de mudar (atualização automática) */
@media (prefers-reduced-motion: no-preference) {
  .tab tr.linha-mudou td { animation: linha-mudou 2.4s ease-out; }
}
@keyframes linha-mudou { from { background: rgb(var(--ouro-rgb) / .22); } }

/* Cabeçalhos compactos da Vitrine e da Memória de cálculo: faixa fina, saldo em linha.
   Especificidade .faixa.xxx para valer sobre .faixa e sobre o ajuste de celular (.vt-cab stretch). */
.faixa.vt-cab, .faixa.mem-cab { padding-top: clamp(12px, 1.6vw, 18px); padding-bottom: clamp(12px, 1.6vw, 18px); align-items: center; gap: 8px 24px; }
.faixa.vt-cab h1, .faixa.mem-cab h1 { font-size: clamp(19px, 2.2vw, 24px); }
.faixa.vt-cab p, .faixa.mem-cab p { margin-top: 3px; font-size: 12.5px; line-height: 1.4; }
.faixa.mem-cab .eyebrow { display: none; }
.faixa.vt-cab .vt-saldo { grid-auto-flow: column; align-items: baseline; gap: 6px; }
.faixa.vt-cab .vt-saldo small, .faixa.vt-cab .vt-saldo span { margin: 0; font-size: 12px; }
.faixa.vt-cab .vt-saldo b { font-size: clamp(24px, 3vw, 32px); }
@media (max-width: 640px) {
  .faixa.vt-cab, .faixa.mem-cab { flex-wrap: nowrap; justify-content: space-between; }
  .faixa.vt-cab p, .faixa.mem-cab p { display: none; }
  .faixa.vt-cab .vt-saldo small { display: none; }
}
/* Cadastro de encarregados: identidade, contato e saldo com hierarquia própria. */
.cadastro-topo { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; }
.cadastro-topo h2 { margin:4px 0 6px; }
.cadastro-topo p { margin:0; color:var(--text-2); font-size:13px; }
.cadastro-origem { display:flex; gap:7px; align-items:center; color:var(--text-2); font-size:12px; white-space:nowrap; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.cadastro-resumo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:12px; margin-bottom:20px; overflow:hidden; }
.cadastro-resumo > div { display:flex; flex-direction:column; gap:5px; padding:16px 20px; }
.cadastro-resumo > div + div { border-left:1px solid var(--border); }
.cadastro-resumo strong { font:600 26px/1.15 var(--font-mono); color:var(--text); }
.cadastro-resumo span { color:var(--text-2); font-size:12px; }
.cadastro-filtros { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cadastro-busca { display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid var(--border-strong); border-radius:9px; flex:1; min-width:180px; max-width:440px; color:var(--text-3); }
.cadastro-busca:focus-within { outline:2px solid var(--ouro); outline-offset:2px; }
.cadastro-busca .inp { min-width:0; width:100%; border:0; outline:0; box-shadow:none; padding:10px 0; background:transparent; }
#en-contagem { margin-left:auto; color:var(--text-3); font-size:12px; }
.cadastro-colunas,.cadastro-pessoa { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(130px,.85fr) 138px; gap:22px; }
.cadastro-colunas { padding:12px 16px; background:var(--bg-2); border-radius:8px; color:var(--text-3); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cadastro-pessoa { padding:22px 16px; border-bottom:1px solid var(--border); align-items:start; }
.cadastro-pessoa:last-child { border-bottom:0; }
.cadastro-pessoa > div { min-width:0; overflow-wrap:anywhere; }
.cadastro-identidade h3 { font:600 14px/1.5 var(--font); margin:0 0 8px; color:var(--text); }
.cadastro-identidade p { margin:4px 0 0; color:var(--text-3); font-size:12px; line-height:1.5; }
.cadastro-identidade .cadastro-empresa { color:var(--text-2); margin-top:9px; }
.cadastro-tags { display:flex; flex-wrap:wrap; gap:5px; }
.cadastro-tags span { border:1px solid var(--border); border-radius:5px; padding:2px 6px; color:var(--text-2); font-size:10px; font-weight:600; }
.cadastro-contato { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--text-2); }
.cadastro-contato .mono { color:var(--text); font-size:13px; }
.cadastro-legenda { color:var(--text-3); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cadastro-ausente { color:var(--text-3); }
.cadastro-pontos { display:flex; flex-direction:column; gap:6px; }
.cadastro-pontos strong { font:600 22px/1.2 var(--font-mono); color:var(--text); }
.cadastro-pontos small { font:400 11px var(--font); color:var(--text-3); }
.cadastro-ultimo { font-size:11px; line-height:1.5; color:var(--text-3); }
.cadastro-acoes { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.cadastro-acoes [data-ex] { flex-basis:100%; }
@media(max-width:1100px) {
  .cadastro-colunas,.cadastro-pessoa { grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(110px,.7fr); gap:16px; }
  .cadastro-colunas span:last-child { display:none; }
  .cadastro-acoes { grid-column:1/-1; justify-content:flex-start; }
  .cadastro-acoes [data-ex] { flex-basis:auto; }
}
@media(max-width:650px) {
  .cadastro-topo { flex-direction:column; gap:10px; }
  .cadastro-resumo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cadastro-resumo > div { padding:14px; }
  .cadastro-resumo > div:nth-child(3) { border-left:0; }
  .cadastro-resumo > div:nth-child(n+3) { border-top:1px solid var(--border); }
  .cadastro-filtros { gap:10px; }
  .cadastro-busca { flex-basis:100%; max-width:none; }
  .cadastro-colunas { display:none; }
  .cadastro-pessoa { grid-template-columns:minmax(0,1fr); padding:20px 0; gap:16px; }
  .cadastro-contato { padding-top:14px; border-top:1px solid var(--border); }
  .cadastro-pontos { gap:4px; }
  .cadastro-acoes .btn { min-height:38px; }
}
.rmi-aviso { padding:14px 18px; margin-bottom:20px; border:1px solid var(--border); border-left:3px solid var(--ouro); border-radius:8px; color:var(--text-2); font-size:13px; line-height:1.6; background:var(--bg-2); }
.rmi-obra { border:1px solid var(--border); border-radius:12px; margin:16px 0; overflow:hidden; transition:border-color .15s; }
.rmi-obra.rmi-alterada { border-color:var(--ouro); }
.rmi-obra-topo { display:flex; gap:14px; justify-content:space-between; align-items:center; padding:20px 22px 0; }
.rmi-obra-topo h3 { font:600 16px/1.5 var(--font); margin:5px 0 0; overflow-wrap:anywhere; }
.rmi-situacao { border:1px solid var(--border); color:var(--text-2); border-radius:20px; padding:5px 10px; font-size:11px; white-space:nowrap; }
.rmi-campos { display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:18px; padding:22px; }
.rmi-campo { display:flex; flex-direction:column; gap:8px; min-width:0; }
.rmi-campo > span { font-size:12px; font-weight:600; color:var(--text); }
.rmi-campo small { color:var(--text-3); font-size:11px; line-height:1.5; }
.rmi-campo select { appearance:none; width:100%; min-width:0; min-height:46px; padding:10px 36px 10px 12px; border:1px solid var(--border-strong); border-radius:9px; background-color:var(--surface); color:var(--text); font:400 13px var(--font); text-overflow:ellipsis; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23718096' stroke-width='1.7'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; transition:border-color .15s,box-shadow .15s; }
.rmi-campo select:hover:not(:disabled) { border-color:var(--text-3); }
.rmi-campo select:focus-visible { outline:2px solid var(--ouro); outline-offset:3px; }
.rmi-campo select:disabled { cursor:not-allowed; opacity:.6; }
.rmi-rodape { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 22px; border-top:1px solid var(--border); background:var(--bg-2); }
.rp-status { color:var(--text-3); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.rmi-rodape .rp-salvar { min-height:42px; padding:10px 18px; border-radius:9px; font-weight:600; flex-shrink:0; }
.rmi-rodape .rp-salvar:disabled { opacity:.55; cursor:default; }
@media(max-width:1000px) { .rmi-campos { grid-template-columns:repeat(2,minmax(0,1fr)); } .rmi-principal { grid-column:1/-1; } }
@media(max-width:600px) { .rmi-obra-topo { flex-direction:column; align-items:flex-start; padding:16px 16px 0; } .rmi-campos { grid-template-columns:minmax(0,1fr); padding:18px 16px; } .rmi-rodape { flex-direction:column; align-items:stretch; padding:14px 16px; } .rmi-rodape .rp-salvar { width:100%; } }
.rmi-campo select[hidden] { display:none; }
.sb-gatilho { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text); font:400 13px/1.5 var(--font); text-align:left; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.sb-gatilho > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-seta { color:var(--text-3); font-size:20px; line-height:1; flex-shrink:0; }
.sb-gatilho:hover:not(:disabled) { border-color:var(--text-3); box-shadow:0 3px 12px rgba(15,23,42,.05); }
.sb-gatilho:focus-visible,.sb-gatilho[aria-expanded="true"] { outline:2px solid var(--ouro); outline-offset:2px; }
.sb-gatilho:disabled { opacity:.55; cursor:not-allowed; background:var(--bg-2); }
.sb-painel { position:fixed; z-index:10020; display:flex; flex-direction:column; min-height:140px; padding:8px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:0 16px 48px rgba(8,20,40,.22),0 3px 10px rgba(8,20,40,.08); overflow:hidden; }
.sb-pesquisa { display:flex; align-items:center; gap:9px; flex-shrink:0; border:1px solid var(--border-strong); background:var(--bg-2); border-radius:9px; padding:6px 8px 6px 12px; }
.sb-pesquisa > span { font-size:23px; color:var(--text-3); }
.sb-pesquisa input { flex:1; min-width:0; width:100%; padding:5px 0; border:0; outline:0; background:transparent; color:var(--text); font:400 13px var(--font); }
.sb-pesquisa:focus-within { border-color:var(--ouro); }
.sb-fechar { width:30px; height:30px; border:0; border-radius:6px; background:transparent; font-size:22px; color:var(--text-3); cursor:pointer; }
.sb-fechar:hover { background:var(--surface); color:var(--text); }
.sb-contagem { flex-shrink:0; padding:10px 9px 7px; color:var(--text-3); font-size:11px; }
.sb-opcoes { overflow-y:auto; min-height:0; overscroll-behavior:contain; scrollbar-width:thin; }
.sb-opcoes [role="option"] { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid transparent; border-radius:8px; cursor:pointer; margin-bottom:3px; }
.sb-opcoes [role="option"] > div { min-width:0; flex:1; }
.sb-titulo { display:block; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.sb-codigo { display:block; margin-top:3px; font:400 10px/1.5 var(--font-mono); color:var(--text-3); }
.sb-opcoes [role="option"]:hover,.sb-opcoes .sb-ativa { background:var(--bg-2); border-color:var(--border); }
.sb-opcoes [aria-selected="true"] .sb-titulo { font-weight:600; }
.sb-check { color:var(--ouro); font-size:17px; width:18px; flex-shrink:0; }
.sb-ajuda { flex-shrink:0; display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--border); color:var(--text-3); font-size:10px; padding:9px 8px 2px; margin-top:5px; }
.sb-vazio { padding:22px 12px; color:var(--text-2); font-size:13px; text-align:center; }
.sb-vazio small { display:block; color:var(--text-3); font-size:11px; margin-top:6px; }
@media(max-width:600px) { .sb-pesquisa input { font-size:16px; } .sb-opcoes [role="option"] { min-height:52px; } .sb-ajuda { display:none; } }