/* Lassais Acesso Remoto — tela do portal (AcessoRemoto, 10/11/2026). Só os tokens do Grupo (tokens.css): preto e ouro, claro e escuro. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--fonte); font-size: var(--texto-md);
  color: var(--txt); background: var(--sup-fundo); line-height: 1.5; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic--g { width: 28px; height: 28px; }

/* barra preta + faixa de ouro (o casco do Grupo) */
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--e-4); padding: 0 clamp(16px, 3vw, 40px);
  padding-top: env(safe-area-inset-top); min-height: 60px; background: var(--sup-invertida); color: var(--txt-invertido); }
.topo__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.topo__txt { font-size: var(--texto-lg); letter-spacing: .01em; white-space: nowrap; }
.topo__txt b { font-weight: 700; color: var(--ouro); }
.topo__eu { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topo__nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ouro); flex: none; }
.av--ini { display: inline-grid; place-items: center; background: var(--ouro); color: #0b0b0b; font-weight: 700; font-size: 13px; }
.topo__sair { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--raio-md); text-decoration: none;
  color: var(--txt-invertido-2); min-height: 40px; }
.topo__sair:hover, .topo__sair:focus-visible { background: var(--sup-invertida-2); color: var(--txt-invertido); }
.faixa { height: 3px; background: linear-gradient(90deg, var(--ouro-600), var(--ouro-300) 50%, var(--ouro-600)); }

.miolo { width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(20px, 3.5vw, 44px) clamp(16px, 3vw, 40px) 48px; flex: 1; }
.rodape { padding: 18px clamp(16px, 3vw, 40px) calc(18px + env(safe-area-inset-bottom)); color: var(--txt-3); font-size: var(--texto-sm);
  border-top: 1px solid var(--borda-sutil); text-align: center; }
.rodape .ic { color: var(--ouro-txt); }

.trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--texto-sm); color: var(--txt-2); margin-bottom: var(--e-5); }
.trilha a { text-decoration: none; color: var(--txt-2); }
.trilha a:hover { color: var(--txt); text-decoration: underline; }
.trilha__sep { color: var(--txt-3); }
.trilha [aria-current] { color: var(--txt); font-weight: 600; }

.cab { margin-bottom: var(--e-6); }
.cab h1, .cartao h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; }
.cab__sub { color: var(--txt-2); margin-top: 6px; max-width: 70ch; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--raio-md);
  border: 1px solid var(--borda-forte); background: var(--sup-base); color: var(--txt); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--sup-hover); }
.btn:focus-visible, .chave:focus-visible, .pc:focus-visible, .reg__item:focus-visible { outline: none; box-shadow: var(--foco-anel); }
.btn--ouro { background: var(--ouro); border-color: var(--ouro-600); color: #0b0b0b; }
.btn--ouro:hover { background: var(--ouro-400); }
.btn--ouro[disabled] { opacity: .45; cursor: not-allowed; }
.btn--perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn--perigo:hover { filter: brightness(1.08); }
.btn--perigo-sutil { color: var(--perigo-txt); border-color: var(--perigo-borda); background: var(--perigo-suave); }
.btn--grande { min-height: 52px; padding: 12px 24px; font-size: var(--texto-lg); }

/* chips (cores de significado fixas) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--raio-total); font-size: var(--texto-sm); font-weight: 600;
  border: 1px solid transparent; white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; }
.chip--ok { background: var(--ok-suave); color: var(--ok-txt); border-color: var(--ok-borda); }
.chip--atencao { background: var(--aviso-suave); color: var(--aviso-txt); border-color: var(--aviso-borda); }
.chip--perigo { background: var(--perigo-suave); color: var(--perigo-txt); border-color: var(--perigo-borda); }
.chip--neutro { background: var(--sup-sutil); color: var(--txt-2); border-color: var(--borda); }

/* cartões de computador */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--e-5); }
.pc { position: relative; background: var(--sup-base); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 22px 22px 20px;
  box-shadow: var(--sombra-2); overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.pc__faixa { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--borda); }
