/*
 * Painel da organização: tokens e componentes (TASK-271-DEV, TASK-272-DEV).
 * Fonte: artifacts/02-design/wireframes/v1.1-painel-base.md, seções 1 a 4 e 7.
 * Telas não acrescentam cor, raio, sombra nem tamanho de fonte: usam as classes e as variáveis daqui.
 */

/* ─── Fonte (Montserrat, OFL: fonts/OFL.txt) ─────────────────────────────── */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens (seção 1; nomes do app, prefixo panel- para os só do painel) ─── */

:root {
  /* Cor (1.1) */
  --color-navy: #0e426b;
  --color-navy-deep: #082c49;
  --color-yellow: #fab117;
  --color-yellow-edge: #cc8b00;
  --color-yellow-soft: #fff4da;
  --color-orange-soft: #fff1e5;
  --color-orange: #fe770b;
  --color-blue: #3c8bca;
  --color-danger: #b71c1c;
  --color-danger-edge: #7f1010;
  --color-danger-soft: #fdecec;
  --color-surface: #ffffff;
  --color-text-secondary: #676767;
  --color-slate: #3f5568;
  --color-border-strong: #7d8a99;
  --color-edge-button: #d6dee6;
  --color-edge-card: #e1e7ee;
  --color-track: #e6eaef;
  --color-divider: #eef1f4;
  --color-tile: #eef4fa;
  --color-avatar: #e3eff9;
  --color-scrim: rgba(8, 20, 32, 0.6);
  --color-on-dark-muted: rgba(255, 255, 255, 0.88);
  --panel-page-bg: var(--color-tile);
  --panel-row-hover: #f7fafd;
  --panel-nav-glass: rgba(255, 255, 255, 0.08);
  --panel-nav-hover: rgba(255, 255, 255, 0.12);
  /* Cotas do expositor na ordem de FR-389 (CHG-029, expositores seção 1). */
  --panel-tier-diamante: #a8e6ef;
  --panel-tier-safira: #9dbef2;
  --panel-tier-ouro: #ffd36b;
  --panel-tier-apoio: var(--color-divider);
  /* Pílula das construções: não é cota, token próprio com a cor de antes (CHG-029). */
  --panel-construction-pill: #d6e6f3;
  /* Desenhos das construções (prévia v3 do CHG-011, seção 1): vidro, terreno e construção desligada. */
  --panel-construction-glass: #9cc7ea;
  --panel-construction-ground: #a06b3b;
  --panel-construction-ground-edge: #7a4f28;
  --panel-construction-off: #b5c0cb;
  --panel-construction-off-edge: #9aa5b1;

  /* Tipo (1.2): tamanho / linha / peso */
  --font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --panel-type-page-title: 800 30px/36px var(--font-family);
  --panel-type-login-title: 800 24px/30px var(--font-family);
  --panel-type-dialog-title: 800 20px/26px var(--font-family);
  --panel-type-section-title: 800 18px/24px var(--font-family);
  --panel-type-card-title: 800 16px/22px var(--font-family);
  --panel-type-button: 800 14px/18px var(--font-family);
  --panel-type-button-sm: 800 13px/17px var(--font-family);
  --panel-type-row-action: 800 12px/16px var(--font-family);
  --panel-type-cell: 600 14px/20px var(--font-family);
  --panel-type-cell-strong: 800 14px/20px var(--font-family);
  --panel-type-body: 500 14px/21px var(--font-family);
  --panel-type-label: 800 12px/16px var(--font-family);
  --panel-type-caption: 700 13px/18px var(--font-family);

  /* Espaço (1.3) */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --panel-space-main-x: 36px;
  --panel-space-main-y: 30px;
  --panel-space-section: 22px;
  --panel-sidebar-width: 260px;

  /* Raio (1.3) */
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-26: 26px;

  /* Sombra (1.3): a borda 3D é um inset na base do objeto */
  --shadow-card: inset 0 -5px 0 var(--color-edge-card), 0 8px 20px rgba(14, 66, 107, 0.14);
  --shadow-dialog: inset 0 -6px 0 var(--color-edge-card), 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-button-primary: inset 0 -5px 0 var(--color-yellow-edge), 0 6px 14px rgba(14, 66, 107, 0.28);
  --shadow-button-dark: inset 0 -5px 0 var(--color-navy-deep), 0 6px 14px rgba(14, 66, 107, 0.25);
  --shadow-button-secondary: inset 0 -5px 0 var(--color-edge-button), 0 6px 14px rgba(14, 66, 107, 0.16);
  --shadow-button-danger: inset 0 -5px 0 var(--color-danger-edge);

  /* Foco (7.3) */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-navy);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--panel-page-bg);
  color: var(--color-navy);
  font: var(--panel-type-body);
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
}

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Link em navy; o ponteiro engrossa o sublinhado, sem azul (SG-125). */
a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visível em tudo (7.3): anel navy de 3 px com 2 px de folga. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

[tabindex="-1"]:focus-visible {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Marca (2.2, 5) ─────────────────────────────────────────────────────── */

.brand-symbol {
  width: auto;
  height: 40px;
}

.brand-symbol--large {
  height: 56px;
}

/* ─── Página sem moldura: abertura e login (5, 5.1) ──────────────────────── */

.standalone {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 15vh var(--space-24) var(--space-28);
}

.standalone__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-24);
  text-align: center;
}

.standalone__name {
  font: var(--panel-type-section-title);
}

.standalone__subtitle {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.standalone__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 440px;
  color: var(--color-text-secondary);
  text-align: center;
}

.standalone__footer {
  margin-top: var(--space-20);
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
  text-align: center;
}

/* ─── Login (5.2 a 5.4) ──────────────────────────────────────────────────── */

