/* Dotti Produções — Conexão, Estilos de roteiro e integração com o Finder.
 *
 * 05/10/2026: o mesmo mundo do quadro aprovado ("Kanban de pôsteres",
 * web/_prototipos/posteres). Parede grafite de Linhas; as cinco tintas
 * impressas das capas (grafite, vinho, musgo, aço, ocre) com grão; Geist 700
 * apertado nos letreiros; estado = ponto com FORMA + palavra (cheio, anel,
 * losango), nunca só cor. Vermelho Dotti só na ação primária e na vez de quem
 * lê.
 *
 * SÓ ESCURO (decisão do dono, 05/10/2026). O resto vem dos tokens de Linhas,
 * mas da paleta ESCURA, cravada no bloco "só escuro" abaixo: com
 * `:root[data-tema="claro"]` a casca do Studio clareia e estas três telas
 * continuam na parede grafite. Não existe ramo claro nesta folha.
 *
 * Tudo sob `.dotti-shell .qc` (a raiz das três telas) e a página
 * `.pagina-quadro-config`. Largura medida pelo painel (`.conteudo` é o
 * contêiner): com trilho + lateral abertos, 1440 px de janela deixam ~1050 px.
 * Os pôsteres são contêineres nomeados (`cartaz`); as regras sem nome nunca
 * miram o que está dentro deles. Alvos de toque de 44 px.
 */

.dotti-shell .pagina-real.pagina-quadro-config { max-width: 1180px; }

/* ------------------------------------------------------ só escuro -- */

/* SÓ O ESCURO (decisão do dono, 05/10/2026). A mesma paleta escura de Linhas
   que quadro.css crava — valor por valor igual ao bloco `.dotti-shell` de
   linhas.css, conferido pelo teste do CSS. Esta folha não depende da outra
   (cada tela carrega só a sua), então a cópia mora aqui também.
     `.produto-producoes .conteudo`  a área da tela, já no esqueleto, com o
                                     cabeçalho da página (h1 e apoio);
     `.pagina-quadro-config`, `.qc`   a página e a raiz das três telas, se
                                     outra casca as montar. */
.dotti-shell.produto-producoes .conteudo,
.dotti-shell .pagina-quadro-config,
.dotti-shell .qc {
  color-scheme: dark;
  --void: #0f1012;
  --sup: #141619;
  --sup2: #1b1e22;
  --sup3: #24272c;
  --linha: rgba(235, 238, 243, .105);
  --linha2: rgba(235, 238, 243, .19);
  --texto: #f7f8fa;
  --texto2: #bac0c8;
  --texto3: #a8afb8;
  --marca: #ff2020;
  --marca-2: #d60000;
  --marca-txt: #ff6868;
  --sobre-marca: #fff;
  --azul: #70b7ff;
  --ok: #67d8a5;
  --amarelo: #f3bf6b;
  --erro: #ff746a;
  --linhas-canvas: #0f1012;
  --linhas-plano: #141619;
  --linhas-superficie: #1b1e22;
  --linhas-elevado: #24272c;
  --linhas-hover: #2d3137;
  --linhas-regra: rgba(235, 238, 243, .105);
  --linhas-regra-forte: rgba(235, 238, 243, .19);
  --linhas-vermelho: #ff2020;
  --linhas-vermelho-claro: #ff6868;
  --linhas-vermelho-suave: rgba(255, 32, 32, .09);
  --linhas-vermelho-sinal: rgba(255, 32, 32, .18);
  --linhas-brilho: rgba(255, 255, 255, .035);
  --linhas-foco: #ff4545;
  --linhas-campo-fundo: #141619;
  --linhas-campo-marca: #838994;
  --linhas-botao-topo: #292c31;
  --linhas-botao-topo-hover: #30343a;
  --linhas-botao-base-hover: #24272c;
  --linhas-inerte-fundo: #1f2226;
  --linhas-inerte-borda: #30343a;
  --linhas-inerte-texto: #777e89;
  --linhas-acento-botao: #ef3d32;
  --linhas-acento-botao-hover: #ff5147;
  --linhas-texto-tenue: #838994;
}
/* O chão em volta da página (o `.conteudo` tem a altura do que mostra): o do
   escuro de `.app-miolo` em linhas.css. O topo tem fundo próprio e segue o
   tema da casca. (0,4,0): passa `:root[data-tema="claro"] .app-miolo`. */
:root .dotti-shell.produto-producoes .app-miolo {
  background:
    radial-gradient(ellipse 48% 230px at 78% -105px, rgba(255, 32, 32, .075), transparent 73%),
    #0f1012;
}

/* ------------------------------------------------------------ tokens -- */

.dotti-shell .qc {
  --qc-ease: cubic-bezier(.16, 1, .3, 1);
  --qc-ease-sai: cubic-bezier(.5, 0, .75, 0);
  --qc-produto: #f0a43a;
  --qc-selecao: color-mix(in srgb, #f0a43a 34%, transparent);
  --qc-parede: var(--linhas-canvas);
  --qc-plano: var(--linhas-plano);
  --qc-sup: var(--linhas-superficie);
  --qc-elev: var(--linhas-elevado);
  --qc-regra: var(--linhas-regra);
  --qc-regra-forte: var(--linhas-regra-forte);
  --qc-vez: var(--marca-2);
  --qc-vez-hover: color-mix(in srgb, var(--marca-2) 84%, #000);
  --qc-vez-texto: var(--marca-txt);
  --qc-vivo: var(--azul);
  --qc-ok: var(--ok);
  --qc-atencao: var(--amarelo);
  --qc-fila: var(--texto3);
  --qc-erro: var(--erro);
  --qc-sombra: 0 1px 2px rgba(0, 0, 0, .42), 0 12px 22px -14px rgba(0, 0, 0, .8);
  --qc-sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 34px -18px rgba(0, 0, 0, .92);

  /* As tintas impressas (as mesmas das capas do quadro): um cinza neutro e
     quatro matizes, todas fora da parede e ≥ 7:1 sob a impressão clara. */
  --qc-tinta-1: #46494d;   /* grafite */
  --qc-tinta-2: #591f28;   /* vinho */
  --qc-tinta-3: #1b4f35;   /* musgo */
  --qc-tinta-4: #21466a;   /* aço */
  --qc-tinta-5: #5d421c;   /* ocre */
  --qc-tinta-sem: #2a2b2e;
  --qc-preto-impresso: #0d0e10; /* a letra sobre o branco impresso */
  --qc-impressao: #f4f5f7;
  --qc-impressao-vinho: #ffe6e2;
  --qc-impressao-musgo: #e3f4ea;
  --qc-impressao-aco: #e8f1fb;
  --qc-impressao-ocre: #fff0da;

  /* Sobre a tinta o texto é sempre claro: cores próprias, mais claras que as
     da parede. */
  --qc-f-texto: #f4f5f7;
  --qc-f-apoio: rgba(244, 245, 247, .76);
  --qc-f-vivo: #8fc8ff;
  --qc-f-ok: #7fe1b4;
  --qc-f-atencao: #f6c97a;
  --qc-f-vez: #ff8d84;
  --qc-f-fila: #c9ced5;

  /* O grão da impressão (o mesmo do quadro): ruído cinza centrado no
     meio-tom, aplicado em `overlay` — clareia e escurece por igual. */
  --qc-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.2 1.2 1.2 0 -1.3 1.2 1.2 1.2 0 -1.3 1.2 1.2 1.2 0 -1.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  min-width: 0;
  display: grid;
  align-content: start;
  gap: 28px;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.55;
  /* Os "como fazer" e os passos abrem com altura animada onde há suporte. */
  interpolate-size: allow-keywords;
}

.dotti-shell .qc [data-tinta="1"] { --tinta: var(--qc-tinta-1); --impressao: var(--qc-impressao); }
.dotti-shell .qc [data-tinta="2"] { --tinta: var(--qc-tinta-2); --impressao: var(--qc-impressao-vinho); }
.dotti-shell .qc [data-tinta="3"] { --tinta: var(--qc-tinta-3); --impressao: var(--qc-impressao-musgo); }
.dotti-shell .qc [data-tinta="4"] { --tinta: var(--qc-tinta-4); --impressao: var(--qc-impressao-aco); }
.dotti-shell .qc [data-tinta="5"] { --tinta: var(--qc-tinta-5); --impressao: var(--qc-impressao-ocre); }

/* ---------------------------------------------- superfícies do navegador -- */

.dotti-shell .qc ::selection { background: var(--qc-selecao); color: var(--texto); }
.dotti-shell .qc :is(input, textarea) { caret-color: var(--qc-produto); }
.dotti-shell .qc * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--texto3) 42%, transparent) transparent; }
.dotti-shell .qc :is(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--linhas-foco);
  outline-offset: 2px;
}
.dotti-shell .qc [hidden] { display: none !important; }
.dotti-shell .qc :is(h2, h3, p, ol, ul, dl, dd, fieldset) { margin: 0; }
.dotti-shell .qc h2 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.dotti-shell .qc h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; }
.dotti-shell .qc p { max-width: 68ch; color: var(--texto2); text-wrap: pretty; }
.dotti-shell .qc .dica { color: var(--texto3); font-size: 13px; }
.dotti-shell .qc code { font-family: var(--mono); font-size: 12.5px; }
/* A casca põe todo `th` em mono maiúsculo espaçado; aqui a tabela fala Geist. */
.dotti-shell .qc :is(th, td) { background: transparent; font-family: var(--corpo); text-transform: none; letter-spacing: normal; }
.dotti-shell .qc tbody th { font-size: 13.5px; }

