/* Guia de Transações SAP (aba da Creative IA). Todas as classes começam por "gts". No desenho das abas Carrosséis,
   Anúncios e Busca Instrutores: a barra do topo com o nome à esquerda e os botões à direita, painéis escuros e
   arredondados, botões em pílula, janelas no centro. O módulo aberto é uma trilha de processos: os processos numerados
   numa linha presa no alto, e cada processo com as suas atividades numa linha do tempo, com os cartões das transações.
   Cores: as da Creative (#2E7697, o degradê #2E7697 -> #022F46, o azul-claro #76B7D5) e os fundos e cinzas dos
   Carrosséis. Sem vermelho, amarelo nem verde: os estados das colaborações aparecem em tons de azul ou de cinza, com
   palavra. */
.gts {
  --gts-fundo: #0D0D0D;
  --gts-painel: #141518;
  --gts-painel2: #1B1C1F;
  --gts-borda: rgba(255, 255, 255, .07);
  --gts-texto: rgba(255, 255, 255, .92);
  --gts-texto2: rgba(255, 255, 255, .66);
  --gts-mudo: rgba(255, 255, 255, .46);
  --gts-claro: #76B7D5;
  --gts-azul: #2E7697;
  --gts-degrade: linear-gradient(135deg, #2E7697, #022F46);
  --gts-azul-fundo: rgba(46, 118, 151, .16);
  --gts-azul-borda: rgba(118, 183, 213, .38);
  --gts-linha: rgba(118, 183, 213, .18);
  --gts-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; color: var(--gts-texto); font-size: 13px; line-height: 1.45;
}
.gts *, .gts *::before, .gts *::after { box-sizing: border-box; }
.gts button, .gts select, .gts input, .gts textarea { font-family: inherit; }
.gts [hidden] { display: none !important; }
.gts-ic { display: inline-flex; flex-shrink: 0; }
.gts-ic svg, .gts-icone svg, .gts-mod-ic svg, .gts-n-config svg { display: block; }
.gts-escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gts-girar svg { animation: gts-girar 1s linear infinite; }
@keyframes gts-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gts-girar svg { animation: none; } }
.gts-carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; color: var(--gts-mudo); font-size: 13px; }

/* ── a barra do topo */
.gts-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .05);
  flex-shrink: 0; flex-wrap: wrap; }
.gts-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gts-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #17181B;
  border: 1px solid rgba(255, 255, 255, .08); color: var(--gts-claro); }
.gts-titulo-textos { min-width: 0; }
/* o painel aumenta os títulos (h1/h2/h3) no celular: aqui eles ficam do tamanho do desenho */
.gts h1.gts-h1 { font-size: 14px !important; line-height: 1.35 !important; margin: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--gts-texto); }
.gts h2.gts-h2 { font-size: 17px !important; line-height: 1.3 !important; margin: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--gts-texto); }
.gts h3.gts-h3 { font-size: 13.5px !important; line-height: 1.35 !important; margin: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, .88); }
.gts h3.gts-janela-titulo { font-size: 18px !important; line-height: 1.3 !important; margin: 0 !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.gts-sub { margin: 1px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gts-topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── botões em pílula */
.gts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1; border: 1px solid rgba(46, 118, 151, .35); background: rgba(46, 118, 151, .1);
  color: var(--gts-claro); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, filter .15s; }
.gts-btn:hover { background: rgba(46, 118, 151, .2); border-color: rgba(118, 183, 213, .45); }
.gts-btn:disabled { opacity: .5; cursor: default; }
.gts-btn svg { flex-shrink: 0; display: block; }
.gts-cheio { background: var(--gts-degrade); border-color: rgba(118, 183, 213, .5); color: #fff; }
.gts-cheio:hover { background: var(--gts-degrade); filter: brightness(1.12); }
.gts-discreto { background: transparent; border-color: rgba(255, 255, 255, .12); color: var(--gts-texto2); }
.gts-discreto:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); color: var(--gts-texto); }
.gts-contorno { background: transparent; border-color: rgba(255, 255, 255, .28); color: #A8D4E8; }
.gts-contorno:hover { background: rgba(118, 183, 213, .1); border-color: rgba(168, 212, 232, .55); }
.gts-contorno.gts-tem { border-color: rgba(118, 183, 213, .6); background: rgba(46, 118, 151, .14); }
.gts-link { background: transparent; border-color: transparent; color: #A8D4E8; padding: 0 10px; height: 30px; }
.gts-link:hover { background: rgba(118, 183, 213, .1); border-color: transparent; }
.gts-n-bolha { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gts-claro);
  color: #06212F; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gts-n-bolha.gts-zero { background: rgba(255, 255, 255, .1); color: var(--gts-mudo); }
.gts-icone-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12);
  background: transparent; color: var(--gts-texto2); cursor: pointer; flex-shrink: 0; padding: 0; }
