/* ==========================================================================
   Sistema do Manual da Ilha · a casca de SaaS (barra lateral, topo, telas)
   Só usa tokens.css. O que é de componente comum está em componentes.css.
   ========================================================================== */

.app { min-height: 100vh; }

/* ---------- barra lateral ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px;
  display: flex; flex-direction: column; gap: var(--e-4);
  padding: calc(env(safe-area-inset-top) + var(--e-5)) var(--e-3) calc(env(safe-area-inset-bottom) + var(--e-4));
  background: var(--sup-elevada); border-right: 1px solid var(--borda-sutil);
  overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-2); }
.marca__selo {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  font-family: var(--fonte-numero); font-weight: var(--peso-forte); font-size: 0.8125rem; letter-spacing: .04em;
  color: var(--txt-sobre-acento); background: var(--cor-acento); border-radius: var(--raio-m);
  box-shadow: 0 0 var(--brilho) var(--cor-acento);
}
.marca__nome { font-weight: var(--peso-forte); line-height: 1.15; }
.marca__sub { font-family: var(--fonte-numero); font-size: var(--txt-micro); letter-spacing: var(--entreletra-mono); text-transform: uppercase; color: var(--txt-suave); }

.grupo { display: grid; gap: 2px; }
.grupo__rotulo {
  padding: var(--e-2) var(--e-3) var(--e-1);
  font-family: var(--fonte-numero); font-size: var(--txt-micro); letter-spacing: var(--entreletra-mono); text-transform: uppercase;
  color: var(--txt-suave);
}
.ir {
  position: relative; display: flex; align-items: center; gap: var(--e-3);
  min-height: 40px; padding: 0 var(--e-3);
  font: inherit; font-size: 0.9375rem; color: var(--txt-medio); text-decoration: none;
  background: transparent; border: 0; border-radius: var(--raio-m); cursor: pointer; text-align: left; width: 100%;
  transition: background-color var(--t-estado) var(--curva), color var(--t-estado) var(--curva);
}
.ir:hover { background: var(--sup-elevada-2); color: var(--txt-forte); }
.ir svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ir[aria-current="page"] { background: var(--sup-elevada-2); color: var(--txt-forte); font-weight: var(--peso-forte); box-shadow: inset 0 0 0 1px var(--borda-sutil); }
.ir[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
  background: var(--cor-acento); box-shadow: 0 0 var(--brilho) var(--cor-acento);
}
.ir__n {
  margin-left: auto; min-width: 22px; padding: 1px 7px; text-align: center;
  font-family: var(--fonte-numero); font-size: var(--txt-micro); font-weight: var(--peso-forte);
  color: var(--sinal-atencao); background: var(--sinal-atencao-fundo); border-radius: var(--raio-p);
}

.lateral__pe { margin-top: auto; display: grid; gap: var(--e-3); padding: var(--e-3) var(--e-2) 0; border-top: 1px solid var(--borda-sutil); }
.quem { display: flex; align-items: center; gap: var(--e-3); }
.quem__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  font-weight: var(--peso-forte); text-transform: uppercase; color: var(--txt-forte);
  background: var(--sup-elevada-2); border: 1px solid var(--borda-sutil);
}
.quem__nome { font-weight: var(--peso-medio); text-transform: capitalize; }
.seletor-tema { width: 100%; }
.seletor-tema button { flex: 1; }

/* ---------- área principal ---------- */
.area { margin-left: 248px; min-width: 0; }
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-3);
  padding: calc(env(safe-area-inset-top) + var(--e-3)) var(--e-6) var(--e-3);
  background: color-mix(in srgb, var(--sup-base) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda-sutil);
}
.topo__titulo { min-width: 0; }
.topo__titulo .t-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo__sub { font-size: var(--txt-corpo-p); color: var(--txt-suave); }
.topo__direita { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.sinais { display: flex; gap: var(--e-3); align-items: center; padding: 0 var(--e-3); min-height: 36px; border: 1px solid var(--borda-sutil); border-radius: var(--raio-m); background: var(--sup-elevada); }
.sinal { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fonte-numero); font-size: var(--txt-micro); letter-spacing: var(--entreletra-mono); text-transform: uppercase; color: var(--txt-medio); }
.menu-botao { display: none; }
.botao--icone { padding: 0; width: var(--alvo-min); }
.botao--icone svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }

.tela { padding: var(--e-6); max-width: var(--largura-tela); display: grid; gap: var(--e-5); align-content: start; }

/* ---------- grades e blocos ---------- */
.secao { min-height: var(--alvo-min); align-items: center; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.kpi .marcacao { margin-top: 2px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e-4); align-items: start; }
.bloco { display: grid; gap: var(--e-3); }
.cartao { display: grid; gap: var(--e-2); }
.cartao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

.aviso { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); background: var(--sinal-atencao-fundo); border: 1px solid color-mix(in srgb, var(--sinal-atencao) 40%, transparent); border-radius: var(--raio-m); color: var(--txt-forte); }
.aviso a { color: inherit; font-weight: var(--peso-forte); }
.aviso--erro { background: var(--sinal-erro-fundo); border-color: color-mix(in srgb, var(--sinal-erro) 40%, transparent); }