.dotti-shell .qc-link {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .14s;
}
.dotti-shell .qc-link:hover { text-decoration-color: currentColor; }
.dotti-shell .qc-link svg { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; color: var(--texto3); }

/* Botões: os de Linhas, no desenho do quadro. Vermelho cheio só no primário. */
.dotti-shell .qc .btn {
  min-height: var(--linhas-altura-controle-toque);
  padding: 0 16px;
  gap: 8px;
  border: 1px solid var(--qc-regra-forte);
  border-radius: 6px;
  background: var(--qc-sup);
  color: var(--texto);
  box-shadow: none;
  font: 600 13.5px/1.1 var(--corpo);
  transition: background-color .14s, border-color .14s, color .14s, scale .12s var(--qc-ease);
}
.dotti-shell .qc .btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--texto3) 50%, var(--qc-regra-forte));
  background: var(--qc-elev);
}
.dotti-shell .qc .btn:active:not(:disabled) { scale: .97; }
.dotti-shell .qc .btn svg { width: 16px; height: 16px; }
.dotti-shell .qc .btn.pri {
  border-color: transparent;
  background: var(--qc-vez);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18);
}
.dotti-shell .qc .btn.pri:hover:not(:disabled) { border-color: transparent; background: var(--qc-vez-hover); }
.dotti-shell .qc .btn.sec { color: var(--texto); }
.dotti-shell .qc .btn.perigo {
  border-color: color-mix(in srgb, var(--qc-erro) 36%, transparent);
  background: transparent;
  color: var(--qc-erro);
}
.dotti-shell .qc .btn.perigo:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--qc-erro) 60%, transparent);
  background: color-mix(in srgb, var(--qc-erro) 10%, transparent);
  color: var(--qc-erro);
}
.dotti-shell .qc .btn:disabled {
  border-color: var(--linhas-inerte-borda);
  background: var(--linhas-inerte-fundo);
  color: var(--linhas-inerte-texto);
  box-shadow: none;
}

/* Campos de Linhas, com o alvo de 44 px e o anel do quadro. */
.dotti-shell .qc :is(input:not([type="radio"]):not([type="checkbox"]), select) {
  min-height: var(--linhas-altura-controle-toque);
  width: 100%;
  font-size: 14px;
  transition: border-color .14s, box-shadow .14s;
}
.dotti-shell .qc :is(input:not([type="radio"]):not([type="checkbox"]), select):focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--linhas-foco) 66%, var(--qc-regra-forte));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linhas-foco) 14%, transparent);
}
.dotti-shell .qc-campo { min-width: 0; display: grid; gap: 6px; align-content: start; }
.dotti-shell .qc-campo label { color: var(--texto2); font-size: 13px; font-weight: 560; }

/* ------------------------------------- o estado: ponto com forma + palavra -- */

.dotti-shell .qc-sinal {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.dotti-shell .qc-sinal > i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qc-fila);
}
/* Pronto: cheio verde. Vivo: cheio azul que respira. Espera: anel âmbar.
   Sua vez: cheio vermelho, palavra vermelha. Falhou: losango vermelho.
   Neutro: anel cinza. Apoio: cheio cinza. */
.dotti-shell .qc-sinal.qc-ok > i { background: var(--qc-ok); }
.dotti-shell .qc-sinal.qc-vivo > i { background: var(--qc-vivo); animation: qc-respira 2.6s ease-in-out infinite; }
.dotti-shell .qc-sinal:is(.qc-espera, .qc-atencao) > i { background: transparent; box-shadow: inset 0 0 0 1.6px var(--qc-atencao); }
.dotti-shell .qc-sinal.qc-erro { color: var(--qc-vez-texto); }
.dotti-shell .qc-sinal.qc-erro > i { background: var(--qc-vez); }
.dotti-shell .qc-sinal.qc-falhou { color: var(--qc-vez-texto); }
.dotti-shell .qc-sinal.qc-falhou > i { border-radius: 1px; background: var(--qc-vez); transform: rotate(45deg) scale(.86); }
.dotti-shell .qc-sinal.qc-neutro { color: var(--texto2); }
.dotti-shell .qc-sinal.qc-neutro > i { background: transparent; box-shadow: inset 0 0 0 1.6px var(--qc-fila); }
.dotti-shell .qc-sinal.qc-apoio > i { background: var(--qc-fila); }

@keyframes qc-respira {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--qc-vivo) 45%, transparent); }
  50% { opacity: .6; box-shadow: 0 0 0 5px color-mix(in srgb, var(--qc-vivo) 0%, transparent); }
}

/* O selo: a sigla na tinta (grupo de estilo, o "D" do canhoto). */
.dotti-shell .qc-selo {
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--tinta, var(--qc-tinta-sem));
  color: var(--impressao, var(--qc-impressao));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 700 11.5px/1 var(--corpo);
  letter-spacing: .04em;
}

/* "Como fazer" e os passos do estilo: o resumo é o alvo inteiro, e o
   conteúdo abre com a altura animada (onde `::details-content` existe). */
.dotti-shell .qc summary {
  width: fit-content;
  min-height: var(--linhas-altura-controle-toque);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto2);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color .14s;
}
.dotti-shell .qc summary::-webkit-details-marker { display: none; }
.dotti-shell .qc summary::before {
  width: 7px;
  height: 7px;
  flex: none;
  margin: -3px 1px 0 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(0) rotate(45deg);
  transition: transform .24s var(--qc-ease);
  content: "";
}
/* Desce 3 px ao abrir pelo transform (o mesmo que a margem fazia), sem animar layout. */
.dotti-shell .qc details[open] > summary::before { transform: translateY(3px) rotate(-135deg); }
.dotti-shell .qc summary:hover { color: var(--texto); }
.dotti-shell .qc details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .34s var(--qc-ease), content-visibility .34s allow-discrete;
}
.dotti-shell .qc details[open]::details-content { block-size: auto; }

