/* Casca dos painéis web (admin e revenda): lateral escura + conteúdo.
   A troca lateral → topo é da janela, não de um componente: media query legítima. */

@layer layout {
  .casca { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-block-size: 100dvh; }
  .casca__lateral {
    position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 0.875rem;
    background: var(--casca); color: var(--casca-texto);
  }
  .casca__principal { display: flex; flex-direction: column; min-inline-size: 0; }
  .casca__topo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    min-block-size: 4rem; padding: 0.5rem var(--gutter);
    background: var(--superficie); border-block-end: 1px solid var(--linha);
  }
  .casca__topo .espaco { flex: 1; }
  .casca main { padding: var(--esp-3) var(--gutter) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); max-inline-size: 90rem; inline-size: 100%; }
  .casca main:focus { outline: none; }
}

@layer componentes {
  .casca__lateral .marca { color: #fff; padding: 0.25rem 0.625rem 1.25rem; }
  .casca__lateral nav ul { display: flex; flex-direction: column; gap: 0.125rem; padding: 0; list-style: none; }
  .casca__lateral nav p { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--casca-suave); padding: 1rem 0.75rem 0.375rem; }
  .casca__lateral nav a {
    display: flex; align-items: center; gap: 0.75rem; block-size: 2.625rem; padding-inline: 0.75rem;
    border-radius: 0.625rem; color: inherit; text-decoration: none; font-weight: 500;
  }
  .casca__lateral nav a:hover { background: var(--casca-2); }
  .casca__lateral nav a[aria-current="page"] { background: var(--casca-3); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--azul-claro); }
  .casca__lateral nav .ic { inline-size: 1.25rem; block-size: 1.25rem; color: #9DB0D6; }
  .casca__lateral nav a[aria-current="page"] .ic { color: #fff; }
  .casca__lateral :focus-visible { outline-color: var(--azul-claro); }
  .saldo-lateral { margin-block-start: auto; background: var(--casca-2); border-radius: var(--raio-m); padding: 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; color: inherit; text-decoration: none; }
  .saldo-lateral span { font-size: 0.75rem; color: var(--casca-suave); }
  .saldo-lateral strong { font-size: 1.375rem; color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

  .usuario { display: flex; align-items: center; gap: 0.625rem; line-height: 1.25; min-inline-size: 0; }
  .usuario strong { display: block; font-size: 0.875rem; }
  .usuario span { font-size: 0.75rem; color: var(--texto-3); }
  .avatar { inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.875rem; font-weight: 700; background: var(--marca-suave); color: var(--marca-texto); }
  /* Em tela estreita a lateral vira faixa no topo, com o menu numa linha que rola sozinha.
     Fica na camada de componentes para vencer as regras da lateral larga acima. */
  @media (width < 60rem) {
    .casca { grid-template-columns: minmax(0, 1fr); }
    .casca__lateral { position: static; block-size: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem var(--gutter) 0.5rem; }
    .casca__lateral .marca { padding: 0; margin-inline-end: auto; }
    .casca__lateral nav { flex-basis: 100%; display: flex; overflow-x: auto; scrollbar-width: thin; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .casca__lateral nav ul { flex-direction: row; flex-wrap: nowrap; gap: 0.25rem; }
    .casca__lateral nav p { display: none; }
    .casca__lateral nav a { block-size: auto; min-block-size: 2.75rem; padding-inline: 0.75rem; white-space: nowrap; }
    .casca__lateral nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--azul-claro); }
    .casca__lateral .saldo-lateral { display: none; }
  }

  .chip-portal { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--verde-suave); color: var(--verde); font-size: 0.8125rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
}

/* Tabela editável (preços, produtos): vira lista de cartões quando o contêiner fica estreito.
   @container é amplamente disponível; sem suporte, a tabela rola dentro da própria caixa. */
@layer componentes {
  .editavel-caixa { container-type: inline-size; }
  .tabela--editavel td { padding-block: 0.5rem; }
  .tabela--editavel .prefixado { inline-size: 8.5rem; }
  .tabela--editavel .estado-linha { font-size: 0.75rem; font-weight: 600; color: var(--texto-3); min-inline-size: 4.5rem; display: inline-block; }
  .tabela--editavel .estado-linha--erro { color: var(--vermelho); }
  .tabela--editavel tr.suja td { background: color-mix(in oklch, var(--amarelo-sinal) 8%, transparent); }
  .tabela--editavel .erro-linha { display: block; font-size: 0.75rem; font-weight: 600; color: var(--vermelho); margin-block-start: 0.25rem; }

  @container (inline-size < 46rem) {
    .tabela--editavel thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabela--editavel, .tabela--editavel tbody { display: block; }
    .tabela--editavel tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; padding: 0.875rem 0; border-block-end: 1px solid var(--linha); }
    .tabela--editavel tr.grupo-linha { display: block; padding: 0; border: 0; }
    .tabela--editavel td { display: flex; flex-direction: column; gap: 0.125rem; padding: 0; border: 0; text-align: start; }
    .tabela--editavel td.num { text-align: start; }
    .tabela--editavel td[data-rotulo]::before { content: attr(data-rotulo); font-size: 0.6875rem; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
    .tabela--editavel td:first-child, .tabela--editavel td.acao { grid-column: 1 / -1; }
    .tabela--editavel .prefixado { inline-size: 100%; }
  }
}

@layer componentes {
  .filtro-periodo { inline-size: min(100%, 20rem); }
  .filtro-periodo label { min-block-size: 2.25rem; }
}

/* Treinamento guiado (comum/treinamento.js): cartão flutuante do tour e checklist. */
@layer componentes {
  .tour {
    position: fixed; z-index: 50; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
    inline-size: min(26rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2.5rem); overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.75rem;
    box-shadow: var(--sombra-2); border: 1px solid var(--linha);
  }
  .tour h2 { font-size: 1.125rem; }
  .tour__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .tour__passo { font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
  .tour__barra { block-size: 0.375rem; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
  .tour__barra > span { display: block; block-size: 100%; background: var(--marca); border-radius: inherit; }
  .tour__acao {
    display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.625rem 0.75rem; border-radius: var(--raio-m);
    background: var(--marca-suave); color: var(--texto); font-weight: 500;
  }
  .tour__acao .ic { flex: none; margin-block-start: 0.15rem; color: var(--marca); }
  .tour__pontos { display: flex; flex-direction: column; gap: 0.25rem; padding-inline-start: 1.125rem; color: var(--texto-2); }
  .tour__acoes { display: flex; align-items: center; gap: 0.5rem; }
  .tour__acoes .espaco { flex: 1; }
  .casca__lateral nav a.tour-alvo { outline: 2px solid var(--marca); outline-offset: -2px; background: var(--casca-2); }
  @media (prefers-reduced-motion: no-preference) {
    .casca__lateral nav a.tour-alvo { animation: tour-pulso 1.6s ease-in-out infinite; }
    @keyframes tour-pulso { 50% { outline-color: transparent; } }
  }
  .treino__lista { padding: 0; list-style: none; }
  .treino__num {
    display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; margin-inline-end: 0.5rem;
    border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-size: 0.875rem; font-weight: 700;
  }
  @media print { .tour { display: none; } }
}