/* Plano Ontime (src/setores/abltech/camada2.js). As abas usam o componente
   .segmentos do núcleo; aqui ficam os quadros. Cada quadro é um iframe: a página
   lá dentro traz o próprio visual e só recebe do portal o tema. */
.c2-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.c2-abrir-cheia { display: inline-flex; align-items: center; gap: .5rem; }
.c2-abrir-cheia .ico { width: 15px; height: 15px; }
.c2-abrir-cheia:disabled { cursor: progress; opacity: .6; }

.c2-quadro {
  display: block; width: 100%;
  height: calc(100dvh - 13rem); min-height: 30rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--painel-cheio);
  box-shadow: var(--sombra-2);
}

/* Sistema Atual: por cima do portal, na tela inteira. A página é larga, e
   abaixo de 980 px a capa dela deita; no quadro de cima ela ficava assim. */
.c2-cheia {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--painel-cheio);
}
.c2-cheia::backdrop { background: var(--painel-cheio); }
.c2-cheia-quadro { display: block; width: 100%; height: 100%; border: 0; }
.c2-fechar {
  position: absolute; top: 14px; right: 30px; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem .45rem .7rem;
  border: 1px solid var(--linha-2); border-radius: 999px;
  background: var(--painel-alto); color: var(--texto);
  box-shadow: var(--sombra-2);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.c2-fechar:hover { border-color: var(--rubi); }
.c2-fechar:focus-visible { outline: 2px solid var(--rubi); outline-offset: 2px; }
.c2-fechar .ico { width: 15px; height: 15px; }

@media (max-width: 780px) {
  .c2-quadro { height: calc(100dvh - 15rem); min-height: 26rem; }
  /* só o X: a página começa colada no topo, e a palavra cobriria a primeira linha */
  .c2-fechar { top: 8px; right: 12px; padding: .5rem; }
  .c2-fechar-rotulo { display: none; }
  /* roteiro e Sistema Atual lado a lado, e não um trilho inteiro cada */
  .c2-barra { gap: .5rem; }
  .c2-barra .segmentos { width: auto; }
  .c2-barra .segmento { padding-inline: .7rem; }
}