.pc__faixa.chip--ok { background: var(--ok); } .pc__faixa.chip--atencao { background: var(--aviso); }
.pc__faixa.chip--perigo { background: var(--perigo); } .pc__faixa.chip--neutro { background: var(--borda-forte); }
.pc__cabeca { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.pc__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #0b0b0b; color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgb(212 175 55 / .35); }
.pc__nome { font-size: var(--texto-xl); line-height: 1.25; }
.pc__sub { color: var(--txt-2); font-size: var(--texto-sm); margin-top: 2px; }
.pc__visto { color: var(--txt-3); font-size: var(--texto-sm); display: flex; gap: 6px; align-items: center; }
.pc__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.pc__acoes form { display: contents; }
.pc__acoes .btn--ouro { flex: 1 1 200px; }

/* interruptor */
.pc__escurecer { margin: 0; }
.chave { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: var(--raio-lg);
  border: 1px solid var(--borda); background: var(--sup-sutil); color: var(--txt); font: inherit; cursor: pointer; min-height: 48px; }
.chave__trilho { width: 46px; height: 26px; border-radius: 13px; background: var(--borda-forte); position: relative; flex: none; transition: background .15s; }
.chave__bola { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: left .15s; }
.chave--on .chave__trilho { background: var(--ouro); }
.chave--on .chave__bola { left: 23px; }
.chave__txt { display: flex; flex-direction: column; }
.chave__txt small { color: var(--txt-2); font-size: var(--texto-sm); }

.regras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: var(--e-6) 0; padding: 14px 18px; border-radius: var(--raio-lg);
  background: var(--sup-base); border: 1px dashed var(--borda-forte); color: var(--txt-2); font-size: var(--texto-sm); }
.regras .ic { color: var(--ouro-txt); }
.regras span + .ic { margin-left: 12px; }

/* registro */
.recentes { background: var(--sup-base); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 8px 0; box-shadow: var(--sombra-1); }
.recentes__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 8px; flex-wrap: wrap; }
.recentes__cab h2 { font-size: var(--texto-lg); }
.recentes__cab a { color: var(--txt-link); text-decoration: none; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; min-height: 40px; }
.reg { list-style: none; margin: 0; padding: 0; }
.reg__titulos, .reg__item { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.6fr .7fr 1fr; gap: 12px; align-items: center; padding: 12px 20px; }
.reg__titulos { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); border-bottom: 1px solid var(--borda-sutil); font-weight: 700; }
.reg__item { border-top: 1px solid var(--borda-sutil); font-size: var(--texto-sm); position: relative; }
.reg__item:first-child { border-top: 0; }
.reg__quando { font-weight: 600; }
.reg__de { color: var(--txt-2); overflow-wrap: anywhere; }
.reg__dur { font-variant-numeric: tabular-nums; }
.reg__motivo { color: var(--txt-2); }
.vazio { padding: 18px 20px; color: var(--txt-3); list-style: none; }
.nota { color: var(--txt-3); font-size: var(--texto-sm); margin: 14px 0; }
.nota a { color: var(--txt-link); }

/* avisos */
.faixa-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border-radius: var(--raio-lg); margin-bottom: var(--e-5); border: 1px solid; }
.faixa-aviso > div { flex: 1 1 260px; }
.faixa-aviso--perigo { background: var(--perigo-suave); border-color: var(--perigo-borda); color: var(--perigo-txt); }
.faixa-aviso--ok { background: var(--ok-suave); border-color: var(--ok-borda); color: var(--ok-txt); }

/* confirmação crítica */
.cartao { max-width: 720px; margin: 0 auto; background: var(--sup-base); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--sombra-3); display: flex; flex-direction: column; gap: 14px; }
.cartao--critico { border-top: 4px solid var(--ouro); }
.selo-critico { display: inline-flex; align-self: flex-start; gap: 8px; align-items: center; padding: 6px 12px; border-radius: var(--raio-total);
  background: #0b0b0b; color: var(--ouro); font-size: var(--texto-sm); font-weight: 700; letter-spacing: .02em; }
.selo-critico--perigo { background: var(--perigo); color: #fff; }
.selo-critico--neutro { background: var(--sup-sutil); color: var(--txt-2); }
.lista-critica { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; }
.lista-critica li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--raio-lg); background: var(--sup-sutil); }
.lista-critica .ic { color: var(--ouro-txt); margin-top: 2px; }
.acoes-critica { display: flex; flex-wrap: wrap-reverse; gap: 12px; justify-content: space-between; margin-top: 8px; }

