/*
  Ateliê de Óculos — o instrumento.
  Corpo preto fosco, filetes finos, rótulos gravados em caixa-alta, números de medida em algarismos
  tabulares cromados e um único índice vermelho para o que importa agora (etapa, seleção, atenção).
  O rosto e a armação são a única cor da tela.
*/
:root {
  --preto: #0a0a0a;          /* pintura preta do corpo */
  --corpo: #101010;          /* painéis */
  --vulcanite: #151515;      /* campos e superfícies elevadas */
  --filete: #232323;         /* linhas finas */
  --filete-forte: #383838;
  --gravado: #f2f1ee;        /* texto principal, branco de gravação */
  --suave: #92918c;          /* texto secundário (≥ 5:1 sobre o corpo) */
  --apagado: #5d5c58;
  --cromo: #d9d7d1;          /* cromado acetinado: números, ação principal */
  --cromo-claro: #ecebe6;
  --indice: #e0251d;         /* o índice vermelho — usar pouco */
  --raio: 2px;
  --fonte: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --numeros: "Barlow", "Helvetica Neue", Arial, sans-serif;   /* números: o mesmo face, algarismos tabulares */
  /* nomes antigos usados pelo código, apontando para a paleta nova */
  --fundo: var(--preto); --painel: var(--corpo); --painel-2: var(--vulcanite); --linha: var(--filete);
  --texto: var(--gravado); --acento: var(--cromo); --acento-2: var(--cromo);
  --ok: var(--cromo); --alerta: var(--indice);
  color-scheme: dark;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--preto); color: var(--gravado);
  font: 13.5px/1.5 var(--fonte);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; flex-direction: column;
}
::selection { background: var(--cromo); color: var(--preto); }
* { scrollbar-width: thin; scrollbar-color: var(--filete-forte) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--filete-forte); border-radius: 4px; border: 2px solid var(--corpo); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 1px solid var(--cromo); outline-offset: 2px; }

/* ---------- controles ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button, .botao {
  background: transparent; color: var(--gravado);
  border: 1px solid var(--filete-forte); border-radius: var(--raio);
  padding: 6px 11px; cursor: pointer; line-height: 1.2;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
button:hover:not(:disabled), .botao:hover { border-color: var(--suave); }
button:active:not(:disabled) { background: var(--vulcanite); }
button:disabled { color: var(--apagado); border-color: var(--filete); cursor: default; }
.primario, button.primario {
  background: var(--cromo); color: var(--preto); border-color: var(--cromo); font-weight: 600;
}
.primario:hover:not(:disabled) { background: var(--cromo-claro); border-color: var(--cromo-claro); }
.primario:disabled { background: var(--vulcanite); color: var(--apagado); border-color: var(--filete); }
input, select, textarea {
  background: var(--vulcanite); border: 1px solid var(--filete); border-radius: var(--raio);
  padding: 6px 8px; caret-color: var(--cromo);
}
input:hover, select:hover, textarea:hover { border-color: var(--filete-forte); }
input::placeholder, textarea::placeholder { color: var(--suave); }
select {
  appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%;
  background-size: 4px 4px; background-repeat: no-repeat;
}
input[type=checkbox] {
  appearance: none; width: 12px; height: 12px; padding: 0; margin: 0 6px 0 0; vertical-align: -1px;
  border: 1px solid var(--filete-forte); border-radius: 1px; background: transparent; cursor: pointer;
}
input[type=checkbox]:checked { background: var(--cromo); border-color: var(--cromo); box-shadow: inset 0 0 0 2px var(--preto); }
input[type=number] { font-family: var(--numeros); font-variant-numeric: tabular-nums; }

/* anel de escala (range): trilho fino, marcas gravadas a cada 10%, índice cromado */
input[type=range] { appearance: none; background: transparent; height: 20px; padding: 0; border: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 20px;
  background:
    repeating-linear-gradient(to right, var(--filete-forte) 0 1px, transparent 1px calc(10% - .1px)) 0 100% / calc(100% - 1px) 5px no-repeat,
    linear-gradient(var(--filete-forte), var(--filete-forte)) 0 50% / 100% 1px no-repeat;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 3px; height: 16px; margin-top: 2px; border-radius: 1px;
  background: var(--cromo); box-shadow: 0 0 0 3px var(--corpo);
}
input[type=range]:hover::-webkit-slider-thumb { background: var(--cromo-claro); }
input[type=range]:active::-webkit-slider-thumb { background: var(--indice); }
input[type=range]::-moz-range-track {
  height: 20px;
  background:
    repeating-linear-gradient(to right, var(--filete-forte) 0 1px, transparent 1px calc(10% - .1px)) 0 100% / calc(100% - 1px) 5px no-repeat,
    linear-gradient(var(--filete-forte), var(--filete-forte)) 0 50% / 100% 1px no-repeat;
}
input[type=range]::-moz-range-thumb { width: 3px; height: 16px; border: 0; border-radius: 1px; background: var(--cromo); box-shadow: 0 0 0 3px var(--corpo); }
input[type=range]:active::-moz-range-thumb { background: var(--indice); }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: stretch; gap: 32px; padding: 0 20px; height: 52px; flex: none;
  border-bottom: 1px solid var(--filete); background: var(--preto);
}
.marca { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; font-stretch: 100%; }
.marca span { color: var(--suave); font-weight: 400; letter-spacing: .24em; }
.abas { display: flex; gap: 2px; flex: none; }
.aba { white-space: nowrap; }
.aba {
  position: relative; border: 0; border-radius: 0; padding: 0 14px; height: 100%;
  color: var(--suave); font-size: 12px; letter-spacing: .06em;
}
.aba i { font-style: normal; font-size: 11px; color: var(--suave); margin-right: 8px; font-variant-numeric: tabular-nums; }
.aba:hover:not(:disabled) { color: var(--gravado); }
.aba.ativa { color: var(--gravado); }
.aba.ativa i { color: var(--indice); }
.aba.ativa::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--gravado); }
.status { margin-left: auto; align-self: center; color: var(--suave); font-size: 12px; letter-spacing: .02em; }