/* ============================================================ CONEXÃO == */

/* As boas-vindas (?primeira=1): um cartaz largo impresso no vinho. */
.dotti-shell .qc-boas-vindas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 12px 40px;
  padding: 30px 32px 30px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--impressao);
  box-shadow: var(--qc-sombra);
}
.dotti-shell .qc-boas-vindas::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--qc-grao);
  background-size: 180px 180px;
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  content: "";
}
.dotti-shell .qc-boas-vindas h2 {
  grid-row: span 2;
  max-width: 11ch;
  color: var(--impressao);
  font-size: clamp(30px, 3.6cqi, 44px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.035em;
}
.dotti-shell .qc-boas-vindas p { max-width: 58ch; color: color-mix(in srgb, var(--impressao) 82%, transparent); font-size: 15px; line-height: 1.6; }
.dotti-shell .qc-cartaz-orn {
  position: absolute;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--impressao) 24%, transparent);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
  user-select: none;
}
.dotti-shell .qc-boas-vindas .qc-cartaz-orn { right: 3%; bottom: -34%; font-size: 300px; }

/* A faixa de controle: o resumo e as ações, a trilha dos três passos, o
   teste e o recado. É a única superfície da tela. */
.dotti-shell .qc-faixa {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px 28px;
  padding: 22px 24px;
  border: 1px solid var(--qc-regra);
  border-radius: 8px;
  background: var(--qc-plano);
}
.dotti-shell .qc-resumo { min-width: 0; display: grid; gap: 6px; }
.dotti-shell .qc-resumo .qc-sinal { gap: 11px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.dotti-shell .qc-resumo .qc-sinal > i { width: 10px; height: 10px; }
.dotti-shell .qc-resumo .qc-sinal:is(.qc-espera, .qc-atencao) > i { box-shadow: inset 0 0 0 2px var(--qc-atencao); }
.dotti-shell .qc-resumo p { padding-left: 21px; font-size: 14px; }
.dotti-shell .qc-acoes { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dotti-shell .qc-faixa > .qc-acoes { justify-content: flex-end; }
/* Sem áreas nomeadas: o teste escondido e o recado vazio não abrem vão. */
.dotti-shell .qc-faixa > :is(.qc-trilha, .qc-teste, .qc-recado) { grid-column: 1 / -1; }
.dotti-shell .qc .btn[data-testando] svg { animation: qc-gira 1.1s linear infinite; }
@keyframes qc-gira { to { rotate: 360deg; } }

.dotti-shell .qc-trilha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  list-style: none;
}
.dotti-shell .qc-trilha li {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--texto3);
  font-size: 12.5px;
  font-weight: 560;
}
.dotti-shell .qc-trilha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotti-shell .qc-trilha i {
  height: 3px;
  border-radius: 2px;
  background: var(--qc-regra-forte);
  transform-origin: 0 50%;
}
.dotti-shell .qc-trilha li[data-tom="ok"] { color: var(--texto2); }
.dotti-shell .qc-trilha li[data-tom="ok"] i { background: var(--qc-ok); }
.dotti-shell .qc-trilha li[data-tom="erro"] { color: var(--qc-vez-texto); }
.dotti-shell .qc-trilha li[data-tom="erro"] i { background: var(--qc-vez); }
.dotti-shell .qc-trilha li[data-tom="espera"] { color: var(--texto2); }
.dotti-shell .qc-trilha li[data-tom="espera"] i {
  background: repeating-linear-gradient(90deg, var(--qc-atencao) 0 6px, transparent 6px 10px);
}
/* O Robô mexendo no Claude Code (instalando, atualizando): a barra é azul e
   um brilho corre por ela — só enquanto ele trabalha. */
.dotti-shell .qc-trilha li[data-tom="vivo"] { color: var(--texto2); }
.dotti-shell .qc-trilha li[data-tom="vivo"] i {
  background:
    linear-gradient(90deg, transparent, var(--qc-vivo), transparent) no-repeat,
    color-mix(in srgb, var(--qc-vivo) 34%, transparent);
  background-size: 40% 100%, 100% 100%;
  animation: qc-corre 1.6s linear infinite;
}
@keyframes qc-corre {
  from { background-position: -70% 0, 0 0; }
  to { background-position: 170% 0, 0 0; }
}
.dotti-shell .qc-trilha li[data-acendeu] i { animation: qc-enche .7s var(--qc-ease) calc(var(--i, 0) * 110ms + 120ms) both; }
@keyframes qc-enche { from { transform: scaleX(0); } to { transform: none; } }

/* O teste: um momento só, do pedido ao resultado. O fio é o relógio. */
.dotti-shell .qc-teste {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 14px 16px 17px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--qc-sup);
}
.dotti-shell .qc-teste .qc-sinal { font-size: 14px; font-weight: 560; line-height: 1.45; align-items: flex-start; }
.dotti-shell .qc-teste .qc-sinal > i { margin-top: 6px; }
.dotti-shell .qc-teste-relogio { padding-left: 16px; color: var(--texto3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dotti-shell .qc-teste-relogio:empty { display: none; }
.dotti-shell .qc-teste-fio {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--qc-regra);
}
.dotti-shell .qc-teste-fio > i {
  display: block;
  height: 100%;
  background: var(--qc-vivo);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform var(--qc-fio-ms, .3s) var(--qc-fio-curva, linear), background-color .3s;
}
.dotti-shell .qc-teste[data-fase="ok"] .qc-teste-fio > i { background: var(--qc-ok); }
.dotti-shell .qc-teste[data-fase="quase"] .qc-teste-fio > i { background: var(--qc-atencao); }
.dotti-shell .qc-teste[data-fase="falhou"] .qc-teste-fio > i { background: var(--qc-vez); }
.dotti-shell .qc-teste:is([data-fase="ok"], [data-fase="quase"], [data-fase="falhou"]) .qc-sinal > i {
  animation: qc-carimba .55s var(--qc-ease) both;
}
@keyframes qc-carimba {
  0% { scale: 2.6; opacity: 0; }
  60% { scale: .9; opacity: 1; }
  100% { scale: 1; }
}
.dotti-shell .qc-recado:empty { display: none; }

/* Os três passos: uma lista com fio, na parede, sem caixa. */
.dotti-shell .qc-passos { min-width: 0; display: grid; padding: 0; list-style: none; }
.dotti-shell .qc-passo {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 20px;
  padding-bottom: 34px;
}
.dotti-shell .qc-passo:last-child { padding-bottom: 0; }
.dotti-shell .qc-passo::before {
  position: absolute;
  top: 40px;
  bottom: 8px;
  left: 15.5px;
  width: 1px;
  background: var(--qc-regra-forte);
  content: "";
}
.dotti-shell .qc-passo:last-child::before { display: none; }
.dotti-shell .qc-passo-marca {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--qc-regra-forte);
  color: var(--texto2);
  font: 600 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.dotti-shell .qc-passo-marca svg { width: 16px; height: 16px; stroke-width: 2.2; }
.dotti-shell .qc-passo.qc-ok .qc-passo-marca { background: var(--qc-ok); box-shadow: none; color: var(--qc-plano); }
.dotti-shell .qc-passo.qc-erro .qc-passo-marca { box-shadow: inset 0 0 0 1.5px var(--qc-vez); color: var(--qc-vez-texto); }
.dotti-shell .qc-passo.qc-espera .qc-passo-marca { box-shadow: inset 0 0 0 1.5px var(--qc-atencao); color: var(--qc-atencao); }
/* O Robô trabalhando no passo (instalando ou atualizando o Claude Code): o
   anel azul apagado e um arco que gira em volta do número, só enquanto ele
   trabalha. Movimento reduzido: o arco fica parado. */
.dotti-shell .qc-passo.qc-vivo .qc-passo-marca {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qc-vivo) 28%, transparent);
  color: var(--qc-vivo);
}
.dotti-shell .qc-passo.qc-vivo .qc-passo-marca::after {
  position: absolute;
  inset: 0;
  border: 1.5px solid transparent;
  border-top-color: var(--qc-vivo);
  border-radius: 50%;
  animation: qc-gira 1.1s linear infinite;
  content: "";
}
/* O passo que acabou de ficar pronto acende: a marca bate como um carimbo
   e um anel se abre em volta. Um depois do outro (`--i`). */