.login-card {
  width: min(440px, 100%);
  padding: 32px;
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.login-card__title {
  font: var(--panel-type-login-title);
}

.login-card__intro {
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.login-card__email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.login-card__email .button--text {
  padding: 0;
}

.login-card__for {
  font: var(--panel-type-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.login-card__resent:empty {
  display: none;
}

.login-card__resend {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

.login-card__wait {
  align-self: center;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.field__control--code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
}

/* Olho do código no login (CHG-024, seção 5.2a): dentro da caixa do campo, na ponta direita, 8 px da borda de
   dentro (a borda do campo tem 2 px). O padding direito de 46 px impede o texto de passar por baixo do olho. */
.login-code {
  position: relative;
  display: flex;
  align-items: center;
}

.login-code .field__control {
  padding-right: 46px;
}

/* Um olho só no campo: o olho próprio do Edge para campo de senha não aparece. */
.login-code__control::-ms-reveal {
  display: none;
}

.login-code__eye {
  position: absolute;
  right: calc(2px + var(--space-8));
}

.login-code__eye:focus-visible {
  outline-offset: 1px;
}

.login-code__eye:disabled {
  color: var(--color-text-secondary);
  cursor: default;
}

/* ─── Regiões de aviso fixas (7.1) ───────────────────────────────────────── */

.notice-region {
  position: fixed;
  top: var(--space-24);
  right: var(--space-24);
  z-index: 30;
  width: min(440px, calc(100vw - 48px));
}

/* ═══ Componentes (TASK-272-DEV; seção 3) ═══════════════════════════════════ */

.icon {
  flex: none;
}

/* ─── Botões (3.1) ───────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 48px;
  padding: 0 var(--space-18) 5px;
  border: 0;
  border-radius: var(--radius-18);
  font: var(--panel-type-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button--medium {
  min-height: 40px;
  padding: 0 var(--space-14) 5px;
  font: var(--panel-type-button-sm);
}

.button--full {
  width: 100%;
}

.button--primary {
  background: var(--color-yellow);
  color: var(--color-navy);
  box-shadow: var(--shadow-button-primary);
}

.button--dark {
  background: var(--color-navy);
  color: var(--color-surface);
  box-shadow: var(--shadow-button-dark);
}

.button--secondary {
  background: var(--color-surface);
  color: var(--color-navy);
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card), var(--shadow-button-secondary);
}

.button--danger {
  background: var(--color-danger);
  color: var(--color-surface);
  box-shadow: var(--shadow-button-danger);
}

.button--text {
  min-height: 40px;
  padding: 0 var(--space-8);
  background: transparent;
  color: var(--color-navy);
  font: var(--panel-type-button-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button--text.button--on-dark {
  color: var(--color-surface);
}

.button--row {
  min-height: 34px;
  padding: 0 var(--space-12) 2px;
  border-radius: var(--radius-10);
  background: var(--color-surface);
  color: var(--color-navy);
  font: var(--panel-type-row-action);
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card), inset 0 -3px 0 var(--color-edge-button);
}

.button:active:not(:disabled) {
  transform: translateY(3px);
}

.button--primary:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 var(--color-yellow-edge);
}

.button--dark:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 var(--color-navy-deep);
}

.button--secondary:active:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card), inset 0 -2px 0 var(--color-edge-button);
}

.button--danger:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 var(--color-danger-edge);
}

.button--row:active:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card), inset 0 -1px 0 var(--color-edge-button);
}

@media (prefers-reduced-motion: reduce) {
  .button:active:not(:disabled) {
    transform: none;
  }
}

.button:disabled {
  background: var(--color-track);
  color: var(--color-text-secondary);
  box-shadow: none;
  cursor: not-allowed;
}

.button[aria-busy="true"] {
  cursor: progress;
}

.button:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

.button--on-dark:focus-visible {
  outline-color: var(--color-yellow);
}

/* ─── Campo (3.2) ────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.field__label {
  color: var(--color-navy);
  font: var(--panel-type-label);
}

.field__control {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--space-12);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-14);
  background: var(--color-surface);
  color: var(--color-navy);
  font: var(--panel-type-cell);
}

.field__control--multiline {
  min-height: 96px;
  max-height: 240px;
  padding: var(--space-12);
  resize: vertical;
}

.field__control::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.field__control:focus-visible {
  border-color: var(--color-blue);
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

.field--invalid .field__control {
  border-color: var(--color-danger);
}

.field__help {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  color: var(--color-danger);
  font: var(--panel-type-caption);
}

/* Apoio (ou erro) e o contador "{n}/80" na mesma linha (participantes 2a.2). Sem nada visível, a linha some. */
.field__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}

.field__meta:not(:has(> :not([hidden]))) {
  display: none;
}

.field__meta > .field__help,
.field__meta > .field__error {
  flex: 1;
}

.field__counter {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.field__counter--over {
  color: var(--color-danger);
}

/* Ação ligada ao erro do campo ("Abrir o inscrito existente", participantes 2a.5). */
.field__action {
  align-self: flex-start;
}

/* ─── Busca (3.3) ────────────────────────────────────────────────────────── */

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
}

.search__icon {
  position: absolute;
  left: var(--space-14);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.search__input {
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 42px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-14);
  background: var(--color-surface);
  color: var(--color-navy);
  font: var(--panel-type-cell);
  box-shadow: inset 0 -3px 0 var(--color-edge-card);
}

.search__input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.search__input::-webkit-search-cancel-button {
  appearance: none;
}

.search__input:focus-visible {
  border-color: var(--color-blue);
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-10);
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}

.search__clear {
  position: absolute;
  right: var(--space-6);
}

/* ─── Filtros (3.4) ──────────────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.filter {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-16) 3px;
  border: 0;
  border-radius: var(--radius-14);
  background: var(--color-surface);
  color: var(--color-navy);
  font: var(--panel-type-button-sm);
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card), inset 0 -3px 0 var(--color-edge-button);
  cursor: pointer;
}

.filter--selected {
  background: var(--color-yellow);
  box-shadow: inset 0 -3px 0 var(--color-yellow-edge);
}

.filter__count {
  margin-left: var(--space-4);
  font-weight: 600;
}

/* ─── Tabela (3.5) e rodapé (3.6) ────────────────────────────────────────── */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--panel-space-section);
}

.table-card {
  padding: var(--space-6) var(--space-8) var(--space-12);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.table-card[aria-busy="true"] .table__row {
  cursor: progress;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table__head {
  padding: var(--space-12) var(--space-14);
  color: var(--color-text-secondary);
  font: var(--panel-type-label);
  text-align: left;
  white-space: nowrap;
}

.table__head--actions {
  width: 1%;
}

/* "ⓘ" do cabeçalho com `help` (o texto vai no `title` e na descrição do `<th>`). */
.table__head-help {
  display: inline-flex;
  margin-left: var(--space-4);
  vertical-align: -2px;
  cursor: help;
}

.table__row {
  border-top: 1px solid var(--color-divider);
}

.table__row:hover {
  background: var(--panel-row-hover);
}

.table__row--current,
.table__row--current:hover {
  background: var(--color-avatar);
}

.table__cell {
  min-width: 6ch;
  height: 56px;
  padding: var(--space-12) var(--space-14);
  color: var(--color-navy);
  font: var(--panel-type-cell);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
}

/* E-mail quebra em qualquer ponto (3.5); o resto quebra só entre palavras, para a coluna não encolher abaixo
 * da palavra mais longa (abaixo disso, a tabela rola na horizontal). */
.table__cell--email {
  overflow-wrap: anywhere;
}

.table__cell--strong {
  font: var(--panel-type-cell-strong);
}

.table__cell--time {
  width: 120px;
}

.table__cell--type {
  width: 100px;
}

.table__cell--count {
  width: 84px;
}

/* Lista de Participantes com a coluna Telefone (CHG-036, wireframe 1.1): Nome 160, Empresa 130 e Telefone 190 px,
 * para "+55 (47) 99999-8888" numa linha; se não couber, a coluna cresce (nowrap, abaixo) e o e-mail cede. */
.table__cell--name {
  width: 160px;
}

.table__cell--company {
  width: 130px;
}

.table__cell--phone {
  width: 190px;
}

/* Conteúdo curto e fixo (horário, etiqueta, número, telefone) não quebra; a coluna cresce. */
.table__cell--time,
.table__cell--type,
.table__cell--count,
.table__cell--phone {
  white-space: nowrap;
}

.table__cell--actions {
  text-align: right;
  overflow-wrap: normal;
}

.table__empty {
  color: var(--color-text-secondary);
}

.row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-8);
}

.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14) 0;
  border-top: 1px solid var(--color-divider);
}

