/* lekto-protobar.css — Barra de controles do PROTÓTIPO (NÃO faz parte do produto).
 *
 * Chrome de demonstração fixo no rodapé (ver js/lekto-protobar.js), mais o
 * banner e o véu do modo sem conectividade. Visualmente distinto da UI do
 * produto: superfície escura, sempre, mesmo nas telas claras.
 *
 * Classe própria (.lkp-*) e compensações próprias de propósito: a folha da
 * barra do outro produto é podada do build da Lekto, e reaproveitar a classe
 * dela faria o respiro do rodapé sumir só em produção.
 *
 * Só tokens do DS + color-mix. Nenhuma cor crua.
 */

body.lkp-on { padding-bottom: 48px; }

.lkp-bar {
  /* abaixo da camada de sobreposição (DS:Modal = 180): a barra é chrome de
     protótipo e não pode cobrir o véu nem os modais do produto. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 170;
  min-height: 48px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--color-surface-deepest);
  border-top: 1px solid color-mix(in srgb, var(--color-essence-ivory) 12%, transparent);
  box-shadow: 0 -6px 20px -10px color-mix(in srgb, var(--color-surface-deepest) 70%, transparent);
  color: color-mix(in srgb, var(--color-essence-ivory) 72%, transparent);
  font-size: 12.5px;
}

/* Marca (esquerda) */
.lkp-bar__marca {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-essence-ivory) 52%, transparent);
}
.lkp-bar__marca svg {
  width: 15px; height: 15px; fill: none; stroke: var(--color-accent-light);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Grupos rotulados */
.lkp-grp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lkp-grp--fx { flex: 1; overflow-x: auto; scrollbar-width: none; }
.lkp-grp--fx::-webkit-scrollbar { display: none; }
.lkp-lbl {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-essence-ivory) 50%, transparent);
}
.lkp-lbl svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Segmentado (atores e controles de estado) */
.lkp-seg {
  display: inline-flex; gap: 2px; padding: 3px; flex-shrink: 0;
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-essence-ivory) 8%, transparent);
}
.lkp-opt {
  font: inherit; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-pill);
  color: color-mix(in srgb, var(--color-essence-ivory) 74%, transparent);
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease);
}
.lkp-opt:hover { color: var(--color-essence-ivory); background: color-mix(in srgb, var(--color-essence-ivory) 10%, transparent); }
.lkp-opt.is-on { background: var(--color-accent-pure); color: var(--color-essence-ivory); }
.lkp-opt__curto { display: none; }
.lkp-seg--sm .lkp-opt { min-height: 30px; padding: 0 10px; font-size: 12px; }

/* Controle de estado com rótulo à esquerda */
.lkp-fx { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lkp-fx__lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-essence-ivory) 50%, transparent);
  white-space: nowrap;
}

/* Select de tela */
.lkp-select {
  font: inherit; font-weight: 700;
  min-height: 34px; max-width: 190px; padding: 0 10px;
  border-radius: var(--border-radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-essence-ivory) 16%, transparent);
  background: color-mix(in srgb, var(--color-essence-ivory) 8%, transparent);
  color: var(--color-essence-ivory);
  cursor: pointer;
}
.lkp-select option { color: var(--color-surface-darker); background: var(--color-surface-pure); }
/* perfil unico: o select fica na tela para dizer de quem e aquela tela, mas nao
   e escolha — o cursor nao pode prometer clique */
.lkp-select:disabled { cursor: default; }

/* Botões */
.lkp-btn {
  font: inherit; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: 34px; padding: 0 12px;
  border: 0; cursor: pointer;
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-essence-ivory) 8%, transparent);
  color: color-mix(in srgb, var(--color-essence-ivory) 84%, transparent);
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease);
}
.lkp-btn:hover { background: color-mix(in srgb, var(--color-essence-ivory) 16%, transparent); color: var(--color-essence-ivory); }
.lkp-btn svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lkp-btn--tog.is-on { background: var(--color-accent-pure); color: var(--color-essence-ivory); }
.lkp-btn--gaveta b {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-essence-ivory) 18%, transparent);
  font-size: 11px; font-weight: 800;
}
.lkp-btn--gaveta.is-on { background: color-mix(in srgb, var(--color-essence-ivory) 20%, transparent); color: var(--color-essence-ivory); }
.lkp-btn--rede.is-on { background: var(--color-warning-pure); color: var(--color-surface-darker); }