.barra-ferramentas { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: end; }
.barra-ferramentas .campo { flex: 1 1 220px; }
.campo textarea { min-height: 110px; padding: var(--e-3); font: inherit; color: var(--txt-forte); background: var(--sup-elevada); border: 1px solid var(--borda-campo); border-radius: var(--raio-m); resize: vertical; }
.campo textarea:focus-visible { border-color: var(--foco); outline-offset: 0; }
.campo__ajuda { font-size: var(--txt-micro); color: var(--txt-suave); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-3); align-items: start; }
.campo input:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- linha de registro (evento, perfil, lugar, fila) ---------- */
.registro {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-3) var(--e-4); align-items: start;
  padding: var(--e-3) var(--e-4); background: var(--sup-elevada); border: 1px solid var(--borda-sutil); border-radius: var(--raio-m);
}
.registro--sem-img { grid-template-columns: auto 1fr; align-items: center; }
.registro__img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--raio-p); background: var(--sup-elevada-2); border: 1px solid var(--borda-sutil); }
.registro__corpo { display: grid; gap: 4px; min-width: 0; }
.registro__titulo { font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.registro__titulo a { color: inherit; text-decoration: none; }
.registro__titulo a:hover { text-decoration: underline; }
.registro__meta { font-size: var(--txt-corpo-p); color: var(--txt-suave); overflow-wrap: anywhere; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.acoes .botao { min-height: 36px; padding: 0 14px; font-size: var(--txt-corpo-p); }
.botao--perigo { color: var(--sinal-erro); }
.status--neutro { color: var(--txt-medio); background: var(--sup-elevada-2); }
details summary { cursor: pointer; font-size: var(--txt-corpo-p); color: var(--txt-suave); }
pre.leitura { max-height: 260px; overflow: auto; padding: var(--e-3); background: var(--sup-elevada-2); border-radius: var(--raio-p); }

/* ---------- tabela ---------- */
.tabela-caixa { overflow-x: auto; border: 1px solid var(--borda-sutil); border-radius: var(--raio-m); background: var(--sup-elevada); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-corpo-p); }
.tabela th { text-align: left; font-weight: var(--peso-medio); color: var(--txt-suave); font-family: var(--fonte-numero); font-size: var(--txt-micro); letter-spacing: var(--entreletra-mono); text-transform: uppercase; }
.tabela th, .tabela td { padding: 10px var(--e-4); border-bottom: 1px solid var(--borda-sutil); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.num { white-space: nowrap; }

/* ---------- comando ---------- */
.resposta { white-space: pre-wrap; padding: var(--e-3) var(--e-4); background: var(--sup-elevada-2); border-radius: var(--raio-m); border-left: 3px solid var(--cor-acento); }

/* ---------- aviso flutuante ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--e-5)); z-index: 50;
  max-width: min(520px, calc(100vw - 32px)); padding: var(--e-3) var(--e-4);
  background: var(--sup-elevada-2); color: var(--txt-forte); border: 1px solid var(--borda-destaque); border-radius: var(--raio-m);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); display: none;
}

.fundo-escuro { display: none; }
.nav-baixo { display: none; }

/* ---------- celular ---------- */
@media (max-width: 959px) {
  .lateral { transform: translateX(-100%); transition: transform var(--t-entrada) var(--curva); width: min(290px, 86vw); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .app[data-menu="aberto"] .lateral { transform: none; }
  .app[data-menu="aberto"] .fundo-escuro { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.5); }
  .area { margin-left: 0; padding-bottom: 76px; }
  .topo { padding: calc(env(safe-area-inset-top) + var(--e-2)) var(--e-4) var(--e-2); }
  .topo__sub, .sinais { display: none; }
  .topo .t-titulo { font-size: var(--txt-titulo-p); }
  .menu-botao { display: inline-flex; }
  .tela { padding: var(--e-4); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .destaque__numero { font-size: 2.75rem; }
  .nav-baixo {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: var(--e-1) var(--e-1) calc(env(safe-area-inset-bottom) + var(--e-1));
  }
  .nav-baixo a, .nav-baixo button { display: grid; justify-items: center; gap: 2px; padding: 6px 0; min-height: var(--alvo-min); font: inherit; font-size: 0.6875rem; color: var(--txt-suave); background: none; border: 0; text-decoration: none; cursor: pointer; position: relative; }
  .nav-baixo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .nav-baixo [aria-current="page"] { color: var(--txt-forte); font-weight: var(--peso-forte); }
  .nav-baixo [aria-current="page"] svg { color: var(--cor-acento); filter: drop-shadow(0 0 var(--brilho) var(--cor-acento)); }
  .nav-baixo a::before { display: none; }
  .nav-baixo .ir__n { position: absolute; top: 2px; left: 55%; margin: 0; min-width: 18px; padding: 0 4px; font-size: 0.625rem; }
  .registro__img { width: 56px; height: 70px; }
  .registro { padding: var(--e-3); }
}