.table-footer__count {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.pagination__page {
  color: var(--color-navy);
  font: var(--panel-type-caption);
}

/* ─── Esqueleto (3.12) ───────────────────────────────────────────────────── */

.skeleton-bar {
  display: block;
  width: 70%;
  height: 12px;
  border-radius: 6px;
  background: var(--color-track);
}

/* ─── Estados da lista (4.4 a 4.6) ───────────────────────────────────────── */

.table-card--state {
  padding: 48px;
}

.list-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  text-align: center;
}

.list-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-14);
  background: var(--color-tile);
  color: var(--color-navy);
}

.list-state__icon--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.list-state__title {
  color: var(--color-navy);
  font: var(--panel-type-card-title);
}

.list-state__body {
  max-width: 520px;
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.list-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-14);
  margin-top: var(--space-10);
}

/* ─── Menu "Mais ações" (3.7) ────────────────────────────────────────────── */

.menu-anchor {
  position: relative;
  display: inline-block;
}

/* Flutua sobre a página: top e right vêm do botão (menu.js), para a rolagem da tabela não cortar o menu. */
.menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-6);
  border-radius: var(--radius-16);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.menu__item {
  min-height: 40px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-10);
  background: transparent;
  color: var(--color-navy);
  font: var(--panel-type-button-sm);
  text-align: left;
  cursor: pointer;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--panel-row-hover);
}

.menu__item:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: -2px;
}

.menu__item--danger {
  color: var(--color-danger);
}

.menu__separator {
  height: 1px;
  margin: var(--space-6) 0;
  background: var(--color-divider);
}

/* ─── Painel de formulário (3.8) ─────────────────────────────────────────── */

.form-panel {
  position: sticky;
  top: var(--panel-space-main-y);
  flex: none;
  width: 360px;
  max-height: calc(100vh - 2 * var(--panel-space-main-y));
  padding: var(--space-20) var(--space-20) var(--space-24);
  overflow-y: auto;
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.form-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-14);
}

.form-panel__title {
  font: var(--panel-type-section-title);
}

/* Uma coluna; campos marcados `field--half` dividem a linha, com 10 px entre eles (cronograma 3.2). */
.form-panel__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-14) var(--space-10);
}

.form-panel__form > * {
  grid-column: 1 / -1;
}

.form-panel__form > .field--half {
  grid-column: auto;
}

.form-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
}

/* ─── Diálogo (3.9) ──────────────────────────────────────────────────────── */

.dialog {
  width: min(480px, 90vw);
  padding: 0;
  border: 0;
  border-radius: var(--radius-26);
  background: var(--color-surface);
  color: var(--color-navy);
  box-shadow: var(--shadow-dialog);
}

.dialog::backdrop {
  background: var(--color-scrim);
}

.dialog__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-28);
}

.dialog__header {
  display: flex;
  align-items: center;
  gap: var(--space-14);
}

.dialog__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-14);
  background: var(--color-tile);
  color: var(--color-navy);
}

.dialog__icon--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.dialog__title {
  font: var(--panel-type-dialog-title);
}

.dialog__body {
  font: var(--panel-type-body);
}

/* Apoio abaixo do corpo ("Fica registrado quem baixou.", participantes 1.2a). */
.dialog__caption {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
}

/* ─── Aviso flutuante e faixas (3.10) ────────────────────────────────────── */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  min-width: 360px;
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
}

.notice--success {
  background: var(--color-surface);
}

.notice--failure {
  background: var(--color-danger-soft);
}

.notice__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-10);
}

.notice--success .notice__icon {
  background: var(--color-avatar);
  color: var(--color-navy);
}

.notice--failure .notice__icon {
  color: var(--color-danger);
}

.notice__text {
  flex: 1;
  align-self: center;
  color: var(--color-navy);
  font: var(--panel-type-body);
  font-weight: 600;
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-16);
  color: var(--color-navy);
  font: var(--panel-type-body);
}

.banner--failure {
  background: var(--color-danger-soft);
}

.banner--warning {
  background: var(--color-orange-soft);
}

.banner--info {
  background: var(--color-avatar);
}

.banner__icon {
  flex: none;
  color: var(--color-navy);
}

.banner--failure .banner__icon {
  color: var(--color-danger);
}

.banner__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
}

/* ─── Etiqueta de estado (3.11) ──────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-10);
  color: var(--color-navy);
  font: var(--panel-type-row-action);
  white-space: nowrap;
}

.tag--avatar {
  background: var(--color-avatar);
}

.tag--yellow {
  background: var(--color-yellow-soft);
}

.tag--neutral {
  background: var(--color-divider);
}

.tag--orange {
  background: var(--color-orange-soft);
}

.tag--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Cotas do expositor (expositores, seção 1): o nome da cota sempre escrito, a cor não é o único sinal. */
.tag--tier-diamante {
  background: var(--panel-tier-diamante);
}

.tag--tier-safira {
  background: var(--panel-tier-safira);
}

.tag--tier-ouro {
  background: var(--panel-tier-ouro);
}

.tag--tier-apoio {
  background: var(--panel-tier-apoio);
}

/* ─── Moldura: menu lateral e área principal (2.1 a 2.6, 7.1; TASK-274-DEV) ── */

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-18);
  border-radius: var(--radius-14);
  background: var(--color-navy);
  color: var(--color-surface);
  font: var(--panel-type-button);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  outline-color: var(--color-yellow);
  transform: none;
}