.lkp-bar__dir { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* Gaveta de ajustes da tela */
.lkp-gav {
  position: fixed; right: 14px; bottom: 56px; z-index: 170;
  width: min(420px, calc(100vw - 28px)); max-height: min(60vh, 520px); overflow-y: auto;
  padding: 14px 16px 16px;
  border-radius: var(--border-radius-md);
  background: var(--color-surface-deepest);
  border: 1px solid color-mix(in srgb, var(--color-essence-ivory) 14%, transparent);
  box-shadow: var(--lkt-shadow-level4);
  color: color-mix(in srgb, var(--color-essence-ivory) 78%, transparent);
}
.lkp-gav[hidden] { display: none; }
.lkp-gav__grupo + .lkp-gav__grupo { margin-top: 14px; }
.lkp-gav__t {
  margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-essence-ivory) 52%, transparent);
}
.lkp-gav__row { display: flex; flex-wrap: wrap; gap: 7px; }
.lkp-gav .lkp-fx { flex-direction: column; align-items: flex-start; gap: 5px; }

/* ---------------------------------------------------------------------------
   Modo sem conectividade — banner no cabeçalho da tela + véu sobre o conteúdo
   --------------------------------------------------------------------------- */
.lkp-net {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 12px 16px;
  border-radius: var(--border-radius-sm-plus);
  background: var(--color-warning-tinted);
  border: 1px solid color-mix(in srgb, var(--color-warning-pure) 45%, transparent);
  color: var(--color-warning-darker);
  position: relative; z-index: 3;   /* acima do véu: o aviso não pode ser esmaecido junto */
}
.lkp-net__ic { display: grid; place-items: center; flex-shrink: 0; }
.lkp-net__ic svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lkp-net__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lkp-net__txt b { font-size: 14.5px; font-weight: 800; }
.lkp-net__txt span { font-size: 13px; color: var(--color-warning-dark); }
.lkp-net__cta {
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  margin-left: auto; flex-shrink: 0;
  min-height: 40px; padding: 0 16px; cursor: pointer;
  border-radius: var(--border-radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-warning-darker) 40%, transparent);
  background: transparent; color: var(--color-warning-darker);
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.lkp-net__cta:hover { background: color-mix(in srgb, var(--color-warning-pure) 30%, transparent); }

/* O véu esmaece o conteúdo da tela, e só ele: a barra (z 170) e o banner
   (z 3, dentro do container) continuam legíveis por cima. */
body.lkp-offline .view.is-current > :not(.lkp-net),
body.lkp-offline .adm-page:not([hidden]) > :not(.lkp-net),
body.lkp-offline .editor:not([hidden]) > :not(.lkp-net) {
  opacity: var(--opacity-intense);
  filter: grayscale(.35);
  transition: opacity var(--motion-dur-base) var(--motion-ease);
}
/* O FAB de registrar é ação, não navegação: sem rede ele não pode parecer o
   único elemento vivo da tela. O rail fica legível — navegar continua valendo. */
body.lkp-offline .cap-fab { opacity: var(--opacity-intense); filter: grayscale(.35); }

/* Sobe os elementos fixos das telas para não ficarem escondidos atrás da barra.
   Somam também --modo-offline-lift (css/styles.css): com as duas barras
   ligadas ao mesmo tempo (numa demonstração), esta regra vence a de
   .is-modo-offline por especificidade (body.X .Y > .X .Y) — sem a soma pela
   variável, o levante do Modo Offline seria descartado nesse caso, e o
   bottom-nav/userpop ficariam espremidos atrás da barra roxa dele. */