.gts-icone-btn:hover { background: rgba(255, 255, 255, .08); color: var(--gts-texto); }
.gts-btn:focus-visible, .gts-icone-btn:focus-visible, .gts-pilula:focus-visible, .gts-mod:focus-visible, .gts-no:focus-visible, .gts-cartao-principal:focus-visible,
.gts-ib-mini:focus-visible, .gts-input:focus-visible { outline: 2px solid #76B7D5; outline-offset: 2px; }
/* os módulos e a trilha andam para o lado (cortam o que passa da borda): o contorno de foco fica por dentro */
.gts-mod:focus-visible, .gts-no:focus-visible { outline-offset: -2px; }

/* ── o corpo que rola: o conteúdo no meio, até 1400 px. Sem padding no alto: a trilha presa fica colada no alto da área
   (com padding, ela pararia abaixo dele e o que rola apareceria na faixa) */
.gts-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.gts-corpo > * { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; flex-shrink: 0; }
.gts-corpo > :first-child { margin-top: 16px; }
.gts-vazio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; text-align: center; border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, .12); color: var(--gts-texto2); }
.gts-vazio p { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.55; }
.gts-vazio-baixo { padding: 28px 20px; }

/* ── a busca e o tipo */
.gts-controles { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.gts-busca { display: flex; align-items: center; gap: 10px; flex: 1 1 380px; min-width: 0; height: 48px; padding: 0 14px 0 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); background: var(--gts-painel); color: var(--gts-mudo); cursor: text; transition: border-color .15s, box-shadow .15s; }
.gts-busca:hover { border-color: rgba(255, 255, 255, .2); }
.gts-busca:focus-within { border-color: var(--gts-claro); color: var(--gts-claro); box-shadow: 0 0 0 4px rgba(46, 118, 151, .2); }
.gts-busca input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--gts-texto); font-size: 14px; }
.gts-busca input::placeholder { color: var(--gts-mudo); }
.gts-busca input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
.gts-tecla { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04); color: var(--gts-mudo); font-family: var(--gts-mono); font-size: 11.5px; font-weight: 600; line-height: 1; }
.gts-busca:focus-within .gts-tecla, .gts-busca input:not(:placeholder-shown) ~ .gts-tecla { display: none; }
.gts-pilulas { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); flex-wrap: wrap; }
.gts-pilula { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent;
  color: var(--gts-texto2); font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.gts-pilula:hover { color: var(--gts-texto); background: rgba(255, 255, 255, .05); }
.gts-pilula.gts-ligada { background: #F4F5F6; color: #0D0D0D; }
.gts-n { font-size: 11.5px; font-weight: 500; color: var(--gts-mudo); font-variant-numeric: tabular-nums; }

/* ── os módulos: uma linha (anda para o lado quando não cabe); o aberto mostra o nome */
.gts-modulos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: relative; }
.gts-modulos::-webkit-scrollbar { display: none; }
.gts-mod { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--gts-painel); color: var(--gts-texto2); font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s; }
.gts-mod:hover { border-color: rgba(118, 183, 213, .4); color: var(--gts-texto); }
.gts-mod:disabled { opacity: .38; cursor: default; }
.gts-mod:disabled:hover { border-color: rgba(255, 255, 255, .1); color: var(--gts-texto2); }
.gts-mod-ic { display: inline-flex; color: var(--gts-claro); }
.gts-mod-sigla { font-weight: 700; color: var(--gts-texto); }
.gts-mod-nome { display: none; }
.gts-mod.gts-ligada .gts-mod-nome { display: inline; }
.gts-mod.gts-ligada { background: var(--gts-degrade); border-color: rgba(118, 183, 213, .55); color: #E6F3FA; }
.gts-mod.gts-ligada .gts-mod-ic, .gts-mod.gts-ligada .gts-mod-sigla { color: #fff; }
.gts-mod.gts-ligada .gts-n { color: #CFE6F2; }

/* ── a trilha dos processos: presa no alto da área que rola, com o fundo da página por baixo */
.gts-trilha { position: sticky; top: 0; z-index: 6; padding: 8px 0; background: var(--gts-fundo); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gts-trilha-faixa { position: relative; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.gts-trilha-faixa::-webkit-scrollbar { display: none; }
.gts-no { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--gts-texto2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.gts-no:hover { background: rgba(255, 255, 255, .05); color: var(--gts-texto); }
.gts-no-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22);
  color: var(--gts-mudo); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, color .2s; }
.gts-no-liga { flex: 1 1 24px; min-width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); transition: background .25s; }
.gts-no-liga.gts-feito { background: rgba(118, 183, 213, .55); }
.gts-no-divisor { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 6px 0 14px; background: rgba(255, 255, 255, .12); }
.gts-no.gts-feito .gts-no-n { border-color: rgba(118, 183, 213, .6); color: #A8D4E8; }
.gts-no.gts-atual { background: rgba(46, 118, 151, .16); color: #fff; }
.gts-no.gts-atual .gts-no-n { background: var(--gts-degrade); border-color: var(--gts-claro); color: #fff; }
.gts-no-config .gts-no-n { border-style: dashed; color: var(--gts-texto2); }

/* ── os processos: o número (ou o desenho da configuração) e o nome; as atividades numa linha do tempo */
.gts-processo { position: relative; padding: 18px 0 26px; }
.gts-processo::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--gts-linha); }
.gts-processo:first-child::before { top: 36px; }
.gts-processo:last-child::before { background: linear-gradient(var(--gts-linha) 75%, rgba(118, 183, 213, 0)); }
.gts-processo-cab { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gts-processo-n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--gts-fundo); border: 1.5px solid var(--gts-azul-borda); color: var(--gts-claro); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.gts-processo.gts-atual .gts-processo-n { background: var(--gts-degrade); border-color: var(--gts-claro); color: #fff; box-shadow: 0 0 0 5px rgba(46, 118, 151, .16); }
.gts-processo-config .gts-processo-n { border-style: dashed; }
.gts-processo-textos { min-width: 0; }
.gts-processo-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--gts-mudo); }
.gts-passos { display: flex; flex-direction: column; gap: 20px; padding-left: 52px; }
.gts-passo { position: relative; scroll-margin-top: 70px; }
.gts-passo::before { content: ""; position: absolute; left: -39px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gts-fundo);
  border: 2px solid rgba(118, 183, 213, .55); }
.gts-passo-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; min-width: 0; }

/* ── os cartões das transações e apps */
.gts-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
/* o cartão inteiro é o botão de copiar; o lápis e o X ficam por cima, no canto */
.gts-cartao { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 14px;
  background: var(--gts-painel); border: 1px solid var(--gts-borda); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.gts-cartao:hover { border-color: rgba(118, 183, 213, .3); background: #17191C; transform: translateY(-1px); }
.gts-cartao.gts-copiado { border-color: var(--gts-claro); box-shadow: 0 0 0 3px rgba(46, 118, 151, .22); }
@media (prefers-reduced-motion: reduce) { .gts-cartao, .gts-cartao:hover { transition: none; transform: none; } }
.gts-cartao-principal { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 10px 12px 12px;
  border: 0; border-radius: 13px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* a folga da direita é a do lápis (e do X, para quem tira do guia); o código não encolhe, o "Copiar" sim */
.gts-cartao-topo { display: flex; align-items: center; gap: 8px; min-height: 28px; min-width: 0; padding-right: 36px; }
.gts-cartao-2acoes .gts-cartao-topo { padding-right: 66px; }
.gts-cartao-dica { min-width: 0; overflow: hidden; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.gts-dica-copiar { color: var(--gts-mudo); opacity: 0; transition: opacity .12s; }
.gts-dica-copiado { display: none; color: var(--gts-claro); }
.gts-cartao:hover .gts-dica-copiar, .gts-cartao-principal:focus-visible .gts-dica-copiar { opacity: 1; }
.gts-cartao.gts-copiado .gts-dica-copiar { display: none; }
.gts-cartao.gts-copiado .gts-dica-copiado { display: inline; }
.gts-cartao-acoes { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.gts-cartao:hover .gts-cartao-acoes, .gts-cartao:focus-within .gts-cartao-acoes { opacity: 1; }
.gts-cartao-sub { display: flex; flex-direction: column; gap: 2px; }
.gts-cod { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--gts-azul-borda);
  background: var(--gts-azul-fundo); color: #DDEFF8; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; flex-shrink: 0; }
.gts-cartao:hover .gts-cod { border-color: var(--gts-claro); background: rgba(46, 118, 151, .26); }
.gts-cod-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gts-cod-copiar { opacity: 0; color: var(--gts-claro); transition: opacity .12s; }
.gts-cartao:hover .gts-cod-copiar, .gts-cartao-principal:focus-visible .gts-cod-copiar { opacity: .9; }
.gts-cod-ok { display: none; color: var(--gts-claro); }
.gts-cartao.gts-copiado .gts-cod-copiar { display: none; }
.gts-cartao.gts-copiado .gts-cod-ok { display: inline-flex; }
.gts-cod-app { background: transparent; border-style: dashed; color: #CFE6F2; }
/* a tabela (05/11/2026): fundo do azul-escuro da Creative e o desenho de uma tabela no lugar do selo; nome longo quebra
   depois do "_" (J_1BNFE_ / ACTIVE), sem reticências */
.gts-cod-tab { height: auto; min-height: 28px; padding: 4px 9px; background: rgba(2, 47, 70, .6); border-color: rgba(118, 183, 213, .3); color: #E6F3FA; }
.gts-cod-tab .gts-cod-txt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.gts-cod-selo-tab { color: var(--gts-claro); }
.gts-cod-sem { cursor: default; opacity: .8; }
.gts-cod-fiori { font-family: Inter, system-ui, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gts-claro);
  padding: 1px 5px; border-radius: 5px; background: rgba(118, 183, 213, .14); }
.gts-nome { font-size: 13.5px; color: var(--gts-texto); line-height: 1.38; overflow-wrap: anywhere; }
.gts-ingles { font-style: italic; color: var(--gts-mudo); font-size: 11.5px; }
.gts-obs { color: #A8C8D8; font-size: 11.5px; }
.gts-colab { color: var(--gts-claro); font-size: 11.5px; }
.gts-marca { background: rgba(118, 183, 213, .26); color: #fff; border-radius: 3px; padding: 0 1px; }
.gts-ib-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--gts-mudo); cursor: pointer; padding: 0; }
.gts-ib-mini:hover { background: rgba(255, 255, 255, .08); color: var(--gts-texto); }
@media (hover: none) { .gts-cartao-acoes { opacity: .8; } .gts-cod-copiar { opacity: .7; } .gts-tecla { display: none; } }

/* ── os resultados da busca: por módulo, processo e atividade */
.gts-resultado { margin: 2px 0 0; font-size: 12px; color: var(--gts-mudo); }
.gts-grupos { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; }
.gts-grupo-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; font-size: 12.5px; color: var(--gts-texto2); }
.gts-grupo-mod { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--gts-azul-fundo);
  border: 1px solid var(--gts-azul-borda); color: #DDEFF8; font-size: 11px; font-weight: 700; }
.gts-grupo-mod .gts-ic { color: var(--gts-claro); }
.gts-grupo-sep { color: var(--gts-mudo); }

/* ── o aviso que aparece embaixo e some */
.gts-aviso { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: #1F2A31; border: 1px solid var(--gts-azul-borda); color: #E6F3FA; font-size: 12.5px; z-index: 30;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); }
.gts-aviso .gts-ic { color: var(--gts-claro); }
.gts-aviso-visivel { opacity: 1; transform: translate(-50%, 0); }
.gts-aviso-erro { background: #24262A; border-color: rgba(255, 255, 255, .22); }
.gts-aviso-erro .gts-ic { color: rgba(255, 255, 255, .8); }

/* ── janelas no centro */
.gts-janela-fundo { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(4, 6, 8, .62); backdrop-filter: blur(3px); }
.gts-janela { width: min(640px, 100%); max-height: calc(100% - 24px); display: flex; flex-direction: column; border-radius: 22px; background: #16171A;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); overflow: hidden; }
.gts-janela-larga { width: min(980px, 100%); height: calc(100% - 24px); }
.gts-janela-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px 22px; border-bottom: 1px solid var(--gts-borda); }
.gts-janela-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.gts-janela-pe { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--gts-borda); }
.gts-explica { margin: 0; font-size: 12.5px; color: var(--gts-texto2); line-height: 1.5; }

/* ── o formulário */
.gts-form { display: flex; flex-direction: column; gap: 12px; }
.gts-form-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gts-form-linha > [hidden] + *, .gts-form-linha > :only-child { grid-column: 1 / -1; }
.gts-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gts-campo-rotulo { font-size: 11.5px; font-weight: 600; color: var(--gts-texto2); }
.gts-campo-rotulo:empty { display: none; }
.gts-campo-ajuda { font-size: 11px; color: var(--gts-mudo); }
.gts-campo-ajuda:empty { display: none; }
.gts-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .13); background: #0F1012; color: var(--gts-texto);
  font-size: 13px; outline: none; }
.gts-input:focus { border-color: var(--gts-claro); }
.gts-input::placeholder { color: rgba(255, 255, 255, .32); }
.gts-input-cod { font-family: var(--gts-mono); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.gts-input-cod::placeholder { text-transform: none; }
.gts select.gts-input { cursor: pointer; }
.gts select.gts-input option, .gts select.gts-input optgroup { background: #16171A; color: var(--gts-texto); }
.gts-area { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.gts-pilulas-form { align-self: flex-start; }
.gts-ja { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: rgba(46, 118, 151, .1); border: 1px solid rgba(118, 183, 213, .3);
  font-size: 12px; color: var(--gts-texto2); line-height: 1.45; }
.gts-ja .gts-ic { color: var(--gts-claro); margin-top: 1px; }
.gts-erro { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); color: #F1F4F6; font-size: 12.5px; }

/* ── as colaborações */
.gts-col-lista { display: flex; flex-direction: column; gap: 10px; }
.gts-col { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--gts-painel2); border: 1px solid var(--gts-borda); }
.gts-col-decidida { opacity: .82; }
.gts-col-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gts-col-por { font-size: 11.5px; color: var(--gts-mudo); }
.gts-selo { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.gts-selo-tipo { border-color: var(--gts-azul-borda); color: var(--gts-claro); }
.gts-selo-aluno { background: rgba(46, 118, 151, .28); border-color: rgba(118, 183, 213, .4); color: #CFE6F2; }
.gts-selo-pendente { background: rgba(118, 183, 213, .14); color: #CFE6F2; }
.gts-selo-aprovada { background: var(--gts-degrade); color: #fff; border-color: rgba(118, 183, 213, .55); }
.gts-selo-recusada, .gts-selo-cancelada { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); }
.gts-col-dados { display: flex; flex-direction: column; gap: 3px; }
.gts-col-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gts-col-linha .gts-cod { cursor: default; }
.gts-col-onde { font-size: 12px; color: var(--gts-claro); }
.gts-dif { margin: 0; padding: 8px 12px; list-style: none; border-radius: 12px; background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.gts-dif-campo { color: var(--gts-mudo); }
.gts-dif del { color: rgba(255, 255, 255, .5); }
.gts-dif ins { text-decoration: none; color: #E6F3FA; font-weight: 600; }
.gts-col-sugerida, .gts-col-motivo, .gts-col-quem { margin: 0; font-size: 12px; color: var(--gts-texto2); }
.gts-col-quem { color: var(--gts-mudo); font-size: 11.5px; }
.gts-col-coment { margin: 0; padding: 6px 12px; border-left: 2px solid var(--gts-azul-borda); color: var(--gts-texto2); font-size: 12.5px; white-space: pre-wrap; }
.gts-col-area:empty { display: none; }
.gts-col-area { padding-top: 4px; }
.gts-col-botoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.gts-col-feita { opacity: .9; }
.gts-col-feita-txt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #CFE6F2; }
.gts-col-feita-txt .gts-ic { color: var(--gts-claro); }
.gts-col-decididas { display: flex; flex-direction: column; gap: 8px; }

/* ── no celular: a busca na linha inteira, a linha do tempo mais estreita e um cartão por linha */
@media (max-width: 720px) {
  .gts-topo { padding: 10px 14px; }
  .gts-corpo { padding: 0 12px 32px; }
  .gts-corpo > :first-child { margin-top: 12px; }
  .gts-busca { flex-basis: 100%; height: 46px; }
  .gts-processo { padding: 14px 0 22px; }
  .gts-processo::before { left: 14px; }
  .gts-processo:first-child::before { top: 29px; }
  .gts-processo-cab { gap: 12px; }
  .gts-processo-n { width: 30px; height: 30px; font-size: 13px; }
  .gts h2.gts-h2 { font-size: 16px !important; }
  .gts-passos { padding-left: 38px; gap: 18px; }
  .gts-passo::before { left: -28px; }
  .gts-cartoes { grid-template-columns: minmax(0, 1fr); }
  .gts-cartao-acoes { opacity: .8; }
  .gts-form-linha { grid-template-columns: minmax(0, 1fr); }
  .gts-janela-fundo { padding: 10px; }
  .gts-janela, .gts-janela-larga { width: 100%; height: auto; max-height: calc(100% - 8px); }
  .gts-topo-acoes .gts-btn { height: 34px; padding: 0 12px; }
}