.frame {
  display: grid;
  grid-template-columns: var(--panel-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  height: 100vh;
  padding: var(--space-28) var(--space-18);
  overflow-y: auto;
  background: var(--color-navy);
  color: var(--color-surface);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.nav__brand-name {
  font: var(--panel-type-card-title);
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 46px;
  padding: 0 var(--space-14);
  border-radius: var(--radius-14);
  color: var(--color-on-dark-muted);
  font: var(--panel-type-button);
  text-decoration: none;
}

.nav__item:hover {
  background: var(--panel-nav-hover);
}

.nav__item[aria-current="page"] {
  background: var(--color-yellow);
  color: var(--color-navy);
  box-shadow: inset 0 -3px 0 var(--color-yellow-edge);
}

.nav__item:focus-visible {
  outline-color: var(--color-yellow);
}

.nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: auto;
}

.nav__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-14);
  border-radius: var(--radius-16);
  background: var(--panel-nav-glass);
}

.nav__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}

.nav__card-label {
  color: var(--color-on-dark-muted);
  font: var(--panel-type-row-action);
}

.nav__strong {
  font: var(--panel-type-button);
}

.nav__muted {
  color: var(--color-on-dark-muted);
  font: var(--panel-type-caption);
}

.nav__wrap {
  overflow-wrap: anywhere;
}

/* E-mail longo quebra no "@" ou onde precisar, sem reticências (2.3). */
.nav__email {
  overflow-wrap: anywhere;
}

.nav__sign-out {
  margin-top: var(--space-4);
  margin-left: calc(-1 * var(--space-8));
  text-decoration: none;
}

.nav__sign-out:hover {
  background: var(--panel-nav-hover);
}

.nav__skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--panel-nav-glass);
}

.nav__skeleton[data-width="70%"] {
  width: 70%;
}

.nav__skeleton[data-width="90%"] {
  width: 90%;
}

.nav__skeleton[data-width="60%"] {
  width: 60%;
}

.frame__main {
  display: flex;
  flex-direction: column;
  gap: var(--panel-space-section);
  min-width: 0;
  padding: var(--panel-space-main-y) var(--panel-space-main-x);
}

/* ─── Cabeçalho da tela e área de lista (2.5, 3.8) ───────────────────────── */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14) var(--space-22);
}

.page-header__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.page-title {
  font: var(--panel-type-page-title);
}

.color-bar {
  display: block;
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--color-yellow) 0 25%,
    var(--color-orange) 25% 50%,
    var(--color-navy) 50% 75%,
    var(--color-blue) 75% 100%
  );
}

/* Sem lugar numa linha (janela de 1280 px), a busca e os botões descem, alinhados à direita (2.6). */
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-14);
  margin-left: auto;
}

/* Ação que não deve parecer do mesmo grupo da anterior: 24 px entre as duas (14 do gap + 10). */
.page-header__apart {
  margin-left: 10px;
}

.workspace {
  display: flex;
  align-items: flex-start;
  gap: var(--panel-space-section);
}

.workspace__main {
  flex: 1;
  min-width: 0;
}

.workspace__side {
  position: sticky;
  top: var(--panel-space-main-y);
  flex: none;
}

.workspace__side:empty {
  display: none;
}

/* Coluna da esquerda com mais de um bloco (Participantes: importação, filtros e tabela; 2a.2). */
.workspace__stack {
  display: flex;
  flex-direction: column;
  gap: var(--panel-space-section);
  min-width: 0;
}

/* Linha de botões do cabeçalho abaixo do título e da busca, à direita (participantes 2a.1; base 2.6). */
.page-header__buttons {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-14);
}

/* Título com a etiqueta "Desativada" 6 px abaixo (cronograma 2.2). */
.cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

/* Uma linha por item na célula (sessões do palestrante, cronograma 5.1). */
.cell-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cell-secondary {
  color: var(--color-text-secondary);
}

/* Lista dentro do diálogo (cronograma 6.3). */
.dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.dialog__list {
  margin: 0;
  padding-left: var(--space-20);
  color: var(--color-navy);
  font: var(--panel-type-cell);
}

/* ─── Formulário de sessão (cronograma 3 e 7; TASK-276-DEV) ─────────────── */

.form-panel__notice:empty {
  display: none;
}

.form-panel__divider {
  height: 1px;
  background: var(--color-divider);
}

.form-panel__loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.skeleton-bar--field {
  width: 100%;
  height: 46px;
  border-radius: var(--radius-14);
}

.field__control--narrow {
  width: 120px;
}

select.field__control {
  cursor: pointer;
}

/* Interruptor 50 × 30 px; alvo de 44 px de altura com o rótulo (3.2). */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 44px;
}

.switch-row__label {
  cursor: pointer;
}

.switch {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: 15px;
  background: var(--color-track);
  cursor: pointer;
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(14, 66, 107, 0.3);
}

.switch[aria-checked="true"] {
  border-color: var(--color-navy);
  background: var(--color-navy);
}

.switch[aria-checked="true"] .switch__thumb {
  left: 22px;
}

/* Crachás de palestrante (7.1). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 0 0 var(--space-10);
  border-radius: var(--radius-10);
  background: var(--color-avatar);
  color: var(--color-navy);
  font: var(--panel-type-row-action);
}

.chip--missing {
  box-shadow: inset 0 0 0 2px var(--color-danger);
}

.combobox {
  position: relative;
}

.combobox__list {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  left: 0;
  z-index: 5;
  max-height: calc(6 * 52px);
  padding: var(--space-6) 0;
  overflow-y: auto;
  border-radius: var(--radius-14);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.combobox__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-14);
  color: var(--color-navy);
  font: var(--panel-type-cell);
  cursor: pointer;
}

.combobox__option:hover,
.combobox__option--active {
  background: var(--panel-row-hover);
  box-shadow: inset 0 0 0 2px var(--color-navy);
}

.combobox__detail,
.combobox__note {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.combobox__note {
  padding: var(--space-8) var(--space-14);
}

.combobox__create {
  border-top: 1px solid var(--color-divider);
  font: var(--panel-type-cell-strong);
}

.combobox__retry {
  font: var(--panel-type-button-sm);
  text-decoration: underline;
}

/* Bloco "Novo palestrante" dentro do formulário (7.2). */
.speaker-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  margin-top: var(--space-6);
  padding: var(--space-14);
  border-radius: var(--radius-16);
  background: var(--color-tile);
}

.speaker-create__title {
  font: var(--panel-type-card-title);
}

.speaker-create__hint {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.speaker-create__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

/* ─── Ações da linha (cronograma 2.3; TASK-278-DEV) ───────────────────────── */

/* Lugar da ação que a linha não tem ("QR" de intervalo): mesma largura, invisível. */
.row-actions__placeholder {
  visibility: hidden;
}

/* ─── Expositores (expositores 2 a 4; TASK-280-DEV, TASK-281-DEV) ───────── */

.table__cell--logo {
  width: 56px;
}

/* Logo ou iniciais: 40 px na linha, 96 px no formulário. */
.logo-box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-10);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-edge-card);
}

.logo-box--row {
  width: 40px;
  height: 40px;
}

