/*
  Homologador — estilos (identidade visual 3layer)
  @project airplay / dominio / homologador
  @update: 2026.11.08

  Fontes da identidade: empresa-soul/fundacao/DESIGN.md e DESIGN2.md (variante cyan-primary,
  usada sobre fundo claro) + padroes de UX do pdl-maximus (OUTROS/pdl-maximus/design.md).
  Regras: flat (sem gradiente), cantos de 2 a 4px (DESIGN.md v1.1), tipografia dominante, ciclo tricolor
  cyan > rosa > amarelo em acentos de borda, sem emojis, botoes de acao em CAIXA ALTA e sem icone,
  botao primario sempre o ultimo a direita.
*/
:root {
  --cyan: #00B7B7;
  --pink: #FC00A2;
  --yellow: #F9E600;
  --gray: #333333;
  --gray-footer: #222222;

  --bg: #F5F5F5;
  --card: #FFFFFF;
  --txt: #333333;
  --muted: #666666;
  --borda: #E0E0E0;
  --campo: #FFFFFF;

  --prim: var(--cyan);
  --prim-txt: #FFFFFF;        /* ciano e a cor primaria nos dois temas (DESIGN2.md; PDL Maximus) */
  --ok: #059669;
  --warn: #D97706;
  --err: #DC2626;

  --r-sm: 2px;
  --f-logo: "Krona One", system-ui, sans-serif;
  --f-disp: "Space Grotesk", "Rubik", system-ui, sans-serif;
  --f-body: "Rubik", system-ui, sans-serif;
}
/* Tema escuro (padrão). O modo claro é o :root acima; a escolha fica na aba CONFIGURAÇÕES (html[data-tema]). */
:root[data-tema="escuro"] {
  --bg: #1F1F1F; --card: #2B2B2B; --txt: #F1F1F1; --muted: #A3A3A3; --borda: #444444; --campo: #1F1F1F;
  --ok: #34D399; --warn: #FBBF24; --err: #F87171;
}

* { box-sizing: border-box; border-radius: 4px; }
body { margin: 0; font: 400 15px/1.6 var(--f-body); background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased; }
.material-icons { font-size: 20px; line-height: 1; user-select: none; }