/* menu de contexto (botão direito, tecla Menu, toque longo) */
.menu { position: fixed; z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 240px; border-radius: var(--raio-lg); background: var(--sup-elevada);
  border: 1px solid var(--borda); box-shadow: var(--sombra-4); }
.menu a, .menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--raio-md); text-decoration: none;
  color: var(--txt); background: none; border: 0; font: inherit; cursor: pointer; min-height: 44px; text-align: left; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--sup-hover); outline: none; }
.menu [data-cortar-pc] { color: var(--perigo-txt); }

.dialogo { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--sup-sobreposicao); }
.dialogo__caixa { width: min(520px, 100%); background: var(--sup-elevada); border-radius: var(--raio-xl); padding: 24px; box-shadow: var(--sombra-4); display: grid; gap: 12px; }
.dialogo__caixa h2 { font-size: var(--texto-xl); display: flex; gap: 10px; align-items: center; color: var(--perigo-txt); }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* entrada: o mesmo cofre da Conta Lassais */
.entrada { background: #0b0b0b; color: #fff; display: grid; place-items: center; padding: 24px 16px; }
.entrada__fundo { position: fixed; inset: 0; background: #0b0b0b url("/estatico/cofre/cofre-1440.webp") center / cover no-repeat; }
.entrada__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 11 11 / .55), rgb(11 11 11 / .82)); }
@media (min-width: 1700px) { .entrada__fundo { background-image: url("/estatico/cofre/cofre-2560.webp"); } }
@media (orientation: portrait) and (max-width: 900px) { .entrada__fundo { background-image: url("/estatico/cofre/cofre-retrato-780.webp"); } }
.entrada__cartao { position: relative; width: min(460px, 100%); padding: clamp(28px, 5vw, 44px); border-radius: 22px; text-align: center;
  background: rgb(18 18 17 / .78); border: 1px solid rgb(212 175 55 / .35); box-shadow: 0 30px 80px rgb(0 0 0 / .55); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.entrada__l { width: 56px; height: auto; }
.entrada__selo { display: inline-flex; gap: 6px; align-items: center; color: var(--ouro-400); font-size: var(--texto-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.entrada h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.15; }
.entrada__sub { color: #cfcfc8; }
.entrada .btn--grande { width: 100%; margin-top: 8px; }
.entrada__regras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; color: #cfcfc8; font-size: var(--texto-sm); }
.entrada__regras li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.entrada__regras .ic { color: var(--ouro-400); }
.aviso { display: grid; grid-template-columns: 20px 1fr; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .06); color: #e9e9e4; width: 100%; }
.aviso--erro { background: rgb(185 28 28 / .22); color: #ffd9d9; border: 1px solid rgb(185 28 28 / .5); }

/* celular: redesenho, não encolhimento */
@media (max-width: 760px) {
  .topo { min-height: 56px; gap: 10px; }
  .topo__txt { font-size: var(--texto-md); }
  .topo__nome, .topo__sair span { display: none; }
  .topo__sair { padding: 8px; min-width: 44px; justify-content: center; }
  .pc { padding: 18px 16px 16px; }
  .pc__cabeca { grid-template-columns: auto 1fr; }
  .pc__cabeca .chip { grid-column: 1 / -1; justify-self: start; }
  .pc__acoes .btn { flex: 1 1 100%; }
  .reg__titulos { display: none; }
  .reg__item { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
  .reg__quando { grid-column: 1; } .reg__dur { grid-column: 2; grid-row: 1; justify-self: end; font-weight: 600; }
  .reg__quem, .reg__pc, .reg__de { grid-column: 1 / -1; color: var(--txt-2); }
  .reg__item > .chip, .reg__motivo { grid-column: 1 / -1; justify-self: start; }
  .regras span + .ic { margin-left: 0; }
  .acoes-critica .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }