/*
  Só o que o Crew27 não cobre: a grade das páginas, como no desenho. Cor, espaço, raio e fonte vêm todos de token.
  Dimensões de layout declaradas como exceção (o desenho as fixa): menu 280px, painel de marca 696px e cartão 680px,
  coluna do formulário 480px, seletor de cliente 260px, busca 360px, situação 220px, coluna lateral da Visão geral
  340px, cartões de espera da lista 220px (mínimo), coluna do formulário de pareamento 560px, regras de senha 320px e vitrine da marca 536px.
  Larguras máximas de leitura, para o texto não esticar em tela grande: texto de apoio da marca 460px, texto do
  pareamento 440px, ilustração do pareamento 520px, PIN de sucesso 420px e ilustração de sucesso 240px.
  Biblioteca: painel da seleção 360px, filtro de tipo 200px, ilustração de lista vazia 220px, ícone de pasta 56px e
  lista da seleção com no máximo 240px de altura (seleção grande não estica o painel).
  Enviar mídia: coluna da fila de envio 460px e ilustração 280px.
  Quebras de layout (media queries): 700px, 900px, 1000px, 1180px, 1280px e 1500px, onde o desenho deixa de caber.
  Borda de cartão: 1px solid var(--line), igual ao que o próprio Crew27 faz nos seus cartões.

  Overrides de componente do Crew27 (declarados, para o Crew27 corrigir; as regras ficam no fim deste arquivo):
  1. O Modal recorta o painel do Select aberto (overflow hidden), e o desenho põe um Select dentro do Modal de
     "Para qual cliente é este dispositivo?". A regra libera o recorte só no Modal que tem Select.
  2. A Sidebar rola quando a janela é baixa, mas mostra a barra de rolagem nativa, que destoa do menu escuro. Pedido
     do dono do produto: a rolagem continua, a barra não aparece. A regra vale só no menu lateral do painel.
  Ambos saem quando o Crew27 resolver.
*/
html, body { margin: 0; background: var(--surface); color: var(--ink); font: var(--text-body); }
#raiz { min-height: 100vh; }
.espera { min-height: 100vh; display: grid; place-items: center; }

/* Pequenos utilitários de coluna e linha, por token de espaço. */
.zero { margin: 0; }
.suave { color: var(--ink-soft); }
.centro { text-align: center; }
.coluna { display: flex; flex-direction: column; }
.coluna--1 { gap: var(--space-1); }
.coluna--2 { gap: var(--space-2); }
.coluna--3 { gap: var(--space-3); }
.coluna--4 { gap: var(--space-4); }
.coluna--5 { gap: var(--space-5); }
.linha { display: flex; gap: var(--space-3); }
.linha--fim { justify-content: flex-end; }
.linha--centro { justify-content: center; }

/* ---------- Telas de acesso ---------- */
.acesso { box-sizing: border-box; min-height: 100vh; display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--surface); color: var(--ink); }
.acesso__coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cabecalho-acesso { width: 480px; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-2); }
.formulario-acesso { width: 480px; max-width: 100%; box-sizing: border-box; padding: var(--space-6); }
.senha-campo { position: relative; }
.senha-regras { position: absolute; z-index: var(--z-dropdown); top: 0; left: calc(100% + var(--space-4)); width: 320px; color: var(--ink); }
.regra { display: flex; align-items: flex-start; gap: var(--space-2); }
.regra__icone { display: inline-flex; flex-shrink: 0; color: var(--ink-faint); }
.regra__icone--ok { color: var(--success); }