/* ---------- estrutura ---------- */
main.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); }
main.app > *, .tela > *, section.fotos > *, .arm-baixo > * { min-width: 0; }
.tela { display: grid; min-height: 0; min-width: 0; }
.tela[hidden] { display: none; }
.tela-rosto { grid-template-columns: 1fr 340px; }
.tela-armacao { grid-template-columns: 1fr 372px; }
aside, section.fotos { min-height: 0; overflow: auto; }
aside.lista { border-right: 1px solid var(--filete); padding: 16px 14px; background: var(--preto); }
aside.analise { border-left: 1px solid var(--filete); padding: 0 20px 40px; background: var(--corpo); }
h2, h3 {
  margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--suave);
  display: flex; align-items: center; gap: 8px;
}
aside.analise section { padding: 20px 0; border-bottom: 1px solid var(--filete); }
aside.analise section:last-child { border-bottom: 0; }
aside.analise section h3 + * { margin-top: 0; }
aside.analise h3:not(:first-child) { margin-top: 22px; }

/* ---------- lista de rostos ---------- */
.lista-rostos { display: grid; gap: 2px; }
.lista-rostos button {
  position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  text-align: left; padding: 6px 8px 6px 6px; border-color: transparent; font-size: 12.5px;
}
.lista-rostos button:hover { border-color: transparent; background: var(--corpo); }
.lista-rostos button.ativo { background: var(--vulcanite); }
.lista-rostos button.ativo::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 1px; background: var(--indice); }
.lista-rostos img { width: 36px; height: 46px; object-fit: cover; border-radius: 1px; background: var(--vulcanite); filter: grayscale(.15); }
.lista-rostos button.ativo img { filter: none; }
.lista-rostos small { display: block; color: var(--suave); font-size: 11px; }
.lista-rostos .excluir {
  position: absolute; top: 50%; right: 6px; width: 18px; height: 18px; margin-top: -9px; opacity: 0;
  color: var(--suave); transition: opacity .15s;
}
.lista-rostos .excluir::before, .lista-rostos .excluir::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 8.5px; height: 1px; background: currentColor; transform: rotate(45deg);
}
.lista-rostos .excluir::after { transform: rotate(-45deg); }
.lista-rostos button:hover .excluir { opacity: 1; }
.lista-rostos .excluir:hover { color: var(--indice); }
#titulo-clientes { margin-top: 6px; }
.lista-rostos + h2 { margin-top: 22px; }
.novo-abrir { width: 100%; margin-bottom: 20px; padding: 9px; text-align: left; font-size: 12px; letter-spacing: .04em; }
.novo-abrir::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: -0.5px;
  background: linear-gradient(var(--cromo), var(--cromo)) center / 9px 1px no-repeat, linear-gradient(var(--cromo), var(--cromo)) center / 1px 9px no-repeat; }
