/* =============================================================================
   css/paginas/assistente-universos-dmx.css — só na página /assistente-universos-dmx
   -----------------------------------------------------------------------------
   A base vem das classes pc-* da página de contato (lumikit-paginas.css):
   cabeçalho escuro, cartões, rótulos verdes de seção, campos, botão verde e
   avisos. Aqui ficam as peças do assistente:

     .au-regra    a explicação do topo, com as duas faixas (0–47 e 0–511)
     .au-painel   adicionar equipamentos, exemplos e os botões de organizar
     .au-numeros  os números do resumo
     .au-mapa     a grade de 512 universos, 32 por linha como o "Mapa de
                  canais DMX" do Lumikit SHOW (16 por linha no celular)
     .au-equip    o quadro de cada equipamento; dentro dele, .au-tela imita a
                  tela "Configuração das interfaces" do SHOW (fundo escuro,
                  uma coluna por saída), para o cliente achar os campos
     .au-show     o texto do "Editar manualmente" e os botões de copiar
     .au-modal    a confirmação antes de apagar a lista (no lugar do confirm())

   A cor de cada equipamento chega pela variável --cor, posta pelo JavaScript
   no próprio elemento. No mapa, as saídas de pixel de um controlador se
   alternam entre o tom forte e um pastel da mesma cor (.au-cel-clara).

   Vermelho é erro (saída DMX fora do 0–47, universo além do 511, IP).
   Amarelo é atenção: o universo em mais de uma saída, que pode ser de
   propósito (.au-cel-repetido no mapa; nos quadros, .au-rep-borda no campo e
   um ícone .au-rep por equipamento; .au-atencao no aviso).

   Este arquivo é carregado fora das camadas (@layer) do lumikit.css, então
   vence as regras do tema sem precisar de !important — a não ser contra os
   !important que o próprio .pc-campo já traz.
   ============================================================================= */

/* O atributo hidden precisa vencer os display:flex/grid abaixo. */
.au-wrap [hidden] { display: none !important; }

.au-secao { margin-bottom: 34px; }
.au-wrap h2.pc-section-label { margin-top: 0; }

.au-h3 { font-size: 15.5px; font-weight: 700; color: var(--lk-texto); margin: 0 0 10px; line-height: 1.35; }
.au-pe { font-size: 12.5px !important; color: var(--lk-texto-4) !important; line-height: 1.6 !important; }
.au-passos + .au-pe,
.au-texto-botoes + .au-pe { margin-top: 12px !important; }
.au-ajuda { font-size: 12.5px; color: var(--lk-texto-4); line-height: 1.6; margin: 4px 0 0; }
.au-cinza { color: var(--lk-texto-4); }
.au-ok { color: var(--lk-verde-texto); font-weight: 700; }
.au-ruim { color: var(--lk-erro); font-weight: 700; }