.dotti-shell .qc-passo[data-acendeu] .qc-passo-marca {
  animation: qc-carimba .6s var(--qc-ease) calc(var(--i, 0) * 110ms + 120ms) both;
}
.dotti-shell .qc-passo[data-acendeu] .qc-passo-marca::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--qc-ok) 55%, transparent);
  animation: qc-anel .9s var(--qc-ease) calc(var(--i, 0) * 110ms + 260ms) both;
  content: "";
}
@keyframes qc-anel {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qc-ok) 55%, transparent); }
  to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--qc-ok) 0%, transparent); }
}
.dotti-shell .qc-passo-corpo { min-width: 0; display: grid; gap: 12px; padding-top: 4px; }
.dotti-shell .qc-passo-topo {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
}
.dotti-shell .qc-passo-topo h2 { font-size: 18px; font-weight: 650; }
.dotti-shell .qc-passo-corpo > p { font-size: 14px; }
/* "Conectar o Claude": a ação do passo, o primário da tela enquanto o
   Claude falta. Embaixo dele, a faixa de espera do pedido (a mesma do teste,
   num degrau só um pouco mais justo, por estar dentro do passo). */
.dotti-shell .qc-conectar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dotti-shell .qc-passo-corpo > .qc-teste { padding: 12px 14px 15px; }

/* As máquinas: uma tabela quieta, sem moldura pesada. */
.dotti-shell .qc-maquinas-moldura { min-width: 0; overflow-x: auto; }
.dotti-shell .qc-maquinas { width: 100%; border-collapse: collapse; font-size: 13px; }
.dotti-shell .qc-maquinas :is(th, td) {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--qc-regra);
  vertical-align: middle;
  text-align: left;
}
.dotti-shell .qc-maquinas thead th {
  background: transparent;
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom-color: var(--qc-regra-forte);
  color: var(--texto3);
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}
.dotti-shell .qc-maquinas tbody tr:last-child :is(th, td) { border-bottom: 0; }
.dotti-shell .qc-maquinas .qc-sinal { font-size: 12.5px; font-weight: 560; white-space: nowrap; }
.dotti-shell .qc-maquina-nome { color: var(--texto); font-weight: 600; white-space: nowrap; }
.dotti-shell .qc-maquina-nome svg { width: 16px; height: 16px; margin-right: 8px; color: var(--texto3); vertical-align: -3px; }
.dotti-shell .qc-maquina-nome strong { font-weight: 600; overflow-wrap: anywhere; }
.dotti-shell .qc-maquina-detalhe { color: var(--texto2); white-space: nowrap; }
.dotti-shell .qc-maquina-visto { color: var(--texto3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dotti-shell .qc-maquina-teste { display: block; margin-top: 2px; color: var(--texto3); font-size: 12px; }

/* "Como fazer". */
.dotti-shell .qc-como { min-width: 0; }
.dotti-shell .qc-como ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 4px; padding-left: 22px; color: var(--texto2); }
.dotti-shell .qc-como li { min-width: 0; padding-left: 4px; }
.dotti-shell .qc-como li::marker { color: var(--texto3); font: 500 12.5px var(--mono); }
.dotti-shell .qc-como > .dica { margin-top: 14px; }
/* No mesmo item, um comando por sistema: o rótulo diz onde colar. */
.dotti-shell .qc-como .qc-sistema { display: block; margin-top: 12px; color: var(--texto3); font-size: 12.5px; font-weight: 560; }
.dotti-shell .qc-como .qc-sistema + .qc-comando { margin-top: 6px; }

/* O comando copiável: uma linha de terminal com o botão colado. Copiar
   passa o marca-texto da seleção pelo comando (JS) e o botão diz "Copiado". */
.dotti-shell .qc-comando {
  min-width: 0;
  max-width: 560px;
  display: flex;
  align-items: stretch;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--qc-regra-forte);
  border-radius: 6px;
  background: var(--linhas-campo-fundo);
  transition: border-color .2s;
}
.dotti-shell .qc-comando:has([data-copiado="sim"]) { border-color: color-mix(in srgb, var(--qc-ok) 50%, var(--qc-regra-forte)); }
.dotti-shell .qc-comando code {
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  overflow-x: auto;
  background-image: linear-gradient(var(--qc-selecao), var(--qc-selecao));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  color: var(--texto);
  font-size: 13px;
  white-space: nowrap;
}
/* O sinal de prompt é desenho (um ângulo), não um caractere. */
.dotti-shell .qc-comando code::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-top: 1.6px solid var(--texto3);
  border-right: 1.6px solid var(--texto3);
  transform: rotate(45deg);
  content: "";
}
.dotti-shell .qc .qc-comando .btn.qc-copiar {
  min-width: 112px;
  flex: none;
  border: 0;
  border-left: 1px solid var(--qc-regra-forte);
  border-radius: 0;
  background: transparent;
  color: var(--texto2);
}
.dotti-shell .qc .qc-comando .btn.qc-copiar:hover:not(:disabled) { background: var(--qc-sup); color: var(--texto); }
.dotti-shell .qc-copiar-rotulo { display: inline-block; }
.dotti-shell .qc .btn.qc-copiar[data-copiado="sim"] { color: var(--qc-ok); }
.dotti-shell .qc .btn.qc-copiar[data-copiado="sim"] svg path {
  stroke-dasharray: 20;
  animation: qc-traca .34s var(--qc-ease) both;
}
.dotti-shell .qc .btn.qc-copiar[data-copiado="nao"] { color: var(--qc-atencao); }
@keyframes qc-traca { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* Codex ou a chave da OpenAI: as duas portas do GPT. */
.dotti-shell .qc-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dotti-shell .qc-opcao {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 16px 12px;
  border: 1px solid var(--qc-regra);
  border-radius: 6px;
  background: var(--qc-plano);
}
.dotti-shell .qc-opcao.em-uso { border-color: color-mix(in srgb, var(--qc-ok) 50%, var(--qc-regra)); }
.dotti-shell .qc-opcao-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dotti-shell .qc-opcao h3 { font-size: 14px; }
.dotti-shell .qc-opcao p { font-size: 13px; }

/* O modelo do roteiro: duas provas de tipo, escolhidas como um canal. */
.dotti-shell .qc-modelo {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--qc-regra);
  border-radius: 8px;
  background: var(--qc-plano);
}
.dotti-shell .qc-modelo legend { float: left; width: 100%; padding: 0; color: var(--texto); font-size: 15px; font-weight: 650; }
.dotti-shell .qc-modelo legend + * { clear: both; }
.dotti-shell .qc-modelo-opcoes { display: grid; gap: 8px; }
.dotti-shell .qc-modelo-opcao {
  position: relative;
  min-width: 0;
  min-height: var(--linhas-altura-controle-toque);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--qc-regra-forte);
  border-radius: 6px;
  background: var(--qc-sup);
  cursor: pointer;
  transition: border-color .16s, background-color .16s, scale .12s var(--qc-ease);
}
.dotti-shell .qc-modelo-opcao:hover { border-color: color-mix(in srgb, var(--texto3) 55%, var(--qc-regra-forte)); }
.dotti-shell .qc-modelo-opcao:active { scale: .985; }
.dotti-shell .qc-modelo-opcao:has(input:checked) { border-color: color-mix(in srgb, var(--texto) 55%, transparent); background: var(--qc-elev); }
.dotti-shell .qc-modelo-opcao:has(input:focus-visible) { outline: 2px solid var(--linhas-foco); outline-offset: 2px; }
.dotti-shell .qc-modelo-opcao:has(input:disabled) { cursor: progress; }
.dotti-shell .qc-modelo-opcao input {
  appearance: none;
  -webkit-appearance: none;
  order: 2;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--qc-regra-forte);
  cursor: inherit;
  transition: box-shadow .16s, background-color .16s;
}
.dotti-shell .qc-modelo-opcao input::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qc-plano);
  scale: 0;
  transition: scale .22s var(--qc-ease);
  content: "";
}
.dotti-shell .qc-modelo-opcao input:checked { background: var(--texto); box-shadow: none; }
.dotti-shell .qc-modelo-opcao input:checked::after { scale: 1; }
.dotti-shell .qc-modelo-opcao input:focus-visible { outline: none; }
.dotti-shell .qc-modelo-opcao span { min-width: 0; display: grid; gap: 3px; }
.dotti-shell .qc-modelo-opcao strong { font-size: 22px; font-weight: 720; line-height: 1.05; letter-spacing: -.03em; }
.dotti-shell .qc-modelo-opcao small { color: var(--texto2); font-size: 12.5px; line-height: 1.45; }
.dotti-shell .qc .qc-modelo-situacao { min-height: 1.4em; color: var(--texto3); font-size: 12.5px; }