.novo { margin: -8px 0 20px; padding: 12px 0 16px; border-bottom: 1px solid var(--filete); }
.novo[hidden] { display: none; }
.novo > label { display: grid; gap: 4px; margin: 0 0 10px; font-size: 11.5px; color: var(--suave); }
.novo .linha { display: flex; gap: 6px; }
.novo-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 420px; margin-bottom: 8px; }
.solta {
  position: relative; display: grid; place-items: center; height: 132px; border: 1px dashed var(--filete-forte);
  border-radius: var(--raio); cursor: pointer; overflow: hidden; text-align: center; font-size: 11px; color: var(--suave); padding: 6px;
}
.solta b, .subir-foto b { display: block; color: var(--gravado); font-size: 11.5px; font-weight: 500; margin-bottom: 2px; }
.solta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.solta.cheia span { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.72); padding: 4px; }
.solta.sobre, .palco.sobre, .subir-foto:hover { border-color: var(--cromo); outline: 1px solid var(--cromo); outline-offset: -5px; }
.subir-foto { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; cursor: pointer; color: var(--suave); font-size: 12px; padding: 20px; }
.subir-foto[hidden] { display: none; }
.so-cliente[hidden] { display: none; }

/* ---------- palcos (fotos e desenhos) ---------- */
section.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; background: var(--filete); }
.vista { margin: 0; display: flex; flex-direction: column; min-height: 0; background: var(--preto); }
.vista figcaption {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); padding: 12px 14px 10px;
}
.vista figcaption span { color: var(--cromo); margin-left: 4px; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.palco { flex: 1; min-height: 420px; background: var(--preto); position: relative; overflow: hidden; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.ferramentas {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 14px 12px; font-size: 11.5px; color: var(--suave);
  border-top: 1px solid var(--filete);
}
.ferramentas label { display: inline-flex; align-items: center; cursor: pointer; }
.ferramentas button, .ferramentas .botao { padding: 4px 9px; font-size: 11.5px; }
.pega-cor.ligado { border-color: var(--cromo); color: var(--gravado); }
.guia { color: var(--gravado); flex: 1; }

.linha { display: flex; gap: 8px; align-items: center; }
.linha select { flex: 1; }
.nota { color: var(--suave); font-size: 11.5px; margin: 8px 0 0; line-height: 1.5; }
.aviso { color: var(--gravado); font-size: 12px; margin: 10px 0 0; padding-left: 12px; position: relative; }
.aviso::before { content: ""; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; background: var(--indice); }

/* ---------- medidas ---------- */
.medidas { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; margin: 0; font-size: 12.5px; }
.medidas dt { color: var(--suave); }
.medidas dd { margin: 0; text-align: right; font-family: var(--numeros); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cromo); }
.medidas dd.destaque { color: var(--gravado); font-weight: 600; }
.medidas .dica { grid-column: 1 / -1; color: var(--suave); font-size: 11.5px; margin-top: 4px; }

.barra { display: grid; grid-template-columns: 74px 1fr 46px; gap: 10px; align-items: center; font-size: 12px; margin: 4px 0; color: var(--suave); }
.barra i { display: block; height: 1px; background: var(--filete-forte); position: relative; overflow: visible; }
.barra i b { display: block; height: 3px; margin-top: -1px; background: var(--cromo); }
.barra span:last-child { text-align: right; color: var(--cromo); font-family: var(--numeros); font-size: 11.5px; font-variant-numeric: tabular-nums; }
#formato + label { margin-top: 12px; }

.pontos { margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--suave); }
.pontos li { cursor: pointer; padding: 1px 0; }
.pontos li::marker { font-family: var(--numeros); color: var(--apagado); }
.pontos li.feito { color: var(--gravado); }
.pontos li.atual { color: var(--gravado); font-weight: 600; }
.pontos li.atual::marker { color: var(--indice); }