/* etiquetas pequenas */
.au-tag-ruim,
.au-tag-atencao,
.au-tag-desc {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 1px 6px;
	border-radius: 3px;
	vertical-align: 1px;
	white-space: nowrap;
}
.au-tag-ruim { background: var(--lk-erro-fundo); color: var(--lk-erro-texto); }
.au-tag-atencao { background: var(--lk-atencao-fundo); color: var(--lk-atencao-texto); border: 1px solid #f3d27a; }

/* o triângulo amarelo (SVG do JavaScript) dentro de textos e títulos */
.au-svg-atencao { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.au-tag-desc { background: var(--lk-fundo-2); color: var(--lk-texto-4); margin-left: 6px; font-weight: 600; }

/* ---------- botões secundários ---------- */
.au-btn-sec {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--lk-branco);
	color: var(--lk-verde-forte);
	border: 1px solid var(--lk-verde-campo);
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 18px;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color .15s, background .15s;
}
.au-btn-sec:hover { border-color: var(--lk-verde-forte); background: var(--lk-verde-hover-2); }
.au-btn-perigo { color: var(--lk-erro-2); border-color: var(--lk-erro-borda); }
.au-btn-perigo:hover { border-color: var(--lk-erro); background: var(--lk-erro-fundo); }
.au-btn-peq { font-size: 12.5px; padding: 7px 12px; }
.au-wrap .pc-btn { line-height: 1.2; }

.au-chip {
	display: inline-block;
	background: var(--lk-fundo-2);
	color: var(--lk-texto-2);
	border: 1px solid var(--lk-linha);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	margin: 0 4px 6px 0;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.au-chip:hover { border-color: var(--lk-verde-forte); color: var(--lk-verde-forte); }

/* botão com cara de link (lista de problemas) */
.au-link {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(143, 34, 26, .35);
	text-underline-offset: 2px;
	font: inherit;
}
.au-link:hover { text-decoration-color: currentColor; }

/* =============================================================================
   A REGRA (topo)
   ============================================================================= */

.au-regra { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.au-regra .pc-card { height: 100%; }

.au-faixas { margin: 2px 0 18px; display: grid; gap: 8px; }
.au-faixa { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.au-faixa-nome { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); }
.au-faixa-barra { display: block; background: var(--lk-fundo-2); border: 1px solid var(--lk-linha); height: 24px; position: relative; }
.au-faixa-cheia {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 7px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: visible;
}
.au-faixa-cheia-aparelhos { background: var(--lk-verde-forte); color: var(--lk-branco); min-width: 46px; }
.au-faixa-cheia-led { background: var(--lk-cor-azul); color: var(--lk-branco); }

.au-passos { margin: 14px 0 0; padding-left: 20px; }
.au-passos li { font-size: 14px; line-height: 1.65; color: var(--lk-texto-2); margin-bottom: 8px; }
.au-passos li:last-child { margin-bottom: 0; }
.au-passos b { color: var(--lk-texto); }

/* tabelas (exemplo e referência) */
.au-tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
.au-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.au-tabela th {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--lk-rotulo);
	background: var(--lk-fundo-3);
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--lk-linha);
	white-space: nowrap;
}
.au-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--lk-linha-2); color: var(--lk-texto-2); vertical-align: top; line-height: 1.45; }
.au-tabela-exemplo td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-tabela-ref td:nth-child(3),
.au-tabela-ref td:nth-child(4) { font-variant-numeric: tabular-nums; }
.au-tabela-ref tr.au-ref-novo td { border-top: 1px solid var(--lk-linha); }
.au-tabela-ref td:first-child { font-weight: 600; color: var(--lk-texto); white-space: nowrap; }

/* =============================================================================
   PAINEL: adicionar, exemplos, organizar
   ============================================================================= */

.au-painel { margin-bottom: 18px; }

.au-adicionar,
.au-ajustes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; }
.au-adicionar .pc-campo,
.au-ajustes .pc-campo { margin-bottom: 14px; }
.au-campo-modelo { flex: 1 1 320px; min-width: 0; }
.au-campo-qtd { width: 110px; }
.au-campo-botao { margin-bottom: 14px; }

/* select e número: o .pc-campo do contato só estiliza texto e textarea */
.au-wrap .pc-campo select,
.au-wrap .pc-campo input[type="number"] {
	width: 100%;
	height: 45px;
	border: 1px solid var(--lk-linha);
	border-radius: 0;
	box-shadow: none;
	background: var(--lk-branco);
	padding: 0 11px;
	font-size: 14px;
	color: var(--lk-texto);
	transition: border-color .15s;
}
.au-wrap .pc-campo input[type="text"] { height: 45px; }
/* o tema dá aos rótulos a altura de linha do texto corrido: quebrados em duas
   linhas (no celular), ficavam com um vão no meio */
.au-wrap .pc-campo label { line-height: 1.4; }
.au-wrap .pc-campo select:focus,
.au-wrap .pc-campo input[type="number"]:focus { border-color: var(--lk-verde); outline: 0; }

.au-exemplos { padding: 2px 0 14px; border-bottom: 1px solid var(--lk-linha-2); margin-bottom: 16px; }
.au-exemplos-rotulo { font-size: 12.5px; color: var(--lk-texto-4); margin-right: 6px; }

.au-ajustes .pc-campo { width: 210px; }
.au-ajustes-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* campos com problema */
.au-wrap input.au-ruim,
.au-wrap .pc-campo input.au-ruim { border-color: var(--lk-erro) !important; }

/* =============================================================================
   NÚMEROS E PROBLEMAS
   ============================================================================= */