.dotti-shell .qc-falha { display: grid; justify-items: start; gap: 12px; }

/* ============================================================ ESTILOS == */

.dotti-shell .qc-estilos { gap: 44px; }
.dotti-shell .qc .qc-intro { font-size: 15px; }
.dotti-shell .qc-grupo { min-width: 0; display: grid; gap: 20px; }
.dotti-shell .qc-grupo-topo {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.dotti-shell .qc-grupo-topo h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.dotti-shell .qc-grupo-topo .qc-selo { height: 26px; min-width: 38px; font-size: 11.5px; }
.dotti-shell .qc-grupo-conta { color: var(--texto3); font-size: 13px; font-variant-numeric: tabular-nums; }
.dotti-shell .qc .qc-grupo-topo p { flex-basis: 100%; max-width: none; font-size: 14px; }

/* A parede. `auto-fit`: as trilhas vazias somem e o grupo ocupa a largura.
   Um grupo com até dois estilos não estica os pôsteres (dois cartazes 4:5 de
   meia página passariam da altura da tela): cada estilo vira uma composição
   deitada — o pôster à esquerda e a legenda ao lado, alinhadas pelo pé. */
.dotti-shell .qc-estilos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: 32px 20px;
}
.dotti-shell .qc-estilo { min-width: 0; display: flex; flex-direction: column; }
.dotti-shell .qc-estilos-grade:not(:has(> :nth-child(3))) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 32px 40px;
}
.dotti-shell .qc-estilos-grade:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 640px); }
.dotti-shell .qc-estilos-grade:not(:has(> :nth-child(3))) > .qc-estilo {
  display: grid;
  grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 24px;
}
.dotti-shell .qc-estilos-grade:not(:has(> :nth-child(3))) .qc-legenda { padding-top: 2px; }