.cores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.amostra { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.amostra i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--filete-forte); flex: none; }
.amostra small { display: block; color: var(--suave); font-family: var(--numeros); font-size: 11px; }
.leitura { grid-column: 1 / -1; font-size: 12px; color: var(--suave); }
.leitura b { color: var(--gravado); font-weight: 600; }

.chips { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 12px; }
.chips > span { width: 64px; color: var(--suave); }
.chips button { padding: 4px 9px; font-size: 11.5px; border-color: var(--filete); color: var(--suave); white-space: nowrap; }
.chips button.sel { border-color: var(--cromo); color: var(--gravado); }
.chips button.sel.auto { border-style: dashed; }
.largo { width: 100%; }

.resumo { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }
.hierarquia { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 12px; }
.hierarquia li::marker { font-family: var(--numeros); color: var(--apagado); }
.hierarquia li:first-child::marker { color: var(--gravado); }
.hierarquia b { color: var(--gravado); font-weight: 600; margin-right: 4px; }
.hierarquia .nota { margin: 0; font-size: 11.5px; }
.hierarquia li span:last-child { color: var(--suave); }

/* ---------- tela armação ---------- */
.arm-centro { display: grid; grid-template-rows: minmax(360px, 1.55fr) minmax(260px, 1fr); gap: 1px; background: var(--filete); min-height: 0; overflow: auto; }
.arm-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; min-height: 0; }
.arm-centro .palco { min-height: 220px; }
.palco.claro { background: #0d0d0d; }
.modelos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.modelos button { padding: 6px 2px 5px; font-size: 10px; display: grid; justify-items: center; gap: 3px; border-color: var(--filete); color: var(--suave); }
.modelos button.sel { border-color: var(--cromo); color: var(--gravado); }
.modelos canvas { width: 46px; height: 30px; }
.estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.estilos button { padding: 7px 2px; font-size: 11px; border-color: var(--filete); color: var(--suave); }
.estilos button.sel { border-color: var(--cromo); color: var(--gravado); }
#arm-estilo-texto { margin: 10px 0 0; min-height: 1em; }
.campos { display: grid; gap: 2px; }
.campo { display: grid; grid-template-columns: 118px 1fr 56px; gap: 12px; align-items: center; font-size: 12px; min-height: 26px; }
.campo span:first-child { color: var(--suave); line-height: 1.25; }
.campo input[type=range] { width: 100%; }
.campo output { text-align: right; font-family: var(--numeros); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--cromo); }
.rotulo { color: var(--suave); font-size: 12px; width: 56px; }
.cores-mat { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.cores-mat button { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 1px solid var(--filete-forte); position: relative; }
.cores-mat button.sel { box-shadow: 0 0 0 2px var(--corpo), 0 0 0 3px var(--gravado); }
.partes { margin: 14px 0; }
.partes h4 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.partes .linha { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--suave); }
.mini { padding: 2px 8px; font-size: 10px; letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--suave); }
.arm-painel .linha { margin-top: 10px; flex-wrap: wrap; }
.arm-painel input#arm-nome { flex: 1; }
.salvas { display: grid; gap: 2px; margin-top: 10px; }
.salvas div { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.salvas div button:first-child { flex: 1; text-align: left; border-color: transparent; }
.salvas div button:first-child:hover { background: var(--vulcanite); }
.salvas small { font-family: var(--numeros); }
.modo-editor { padding: 3px 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-left: 0; border-color: var(--filete); color: var(--suave); }
.modo-editor.sel { border-color: var(--cromo); color: var(--gravado); }
#forma-dica { margin: 0 0 0 4px; text-transform: none; letter-spacing: 0; font-size: 11px; }
.leitura-arm p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; padding-left: 14px; position: relative; }
.leitura-arm p::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--suave); }

/* checagens: marcadores desenhados, não glifos */
.checagens p { margin: 0 0 9px; font-size: 12px; line-height: 1.5; padding-left: 16px; position: relative; }
.checagens p::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; }
.checagens .ok { color: var(--suave); }
.checagens .ok::before { width: 6px; height: 3px; top: 6px; border-left: 1px solid var(--cromo); border-bottom: 1px solid var(--cromo); transform: rotate(-45deg); }
.checagens .atencao { color: var(--gravado); }
.checagens .atencao::before { width: 2px; height: 10px; top: 4px; left: 2px; background: var(--indice); }
.checagens .dica { color: var(--suave); }
.checagens .dica::before { width: 6px; height: 1px; top: 9px; background: var(--suave); }
.nota-harmonia { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--suave); margin: 0 0 12px; }
.nota-harmonia b { font-size: 30px; line-height: 1; color: var(--gravado); font-weight: 300; letter-spacing: -.02em; }

/* ---------- briefing ---------- */
.tela-briefing { grid-template-columns: 360px 1fr; }
.briefing-form { padding: 20px 22px 48px; overflow: auto; border-right: 1px solid var(--filete); background: var(--corpo); }
.briefing-form h3 { margin-top: 26px; }
.briefing-form h3:first-child { margin-top: 0; }
.briefing-form h3 .nota { text-transform: none; letter-spacing: 0; margin: 0; font-weight: 400; }
.chips-intencao { display: flex; flex-wrap: wrap; gap: 4px; }
.chips-intencao button { padding: 6px 10px; font-size: 12px; border-color: var(--filete); color: var(--suave); }
.chips-intencao button.sel { border-color: var(--cromo); color: var(--gravado); }
.chips-intencao button i { font-style: normal; font-size: 11px; color: var(--cromo); margin-right: 6px; font-variant-numeric: tabular-nums; }
.campo-texto { display: grid; gap: 5px; margin: 0 0 12px; font-size: 11.5px; color: var(--suave); }
.campo-texto textarea, .campo-texto input { width: 100%; resize: vertical; font-size: 12.5px; line-height: 1.45; }
.linha-chips { display: grid; gap: 6px; margin-bottom: 12px; font-size: 11.5px; color: var(--suave); }
.linha-chips .chips { margin: 0; }
.acoes-briefing {
  display: grid; gap: 6px; margin: 24px -22px 0; padding: 14px 22px; position: sticky; bottom: -48px;
  background: var(--corpo); border-top: 1px solid var(--filete);
}
.acoes-briefing button { padding: 10px; }
.briefing-resultado { overflow: auto; padding: 0 0 48px; background: var(--preto); }
#bf-analise { padding-top: 26px; }
.leitura-ia:empty { display: none; }
.leitura-ia { padding: 22px 28px 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 36px; font-size: 12.5px; line-height: 1.55; }
.leitura-ia > div { min-width: 0; }
.leitura-ia h4 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.leitura-ia p { margin: 0 0 14px; max-width: 70ch; }
.leitura-ia ul { margin: 0 0 14px; padding-left: 16px; color: var(--suave); }
.leitura-ia li { margin-bottom: 4px; }
.leitura-ia .principal { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; color: var(--gravado); max-width: 96ch; margin: 0 0 6px; }
.leitura-ia details { grid-column: 1 / -1; border-top: 1px solid var(--filete); padding-top: 12px; }
.leitura-ia summary { cursor: pointer; color: var(--suave); font-size: 11.5px; letter-spacing: .04em; list-style: none; }
.leitura-ia summary::before { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); margin-right: 10px; transition: transform .2s; }
.leitura-ia details[open] summary::before { transform: rotate(45deg); }
.leitura-ia details > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 36px; margin-top: 14px; }
.propostas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); margin-top: 14px; }
.proposta { background: var(--preto); display: flex; flex-direction: column; }
.proposta canvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--preto); }
.proposta .corpo { padding: 16px 18px 20px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.55; }
.proposta h4 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.005em; display: flex; align-items: baseline; gap: 10px; }
.proposta h4 i { font-style: normal; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.proposta .papel { font-size: 11.5px; color: var(--suave); letter-spacing: .04em; margin-top: -4px; }
.proposta p { margin: 0; }
.proposta p b { font-weight: 600; color: var(--gravado); }
.proposta .detalhe { color: var(--suave); }
.proposta .ficha { color: var(--cromo); font-family: var(--numeros); font-size: 11px; letter-spacing: .01em; border-top: 1px solid var(--filete); padding-top: 10px; }
.proposta .nota-h { font-size: 11px; color: var(--suave); }
.proposta .nota-h b { color: var(--gravado); font-family: var(--numeros); font-weight: 400; font-size: 13px; }
.proposta .botoes { display: flex; gap: 6px; margin-top: 6px; }
.proposta .botoes button { flex: 1; padding: 8px; }
#bf-estado { font-size: 11.5px; }
.propostas:empty { display: none; }
.vazias { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); margin-top: 18px; }
.vazias div { background: var(--preto); aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--apagado); position: relative; }
.vazias div::after { content: ""; position: absolute; inset: 14px; border: 1px dashed var(--filete-forte); pointer-events: none; }
.vazias b { font-size: 26px; font-weight: 300; color: var(--suave); }
.vazias span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
@media (max-width: 1100px) { .vazias { grid-template-columns: minmax(0, 1fr); } .vazias div { aspect-ratio: 16 / 7; } }