.au-numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.au-num {
	background: var(--lk-branco);
	border: 1px solid var(--lk-linha);
	box-shadow: var(--lk-sombra);
	padding: 14px 16px;
	min-width: 0;
}
.au-num b { display: block; font-size: 26px; font-weight: 800; color: var(--lk-texto); line-height: 1.1; font-variant-numeric: tabular-nums; }
.au-num b small { font-size: 14px; font-weight: 600; color: var(--lk-texto-4); }
.au-num span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin-top: 4px; line-height: 1.35; }
.au-num > small { display: block; font-size: 12px; color: var(--lk-texto-4); margin-top: 2px; }
.au-num-ruim { border-color: var(--lk-erro-borda); background: var(--lk-erro-fundo); }
.au-num-ruim b { color: var(--lk-erro-texto); }
.au-num-ok b { color: var(--lk-verde-texto); }
.au-num-atencao { border-color: #f3d27a; background: var(--lk-atencao-fundo); }
.au-num-atencao b .au-svg-atencao { width: 26px; height: 26px; vertical-align: -2px; }
.au-num-atencao > small { color: var(--lk-atencao-texto); }

.au-aviso ul { margin: 6px 0 0; padding-left: 20px; }
.au-aviso li { margin-bottom: 4px; }
/* o texto clicável é um <button> (inline-block): sem isto, quando quebra em
   duas linhas, o marcador da lista desce para a última linha */
.au-aviso li .au-link { vertical-align: top; }
.au-aviso b { display: block; margin-bottom: 2px; }
.au-aviso b .au-svg-atencao { margin-right: 6px; }

/* o aviso amarelo (universo repetido): atenção, não erro */
.au-atencao { background: var(--lk-atencao-fundo); border-color: var(--lk-atencao); color: var(--lk-atencao-texto); }
.au-atencao-texto { display: block; font-size: 13px; }
.au-atencao .au-link { text-decoration-color: rgba(107, 74, 0, .4); }

/* =============================================================================
   MAPA DE UNIVERSOS
   ============================================================================= */

.au-mapa-card { margin-bottom: 18px; }
.au-mapa-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.au-mapa-topo .au-h3 { margin: 0; }
.au-mapa-dica { font-size: 12px; color: var(--lk-texto-4); }

.au-mapa {
	display: grid;
	grid-template-columns: repeat(32, minmax(0, 1fr));
	gap: 2px;
	position: relative;
	user-select: none;
}
.au-cel {
	aspect-ratio: 1 / 1.05;
	min-width: 0;
	background: var(--lk-branco);
	border: 1px solid var(--lk-linha);
	padding: 2px 3px;
	font-size: 9px;
	line-height: 1.1;
	color: var(--lk-texto-5);
	overflow: visible;
	white-space: nowrap;
	cursor: default;
	transition: opacity .15s;
}
/* universos dos aparelhos (0–47): fundo verde-claro, e um traço depois do 47 */
.au-cel-aparelhos { background: var(--lk-verde-fundo); border-color: var(--lk-verde-borda); }
.au-cel-limite { box-shadow: 3px 0 0 var(--lk-verde-forte); }

.au-cel-uso { background: var(--cor); border-color: var(--cor); color: rgba(255, 255, 255, .78); cursor: pointer; }
.au-cel-uso.au-cel-aparelhos { box-shadow: inset 0 -3px 0 var(--lk-verde-medio); }
.au-cel-uso.au-cel-limite { box-shadow: inset 0 -3px 0 var(--lk-verde-medio), 3px 0 0 var(--lk-verde-forte); }
/* saída DMX: anel branco por dentro, com o número dentro do anel */
.au-cel-dmx { outline: 2px solid var(--lk-branco); outline-offset: -3px; padding: 3px 4px; }
/* universo em mais de uma saída: listras amarelas. É atenção, não erro (pode
   ser um espelho de propósito), por isso amarelo e não vermelho. */
.au-cel-repetido {
	background: repeating-linear-gradient(135deg, var(--lk-atencao) 0 5px, #f8d57a 5px 10px);
	border-color: var(--lk-atencao-icone);
	color: rgba(46, 33, 0, .75);
}
.au-cel-repetido .au-cel-r { color: #2e2100; text-shadow: none; }
.au-cel-apagada { opacity: .28; }

/* saída de pixel no tom pastel (uma sim, uma não): texto escuro, que o
   branco some no claro */
.au-cel-clara { color: rgba(28, 35, 32, .62); }
.au-cel-clara .au-cel-r { color: var(--lk-texto); text-shadow: none; }

.au-cel-n { display: block; }
.au-cel-r {
	/* o rótulo da saída pode passar por cima das células seguintes, como o
	   nome do aparelho no Mapa de canais do SHOW */
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 3px;
	font-size: 9px;
	font-weight: 700;
	color: var(--lk-branco);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

/* a dica que segue o mouse nos universos com mais de uma saída. Fica no
   <body> (fora do .au-wrap), por isso o [hidden] tem regra própria. */
.au-dica {
	position: fixed;
	z-index: 2000;
	pointer-events: none;
	max-width: 360px;
	background: var(--lk-preto);
	color: var(--lk-esc-texto);
	border-top: 3px solid var(--lk-atencao);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	padding: 9px 12px 10px;
	font-size: 12.5px;
	line-height: 1.45;
}
.au-dica[hidden] { display: none; }
.au-dica-tit { display: flex; align-items: center; gap: 6px; color: var(--lk-branco); font-size: 13px; margin-bottom: 6px; }
.au-dica ul { list-style: none; margin: 0; padding: 0; }
.au-dica li { display: flex; align-items: flex-start; gap: 7px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.au-dica li .au-pinta { margin: 3px 0 0; flex-shrink: 0; }
.au-dica li b { color: var(--lk-branco); }
.au-dica-fraco { color: var(--lk-esc-texto-2); }

.au-mapa-info { font-size: 12.5px; color: var(--lk-texto-3); min-height: 30px; padding: 10px 0 0; line-height: 1.5; }

.au-pinta {
	display: inline-block;
	width: 11px;
	height: 11px;
	background: var(--cor, var(--lk-texto-5));
	vertical-align: -1px;
	margin-right: 5px;
	border-radius: 2px;
}
.au-pinta-dmx { background: var(--lk-texto-4); outline: 2px solid var(--lk-branco); outline-offset: -4px; }
.au-pinta-forte { background: var(--lk-texto-4); margin-right: 1px; }
.au-pinta-clara { background: #bcc3be; }
.au-pinta-aparelhos { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); }
.au-pinta-repetido { background: repeating-linear-gradient(135deg, var(--lk-atencao) 0 3px, #f8d57a 3px 6px); }

/* a legenda fica no topo do mapa, entre o título e a grade */
.au-legenda { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--lk-linha-2); padding-bottom: 12px; margin-bottom: 12px; align-items: center; }
.au-leg {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--lk-branco);
	border: 1px solid var(--lk-linha);
	border-left: 4px solid var(--cor);
	padding: 5px 10px 5px 8px;
	font-size: 12.5px;
	color: var(--lk-texto-3);
	cursor: pointer;
	text-align: left;
}
.au-leg .au-pinta { display: none; }
.au-leg b { color: var(--lk-texto); font-weight: 700; }
.au-leg:hover, .au-leg-sel { background: var(--lk-verde-hover-2); border-color: var(--lk-verde-borda); border-left-color: var(--cor); }
.au-leg-nota { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; line-height: 1.4; color: var(--lk-texto-4); margin-left: auto; }
.au-leg-item { display: inline-flex; align-items: center; }
.au-leg-item .au-pinta-forte { margin-right: 1px; }

/* =============================================================================
   QUADRO DE CADA EQUIPAMENTO
   ============================================================================= */

.au-vazio { font-size: 14px; color: var(--lk-texto-4); padding: 18px 0; }

.au-equip { border-left: 4px solid var(--cor); margin-bottom: 14px; padding: 16px 20px 14px; transition: box-shadow .15s; }
.au-equip.au-sel { box-shadow: 0 0 0 2px var(--cor), var(--lk-sombra-alta); }

.au-equip-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.au-equip-foto {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	object-fit: contain;
	background: var(--lk-fundo-3);
	border: 1px solid var(--lk-linha);
}
.au-equip-foto-vazia { display: grid; place-items: center; color: var(--lk-texto-5); font-size: 20px; }

.au-equip-tit { flex: 1; min-width: 0; }
.au-equip-nome {
	width: 100%;
	max-width: 420px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 17px;
	font-weight: 800;
	color: var(--lk-texto);
	padding: 2px 6px;
	margin-left: -7px;
	transition: border-color .15s, background .15s;
}
.au-equip-nome:hover { border-color: var(--lk-linha); }
.au-equip-nome:focus { border-color: var(--lk-verde); background: var(--lk-branco); outline: 0; }
.au-equip-modelo { display: block; font-size: 12.5px; color: var(--lk-texto-4); margin-top: 1px; }
.au-equip-modelo a { color: var(--lk-verde-forte); }

.au-equip-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.au-icone {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: var(--lk-branco);
	border: 1px solid var(--lk-linha);
	color: var(--lk-texto-3);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.au-icone:hover:not(:disabled) { border-color: var(--lk-verde-forte); color: var(--lk-verde-forte); }
.au-icone:disabled { color: var(--lk-desabilitado-2); cursor: default; }
.au-icone-perigo:hover:not(:disabled) { border-color: var(--lk-erro); color: var(--lk-erro); }

.au-equip-campos { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.au-mini { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin: 0; }
.au-mini input,
.au-mini select {
	height: 36px;
	border: 1px solid var(--lk-linha);
	background: var(--lk-branco);
	padding: 0 9px;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lk-texto);
	border-radius: 0;
	box-shadow: none;
}
.au-mini input[type="text"] { width: 150px; }
.au-mini input[type="number"] { width: 90px; }
.au-mini input:focus,
.au-mini select:focus { border-color: var(--lk-verde); outline: 0; }
.au-mini-largo { flex: 1 1 260px; min-width: 0; }
.au-mini-largo select { width: 100%; max-width: 520px; }
.au-mini-valor { display: flex; align-items: center; height: 36px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--lk-texto-2); }

/* ---------- a tela do SHOW ----------
   Cores do tema escuro do SHOW (fundo azul-acinzentado, campos escuros, texto
   claro), com as variáveis do tema escuro do site. */
.au-tela {
	background: var(--lk-esc-card);
	color: var(--lk-esc-texto);
	padding: 10px 12px 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.au-tela-tab { border-collapse: separate; border-spacing: 6px 0; font-size: 12px; }
.au-tela-tab th { font-weight: 600; text-align: center; padding: 3px 0; white-space: nowrap; color: var(--lk-esc-texto); }
.au-tela-tab tbody th[scope="row"] { text-align: right; padding-right: 6px; font-weight: 400; color: var(--lk-esc-texto); }
.au-tela-tab td { text-align: center; padding: 3px 0; }
.au-tela-tab input {
	width: 72px;
	height: 26px;
	background: var(--lk-esc-fundo);
	color: var(--lk-esc-texto);
	border: 1px solid #44545e;
	border-radius: 0;
	padding: 0 4px 0 7px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	box-shadow: none;
}
.au-tela-tab input:focus { border-color: var(--lk-esc-verde); outline: 0; }
/* saída que repete universo: borda amarela (atenção). Vem antes do .au-ruim
   de propósito: se a saída também tiver erro, o vermelho vence. */
.au-tela-tab input.au-rep-borda { border-color: var(--lk-atencao) !important; }
.au-tela-tab input.au-ruim { border-color: #ff6b5e !important; background: #4a2422; }

/* destacada pelo ícone do equipamento (ou pelo aviso): um segundo contorno
   amarelo, por fora da borda.

   Com outline, e não box-shadow: o tema tem "input, textarea, select
   { box-shadow: none !important }" dentro das camadas (@layer) do
   lumikit.css, e um !important de camada vence até o !important deste
   arquivo, que fica fora das camadas. O outline ninguém zera. */
.au-tela-tab input.au-rep-destaque {
	border-color: var(--lk-atencao) !important;
	outline: 2px solid var(--lk-atencao);
	outline-offset: 2px;
	background: #3a3215;
}

/* a coluna do ícone amarelo: um por equipamento, depois da última saída */
.au-tela-tab .au-tela-rep { width: 30px; padding: 0; }
.au-rep {
	width: 30px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	transition: background .15s;
}
.au-rep .au-svg-atencao { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.au-rep:hover { background: rgba(240, 180, 41, .16); }
.au-rep:focus-visible { outline: 2px solid var(--lk-atencao); outline-offset: 1px; }
.au-rep-ativo { background: rgba(240, 180, 41, .26); box-shadow: inset 0 0 0 1px var(--lk-atencao); }
.au-tela-faixa td { color: var(--lk-esc-texto-2); font-size: 11.5px; font-variant-numeric: tabular-nums; padding-bottom: 6px; }
.au-tela-fixo {
	display: inline-block;
	min-width: 72px;
	height: 26px;
	line-height: 24px;
	border: 1px solid #3b4a53;
	color: #7f9099;
	font-size: 12px;
	padding: 0 7px;
	text-align: left;
	font-variant-numeric: tabular-nums;
}
.au-tela-tipo td { padding-top: 6px; }
.au-tipo { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; }
.au-tipo-pixel { background: rgba(47, 111, 208, .35); color: #c9dbf7; }
.au-tipo-dmx { background: var(--lk-esc-etiqueta); color: var(--lk-verde-claro); }

.au-equip-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.au-equip-nota { font-size: 12.5px !important; color: var(--lk-texto-4) !important; line-height: 1.55 !important; margin: 0 !important; flex: 1 1 300px; }
.au-equip-nota:empty { display: none; }

.au-equip-prob { list-style: none; margin: 10px 0 0; padding: 0; }
.au-equip-prob:empty { display: none; }
.au-equip-prob li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--lk-erro-texto);
	background: var(--lk-erro-fundo);
	border-left: 3px solid var(--lk-erro);
	padding: 7px 10px;
	margin-top: 6px;
}

/* =============================================================================
   PASSANDO PARA O SHOW
   ============================================================================= */

.au-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.au-texto {
	width: 100%;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--lk-esc-texto);
	background: var(--lk-esc-fundo);
	border: 1px solid var(--lk-esc-card);
	padding: 10px 12px;
	resize: vertical;
	white-space: pre;
	overflow-x: auto;
	margin-bottom: 10px;
}
.au-texto-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.au-copiado { font-size: 13px; color: var(--lk-verde-texto); font-weight: 600; }

/* =============================================================================
   DÚVIDAS
   ============================================================================= */

.au-duvidas { display: grid; gap: 10px; }
.au-duvida { padding: 0; }
.au-duvida summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 20px 15px 44px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--lk-texto);
	position: relative;
}
.au-duvida summary::-webkit-details-marker { display: none; }
.au-duvida summary::before {
	content: '+';
	position: absolute;
	left: 18px;
	top: 12px;
	width: 18px;
	font-size: 19px;
	font-weight: 400;
	color: var(--lk-verde-forte);
	text-align: center;
}
.au-duvida[open] summary::before { content: '–'; }
.au-duvida p { padding: 0 20px 0 44px; }
.au-duvida p:last-child { padding-bottom: 16px; }

/* =============================================================================
   MODAL DE CONFIRMAÇÃO (#au-modal, um <dialog>)
   ============================================================================= */

.au-modal {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: calc(100vw - 32px);
	width: 460px;
	overflow: visible;
}
.au-modal::backdrop { background: rgba(17, 26, 20, .6); }

.au-modal-caixa {
	background: var(--lk-branco);
	border-top: 4px solid var(--lk-verde-forte);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	padding: 24px 26px 22px;
}
.au-modal-titulo { font-size: 18px; font-weight: 800; color: var(--lk-texto); margin: 0 0 10px; line-height: 1.3; }
.au-modal-texto { font-size: 14px; line-height: 1.65; color: var(--lk-texto-2); margin: 0 0 22px; }
.au-modal-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.au-modal-botoes .pc-btn,
.au-modal-botoes .au-btn-sec { padding: 11px 20px; }

/* confirmar que apaga: botão vermelho */
.au-modal .pc-btn.au-btn-perigo-cheio { background: var(--lk-erro); }
.au-modal .pc-btn.au-btn-perigo-cheio:hover { background: var(--lk-erro-texto); }

/* navegador sem <dialog> (Safari antigo): o mesmo desenho, montado à mão */
.au-modal.au-modal-reserva {
	position: fixed;
	inset: 0;
	z-index: 10000;
	width: auto;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(17, 26, 20, .6);
}
.au-modal.au-modal-reserva .au-modal-caixa { width: 100%; max-width: 460px; }

/* =============================================================================
   TELAS MENORES
   ============================================================================= */

@media (max-width: 991px) {
	.au-regra,
	.au-show { grid-template-columns: 1fr; }
	.au-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.au-leg-nota { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 767px) {
	/* 16 por linha: 32 linhas de 16 = os mesmos 512 universos */
	.au-mapa { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 1px; }
	.au-cel { font-size: 8px; padding: 1px 2px; }
	.au-cel-r { display: none; }
	.au-cel-limite { box-shadow: none; }
	.au-cel-uso.au-cel-limite { box-shadow: inset 0 -3px 0 var(--lk-verde-medio); }
	.au-mapa-dica { display: none; }

	.au-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.au-num { padding: 10px 12px; }
	.au-num b { font-size: 22px; }

	.au-ajustes .pc-campo,
	.au-campo-qtd { width: auto; flex: 1 1 140px; }
	.au-campo-botao,
	.au-campo-botao .pc-btn,
	.au-ajustes-botoes { width: 100%; }
	.au-campo-botao .pc-btn { justify-content: center; }

	.au-equip { padding: 14px 14px 12px; }
	.au-equip-topo { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
	.au-equip-foto { width: 44px; height: 44px; }
	.au-equip-tit { flex-basis: calc(100% - 160px); }
	.au-equip-nome { font-size: 15.5px; }
	.au-faixa { grid-template-columns: 1fr; gap: 3px; }
}