/* O pôster: tinta + grão, a sigla, o nome apertado, o letreiro e a faixa. */
.dotti-shell .qc-cartaz {
  --qc-fs: 10.4cqi;
  /* Recuo lateral e vão vertical: variáveis lidas pelos filhos, onde o cqi
     é medido pelo próprio pôster. O pôster deitado (telefone) as encolhe. */
  --qc-pad: 7cqi;
  --qc-vao: 6cqi;
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  container: cartaz / inline-size;
  border-radius: 6px;
  background: var(--tinta, var(--qc-tinta-sem));
  color: var(--impressao, var(--qc-impressao));
  box-shadow: var(--qc-sombra);
  transition: translate .26s var(--qc-ease), box-shadow .26s var(--qc-ease);
}
.dotti-shell .qc-cartaz::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--qc-grao);
  background-size: 180px 180px;
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  content: "";
}
.dotti-shell .qc-cartaz .qc-cartaz-orn {
  top: -14cqi;
  right: -7cqi;
  font-size: 82cqi;
  transition: translate .6s var(--qc-ease);
}
.dotti-shell .qc-cartaz > .qc-selo {
  align-self: flex-start;
  height: clamp(20px, 8cqi, 24px);
  min-width: 0;
  margin: var(--qc-pad) var(--qc-pad) 0;
  padding: 0 clamp(6px, 2.4cqi, 8px);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--impressao) 52%, transparent);
  font-size: clamp(11.5px, 4.4cqi, 12px);
}
.dotti-shell .qc .qc-cartaz-titulo {
  margin-top: var(--qc-vao);
  padding: 0 var(--qc-pad);
  color: var(--impressao);
  font-size: var(--qc-fs);
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}
.dotti-shell .qc-cartaz[data-t="1"] { --qc-fs: 12cqi; }
.dotti-shell .qc-cartaz[data-t="2"] { --qc-fs: 10.4cqi; }
.dotti-shell .qc-cartaz[data-t="3"] { --qc-fs: 8.8cqi; }
.dotti-shell .qc-cartaz[data-t="4"] { --qc-fs: 7.4cqi; }
.dotti-shell .qc-cartaz .qc-ideal {
  margin-top: auto;
  padding: var(--qc-vao) var(--qc-pad) 0;
  color: var(--qc-f-apoio);
  font-size: clamp(12px, 4.7cqi, 13.5px);
  line-height: 1.42;
}
.dotti-shell .qc-cartaz .qc-ideal strong { color: var(--impressao); font-weight: 620; }
.dotti-shell .qc-cartaz-faixa {
  margin-top: calc(var(--qc-vao) * .8);
  display: grid;
  gap: 5px;
  padding: 3.6cqi var(--qc-pad) 4cqi;
  border-top: 1px solid color-mix(in srgb, var(--impressao) 14%, transparent);
  background: rgba(5, 6, 8, .3);
}
.dotti-shell .qc-cartaz-titulo + .qc-cartaz-faixa { margin-top: auto; }
.dotti-shell .qc-cartaz-faixa .qc-sinal { color: var(--qc-f-texto); font-size: 12.5px; font-weight: 560; }
.dotti-shell .qc-cartaz-faixa .qc-sinal > i { background: var(--qc-f-fila); }
.dotti-shell .qc-cartaz-faixa .qc-sinal.qc-atencao > i { background: transparent; box-shadow: inset 0 0 0 1.6px var(--qc-f-atencao); }
.dotti-shell .qc-cartaz-faixa .qc-sinal.qc-neutro > i { background: transparent; box-shadow: inset 0 0 0 1.6px var(--qc-f-fila); }
.dotti-shell .qc-cartaz-faixa .qc-sinal.qc-neutro { color: var(--qc-f-apoio); }
.dotti-shell .qc .qc-tamanho { max-width: none; color: var(--qc-f-apoio); font-size: 12px; line-height: 1.35; }
.dotti-shell .qc-tamanho b { color: var(--qc-f-texto); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (hover: hover) {
  .dotti-shell .qc-estilo:hover .qc-cartaz { translate: 0 -3px; box-shadow: var(--qc-sombra-alta); }
  .dotti-shell .qc-estilo:hover .qc-cartaz-orn { translate: -3cqi 2cqi; }
}
.dotti-shell .qc-estilo:has(.qc-usar:focus-visible) .qc-cartaz { box-shadow: var(--qc-sombra-alta); }

/* A legenda, na parede. */
.dotti-shell .qc-legenda { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 2px 0; }
.dotti-shell .qc .qc-estilo-sobre { margin-bottom: 4px; color: var(--texto2); font-size: 13.5px; line-height: 1.5; }
.dotti-shell .qc-estilo-passos summary { font-size: 13px; font-variant-numeric: tabular-nums; }
.dotti-shell .qc-estilo-passos ol {
  display: grid;
  gap: 0;
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  border-top: 1px solid var(--qc-regra);
}
.dotti-shell .qc-estilo-passos li {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--qc-regra);
  color: var(--texto2);
  font-size: 13px;
  line-height: 1.4;
  counter-increment: passo;
}
.dotti-shell .qc-estilo-passos li::before { color: var(--texto3); font: 500 11.5px var(--mono); content: counter(passo); }
.dotti-shell .qc-estilo-passos[open] li { animation: qc-linha .38s var(--qc-ease) calc(var(--i, 0) * 26ms) both; }
@keyframes qc-linha { from { opacity: 0; translate: 0 -5px; } }
.dotti-shell .qc-estilo-passos li small { color: var(--texto3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dotti-shell .qc-estilo-acoes { margin-top: auto; padding-top: 6px; }

/* Idiomas: a tabela e a calculadora. */
.dotti-shell .qc-idiomas { gap: 16px; padding-top: 4px; border-top: 1px solid var(--qc-regra); }
.dotti-shell .qc-idiomas > .qc-grupo-topo { padding-top: 24px; }
.dotti-shell .qc-idiomas-grade { min-width: 0; display: grid; gap: 24px; }
.dotti-shell .qc-idiomas-tabela { min-width: 0; display: grid; align-content: start; gap: 10px; }
.dotti-shell .qc .qc-tabela { border-color: var(--qc-regra); border-radius: 6px; background: var(--qc-plano); }
.dotti-shell .qc .qc-tabela :is(th, td) { padding: 10px 14px; }
.dotti-shell .qc .qc-tabela thead th { background: transparent; color: var(--texto3); font-size: 12px; font-weight: 560; line-height: 1.3; text-align: left; vertical-align: bottom; border-bottom-color: var(--qc-regra-forte); }
.dotti-shell .qc .qc-tabela th[scope="row"] { color: var(--texto); font-weight: 600; text-align: left; }
.dotti-shell .qc .qc-tabela td { color: var(--texto2); font-variant-numeric: tabular-nums; }
.dotti-shell .qc .qc-tabela :is(th[scope="row"], td) { white-space: nowrap; }
.dotti-shell .qc .qc-tabela thead th { white-space: normal; }
.dotti-shell .qc .qc-tabela tbody tr:hover { background: var(--qc-sup); }

.dotti-shell .qc-calc {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--qc-regra);
  border-radius: 8px;
  background: var(--qc-plano);
}
.dotti-shell .qc-calc-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dotti-shell .qc-calc-campos .qc-campo-estilo { grid-column: 1 / -1; }
.dotti-shell .qc-calc-resultado {
  min-height: 74px;
  display: grid;
  align-content: center;
  padding-top: 14px;
  border-top: 1px solid var(--qc-regra);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.dotti-shell .qc-calc-min { display: block; font-size: 36px; font-weight: 720; line-height: 1.05; letter-spacing: -.035em; }
.dotti-shell .qc-calc-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dotti-shell .qc-calc-palavras { display: block; margin-top: 4px; color: var(--texto2); font-size: 14px; }
.dotti-shell .qc-calc-resultado[data-fora] { color: var(--qc-atencao); font-size: 14px; font-weight: 560; line-height: 1.45; }

/* O vazio: a moldura tracejada de um pôster que ainda não chegou. */
.dotti-shell .qc .vazio {
  display: grid;
  gap: 6px;
  padding: 28px 24px;
  border: 1px dashed var(--qc-regra-forte);
  border-radius: 8px;
  background: transparent;
  color: var(--texto2);
}
.dotti-shell .qc .vazio strong { color: var(--texto); font-size: 15px; font-weight: 650; }

/* ============================================================= FINDER == */

.dotti-shell .qc .qc-nota {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  color: var(--texto2);
  font-size: 13.5px;
}
.dotti-shell .qc-bloco {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 24px 24px;
  border: 1px solid var(--qc-regra);
  border-radius: 8px;
  background: var(--qc-plano);
}
.dotti-shell .qc-bloco-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dotti-shell .qc-bloco h2 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.dotti-shell .qc-bloco h2:focus { outline: none; }
.dotti-shell .qc-bloco h2:focus-visible { outline: 2px solid var(--linhas-foco); outline-offset: 3px; }

/* As vagas: uma ficha por chave possível; cheia se ocupada. */
.dotti-shell .qc-vagas { display: inline-flex; gap: 5px; }
.dotti-shell .qc-vagas i {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.4px var(--qc-regra-forte);
  transition: background-color .3s, box-shadow .3s;
}
.dotti-shell .qc-vagas i[data-ocupada] { background: var(--texto2); box-shadow: none; }

.dotti-shell .qc-gerar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dotti-shell .qc-gerar .qc-campo { flex: 1 1 260px; max-width: 440px; }
.dotti-shell .qc .qc-limite { margin-top: -6px; font-variant-numeric: tabular-nums; }

/* O canhoto da chave nova: impresso no aço, com o picote entre o canhoto e
   o corpo. */
.dotti-shell .qc-chave-nova-lugar:not(:empty) { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34)) drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.dotti-shell .qc-chave-nova {
  --qc-picote: 128px;
  --tinta: var(--qc-tinta-4);
  --impressao: var(--qc-impressao-aco);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--qc-picote) minmax(0, 1fr);
  border-radius: 8px;
  background: var(--tinta);
  color: var(--impressao);
  -webkit-mask:
    radial-gradient(circle 8px at var(--qc-picote) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 8px at var(--qc-picote) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 8px at var(--qc-picote) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 8px at var(--qc-picote) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.dotti-shell .qc-chave-nova::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--qc-grao);
  background-size: 180px 180px;
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  content: "";
}
.dotti-shell .qc-canhoto {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: 22px 18px;
  border-right: 1.5px dashed color-mix(in srgb, var(--impressao) 32%, transparent);
  background: rgba(5, 6, 8, .2);
}
.dotti-shell .qc-canhoto .qc-selo { height: 30px; min-width: 30px; background: transparent; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--impressao) 60%, transparent); font-size: 14px; }
.dotti-shell .qc-canhoto-nome { max-width: 100%; color: var(--impressao); font-size: 13px; font-weight: 620; line-height: 1.3; overflow-wrap: anywhere; }
.dotti-shell .qc-canhoto-hora { color: var(--qc-f-apoio); font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dotti-shell .qc-chave-nova-corpo { min-width: 0; display: grid; gap: 10px; padding: 22px 24px 22px; }
.dotti-shell .qc-chave-nova h3 { padding-right: 120px; color: var(--impressao); font-size: 22px; font-weight: 720; line-height: 1.1; letter-spacing: -.03em; }
.dotti-shell .qc-chave-nova p { color: var(--qc-f-apoio); font-size: 13.5px; }
.dotti-shell .qc-chave-linha { min-width: 0; display: flex; gap: 8px; margin-top: 4px; }
.dotti-shell .qc .qc-chave-nova input.qc-chave-valor {
  min-width: 0;
  min-height: 50px;
  flex: 1 1 auto;
  padding-inline: 14px;
  border: 1px solid color-mix(in srgb, var(--impressao) 22%, transparent);
  border-radius: 6px;
  background: rgba(5, 6, 8, .34);
  color: var(--impressao);
  font: 500 15px/1 var(--mono);
  letter-spacing: .015em;
  caret-color: var(--qc-produto);
}
.dotti-shell .qc .qc-chave-nova input.qc-chave-valor:focus-visible {
  border-color: color-mix(in srgb, var(--impressao) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--impressao) 14%, transparent);
}
.dotti-shell .qc .qc-chave-nova input.qc-chave-valor::selection { background: color-mix(in srgb, #f0a43a 46%, transparent); color: var(--impressao); }
/* No canhoto, o "Copiar" é o branco impresso: a ação do momento. */
.dotti-shell .qc .qc-chave-nova .btn.qc-copiar { min-height: 50px; min-width: 120px; border-color: transparent; background: var(--impressao); color: var(--qc-preto-impresso); }
.dotti-shell .qc .qc-chave-nova .btn.qc-copiar:hover:not(:disabled) { border-color: transparent; background: #fff; color: var(--qc-preto-impresso); }
.dotti-shell .qc .qc-chave-nova .btn.qc-copiar[data-copiado="sim"] { background: var(--qc-f-ok); color: var(--qc-preto-impresso); }
.dotti-shell .qc .qc-chave-nova .btn.sec:not(.qc-copiar) { border-color: color-mix(in srgb, var(--impressao) 30%, transparent); background: transparent; color: var(--impressao); }
.dotti-shell .qc .qc-chave-nova .btn.sec:not(.qc-copiar):hover:not(:disabled) { border-color: color-mix(in srgb, var(--impressao) 55%, transparent); background: rgba(255, 255, 255, .06); }
.dotti-shell .qc .qc-chave-nova .qc-alerta { display: flex; align-items: flex-start; gap: 9px; max-width: 64ch; font-size: 13px; }
.dotti-shell .qc-chave-nova .qc-alerta svg { flex: none; margin-top: 2px; color: var(--qc-f-atencao); }
.dotti-shell .qc-chave-nova .qc-acoes { margin-top: 4px; }
/* "Copiada": uma linha de estado simples, como as do quadro — ponto cheio
   + palavra, alinhada ao título do canhoto. Sem carimbo de mentira. */
.dotti-shell .qc-carimbo {
  position: absolute;
  top: 27px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--qc-f-texto);
  font: 560 13px/1.2 var(--corpo);
  pointer-events: none;
}
.dotti-shell .qc-carimbo::before { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--qc-f-ok); content: ""; }

/* A lista: uma linha por chave, o final impresso numa fichinha de aço. */
.dotti-shell .qc-chaves { padding: 0; list-style: none; border-top: 1px solid var(--qc-regra); }
.dotti-shell .qc-chave {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 10px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--qc-regra);
}
.dotti-shell .qc-chave[data-nova] { animation: qc-chegou 1.8s var(--qc-ease) .5s both; }
@keyframes qc-chegou {
  /* A chave nova chega com um banho âmbar que apaga sozinho -- sem listra na
     borda: o piso de qualidade recusa faixa colorida lateral em linhas. */
  0%, 25% { background: color-mix(in srgb, var(--qc-produto) 14%, transparent); }
  100% { background: transparent; }
}
.dotti-shell .qc-chave-ident {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.dotti-shell .qc-chave-ident strong { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dotti-shell .qc .qc-final {
  order: -1;
  padding: 6px 9px;
  border-radius: 3px;
  background: var(--qc-tinta-4);
  color: var(--qc-impressao-aco);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font: 500 12px/1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.dotti-shell .qc-chave-datas { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.dotti-shell .qc-chave-datas dt { color: var(--texto3); font-size: 12px; }
.dotti-shell .qc-chave-datas dd { color: var(--texto); font-size: 13px; font-variant-numeric: tabular-nums; }
.dotti-shell .qc-chaves-lista > .vazio { margin-top: 2px; }

/* Para o desenvolvedor: uma folha de especificação, quieta. */
.dotti-shell .qc-dev { gap: 18px; }
.dotti-shell .qc-dev > p { font-size: 13.5px; }
.dotti-shell .qc-api { display: grid; gap: 0; border-top: 1px solid var(--qc-regra); }
.dotti-shell .qc-api > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--qc-regra);
}
.dotti-shell .qc-api dt { color: var(--texto3); font-size: 12.5px; font-weight: 560; }
.dotti-shell .qc-api dd { min-width: 0; color: var(--texto2); font-size: 13px; overflow-wrap: anywhere; }
.dotti-shell .qc-api code,
.dotti-shell .qc-rotas code { color: var(--texto); }
.dotti-shell .qc-rotas { display: grid; padding: 0; list-style: none; }
.dotti-shell .qc-rotas li {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--qc-regra);
}
.dotti-shell .qc-rotas li:last-child { border-bottom: 0; }
.dotti-shell .qc-rotas code { overflow-wrap: anywhere; }
.dotti-shell .qc .qc-rotas p { grid-column: 2; font-size: 13px; }
.dotti-shell .qc-metodo {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--qc-regra-forte);
  color: var(--texto2);
  font: 600 11.5px/1.2 var(--mono);
  letter-spacing: .04em;
}
.dotti-shell .qc-metodo[data-metodo="POST"] { background: var(--texto); box-shadow: none; color: var(--qc-plano); }