body.lkp-on .sidebar,
body.lkp-on .adm-sidebar { bottom: calc(16px + 48px + var(--modo-offline-lift, 0px)); }
body.lkp-on .toast { bottom: calc(28px + 48px); }
body.lkp-on .cap-fab { bottom: calc(24px + 48px); }
body.lkp-on #finish-bar { bottom: calc(20px + 48px); }
/* A action bar da one pager (e o respiro e o FAB que a acompanham) leem esta
   altura em vez de repetir o 48px: css/styles.css compõe tudo a partir dela. */
body.lkp-on { --lkp-lift: 48px; }
body.lkp-on .userpop { bottom: calc(20px + 48px + var(--modo-offline-lift, 0px)); }
body.lkp-on .bottom-nav { bottom: calc(12px + 48px + var(--modo-offline-lift, 0px)); }
/* Modo Offline (js/modo-offline.js, css/styles.css) é produto, não protótipo —
   mesmo assim, se as duas barras estiverem ligadas ao mesmo tempo numa
   demonstração, a de produto não pode desaparecer atrás da de dev. */
body.lkp-on .modo-offline-bar { bottom: 48px; }

/* Telas estreitas: só ícones e rótulos curtos, para tudo caber */
@media (max-width: 1200px) {
  .lkp-opt__longo { display: none; }
  .lkp-opt__curto { display: inline; }
}
@media (max-width: 900px) {
  .lkp-grp--tela { display: none; }
}
/* Telas estreitas: a barra vira uma tira que ROLA. Encolher os itens fazia eles
   se atropelarem — e um controle sobreposto a outro é pior do que fora de vista. */
@media (max-width: 700px) {
  .lkp-bar { gap: 8px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
  .lkp-bar::-webkit-scrollbar { display: none; }
  .lkp-bar > * { flex-shrink: 0; }
  .lkp-bar__marca, .lkp-lbl span, .lkp-btn--rede span { display: none; }
  .lkp-bar__dir { margin-left: 0; }
  .lkp-grp--fx { overflow: visible; flex: 0 0 auto; }
  .lkp-net { flex-wrap: wrap; }
  .lkp-net__cta { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lkp-opt, .lkp-btn, .lkp-net__cta,
  body.lkp-offline .view.is-current > :not(.lkp-net) { transition: none; }
}

/* ---------------------------------------------------------------------------
   Aviso — o perfil escolhido não alcança a tela aberta
   ---------------------------------------------------------------------------
   Cobre o retângulo do CONTEÚDO, não a tela inteira: o menu e a barra do
   protótipo continuam à vista e clicáveis, que são as saídas de quem lê o
   aviso — por isso ele não oferece nenhuma.
   Opaco, e não um véu: a tela por baixo pertence ao perfil ANTERIOR, e deixá-la
   entrever seria mostrar como conteúdo daquele perfil o que não é dele.
   Abaixo da barra (z 170) e acima de qualquer coisa da tela. */
.lkp-aviso {
  display: grid; place-items: center;
  min-height: 52vh; padding: 24px;
}
/* Os irmaos do aviso somem: a tela por baixo pertence ao perfil ANTERIOR, e
   entreve-la seria mostrar como conteudo daquele perfil o que nao e dele. Some
   o CONTEUDO, nao o container — a tela precisa continuar sabendo quem e. */
body.lkp-fora .view.is-current > :not(.lkp-aviso),
body.lkp-fora .adm-page:not([hidden]) > :not(.lkp-aviso),
body.lkp-fora .editor:not([hidden]) > :not(.lkp-aviso) { display: none; }
.lkp-aviso__cx {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; max-width: 420px;
  color: var(--theme-text-muted);
}
.lkp-aviso__ic {
  width: 34px; height: 34px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: var(--opacity-intense);
}
.lkp-aviso p {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--theme-text-secondary);
}