/* ---------- tela prova ---------- */
.tela-prova { grid-template-columns: 1fr 300px; }
.pv-centro { display: flex; flex-direction: column; min-height: 0; background: var(--preto); }
.pv-palco { flex: 1; min-height: 360px; }
.pv-palco video { display: none; }
.pv-palco.espelho canvas { transform: scaleX(-1); }
.pv-aviso[hidden] { display: none; }
.pv-aviso { position: absolute; inset: 0; display: grid; place-items: center; color: var(--suave); margin: 0; pointer-events: none; letter-spacing: .04em; }
.fontes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.fontes button, .fontes .botao { padding: 8px 4px; font-size: 11.5px; text-align: center; }
.fontes button.sel, .fontes .botao.sel { border-color: var(--cromo); color: var(--gravado); }
.pv-painel .campo { grid-template-columns: 1fr 76px 30px; }

.ff-resultado img { display: block; width: 100%; margin-top: 12px; border: 1px solid var(--filete); }
.ff-resultado .linha { margin-top: 8px; }

@media (max-width: 1100px) {
  .tela-prova, .tela-briefing { grid-template-columns: minmax(0, 1fr); }
  main.app, .tela-rosto, .tela-armacao { grid-template-columns: minmax(0, 1fr); }
  main.app { overflow-y: auto; overflow-x: hidden; grid-template-rows: auto; align-content: start; }
  .tela { grid-auto-rows: auto; align-content: start; }
  aside, section.fotos, .arm-centro, .briefing-form, .briefing-resultado, .pv-centro { overflow: visible; min-height: auto; }
  .pv-palco { flex: none; height: 64vh; min-height: 0; }
  .arm-centro { grid-template-rows: auto auto; }
  .arm-centro .palco { min-height: 52vh; }
  aside.analise { border-left: 0; border-top: 1px solid var(--filete); }
  .arm-baixo { grid-template-columns: 1fr; }
  aside.lista { border-right: 0; border-bottom: 1px solid var(--filete); }
  aside.lista .lista-rostos { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .lista-rostos button.ativo::before { left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 2px; }
  section.fotos { grid-template-columns: 1fr; }
  .palco { min-height: 60vh; }
  .topo { gap: 16px; overflow: hidden; }
  .abas { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .abas::-webkit-scrollbar { display: none; }
  .status { display: none; }
}
.carregando { margin: 0; animation: respira 1.4s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .45; } }

@media (max-width: 700px) {
  .topo { padding: 0 12px; gap: 10px; }
  .marca span { display: none; }
  .aba { padding: 0 9px; font-size: 11.5px; }
  .aba i { margin-right: 5px; }
  .aba.ativa::after { left: 9px; right: 9px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* código de acesso da versão publicada (pedido pela IA) */
.codigo-acesso { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 2px 0 0; }
.codigo-acesso label { display: grid; gap: 4px; flex: 1 1 180px; color: var(--suave); }
.codigo-acesso input { width: 100%; }
#bf-estado .aviso { display: block; margin-top: 6px; color: var(--gravado); }