/* A pergunta da revogação: o diálogo nativo, entrando como uma folha. */
.dotti-shell .qc-dialogo {
  width: min(460px, calc(100vw - 32px));
  padding: 24px 24px 20px;
  border: 1px solid var(--qc-regra-forte);
  border-radius: 8px;
  background: var(--qc-plano);
  color: var(--texto);
  box-shadow: var(--linhas-sombra-sobreposicao);
}
.dotti-shell .qc-dialogo[open] { animation: qc-dialogo .26s var(--qc-ease); }
.dotti-shell .qc-dialogo::backdrop { background: rgba(5, 6, 8, .62); }
.dotti-shell .qc-dialogo[open]::backdrop { animation: qc-fundo .26s ease; }
@keyframes qc-dialogo { from { opacity: 0; translate: 0 10px; scale: .97; } }
@keyframes qc-fundo { from { opacity: 0; } }
.dotti-shell .qc-dialogo h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.dotti-shell .qc-dialogo p { margin: 0; color: var(--texto2); line-height: 1.6; }
.dotti-shell .qc-dialogo-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* ------------------------------------------------- painel largo ------ */

@container (min-width: 1000px) {
  .dotti-shell .qc-conexao {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    column-gap: 44px;
  }
  .dotti-shell .qc-conexao > :is(.qc-boas-vindas, .qc-faixa) { grid-column: 1 / -1; }
  .dotti-shell .qc-conexao > .qc-passos { grid-column: 1; }
  .dotti-shell .qc-conexao > .qc-modelo { position: sticky; top: 24px; grid-column: 2; }

  .dotti-shell .qc-finder {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-items: start;
    column-gap: 24px;
  }
  .dotti-shell .qc-finder > .qc-nota { grid-column: 1 / -1; }
  .dotti-shell .qc-finder > .qc-dev { position: sticky; top: 24px; }

  .dotti-shell .qc-idiomas-grade { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; }
}