/* Painel de marca */
.marca { width: 696px; flex-shrink: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--action); color: var(--on-action); }
.marca__vitrine { position: relative; height: 536px; overflow: hidden; flex-shrink: 0; }
.marca__cartao { position: absolute; left: var(--space-12); top: var(--space-12); width: 680px; color: var(--ink); }
.marca__conteudo { display: flex; flex-direction: column; gap: var(--space-5); }
.marca__janela { display: flex; align-items: center; gap: var(--space-2); }
.marca__ponto { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--line-control); }
.marca__legenda { margin-left: var(--space-3); }
.marca__totais { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.marca__total { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.marca__linhas { display: flex; flex-direction: column; gap: var(--space-5); }
.marca__linha { display: flex; align-items: center; gap: var(--space-4); }
.marca__nome { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.marca__texto { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-10) var(--space-12) 0; }
.marca__apoio { max-width: 460px; }
.marca__paginas { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: auto; padding-bottom: var(--space-10); }
.marca__pagina { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-action) 40%, transparent); }
.marca__pagina--atual { width: var(--space-6); background: var(--on-action); }
@media (max-width: 1180px) { .marca { display: none; } }
@media (max-width: 900px) { .senha-regras { position: static; width: auto; margin-top: var(--space-2); } }

/* ---------- Telas com menu ---------- */
.moldura { display: flex; align-items: flex-start; min-height: 100vh; background: var(--surface); color: var(--ink); }
.menu-lateral { width: 280px; height: 100vh; box-sizing: border-box; flex-shrink: 0; position: sticky; top: 0; background: var(--surface); color: var(--ink); }
.menu-lateral__grupo { margin: 0; padding: var(--space-4) var(--space-3) var(--space-1); color: var(--sb-faint, var(--ink-faint)); }
.menu-lateral__pessoa { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.menu-lateral__textos { display: flex; flex-direction: column; min-width: 0; }
.menu-lateral__papel { color: var(--sb-faint, var(--ink-faint)); }
.pagina { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-8) var(--space-10) var(--space-4); }
.pagina > * { flex-shrink: 0; }
.pagina--centro { justify-content: center; }
.pagina__cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.pagina__titulos { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pagina__acoes { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.pagina__cliente { width: 260px; }

/* Visão geral */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.indicador { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.indicador__texto { display: flex; flex-direction: column; gap: var(--space-1); }
.visao { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.visao__lateral { display: flex; flex-direction: column; gap: var(--space-4); }
.secao { display: flex; flex-direction: column; gap: var(--space-5); }
.secao--curta { gap: var(--space-3); }
.secao__topo { display: flex; gap: var(--space-4); align-items: flex-end; }
.secao__titulos { display: flex; flex-direction: column; gap: var(--space-1); }
.secao__filtro { margin-left: auto; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cartoes--espera { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.cartao { display: flex; flex-direction: column; gap: var(--space-3); }
.cartao__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cartao__nome { display: flex; flex-direction: column; min-width: 0; }
.cartao__linhas { display: flex; flex-direction: column; gap: var(--space-1); }
@media (max-width: 1500px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .visao { grid-template-columns: minmax(0, 1fr); } .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dispositivos */
.ferramentas { display: flex; align-items: center; gap: var(--space-3); }
.ferramentas__busca { flex: 1; max-width: 360px; }
.ferramentas__situacao { width: 220px; }
.ferramentas__total { margin-left: auto; color: var(--ink-soft); }
.tabela__formato { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tabela__pin { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.gaveta { display: flex; flex-direction: column; gap: var(--space-5); }
.gaveta__rodape { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; }
.pin-bloco { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-sunken); }
.pin-bloco__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.modal-corpo { display: flex; flex-direction: column; gap: var(--space-5); }
.modal-titulos { display: flex; flex-direction: column; gap: var(--space-1); }
.modal-titulos--folga { padding-right: var(--space-10); }
.modal-acoes { display: flex; justify-content: flex-end; gap: var(--space-3); }
.grupo-radio { display: flex; flex-direction: column; gap: var(--space-2); }
.grupo-radio__opcoes { display: flex; gap: var(--space-6); }

/* Parear dispositivo */
.parear { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: var(--space-4); align-items: stretch; }
.parear__guia { display: flex; flex-direction: column; gap: var(--space-6); box-sizing: border-box; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--action); color: var(--on-action); }
.parear__texto { display: flex; flex-direction: column; gap: var(--space-2); max-width: 440px; }
.parear__ilustracao { max-width: 520px; width: 100%; align-self: center; }
.parear__tela { display: block; width: 100%; height: auto; }
.parear__passos { color: var(--ink); }
.parear__ok { display: block; width: 240px; height: auto; }
.cliente-campo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-sunken); }
.cliente-campo__nome { flex: 1; min-width: 0; }
.convite-email { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.convite-email__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.icone-suave { display: inline-flex; color: var(--ink-soft); }
.sucesso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); text-align: center; min-height: 560px; }
.sucesso__pin { width: 100%; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-sunken); }
@media (max-width: 1280px) { .parear { grid-template-columns: minmax(0, 1fr); } }

/* Biblioteca */
.linha--centro-v { align-items: center; }
.bib-alinha-topo { align-items: flex-start; gap: var(--space-2); }
.bib-layout { display: flex; align-items: flex-start; }
.bib-principal { flex: 1; min-width: 0; }
.bib-lateral { flex-shrink: 0; overflow: hidden; box-sizing: border-box; width: 0; padding-left: 0; opacity: 0; visibility: hidden; transform: translateX(var(--space-6));
  transition: width var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.bib-lateral--aberta { width: calc(360px + var(--space-4)); padding-left: var(--space-4); opacity: 1; visibility: visible; transform: none; }
.bib-lateral--solta { overflow: visible; }
.bib-lateral__miolo { width: 360px; }
.bib-lista-sel { max-height: 240px; overflow-y: auto; }
.bib-grade { display: grid; gap: var(--space-4); }
.bib-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bib-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bib-card { position: relative; box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.bib-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-control); }
.bib-card--pasta { padding: var(--space-4); }
.bib-card--item { padding: var(--space-3); cursor: pointer; outline: 2px solid transparent; }
.bib-card--sel { outline-color: var(--action); }
.bib-pasta-icone { display: block; width: 56px; height: auto; }
.bib-cobre { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-lg); }
.bib-canto { position: absolute; top: var(--space-2); right: var(--space-2); }
.bib-thumb { position: relative; }
.bib-thumb__botao { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-md); overflow: hidden; }
.bib-thumb__marca { position: absolute; top: var(--space-2); left: var(--space-2); width: var(--space-6); height: var(--space-6); overflow: hidden; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--surface-raised); display: flex; }
.bib-miniatura { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.bib-miniatura--foto { position: relative; }
.bib-miniatura--foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-sunken); }
.bib-miniatura__selo { position: absolute; left: var(--space-2); bottom: var(--space-2); width: var(--space-6); height: var(--space-6); }
.bib-legenda { padding: 0 var(--space-1); }
.bib-legenda__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bib-legenda__meta { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bib-textos { min-width: 0; }
.bib-corte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-nao-encolhe { flex-shrink: 0; }
.bib-cresce { flex: 1; }
.bib-quebra { overflow-wrap: anywhere; }
.bib-empurra { margin-left: auto; }
.bib-tipo { width: 200px; }
.bib-titulo-itens { gap: var(--space-4); }
.bib-vazio { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10); text-align: center; }
.bib-vazio__ilustracao { display: block; width: 220px; height: auto; }
@media (max-width: 1280px) { .bib-grade--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bib-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .bib-grade--4, .bib-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bib-lateral, .bib-card { transition: none; } }

/* Override declarado no topo: sem ele a lista de clientes fica cortada pelo Modal. */
.c27-modal:has(.c27-selectwrap) { overflow: visible; }

/* Override 2 do topo: o menu rola sem mostrar a barra (Firefox e navegadores com Chromium/WebKit). */
.menu-lateral .c27-sidebar__nav { scrollbar-width: none; }
.menu-lateral .c27-sidebar__nav::-webkit-scrollbar { display: none; }

/* ---------- Enviar mídia ---------- */
.enviar { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--space-4); align-items: start; }
.enviar__ilustracao { display: block; width: 280px; height: auto; max-width: 100%; }
.enviar__destino { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.enviar__uso { justify-content: space-between; }
.enviar__topo-fila { align-items: flex-start; }
.enviar__limpar { margin-left: auto; }
@media (max-width: 1180px) { .enviar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .enviar__destino { grid-template-columns: minmax(0, 1fr); } }