.logo-box--preview {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-14);
}

.logo-box__image {
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  object-fit: contain;
}

.logo-box__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-avatar);
  color: var(--color-navy);
  font: var(--panel-type-row-action);
}

.logo-box--preview .logo-box__initials {
  font: var(--panel-type-section-title);
}

/* Campo do logo no formulário (4.1 a 4.6): prévia de 96 px e, ao lado, estado e botões. */
.logo-field__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
}

.logo-field__side {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.logo-field__status:empty {
  display: none;
}

.logo-field__file {
  margin: 0;
  overflow-wrap: anywhere;
  font: var(--panel-type-cell);
}

.logo-field__caption {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.logo-field__caption--strong {
  color: var(--color-navy);
}

.logo-field__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.logo-field__preview[aria-busy="true"] .logo-box {
  opacity: 0.6;
}

/* ─── QR do estande e cartaz (expositores 6 e 9; TASK-282-DEV) ──────────── */

.sponsor-qr-dialog {
  width: min(760px, 90vw);
}

.sponsor-qr {
  gap: var(--space-18);
}

.sponsor-qr__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14);
}

.sponsor-qr__title {
  font: var(--panel-type-login-title);
}

.sponsor-qr__close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-14);
  background: var(--color-divider);
}

.sponsor-qr__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-28);
}

.sponsor-qr__preview {
  flex: none;
}

.sponsor-qr__preview-skeleton {
  display: block;
  flex: none;
  width: 291px;
  height: 424px;
  border-radius: var(--radius-14);
  background: var(--color-track);
}

.sponsor-qr__side {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.sponsor-qr__intro {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.sponsor-qr__data {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-14);
  border-radius: var(--radius-14);
  background: var(--color-tile);
  font: var(--panel-type-button-sm);
}

.sponsor-qr__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
}

.sponsor-qr__row dt {
  color: var(--color-text-secondary);
}

.sponsor-qr__row dd {
  margin: 0;
  color: var(--color-navy);
  text-align: right;
}

.sponsor-qr__code {
  font-weight: 800;
  letter-spacing: 0.06em;
}

.sponsor-qr__help {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.sponsor-qr__banner:empty {
  display: none;
}

.sponsor-qr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.sponsor-qr__actions .button {
  flex: 1;
}

.sponsor-qr__state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-28) 0;
  text-align: center;
}

/*
 * Cartaz A4 do board (9.1), medido em milímetros da área útil (190 × 277 mm). A unidade --u vale 1 mm na
 * impressão e é reduzida na prévia do diálogo; os tamanhos em pt da especificação viram mm (1 pt = 0,3528 mm).
 */
.poster {
  --u: 1mm;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(190 * var(--u));
  height: calc(277 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-surface);
  font-family: var(--font-family);
  text-align: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.poster--preview {
  --u: 1.53px;
  border-radius: var(--radius-14);
}

.poster p {
  margin: 0;
}

.poster__brand {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-weight: 800;
  font-size: calc(7.06 * var(--u));
}

.poster__symbol {
  width: auto;
  height: calc(18 * var(--u));
}

.poster__headline {
  font-weight: 800;
  font-size: calc(10.58 * var(--u));
  line-height: 1.15;
}

.poster__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--color-surface);
}

.poster__qr {
  display: block;
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
}

.poster__code {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--u));
}

.poster__code-label {
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: calc(4.94 * var(--u));
}

.poster__code-value {
  color: var(--color-navy);
  font-weight: 800;
  font-size: calc(9.88 * var(--u));
  letter-spacing: 0.06em;
}

.poster__name {
  color: var(--color-yellow);
  font-weight: 800;
  font-size: calc(10.58 * var(--u));
  line-height: 1.1;
}

.poster__name--long {
  font-size: calc(7.76 * var(--u));
}

.poster__booth {
  font-weight: 700;
  font-size: calc(6.35 * var(--u));
}

.poster__points {
  color: var(--color-on-dark-muted);
  font-weight: 600;
  font-size: calc(4.94 * var(--u));
}

.poster__instruction {
  max-width: calc(150 * var(--u));
  color: var(--color-on-dark-muted);
  font-weight: 600;
  font-size: calc(3.88 * var(--u));
}

.poster__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(6 * var(--u));
  background: linear-gradient(
    to right,
    var(--color-yellow) 0 25%,
    var(--color-orange) 25% 50%,
    var(--color-navy) 50% 75%,
    var(--color-blue) 75% 100%
  );
}

/*
 * Cartaz da sessão (cronograma 11.3; CHG-035, TASK-651-DEV): o do board com o título no lugar do expositor
 * (.poster__name) e "horário · sala" no lugar do estande (.poster__booth). O título vai inteiro: quebra entre
 * palavras e, numa palavra maior que a linha, em qualquer ponto. 16 pt de 81 a 200 caracteres; acima disso o
 * tamanho vem da fórmula da 11.3.3, no próprio elemento. O horário não parte; sala longa quebra depois do "·".
 */
.poster__title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.poster__title--small {
  font-size: calc(5.64 * var(--u));
}

.poster__when {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.poster__when-time {
  white-space: nowrap;
}

/*
 * Janela "QR da sessão" (cronograma 11.2; CHG-035, TASK-653-DEV): a caixa do estande (.sponsor-qr*). O título no
 * quadro de dados quebra em linhas, sem reticências, inclusive numa palavra maior que a linha; o rótulo não encolhe.
 */
.session-qr .sponsor-qr__row dt {
  flex: none;
}

.session-qr .sponsor-qr__row dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A página de impressão só existe durante a impressão (print.css a mostra e esconde o resto). */
.print-poster {
  display: none;
}

/* ─── Telão: QR da sessão (cronograma 8; TASK-279-DEV) ──────────────────── */

/* Cobre a página inteira (o menu fica por baixo), na janela e em tela cheia; fundo branco para o projetor. */
.telao {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-navy);
}

.telao--idle {
  cursor: none;
}

.telao__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-24);
  border-bottom: 1px solid var(--color-divider);
}

.telao--fullscreen .telao__bar,
.telao:not(.telao--fullscreen) .telao__exit,
.telao:not(.telao--fullscreen) .telao__only-fullscreen {
  display: none;
}

.telao__top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 2.4vh 2.4vw 0;
}

.telao__brand {
  display: flex;
  align-items: center;
  gap: 1vh;
  font: 800 2.4vh/1.2 var(--font-family);
}

.telao__symbol {
  width: auto;
  height: 5vh;
}

.telao__exit {
  transition: opacity 200ms ease;
}

.telao--idle .telao__exit {
  opacity: 0;
}

.telao__exit:focus:not(:focus-visible) {
  box-shadow: var(--shadow-button-secondary);
}