/* ------------------------------------------------ painel estreito ----- */

@container (max-width: 720px) {
  .dotti-shell .qc { gap: 22px; }
  .dotti-shell .qc-estilos { gap: 36px; }
  .dotti-shell .qc-boas-vindas { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .dotti-shell .qc-boas-vindas h2 { grid-row: auto; max-width: 14ch; font-size: 30px; }
  .dotti-shell .qc-boas-vindas .qc-cartaz-orn { right: -4%; bottom: -10%; font-size: 220px; }
  .dotti-shell .qc-faixa { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px; }
  /* No estreito a trilha sobe para junto do resumo; as ações vêm depois. */
  .dotti-shell .qc-faixa > .qc-trilha { order: 1; }
  .dotti-shell .qc-faixa > .qc-acoes { order: 2; }
  .dotti-shell .qc-faixa > .qc-teste { order: 3; }
  .dotti-shell .qc-faixa > .qc-recado { order: 4; }
  .dotti-shell .qc-resumo .qc-sinal { font-size: 20px; }
  .dotti-shell .qc-resumo p { padding-left: 0; }
  .dotti-shell .qc-faixa > .qc-acoes { justify-content: stretch; }
  .dotti-shell .qc-acoes .btn,
  .dotti-shell .qc-gerar .btn { flex: 1 1 auto; }
  .dotti-shell .qc-passo { grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; }
  .dotti-shell .qc-passo-marca { width: 28px; height: 28px; font-size: 12px; }
  .dotti-shell .qc-passo::before { top: 36px; left: 13.5px; }
  .dotti-shell .qc-opcoes,
  .dotti-shell .qc-calc-campos { grid-template-columns: minmax(0, 1fr); }
  .dotti-shell .qc-comando { max-width: none; }
  .dotti-shell .qc .qc-comando .btn.qc-copiar { min-width: 0; padding: 0 14px; }
  .dotti-shell .qc-conectar .btn { flex: 1 1 auto; }

  /* A tabela das máquinas vira blocos; os rótulos ficam para o leitor. */
  .dotti-shell .qc-maquinas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dotti-shell .qc-maquinas tbody,
  .dotti-shell .qc-maquinas tr { display: block; }
  .dotti-shell .qc-maquinas tr {
    display: grid;
    grid-template-columns: repeat(2, auto) minmax(0, 1fr);
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--qc-regra);
  }
  .dotti-shell .qc-maquinas tbody tr:last-child { border-bottom: 0; }
  .dotti-shell .qc-maquinas :is(th, td) { display: block; padding: 0; border: 0; }
  .dotti-shell .qc-maquinas :is(.qc-maquina-nome, .qc-maquina-detalhe, .qc-maquina-visto) { grid-column: 1 / -1; white-space: normal; }

  .dotti-shell .qc-gerar .qc-campo { max-width: none; flex-basis: 100%; }
  .dotti-shell .qc-bloco { padding: 18px 16px 20px; }
  .dotti-shell .qc-chave { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .dotti-shell .qc-chave-datas { grid-column: 1 / -1; grid-row: 2; }
  .dotti-shell .qc-chave .btn { grid-column: 2; grid-row: 1; }
  .dotti-shell .qc-api > div { grid-template-columns: minmax(0, 1fr); }
  .dotti-shell .qc-calc { padding: 18px 16px; }
}

/* O canhoto em pé: o picote passa para cima do corpo. */
@container (max-width: 620px) {
  .dotti-shell .qc-chave-nova { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .dotti-shell .qc-canhoto {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1.5px dashed color-mix(in srgb, var(--impressao) 32%, transparent);
  }
  .dotti-shell .qc-chave-nova-corpo { padding: 18px 18px 20px; }
  .dotti-shell .qc-chave-nova h3 { padding-right: 0; font-size: 20px; }
  .dotti-shell .qc-carimbo { top: 72px; right: 16px; }
  .dotti-shell .qc-chave-linha { flex-wrap: wrap; }
  .dotti-shell .qc .qc-chave-nova input.qc-chave-valor { flex-basis: 100%; font-size: 13.5px; }
  .dotti-shell .qc .qc-chave-nova .btn.qc-copiar { flex: 1 1 auto; }
}

/* No telefone os pôsteres deitam (16:10) e o corpo do nome encolhe. */
@container (max-width: 560px) {
  .dotti-shell .qc-estilos-grade { gap: 28px; }
  .dotti-shell .qc-cartaz { --qc-pad: 5.5cqi; --qc-vao: 3.6cqi; aspect-ratio: 16 / 11; }
  .dotti-shell .qc-cartaz[data-t="1"] { --qc-fs: 9.4cqi; }
  .dotti-shell .qc-cartaz[data-t="2"] { --qc-fs: 8.2cqi; }
  .dotti-shell .qc-cartaz[data-t="3"] { --qc-fs: 7cqi; }
  .dotti-shell .qc-cartaz[data-t="4"] { --qc-fs: 6cqi; }
}

@media (pointer: coarse) {
  .dotti-shell .qc-estilo-passos summary { min-height: 44px; }
}

/* ------------------------------------------- movimento reduzido ------ */

@media (prefers-reduced-motion: reduce) {
  .dotti-shell .qc-sinal.qc-vivo > i,
  .dotti-shell .qc .btn[data-testando] svg,
  .dotti-shell .qc-passo.qc-vivo .qc-passo-marca::after { animation: none; }
  /* A barra do Robô trabalhando fica azul, parada. */
  .dotti-shell .qc-trilha li[data-tom="vivo"] i { animation: none; background: color-mix(in srgb, var(--qc-vivo) 72%, transparent); }
  .dotti-shell .qc details::details-content { transition: none; }
  .dotti-shell .qc summary::before { transition: none; }
  .dotti-shell .qc-cartaz,
  .dotti-shell .qc-cartaz-orn { transition: none; }
  .dotti-shell .qc-estilo:hover .qc-cartaz { translate: none; }
  .dotti-shell .qc-estilo:hover .qc-cartaz-orn { translate: none; }
  .dotti-shell .qc-estilo-passos[open] li { animation: none; }
  .dotti-shell .qc-teste-fio > i { transition-duration: .01s; }
  /* O que confirma um estado continua, sem deslocamento: só a cor acende. */
  .dotti-shell .qc-passo[data-acendeu] .qc-passo-marca,
  .dotti-shell .qc-teste:is([data-fase="ok"], [data-fase="quase"], [data-fase="falhou"]) .qc-sinal > i { animation: qc-acende .5s ease both; }
  .dotti-shell .qc-passo[data-acendeu] .qc-passo-marca::after { animation: none; }
  .dotti-shell .qc-trilha li[data-acendeu] i { animation: qc-acende .5s ease both; }
  .dotti-shell .qc .btn.qc-copiar[data-copiado="sim"] svg path { animation: none; }
  .dotti-shell .qc-dialogo[open] { animation: qc-fundo .16s ease; }
  .dotti-shell .qc .btn:active:not(:disabled),
  .dotti-shell .qc-modelo-opcao:active { scale: none; }
}
@keyframes qc-acende { from { opacity: .25; } }

@media (forced-colors: active) {
  :root .dotti-shell.produto-producoes .app-miolo { background: Canvas; }
  .dotti-shell .qc-sinal > i,
  .dotti-shell .qc-trilha i,
  .dotti-shell .qc-vagas i { forced-color-adjust: none; border: 1px solid CanvasText; }
  .dotti-shell .qc-teste-fio > i { background: Highlight; }
  .dotti-shell :is(.qc-cartaz, .qc-chave-nova, .qc-boas-vindas) { border: 1px solid CanvasText; }
}