/* Tema Samsung SDS (MARCA=samsung-sds): carregado DEPOIS do css/msign.css, que continua sendo a base.
   Identidade do PDF "identidade visual SDS" (cores lidas dos operadores de cor do PDF) e de samsungsds.com:
   marinho #0E1B33, fundo claro #F5F6F2, cartões brancos com borda #DDE1E7, azul de destaque #2457C5, âmbar #E3A03A,
   Noto Sans (OFL; a SharpSansNo1 do site é proprietária). Redefine os tokens do msign.css e sobrescreve só as regras com
   cor fixa do tema escuro. Padrões: rótulo em maiúsculas acima do título, título em negrito marinho, cartões brancos de
   cantos 12 px, indicadores em cartões marinho, tabela com cabeçalho marinho e linhas alternadas, capa marinho com barra
   azul à esquerda. Estados: online azul, atenção âmbar, offline cinza, erro vermelho (só erro), sempre com o texto
   escrito. Contraste AA conferido (tabela no fim do arquivo). */

@font-face { font-family: "Noto Sans"; src: url("../../fonts/noto-sans-400.876b269d87ea.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../../fonts/noto-sans-600.4d5bf5348b83.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../../fonts/noto-sans-700.8a4f634102a0.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  /* cores do PDF */
  --marinho: #0E1B33;
  --marinho-traco: #0F192C;
  --marinho-cartao: #17284A;
  --claro: #F5F6F2;
  --zebra: #F0F2F5;
  --azul: #2457C5;
  --azul-barra: #2F6BE0;
  --ambar: #E3A03A;
  --ambar-borda: #B7791F;
  --ambar-texto: #8A5A12;
  --ambar-fundo: #FBF3E4;
  --sobre-escuro: #C5CFE0;
  --cinza: #6A7280;
  /* fora do PDF: erro (só para erro) e a linha sob o ponteiro */
  --erro: #C62828;
  --erro-fundo: #FDEDEC;
  --linha-ativa: #E8EDF5;
  /* pontos de status (no escuro, o azul da barra da capa: 3:1 sobre o marinho) */
  --ponto-azul: var(--azul);

  /* tokens do msign.css: o "vermelho" de lá é a cor de seleção, foco e progresso; aqui é o azul de destaque */
  --vermelho: var(--azul);
  --vermelho-16: rgba(36, 87, 197, .10);
  --campo-fundo: var(--claro);
  --campo-escuro: var(--marinho);
  --campo-azul: var(--marinho-cartao);
  --gelo: var(--marinho);          /* texto principal */
  --gelo-64: #4A5568;              /* corpo */
  --gelo-40: #646C7A;              /* secundário: o #6A7280 do PDF um pouco mais escuro, AA também na linha alternada */
  --superficie: #FFFFFF;
  --superficie-2: var(--zebra);
  --superficie-campo: #FFFFFF;
  --contorno: #DDE1E7;
  --contorno-2: #808998;           /* borda de campos e botões: 3:1 sobre o branco */
  --raio-cartao: 12px;
  --raio-controle: 6px;
  --fonte: "Noto Sans", "Segoe UI", system-ui, sans-serif;
}

/* Áreas escuras (lateral, capa da entrada, indicadores): os mesmos tokens com valores para o fundo marinho */
.lateral, .tela-entrada, .contador {
  color-scheme: dark;
  --vermelho: var(--azul-barra);
  --gelo: #FFFFFF;
  --gelo-64: var(--sobre-escuro);
  --gelo-40: #9AA6BD;
  --superficie: var(--marinho-cartao);
  --superficie-2: #1D3158;
  --contorno: rgba(197, 207, 224, .16);
  --contorno-2: rgba(197, 207, 224, .40);
  --ponto-azul: var(--azul-barra);
  color: var(--gelo);
}

/* ------------------------------------------------------------------ base */
body {
  font-weight: 400;
  color: var(--gelo);
  background-color: var(--claro);
  background-image: none;
}
a { text-decoration-color: var(--contorno-2); }
a:hover { text-decoration-color: var(--azul); }
::selection { background: var(--azul); color: #FFFFFF; }
h1, h2 { font-weight: 700; }
h1 { font-size: 30px; letter-spacing: -.01em; }
h3 { font-weight: 600; }
::placeholder { color: var(--gelo-40); opacity: 1; }

/* rótulo acima do título: grupo do menu (ou o nome do produto); nas páginas internas, a trilha faz esse papel */
.rotulo-secao, .migalha {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
}
.migalha a { color: var(--azul); text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
.rotulo-secao:has(+ .migalha) { display: none; }

/* ------------------------------------------------------------------ lateral marinho */
.app { background: linear-gradient(90deg, var(--marinho) var(--lateral), transparent var(--lateral)); }
.lateral { background: var(--marinho); border-right: 0; }
.lateral .marca img { width: 130px; }
.lateral .produto { margin-top: -12px; color: var(--sobre-escuro); font-weight: 600; }
.navegacao .grupo { color: var(--ambar); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.navegacao a { border-radius: var(--raio-controle); color: var(--sobre-escuro); }
.navegacao a:hover { background: var(--marinho-cartao); color: #FFFFFF; }
/* item atual: cartão marinho com a barra azul da capa à esquerda */
.navegacao a[aria-current="page"] { background: var(--marinho-cartao); color: #FFFFFF; box-shadow: inset 4px 0 0 var(--azul-barra); }
.conta { border-top-color: var(--contorno); }

/* ------------------------------------------------------------------ cartões e indicadores */
.cartao { border-color: var(--contorno); }
.cartao > h2, .cabecalho.compacto h2 { color: var(--marinho); }
.contador { background: var(--marinho); border-color: var(--marinho); }
a.contador:hover { background: var(--marinho-cartao); border-color: var(--marinho-cartao); }
.contador .numero { font-size: 40px; font-weight: 700; }
.contador .rotulo { color: var(--sobre-escuro); }
/* indicador com algo a ver: número âmbar e filete âmbar no topo (padrão dos cartões marinho do PDF) */
.contador.alerta { box-shadow: inset 0 3px 0 var(--ambar); }
.contador.alerta .numero { color: var(--ambar); }

/* ------------------------------------------------------------------ status: azul, âmbar, cinza; vermelho só erro */
.status-online::before, .status-ok::before { background: var(--ponto-azul); }
.status-atrasado::before, .status-aviso::before {
  border: 2px solid var(--ambar-borda); background: linear-gradient(90deg, var(--ambar) 50%, transparent 50%);
}
.status-atencao::before { background: var(--ambar); border: 2px solid var(--ambar-borda); }
.status-offline { color: var(--gelo-64); }
.status-offline::before { background: var(--cinza); }
.status-nunca { color: var(--gelo-64); }
.status-nunca::before { border: 2px solid var(--cinza); }
.status-desvinculado { color: var(--gelo-40); }
.status-desvinculado::before { border: 2px dashed var(--cinza); }
.status-erro { color: var(--erro); }
.status-erro::before { background: var(--erro); }
.status-processando { color: var(--gelo-64); }
.status-processando::before { border: 2px dashed var(--ponto-azul); }
.etiqueta { background: #FFFFFF; border-color: var(--contorno); color: var(--gelo-64); }
.etiqueta.alerta { border-color: var(--ambar-borda); background: var(--ambar-fundo); color: var(--ambar-texto); }
.compat-compativel dd::before { background: var(--azul); }
.compat-validar dd::before { border: 1.5px solid var(--ambar-borda); background: linear-gradient(90deg, var(--ambar) 50%, transparent 50%); }
.compat-nao_testado dd::before { border: 1.5px dashed var(--cinza); }

/* ------------------------------------------------------------------ tabelas: cabeçalho marinho, linhas alternadas */
.tabela th {
  background: var(--marinho); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  border-bottom: 0; padding-top: 11px; padding-bottom: 11px;
}
.tabela th:first-child, .tabela td:first-child { padding-left: 14px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 14px; }
.tabela td { border-bottom-color: var(--contorno); }
.tabela tbody tr:nth-child(even) { background: var(--zebra); }
.tabela tbody tr:hover { background: var(--linha-ativa); }
.tabela tbody tr:last-child td { border-bottom: 1px solid var(--contorno); }
.tabela .principal-col a { color: var(--marinho); }
/* Dispositivos (todas as colunas em 1366 × 768 sem rolar): respiro de 8 px nas pontas, o mesmo das outras células, e o
   da direita somado à largura mínima do IP (15ch no msign.css), para o IPv4 não quebrar */
.tabela-dispositivos th:first-child, .tabela-dispositivos td:first-child { padding-left: 8px; }
.tabela-dispositivos th:last-child, .tabela-dispositivos td:last-child { padding-right: 8px; }
.tabela-dispositivos .ip-col { min-width: calc(15ch + 8px); }
pre.json { background: var(--zebra); color: var(--gelo-64); }

/* ------------------------------------------------------------------ botões e campos */
.botao { background: #FFFFFF; color: var(--marinho); }
.botao:hover { background: var(--zebra); border-color: var(--marinho); }
.botao:active { background: var(--linha-ativa); border-color: var(--azul); color: var(--marinho); }
.botao-primario { background: var(--marinho); border-color: var(--marinho); color: #FFFFFF; }
.botao-primario:hover { background: var(--marinho-cartao); border-color: var(--marinho-cartao); }
.botao-primario:active { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.botao-texto { background: transparent; border-color: transparent; color: var(--gelo-64); }
.botao-texto:hover { background: var(--superficie-2); border-color: transparent; color: var(--gelo); }
.botao-link, .como-link { color: var(--azul); text-decoration-color: rgba(36, 87, 197, .45); }
.botao-link:hover, .como-link:hover { text-decoration-color: var(--azul); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  background-color: #FFFFFF; color: var(--gelo);
}
input:hover, select:hover, textarea:hover { border-color: var(--marinho); }
select option { background: #FFFFFF; color: var(--marinho); }
.campo.com-erro input, .campo.com-erro select, .item-ordem.com-erro { border-color: var(--erro); }
.campo .erro::before, .erros-form li::before, .item-fila.com-erro .item-texto::before, .duracao-campo .erro::before { background: var(--erro); }
.erros-form { border-color: var(--erro); background: var(--erro-fundo); }
.mensagens li { background: #FFFFFF; border-color: var(--contorno); box-shadow: inset 4px 0 0 var(--azul); }
.mensagens li.error { border-color: var(--erro); background: var(--erro-fundo); box-shadow: inset 4px 0 0 var(--erro); }
/* o título do relatório fica dentro do .cabecalho.compacto: seletor mais específico que a regra marinho acima */
.relatorio-erro h2, .relatorio-erro .cabecalho.compacto h2 { color: var(--erro); }
.relatorio-erro h2 .contagem { border-color: var(--erro); color: var(--erro); background: var(--erro-fundo); }
/* avisos (versão mais antiga, sem captura nova, conflito, Programação em uso): âmbar, o texto diz o que é */
.aviso-bloco, .aviso-em-uso { border-color: var(--ambar-borda); background: var(--ambar-fundo); }

/* seleção (azul) com texto branco: no msign.css o texto vem do --gelo, que aqui é marinho */
.filtros a[aria-current="true"], .filtros .pilula[aria-pressed="true"], .segmentado label:has(input:checked) { color: #FFFFFF; }
.segmentado label:has(input[value=""]:checked) { color: var(--gelo); }
.passo[aria-current="step"] { background: #FFFFFF; }
.passo[aria-current="step"] .numero { color: #FFFFFF; }

/* ------------------------------------------------------------------ envio, galeria e Programações */
.area-soltar:hover { border-color: var(--azul); background: #FFFFFF; }
.icone-envio { stroke: var(--azul); }
.cabecalho details.renomear .formulario-linha { background: #FFFFFF; }
.miniatura, .item-ordem .mini, .lista-itens .mini, .captura-grande, .faixa-capturas img { background: var(--zebra); }
.miniatura .duracao { background: rgba(14, 27, 51, .86); color: #FFFFFF; }
.selo-escolha { border-color: #FFFFFF; background: rgba(14, 27, 51, .55); color: #FFFFFF; }
.escolha:has(input:checked) .selo-escolha { background: var(--azul); border-color: var(--azul); }
.ciclo-total strong { font-weight: 600; }

/* ------------------------------------------------------------------ entrada: capa marinho com a barra azul à esquerda */
.tela-entrada {
  background: var(--marinho);
  border-left: 16px solid var(--azul-barra);
  justify-content: center;
  padding: 48px clamp(24px, 6vw, 96px);
}
/* cartão branco (formulário da entrada, páginas de erro sem sessão): de volta aos tokens do fundo claro */
.painel-entrada {
  color-scheme: light;
  --vermelho: var(--azul);
  --gelo: var(--marinho);
  --gelo-64: #4A5568;
  --gelo-40: #646C7A;
  --superficie: #FFFFFF;
  --superficie-2: var(--zebra);
  --contorno: #DDE1E7;
  --contorno-2: #808998;
  color: var(--gelo);
  max-width: 420px; padding: 32px;
  background: #FFFFFF; border: 1px solid var(--contorno); border-radius: var(--raio-cartao);
}
.painel-entrada h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.painel-entrada h2 { font-size: 22px; margin-bottom: 6px; }
.painel-entrada .subtitulo { margin-bottom: 24px; }
.painel-entrada .rodape { color: var(--gelo-40); }

.capa-entrada {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 420px); grid-template-rows: 1fr auto;
  justify-content: space-between; align-items: center; column-gap: 64px; row-gap: 32px;
}
.capa-logo { display: block; width: 130px; height: auto; margin-bottom: 48px; }
.rotulo-capa { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); }
.capa-texto h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.15; color: #FFFFFF; }
.capa-texto .subtitulo { margin: 16px 0 0; font-size: 16px; color: var(--sobre-escuro); max-width: 480px; }
.capa-rodape { grid-column: 1 / -1; align-self: end; margin: 0; font-size: 12px; color: var(--sobre-escuro); }

@media (max-width: 1100px) {
  .capa-entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 40px; }
}
@media (max-width: 820px) {
  /* barra do topo com a altura do conteúdo: em página curta (erro, Código na tela) a grade esticava a barra marinho */
  .app { background: none; grid-template-rows: auto 1fr; }
  .lateral { border-bottom: 0; }
  .lateral .marca img { width: 112px; }
  .navegacao a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--azul-barra); }
  .tela-entrada { border-left-width: 8px; padding: 32px 16px; }
  .capa-entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; row-gap: 28px; }
  .capa-logo { margin-bottom: 28px; }
  .capa-texto h1 { font-size: 28px; }
  .capa-texto .subtitulo { font-size: 15px; }
  .painel-entrada { max-width: none; padding: 24px 20px; }
}

/* Contraste (WCAG 2.1), conferido em 13/10/2026:
   texto #0E1B33 sobre #F5F6F2 15,8:1 · #4A5568 sobre #FFFFFF 7,5:1 e sobre #F5F6F2 6,9:1 · #646C7A sobre #FFFFFF 5,3:1,
   sobre #F5F6F2 4,9:1 e sobre #F0F2F5 4,7:1 · #2457C5 sobre #FFFFFF 6,5:1 · branco sobre #2457C5 6,5:1 ·
   #C5CFE0 sobre #0E1B33 10,9:1 e sobre #17284A 9,3:1 · #E3A03A sobre #0E1B33 7,7:1 · #8A5A12 sobre #FBF3E4 5,4:1 ·
   #C62828 sobre #FFFFFF 5,6:1 e sobre #FDEDEC 4,9:1 · branco sobre #0E1B33 17,2:1.
   Não texto (3:1): borda de campo #808998 sobre #FFFFFF 3,5:1 · ponto/foco #2F6BE0 sobre #0E1B33 3,5:1 (barra do item
   atual do menu: 3,5:1 contra a lateral e 2,99:1 contra o próprio item #17284A; o item também muda de fundo e de texto) ·
   ponto âmbar com borda #B7791F sobre #FFFFFF 3,6:1. */