.telao__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  min-height: 0;
  padding: 0 4vw 3vh;
  text-align: center;
}

/* Até 2 linhas; o título longo usa o tamanho menor, nunca é cortado. */
.telao__title {
  max-width: 80vw;
  margin: 0;
  font-weight: 800;
  font-size: max(32px, 5.2vh);
  line-height: 1.15;
}

.telao__title--long {
  font-size: max(28px, 4vh);
}

.telao__time {
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: 3.2vh;
}

.telao__qr {
  display: block;
  flex: none;
  width: min(56vh, 44vw);
  height: min(56vh, 44vw);
  margin-top: 1.2vh;
}

.telao__code {
  display: flex;
  align-items: baseline;
  gap: 2vh;
  margin: 1.2vh 0 0;
}

.telao__code-label {
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: 3vh;
}

.telao__code-value {
  font-weight: 800;
  font-size: max(48px, 8vh);
  line-height: 1;
  letter-spacing: 0.08em;
}

.telao__instruction {
  max-width: 70vw;
  margin: 0;
  font-weight: 600;
  font-size: 2.6vh;
}

.telao__skeleton {
  display: block;
  border-radius: var(--radius-14);
  background: var(--color-track);
}

.telao__skeleton--title {
  width: 40vw;
  height: 5.2vh;
}

.telao__skeleton--time {
  width: 20vw;
  height: 3.2vh;
}

.telao__skeleton--qr {
  width: min(56vh, 44vw);
  height: min(56vh, 44vw);
}

.telao__loading {
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: 3vh;
}

.telao__notice {
  display: flex;
  align-items: center;
  gap: 2vh;
  max-width: 70vw;
  margin: 3vh 0;
  padding: 3vh 4vh;
  border-radius: var(--radius-20);
  background: var(--color-orange-soft);
  font-weight: 700;
  font-size: 3.2vh;
  text-align: left;
}

.telao__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  max-width: 70vw;
}

.telao__error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12vh;
  height: 12vh;
  border-radius: var(--radius-26);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.telao__error-title {
  margin: 0;
  font-weight: 800;
  font-size: max(28px, 4vh);
}

.telao__error-body {
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 2.6vh;
}

.telao__error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-14);
}

@media (prefers-reduced-motion: reduce) {
  .telao__exit {
    transition: none;
  }
}

/* ─── Participantes: lista (participantes 1; TASK-284-DEV) ───────────────── */

/* Moeda "P" de 18 px (sistema visual 9.4), decorativa. */
.coin {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 1px 2px rgba(14, 66, 107, 0.3);
  color: var(--color-navy);
  font: 800 9px/1 var(--font-family);
}

.points {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 800;
  white-space: nowrap;
}

.cell-slate {
  color: var(--color-slate);
}

.cell-caption {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.cell-stack--tight {
  gap: 0;
}

/* ─── Importação de inscritos (participantes 2; TASK-283-DEV) ────────────── */

.import {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-18);
  align-items: start;
}

.import--with-result {
  grid-template-columns: 1.2fr 1fr;
}

.import__card,
.import__result {
  padding: var(--space-18) var(--space-20) var(--space-22);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.import__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.import__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 120px;
  padding: var(--space-16);
  border: 2px dashed var(--color-blue);
  border-radius: var(--radius-16);
  background: var(--panel-row-hover);
  text-align: center;
}

.import__drop--over {
  border: 3px solid var(--color-blue);
  background: var(--color-avatar);
}

.import__icon {
  display: inline-flex;
  color: var(--color-blue);
}

.import__title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-button);
  overflow-wrap: anywhere;
}

.import__caption {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
  overflow-wrap: anywhere;
}

.import__drop .import__caption {
  max-width: 640px;
}

/* "Escolher arquivo" e "Baixar modelo" (CHG-031, 2.1): lado a lado, 12 px entre eles; sem espaço, um embaixo do
   outro, "Escolher arquivo" primeiro. 6 px do gap + 8 px = 14 px entre o texto e os botões. */
.import__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

/* "Baixar modelo" na faixa de recusa (CHG-031, 2.5): abaixo da mensagem, alinhado ao texto. 4 px do gap + 8 px. */
.import__banner-action {
  align-self: flex-start;
  margin-top: var(--space-8);
}

.import__file-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.import__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.import__result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.import__result-title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-card-title);
}

.import__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.import__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-14);
}

.import__tile--avatar {
  background: var(--color-avatar);
}

.import__tile--yellow {
  background: var(--color-yellow-soft);
}

.import__tile--neutral {
  background: var(--color-divider);
}

.import__tile-value {
  color: var(--color-navy);
  font: 800 22px/28px var(--font-family);
}

.import__tile-label {
  color: var(--color-slate);
  font: var(--panel-type-row-action);
}

/* Aviso do arquivo sem coluna de telefone (TASK-611-DEV, 2.4, SG-286): a faixa de atenção da base (.banner--warning),
   12 px abaixo dos quadros (o resultado põe 14 entre os filhos, daí os -2 px). */
.import__file-warning {
  margin-top: calc(var(--space-12) - var(--space-14));
}

/* "Importados com aviso" (CHG-031, 2.4): 12 px depois dos quadros (o resultado põe 14 entre os filhos, daí os -2 px)
   e 4 px entre os itens. Texto em caption navy; o título usa o peso 700 do próprio caption. */
.import__warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: calc(var(--space-12) - var(--space-14));
  color: var(--color-navy);
  font: var(--panel-type-caption);
}

.import__warnings-title {
  margin: 0;
}

.import__warnings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-18);
}

.import__demo {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-caption);
}

.import__problems-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.import__problems-block .button--text {
  padding: 0;
}

.import__problems {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.import__problems-scroll {
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius-14);
}

.import__problems-scroll:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 1279px) {
  .import--with-result {
    grid-template-columns: 1fr;
  }
}

/* Com o painel de cadastro aberto, o resultado desce para baixo do cartão de importação (participantes 2a.2). */
.workspace--open .import--with-result {
  grid-template-columns: 1fr;
}

/* ─── Detalhe do participante (participantes 3; TASK-285-DEV) ───────────── */

.detail-back {
  margin-bottom: calc(var(--space-12) - var(--panel-space-section));
}

.detail-back .button--text {
  padding: 0;
}

.detail {
  display: flex;
  flex-direction: column;
  gap: var(--panel-space-section);
}

.detail__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-20);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.detail__card-title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-card-title);
}

.detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-18) var(--space-24);
  margin: 0;
}

.detail__pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.detail__label {
  color: var(--color-text-secondary);
  font: var(--panel-type-label);
  text-transform: uppercase;
}

.detail__value {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-cell);
}

.detail__email {
  overflow-wrap: anywhere;
}