/* ---- Faixa tricolor + cabecalho escuro ---------------------------------------------------- */
.faixa { height: 3px; background: linear-gradient(90deg, var(--cyan) 0 33.333%, var(--pink) 33.333% 66.666%, var(--yellow) 66.666% 100%); }
.topo { background: var(--gray); color: #fff; }
.topo-int { max-width: 1400px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca svg { width: 38px; height: 38px; flex: none; }
.marca .logo { display: block; font: 400 17px/1 var(--f-logo); letter-spacing: -.5px; color: #fff; }
.marca .sub { display: block; margin-top: 6px; font: 700 10px/1 var(--f-disp); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }

.status { border-radius: var(--r-sm); padding: 6px 14px; font: 700 11px/16px var(--f-disp); letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.status.off { background: #444; color: #CBD5E1; }
.status.on { background: var(--ok); color: #fff; animation: pulso 1.6s infinite; }
.status.fala { background: var(--cyan); color: #fff; }
.status.proc { background: var(--yellow); color: #333; }
@keyframes pulso { 50% { opacity: .7; } }

/* ---- Conteudo ----------------------------------------------------------------------------- */
.conteudo { max-width: 1400px; margin: 0 auto; padding: 32px 40px 64px; display: flex; flex-direction: column; gap: 24px; }

/* Cartao: borda superior 4px, ciclo tricolor (DESIGN2 5.4) */
.painel { background: var(--card); border: 1px solid var(--borda); border-top: 4px solid var(--cyan); padding: 28px; }
.painel:nth-of-type(3n+2) { border-top-color: var(--pink); }
.painel:nth-of-type(3n+3) { border-top-color: var(--yellow); }
.painel > header { margin-bottom: 20px; }
h2 { margin: 0 0 4px; font: 400 16px/1.3 var(--f-logo); letter-spacing: -.3px; color: var(--txt); }
.painel > header p { margin: 0; font-size: 13px; color: var(--muted); max-width: 720px; }

.linha { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.linha:last-child { margin-bottom: 0; }
/* barra de botoes: negativos/secundarios a esquerda, primario sempre o ultimo a direita */
.linha.acoes { justify-content: flex-end; }

label { display: flex; flex-direction: column; gap: 6px; font: 600 11px/1.2 var(--f-disp); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
label.largo { flex: 1; min-width: 260px; }
label.check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; }
label.check input { width: 16px; height: 16px; accent-color: var(--cyan); }

input, select, textarea { font: 400 14px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--txt); background: var(--campo); border: 1px solid var(--borda); border-bottom: 2px solid var(--borda); padding: 9px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); border-bottom-color: var(--cyan); }
input[type=checkbox] { padding: 0; }
textarea { width: 100%; resize: vertical; }

/* ---- Botoes (DESIGN.md 4.8 + pdl-maximus): CAIXA ALTA, sem icone, cantos retos ---------------- */
button, .btn { display: inline-block; font: 700 12px/1 var(--f-disp); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  padding: 13px 22px; background: transparent; color: var(--txt); border: 1px solid var(--txt); transition: background .2s, color .2s, border-color .2s; }
button:hover, .btn:hover { background: var(--txt); color: var(--card); }
button.primario { background: var(--prim); color: var(--prim-txt); border-color: var(--prim); }
/* hover do primario: amarelo com texto cinza (DESIGN2.md 5.8) */
button.primario:hover { background: var(--yellow); color: var(--gray); border-color: var(--yellow); }
button.gravando { background: var(--err); color: #fff; border-color: var(--err); }
button.gravando:hover { background: var(--err); color: #fff; opacity: .85; }
button.perigo { color: var(--err); border-color: var(--err); }
button.perigo:hover { background: var(--err); color: #fff; }
button.mini { border-radius: var(--r-sm); padding: 6px 10px; font-size: 10px; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
a { color: var(--cyan); }
.oculto { display: none !important; }

.caminho { font-size: 12px; color: var(--muted); }
.info { font-size: 12px; color: var(--muted); margin-bottom: 16px; white-space: pre-line; padding-left: 12px; border-left: 3px solid var(--borda); }
.info.err { color: var(--err); border-left-color: var(--err); }

/* Linha "ao vivo" e erro */
.ao-vivo { min-height: 26px; padding: 8px 14px; border-left: 4px solid var(--yellow); background: var(--bg); color: var(--muted); font-size: 14px; }
.erro { margin-top: 12px; padding: 10px 14px; border-left: 4px solid var(--err); background: var(--err); color: #fff; font-size: 14px; }

#editorLocal textarea { font: 13px/1.5 ui-monospace, "SF Mono", monospace; margin-bottom: 16px; }

/* ---- Tabela de registros: cabecalho escuro, evidencia | observacao ------------------------ */
.tabela-card { background: var(--card); border: 1px solid var(--borda); border-top: 4px solid var(--yellow); }
.tabela-card > header { padding: 24px 28px 16px; }
.tabela-card > header p { margin: 0; font-size: 13px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--gray); color: #fff; padding: 12px 16px; text-align: left; font: 700 11px/1.2 var(--f-disp); letter-spacing: 2px; text-transform: uppercase; }
td { border-top: 1px solid var(--borda); padding: 16px; vertical-align: top; text-align: left; }
td.ev { width: 52%; }
.aba-painel { display: flex; flex-direction: column; gap: 24px; }
td.ev img { width: 100%; border: 1px solid var(--borda); display: block; }
/* cabecalho de cada celula: mesma altura nas duas colunas, alinha o topo do print e da observacao */
td .cab { display: flex; justify-content: space-between; align-items: center; height: 32px; margin-bottom: 8px; font: 600 11px/1 var(--f-disp); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
td .cab .acoes-linha { display: flex; gap: 8px; }
td.ev img { margin-top: 0; }
td.obs { height: 1px; } /* permite o .obs-col ocupar toda a altura da linha */
.obs-col { display: flex; flex-direction: column; height: 100%; }
td.obs textarea { flex: 1; min-height: 160px; resize: none; }
tr.atual td.ev { box-shadow: inset 4px 0 0 var(--cyan); }
tr.atual td.obs textarea { border-color: var(--cyan); border-bottom-color: var(--cyan); }
.vazio { margin: 0; padding: 40px 28px; text-align: center; color: var(--muted); border-top: 1px solid var(--borda); }

/* ---- Confirmacao (substitui confirm() nativo) --------------------------------------------- */
dialog { border: 1px solid var(--borda); border-top: 4px solid var(--pink); background: var(--card); color: var(--txt); padding: 28px; max-width: 440px; }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 8px; font: 400 15px/1.3 var(--f-logo); }
dialog p { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
dialog .linha { justify-content: flex-end; margin: 0; }

/* ---- Rodape ------------------------------------------------------------------------------- */
.rodape { background: var(--gray-footer); color: #999; font-size: 13px; text-align: center; padding: 24px 40px; }

@media (max-width: 720px) {
  .topo-int, .conteudo { padding-left: 16px; padding-right: 16px; }
  .painel, .tabela-card > header { padding: 20px; }
  td.ev { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .status.on { animation: none; } }

/* ---- Abas (pdl-maximus: MAIUSCULAS, sem icone nem numero) -------------------------------- */
.abas { display: flex; gap: 0; border-bottom: 2px solid var(--borda); }
.aba { background: transparent; color: var(--muted); border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 14px 28px; font: 700 13px/1 var(--f-disp); letter-spacing: 2px; border-radius: 0; }
.aba:hover { background: transparent; color: var(--txt); }
.aba.ativa { color: var(--txt); border-bottom-color: var(--cyan); }

button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Zoom: 90% da janela; o clique na imagem fecha */
dialog.zoom { padding: 8px; border: none; border-top: 4px solid var(--cyan); background: var(--card); max-width: none; max-height: none; width: 90vw; height: 90vh; overflow: hidden; }
dialog.zoom[open] { display: flex; flex-direction: column; gap: 8px; }
/* fundo da página desfocado enquanto o zoom está aberto (evita distração) */
dialog.zoom::backdrop { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Barra de edicao da imagem: ferramentas | cor | espessura | historico | FECHAR (primario, ultimo a direita) */
.barra-edicao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 4px 4px 0; }
.barra-edicao .grupo { display: flex; align-items: center; gap: 6px; }
.barra-edicao button { padding: 9px 14px; font-size: 11px; }
.barra-edicao button b { display: inline-block; min-width: 18px; margin-left: 4px; padding: 2px 4px; background: var(--pink); color: #fff; border-radius: var(--r-sm); font-size: 11px; }
.barra-edicao #btnFecharZoom { margin-left: auto; }
.barra-edicao select { padding: 8px 10px; font: 700 11px/1 var(--f-disp); letter-spacing: 1px; }
.ferr.ativa { background: var(--txt); color: var(--card); }
.cor { width: 26px; height: 26px; padding: 0; border: 2px solid var(--borda); border-radius: var(--r-sm); }
.cor:hover { opacity: .85; }
.cor.ativa { border-color: var(--txt); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--txt); }
.palco-zoom { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #1a1a1a; border-radius: var(--r-sm); overflow: hidden; }
.palco { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; touch-action: none; }
.palco img { display: block; max-width: 100%; max-height: calc(90vh - 110px); width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.palco svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.palco.ferr-borracha svg { cursor: cell; }
.palco.ferr-etiqueta svg { cursor: copy; }

/* camada de marcas sobre a miniatura da tabela (nao captura o clique) */
td.ev .print { position: relative; }
td.ev .print svg { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); pointer-events: none; }

/* ---- Registro sem imagem: caixa para colar ou anexar o print --------------------------------- */
.cab-registros { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cab-registros p { max-width: 760px; }
.vazio-print { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 180px; padding: 20px;
  border: 2px dashed var(--borda); border-radius: 4px; color: var(--muted); text-align: center; outline: none; }
.vazio-print:focus-visible, .vazio-print.sobre { border-color: var(--cyan); color: var(--txt); }
.vazio-print .vp-txt { font-size: 14px; }
.vazio-print .vp-txt.aviso { color: var(--err); font-weight: 500; }

/* ---- Ditado por registro: marcador na linha que esta recebendo a voz ------------------------ */
tr.ditando .tit::after { content: ' · DITANDO'; color: var(--err); }
tr.ditando td.obs textarea { border-color: var(--err); border-bottom-color: var(--err); }

/* ---- Status e erros sempre a vista (a tabela fica longe do topo da pagina) ---------------------- */
.topo { position: sticky; top: 0; z-index: 40; }
.erro { position: fixed; right: 24px; bottom: 24px; z-index: 60; max-width: min(520px, calc(100vw - 48px)); margin: 0; }

/* ---- Conta e administracao (modo producao) ------------------------------------------------- */
.topo-dir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quem { font: 500 12px/1 var(--f-disp); letter-spacing: .5px; color: #CBD5E1; }
.tab-simples { margin-bottom: 20px; }
.tab-simples td { padding: 10px 16px; vertical-align: middle; font-size: 14px; }
.tab-simples .acoes-celula { text-align: right; white-space: nowrap; }
.tab-simples .acoes-celula button { margin-left: 8px; padding: 8px 12px; }
dialog#dlgSenhaUsr label { display: block; margin: 12px 0 16px; }
dialog#dlgSenhaUsr input { width: 100%; }

.info-tela { align-self: center; font-size: 13px; color: var(--muted); padding-bottom: 2px; }
.info-tela.on { color: var(--ok); }