/* "Editar" à direita do título do cartão, na mesma linha (participantes 3a.1). */
.detail__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

/* Texto de quem já entrou no app, 6 px abaixo do título (participantes 3a.2): texto, não faixa. */
.detail__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin: calc(var(--space-6) - var(--space-14)) 0 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.detail__note > .icon {
  flex-shrink: 0;
  color: var(--color-navy);
}

/* Edição no lugar do cartão (participantes 3a.3): coluna única de 480 px; "Cancelar" e "Salvar" dividem a largura. */
.participant-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  max-width: 480px;
}

.participant-edit__banner:empty {
  display: none;
}

.participant-edit__email {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.participant-edit__email > p {
  margin: 0;
}

.participant-edit__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
}

.detail__title-skeleton {
  width: 240px;
  height: 30px;
}

.detail__skeleton-label {
  width: 60px;
}

.detail__skeleton-value {
  width: 140px;
}

.detail__skeleton-row {
  width: 100%;
  height: 20px;
}

/* ─── Ranking (participantes 4; TASK-286-DEV) ────────────────────────────── */

/* 10 px abaixo da barra de cores: o bloco do título já separa 8. */
.page-intro {
  margin: calc(var(--space-10) - var(--space-8)) 0 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.rank-position {
  font-weight: 800;
  white-space: nowrap;
}

/* Círculo do pódio (1º a 3º) e do top 5 do dashboard: marcação, não muda a ordem (SG-161). */
.rank-position--podium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-4);
  border-radius: 14px;
  background: var(--color-avatar);
  color: var(--color-navy);
  font: var(--panel-type-row-action);
}

/* ─── Notificações: aviso da organização (avisos-config 1 e 2; TASK-288-DEV) ─ */

.announcement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-18);
  align-items: start;
}

.announcement__card,
.announcement__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  min-width: 0;
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.announcement__card {
  padding: var(--space-20) var(--space-24);
}

.announcement__preview {
  padding: var(--space-20);
}

.announcement__card-title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-section-title);
}

.announcement__preview-title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-card-title);
}

.announcement__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}

/* Apoio (ou erro) à esquerda e contador à direita, na mesma linha (emenda TASK-339-UX, seções 1.1 e 1.7). */
.announcement__help {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}

.announcement__help > .field__help,
.announcement__help > .field__error {
  flex: 1;
}

.announcement__counter {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.announcement__counter--limit {
  color: var(--color-navy);
}

.announcement__counter--over {
  color: var(--color-danger);
}

.announcement__fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.announcement__fieldset > legend {
  margin-bottom: var(--space-10);
  padding: 0;
}

.radio {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 32px;
}

.radio__input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-navy);
  cursor: pointer;
}

.radio__input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.radio__label {
  color: var(--color-navy);
  font: var(--panel-type-cell);
  cursor: pointer;
}

.announcement__session {
  margin-left: 28px;
  max-width: 520px;
}

.announcement__when {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.announcement__when-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
}

.announcement__when-row .field {
  width: 200px;
}

.announcement__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-14);
}

.announcement__primary-help {
  margin: calc(var(--space-6) - var(--space-18)) 0 0;
  text-align: right;
}

/* Cópia do cartão de aviso da organização na central do app (v1.1-avisos), na largura de um celular. */
.announcement-preview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  max-width: 312px;
  padding: var(--space-14);
  border-radius: var(--radius-16);
  background: var(--panel-row-hover);
  box-shadow: inset 0 0 0 1.5px var(--color-edge-card);
}

.announcement-preview__tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-14);
  background: var(--color-navy);
  color: var(--color-surface);
}

.announcement-preview__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.announcement-preview__title {
  margin: 0;
  color: var(--color-navy);
  font: 800 15px/20px var(--font-family);
  overflow-wrap: anywhere;
}

.announcement-preview__body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font: 500 13px/18px var(--font-family);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.announcement-preview__placeholder {
  color: var(--color-text-secondary);
}

.announcement-preview__time {
  margin: 0;
  color: var(--color-slate);
  font: var(--panel-type-caption);
}

/* Bloco D-9 (avisos-config 4.1; TASK-295-DEV): o balão da notificação, sem moldura de celular nem relógio. */
.announcement__preview-subtitle {
  margin: var(--space-6) 0 0;
  color: var(--color-navy);
  font: var(--panel-type-label);
}

.announcement-push {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 312px;
  padding: var(--space-14);
  border-radius: var(--radius-16);
  background: var(--color-track);
}

.announcement-push__app {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-4);
  color: var(--color-slate);
  font: 800 12px/16px var(--font-family);
}

.announcement-push__symbol {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Até 2 linhas com reticências (emenda TASK-339-UX, seção 4.1): o título de até 40 quebra em vez de cortar. */
.announcement-push__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-navy);
  font: 800 14px/19px var(--font-family);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.announcement-push__body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-navy);
  font: 500 13px/18px var(--font-family);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.announcement-push .announcement-preview__placeholder {
  color: var(--color-text-secondary);
}

@media (max-width: 1279px) {
  .announcement {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Histórico e edição (avisos-config 1.5 e 3; TASK-289-DEV). */
.announcement__start-new {
  align-self: flex-start;
  padding: 0;
}

.announcement__open {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}

.announcement__history {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

/* ─── Configurações (avisos-config 5 e 6; TASK-290-DEV, TASK-291-DEV) ───── */

.settings__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.settings__title {
  margin: 0;
  color: var(--color-navy);
  font: var(--panel-type-section-title);
}

.settings__intro {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  max-width: 880px;
}

.settings__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-18);
  align-items: start;
}

.settings__row--wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.settings__actions {
  display: flex;
  justify-content: flex-end;
}

.settings__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-14);
}

.settings__heading {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.cell-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.button--row-danger {
  color: var(--color-danger);
}

.user-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-14);
  border-radius: var(--radius-16);
  background: var(--panel-row-hover);
}

.user-create__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--space-14);
  align-items: start;
}

.user-create__actions {
  display: flex;
  gap: var(--space-10);
  padding-top: 22px;
}

/* Linha de criação do usuário Straas (configurações 6.2a, CHG-013): Nome e E-mail numa faixa, o tipo na seguinte e os
 * botões no fim, à direita. */
.user-create__row--fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.user-create__actions--end {
  justify-content: flex-end;
  padding-top: 0;
}

/* ─── Grupo de rádios como campo (configurações 6.2a; createRadioGroupField) ─ */

.radio-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.radio-field > legend {
  margin-bottom: var(--space-6);
  padding: 0;
}

.radio-field__choice {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
}

/* Círculo de 20 px com contorno 2 px; marcado, ponto navy de 10 px. O rótulo inteiro é alvo de clique. */
.radio-field__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  appearance: none;
  cursor: pointer;
}

.radio-field__input:checked {
  background: radial-gradient(circle, var(--color-navy) 0 5px, transparent 5.5px);
}

.radio-field__input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.radio-field--invalid .radio-field__input {
  border-color: var(--color-danger);
}

.radio-field__help {
  margin: calc(-1 * var(--space-6)) 0 0 28px;
}

.settings__note {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

/* ─── Código de acesso com olho (participantes 3.1, configurações 6.1; TASK-383-DEV) ─ */

.access-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.access-code__value {
  color: var(--color-text-secondary);
  font: var(--panel-type-cell);
  letter-spacing: 2px;
  white-space: nowrap;
}

.access-code__value--shown {
  color: var(--color-navy);
  font: var(--panel-type-cell-strong);
  letter-spacing: 2px;
  user-select: text;
}

/* Só ícone: quadrado na altura da ação da linha (34 px, base 3.1). Copiar (CHG-018) segue o olho. */
.access-code__toggle,
.access-code__copy {
  min-width: 34px;
  padding: 0 0 2px;
}

.cell-muted {
  color: var(--color-text-secondary);
}

/* ─── Construções (prévia v3 do CHG-011, seção 1; TASK-435-DEV) ─────────── */

.constructions__intro {
  max-width: 640px;
  color: var(--color-text-secondary);
  font: var(--panel-type-body);
}

.constructions__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
}

.constructions__buttons {
  display: flex;
  gap: var(--space-10);
}

.constructions__dirty {
  color: var(--color-orange);
  font: var(--panel-type-label);
}

.constructions__hint {
  max-width: 330px;
  color: var(--color-danger);
  font: var(--panel-type-label);
  text-align: right;
}

.constructions__body,
.constructions__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--panel-space-section);
}

.constructions__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.7fr);
  gap: var(--space-16);
}

.constructions__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-18) var(--space-20);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.constructions__label {
  color: var(--color-text-secondary);
  font: var(--panel-type-label);
}

.constructions__value {
  font: var(--panel-type-page-title);
}

.constructions__value small {
  color: var(--color-text-secondary);
  font: var(--panel-type-card-title);
}

.constructions__note {
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
}

.constructions__meter {
  position: relative;
  height: 10px;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: 5px;
  background: var(--color-track);
}

.constructions__meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  background: var(--color-yellow);
}

.constructions__meter--over i {
  background: var(--color-danger);
}

.constructions__effect {
  border-left: 6px solid var(--color-navy);
}

.constructions__effect--ok {
  border-left-color: var(--color-navy);
}

.constructions__effect--error {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.constructions__effect-title {
  font: var(--panel-type-section-title);
}

.constructions__effect--error .constructions__effect-title {
  color: var(--color-danger);
}

.constructions__effect-body {
  color: var(--color-slate);
  font: var(--panel-type-caption);
}

.constructions__table {
  min-width: 980px;
  table-layout: fixed;
}

.constructions__table th.table__head:nth-child(1) {
  width: 64px;
}

.constructions__table th.table__head:nth-child(3) {
  width: 160px;
}

.constructions__table th.table__head:nth-child(4),
.constructions__table th.table__head:nth-child(5) {
  width: 180px;
}

.constructions__table th.table__head:nth-child(6) {
  width: 200px;
}

.constructions__caption {
  padding: var(--space-8) var(--space-14) 0;
  color: var(--color-text-secondary);
  font: var(--panel-type-label);
  text-align: left;
}

.constructions__order {
  color: var(--color-text-secondary);
  font: var(--panel-type-card-title);
  text-align: center;
}

.constructions__name {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.constructions__title {
  display: block;
  font: var(--panel-type-card-title);
}

.constructions__description {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font: var(--panel-type-caption);
  font-weight: 500;
}

.construction-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-10);
  background: var(--color-navy);
  box-shadow: inset 0 -3px 0 var(--color-navy-deep);
}

.construction-tile--ground {
  background: var(--panel-construction-ground);
  box-shadow: inset 0 -3px 0 var(--panel-construction-ground-edge);
}

.construction-icon {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.construction-icon__glass {
  fill: var(--panel-construction-glass);
  stroke: none;
}

.construction-icon__sun {
  fill: var(--color-yellow);
  stroke: none;
}

.construction-icon__led-yellow,
.construction-icon__led-orange,
.construction-icon__led-glass {
  stroke-width: 2.2;
}

.construction-icon__led-yellow {
  stroke: var(--color-yellow);
}

.construction-icon__led-orange {
  stroke: var(--color-orange);
}

.construction-icon__led-glass {
  stroke: var(--panel-construction-glass);
}

.constructions__row--ground,
.constructions__row--ground:hover {
  background: var(--panel-row-hover);
}

.constructions__row--off .constructions__title,
.constructions__row--off .constructions__order,
.constructions__row--off .constructions__description {
  color: var(--color-border-strong);
}

.constructions__row--off .construction-tile {
  background: var(--panel-construction-off);
  box-shadow: inset 0 -3px 0 var(--panel-construction-off-edge);
}

.constructions__row--over,
.constructions__row--over:hover {
  background: var(--color-danger-soft);
}

.constructions__switch {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.constructions__switch-label {
  font: var(--panel-type-button-sm);
}

.constructions__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.constructions__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.constructions__step {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--color-edge-card);
  border-radius: var(--radius-10);
  background: var(--color-surface);
  box-shadow: inset 0 -3px 0 var(--color-edge-button);
  color: var(--color-navy);
  font: var(--panel-type-card-title);
  cursor: pointer;
}

.constructions__step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.constructions__input {
  width: 72px;
  height: 38px;
  border: 1.5px solid var(--color-edge-card);
  border-radius: var(--radius-10);
  background: var(--color-surface);
  box-shadow: inset 0 -3px 0 var(--color-edge-card);
  color: var(--color-navy);
  font: var(--panel-type-card-title);
  text-align: center;
}

.constructions__input:disabled {
  background: var(--color-divider);
  color: var(--color-border-strong);
}

.constructions__field--invalid .constructions__input {
  border-color: var(--color-danger);
}

.constructions__error {
  max-width: 170px;
}

.constructions__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-10);
  background: var(--panel-construction-pill);
  color: var(--color-navy);
  font: var(--panel-type-label);
}

.constructions__pill--over {
  background: var(--color-surface);
  box-shadow: 0 0 0 1.5px var(--color-danger);
  color: var(--color-danger);
}

.constructions__muted {
  color: var(--color-border-strong);
  font: var(--panel-type-caption);
}

.constructions__foot-over {
  color: var(--color-danger);
}

.constructions__skeleton-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  padding: var(--space-24);
}

/* ─── Atributo hidden: por último, para valer sobre o display das classes acima ─ */

[hidden] {
  display: none;
}