/* Tema e identidade visual do painel (Hotlink/CPD, 2026-10-16).
   - Identidade alinhada ao site www.hotlink.com.br (fonte Figtree, laranja #f6931c, botões arredondados)
     e aos relatórios/e-mails (grafite #333, fundo #f2f2f4, bordas #e6e6e9, cantos de 12px).
   - Temas: claro, escuro e sistema (padrão). assets/js/tema.js grava a preferência e define
     html[data-modo="claro|escuro"]; as cores ficam nas variáveis abaixo.
   - tema-cores.css (gerado) troca as cores fixas de style.css/responsividade.css por estas variáveis.
   Carregar DEPOIS de style.css. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");
@import url("tema-cores.css?v=20261019f");
@import url("painel-uso.css?v=20261019f");

html[data-modo="claro"] {
  color-scheme: light;
  --fundo: #f2f2f4;
  --superficie: #ffffff;
  --superficie-2: #f7f7f8;
  --borda: #e6e6e9;
  --texto: #2a2829;
  --texto-suave: #6b6b6b;
  --laranja: #f6931c;
  --laranja-forte: #e07f0a;
  --laranja-claro: #fff1df;
  --laranja-texto: #a85a00;
  --grafite: #333333;
  --desativado: #c4c4c4;
  --sombra-cartao: 0 0 0 1px var(--borda), 0 1px 3px rgb(20 20 24 / 5%);
  --sombra-flutuante: 0 8px 24px rgb(20 20 24 / 14%);
  --verde: #2e7d32;
  --verde-claro: #e8f3ea;
  --vermelho: #c62828;
  --vermelho-claro: #fdf1f0;
  --vermelho-borda: #f0c2bf;
  --vermelho-texto: #5f1d1a;
  --uso-trilho: #ececee;
  --uso-conta: #fbd3a1;
}

html[data-modo="escuro"] {
  color-scheme: dark;
  --fundo: #131417;
  --superficie: #1c1d21;
  --superficie-2: #24262b;
  --borda: #33363d;
  --texto: #ececee;
  --texto-suave: #a3a3ab;
  --laranja: #f6931c;
  --laranja-forte: #ffa53d;
  --laranja-claro: #3a2914;
  --laranja-texto: #ffb560;
  --grafite: #0d0e10;
  --desativado: #4a4c52;
  --sombra-cartao: 0 0 0 1px var(--borda);
  --sombra-flutuante: 0 8px 24px rgb(0 0 0 / 55%);
  --verde: #6cc070;
  --verde-claro: #1d2f1f;
  --vermelho: #ef6b63;
  --vermelho-claro: #2e1918;
  --vermelho-borda: #5c2a27;
  --vermelho-texto: #f6d3d0;
  --uso-trilho: #2c2e34;
  --uso-conta: #6b4a22;
}

/* ---------- Base ---------- */
html[data-modo] body {
  background: var(--fundo);
  color: var(--texto);
}

html[data-modo] *:not(i):not([class^="bx"]):not([class*=" bx"]):not([class^="bi"]):not([class*=" bi-"]) {
  font-family: "Figtree", "Segoe UI", Arial, sans-serif;
}

html[data-modo] .main,
html[data-modo] .main-section { background: var(--fundo); }

html[data-modo] :focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}

/* Cartões: borda fina e cantos de 12px, como nos e-mails e relatórios */
html[data-modo] .manage-domains,
html[data-modo] .dashboard-content-info,
html[data-modo] .dashboard-navigation > .box-navigation,
html[data-modo] .box-mails,
html[data-modo] .chart-sidebar,
html[data-modo] .mail-sidebar,
html[data-modo] .dashboard-aside,
html[data-modo] .box-md,
html[data-modo] .dominio-cartao {
  background: var(--superficie);
  border-radius: 12px;
}

html[data-modo] .dashboard-navigation > .box-navigation { transition: box-shadow .2s ease; }
html[data-modo] a.dashboard-navigation:hover > .box-navigation { box-shadow: 0 0 0 1px var(--laranja); }

/* Botões em pílula, como no site */
html[data-modo] .button-ha,
html[data-modo] .button-form,
html[data-modo] .button-submit,
html[data-modo] .button-shut,
html[data-modo] .button-light,
html[data-modo] .btn-sucess,
html[data-modo] .btn-cancel,
html[data-modo] .swal-button,
html[data-modo] div:where(.swal2-container) button:where(.swal2-styled) {
  border-radius: 999px !important;
}

html[data-modo] .button-ha,
html[data-modo] .button-form,
html[data-modo] .button-submit { color: #ffffff; font-weight: 600; }

html[data-modo] .button-light:hover { color: #ffffff; }

/* Título das páginas */
html[data-modo] .title-page > .title { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Menu lateral: superfície clara, como o cabeçalho do site ---------- */
html[data-modo] .sidebar {
  background: var(--superficie);
  border-right: 1px solid var(--borda);
}

html[data-modo] .sidebar i { color: var(--laranja); }
html[data-modo] .sidebar .logo-details #btn { color: var(--texto); }
html[data-modo] .sidebar li a { background: transparent; }
html[data-modo] .sidebar li a .links_name { color: var(--texto); font-weight: 500; }
html[data-modo] .sidebar li a:hover,
html[data-modo] .sidebar li.active a { background: var(--laranja-claro); }
html[data-modo] .sidebar li a:hover .links_name,
html[data-modo] .sidebar li.active a .links_name { color: var(--laranja-texto); }
html[data-modo] .sidebar li a:hover i,
html[data-modo] .sidebar li.active i { color: var(--laranja); }
html[data-modo] .sidebar li .tooltip { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-flutuante); }

/* "Abrir Ticket" no rodapé do menu: chamada em destaque */
html[data-modo] .sidebar li.nav-foot { background: var(--superficie); border-right: 1px solid var(--borda); }
html[data-modo] .sidebar li.nav-foot a { background: var(--laranja); }
html[data-modo] .sidebar li.nav-foot a i,
html[data-modo] .sidebar li.nav-foot a .links_name { color: #ffffff; }
html[data-modo] .sidebar li.nav-foot a:hover { background: var(--laranja-forte); }

/* "Domínios" no topo do menu, separado das páginas do domínio escolhido */
html[data-modo] .sidebar li.menu-item-dominios {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}

/* ---------- Cabeçalho ---------- */
html[data-modo] .header_top { background: var(--superficie); border-bottom: 1px solid var(--borda); }
html[data-modo] .header_top.dark { background: var(--superficie); border-bottom: 1px solid var(--borda); }
html[data-modo] ul.header-list,
html[data-modo] ul.header-list.light {
  width: auto;
  gap: 18px;
  align-items: center;
}
html[data-modo] ul.header-list.light > li i,
html[data-modo] ul.header-list > li i { color: var(--laranja); font-size: 26px; }

/* Logo: versão com letras claras no tema escuro, no mesmo formato do claro
   (o logo com o quadrado laranja continua com o quadrado; só as letras ficam claras) */
html[data-modo="escuro"] img[src*="logoHotlinkInternet.png"] {
  content: url("/assets/img/logoHotlinkInternet-escuro.png");
}
html[data-modo="escuro"] img[src*="logoHotlinkInternetDatacenter.png"] {
  content: url("/assets/img/logoHotlinkInternetDatacenter-escuro.png?v=20261019f");
}

/* ---------- Seletor de tema ---------- */
.tema-seletor { position: relative; list-style: none; }

.tema-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--laranja);
  cursor: pointer;
}

.tema-botao i { font-size: 20px !important; color: var(--laranja) !important; }
.tema-botao:hover { background: var(--laranja-claro); }

.tema-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10000;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: var(--sombra-flutuante);
}

.tema-menu[hidden] { display: none; }

.tema-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.tema-menu button i { font-size: 18px !important; color: var(--texto-suave) !important; }
.tema-menu button:hover { background: var(--superficie-2); }
.tema-menu button[aria-checked="true"] { background: var(--laranja-claro); color: var(--laranja-texto); font-weight: 600; }
.tema-menu button[aria-checked="true"] i { color: var(--laranja) !important; }

/* Na tela de login o seletor fica no canto */
.tema-flutuante { position: fixed; top: 14px; right: 14px; z-index: 50; }

/* ---------- Alertas de terceiros (SweetAlert 1 e 2) ---------- */
html[data-modo] .swal-overlay { background-color: rgb(0 0 0 / 45%); }
html[data-modo] .swal-modal { background: var(--superficie); border-radius: 12px; }
html[data-modo] .swal-title { color: var(--texto); }
html[data-modo] .swal-text { color: var(--texto-suave); }
html[data-modo] .swal-footer { background: transparent; }
html[data-modo] div:where(.swal2-container) div:where(.swal2-popup) { color: var(--texto-suave) !important; border-radius: 12px !important; }
html[data-modo] div:where(.swal2-container) div:where(.swal2-html-container),
html[data-modo] div:where(.swal2-container) div:where(.swal2-footer) { color: var(--texto-suave) !important; }
html[data-modo="escuro"] .swal-icon--success:after,
html[data-modo="escuro"] .swal-icon--success:before,
html[data-modo="escuro"] .swal-icon--success__hide-corners { background: var(--superficie); }

/* Tabelas (DataTables) */
html[data-modo] .dataTables_wrapper,
html[data-modo] .dataTables_wrapper .dataTables_info,
html[data-modo] .dataTables_wrapper .dataTables_length,
html[data-modo] .dataTables_wrapper .dataTables_filter { color: var(--texto-suave) !important; }
html[data-modo] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--texto) !important; }
html[data-modo] .dataTables_wrapper input,
html[data-modo] .dataTables_wrapper select { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
html[data-modo="escuro"] table.dataTable tbody tr { background-color: transparent; }

/* Campos de formulário sem classe própria */
html[data-modo] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html[data-modo] select,
html[data-modo] textarea { color: var(--texto); }
html[data-modo="escuro"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html[data-modo="escuro"] select,
html[data-modo="escuro"] textarea { background-color: var(--superficie); border-color: var(--borda); }

/* Avisos com estilo inline antigos (fundo claro fixo) */
html[data-modo="escuro"] .painel-erro { background: #2e2410 !important; color: #f3dca6 !important; border-color: #6b5313 !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-modo] *, html[data-modo] *::before, html[data-modo] *::after { transition: none !important; animation: none !important; }
}

/* ---------- Telas pequenas ---------- */
@media (max-width: 420px) {
  html[data-modo] ul.header-list,
  html[data-modo] ul.header-list.light { gap: 12px; }
  .tema-botao { width: 34px; height: 34px; }
}

/* Botões de tipo de registro DNS: chip laranja (antes verde com texto branco, pouco contraste) */
html[data-modo] .dns_record_btn { background: var(--laranja-claro); color: var(--laranja-texto); border-radius: 999px; font-weight: 600; }
html[data-modo] .dns_record_btn:hover { background: var(--laranja); color: #ffffff; }

/* Paginação e busca das tabelas */
html[data-modo] .dataTables_length select,
html[data-modo] .dataTables_filter input { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
html[data-modo] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-modo] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--laranja) !important; border-color: var(--laranja) !important; color: #ffffff !important; }

/* =====================================================================
   Acabamento geral (frontend-design, 2026-10-16)
   ===================================================================== */

/* Títulos das páginas: o título é o elemento forte; o domínio vem ao lado, discreto */
html[data-modo] .title-page > .title { font-size: 26px; line-height: 32px; color: var(--texto); }
html[data-modo] .title-page > .description { color: var(--texto-suave); font-size: 15px; }
html[data-modo] .title-page > .description i { color: var(--texto-suave); }
html[data-modo] .titulo-dominios { display: block; }
html[data-modo] .titulo-dominios .title { font-size: 30px; line-height: 36px; }

/* Títulos de cartões e tabelas */
html[data-modo] .title-table h1.text-bx,
html[data-modo] .title-table .text-bx.textbold { font-size: 16px; font-weight: 700; color: var(--texto); }
html[data-modo] table.tablelist-mails thead td { color: var(--texto-suave); font-weight: 600; font-size: 13px; }
html[data-modo] table.tablelist-mails tbody tr:hover { background: var(--superficie-2); }

/* Campos: altura confortável para toque, cantos de 10px, foco laranja */
html[data-modo] .input-group input,
html[data-modo] .col-input-field input[type=text],
html[data-modo] .col-input-field input[type=password],
html[data-modo] .col-input-field input[type=email],
html[data-modo] .col-input-field input[type=date],
html[data-modo] .col-input-field input[type=datetime-local],
html[data-modo] .col-input-field select,
html[data-modo] .input-group.row100 select,
html[data-modo] .form-login input { min-height: 44px; border-radius: 10px; font-size: 15px; }
html[data-modo] .input-group input:focus,
html[data-modo] .col-input-field input:focus,
html[data-modo] .col-input-field select:focus,
html[data-modo] .col-input-field textarea:focus,
html[data-modo] .form-login input:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgb(246 147 28 / 25%); }
html[data-modo] input[type=checkbox] { accent-color: var(--laranja); width: 16px; height: 16px; }

/* Botões principais com altura de toque */
html[data-modo] .button-ha,
html[data-modo] .button-form,
html[data-modo] .button-submit { min-height: 44px; }

/* Padrão dos botões (19/10): conteúdo centralizado nos dois eixos, mesma fonte e largura mínima,
   para textos curtos ("Criar", "Salvar") não ficarem desalinhados nem minúsculos.
   A largura (50%, 90%...) e o display de cada classe continuam os do style.css. */
html[data-modo] .button-ha,
html[data-modo] .button-form,
html[data-modo] .button-submit,
html[data-modo] .button-shut,
html[data-modo] .btn-sucess,
html[data-modo] .btn-cancel {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  font-size: 15px !important;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
html[data-modo] .button-form { padding: 0 22px; }
html[data-modo] .button-submit,
html[data-modo] .button-shut,
html[data-modo] .btn-sucess,
html[data-modo] .btn-cancel { min-height: 44px; padding-top: 12px !important; padding-bottom: 12px !important; }
html[data-modo] .button-ha,
html[data-modo] .button-form,
html[data-modo] .button-submit,
html[data-modo] .button-shut,
html[data-modo] .btn-sucess,
html[data-modo] .btn-cancel { font-weight: 600 !important; }
/* "Cancelar" e afins: mesmo botão secundário em todas as páginas (contorno, fundo da superfície) */
html[data-modo] .btn-cancel,
html[data-modo] .button-shut,
html[data-modo] .button-group .button-form.cancel,
html[data-modo] .button-form.cancel {
  background: var(--superficie) !important;
  border: 1px solid var(--borda) !important;
  color: var(--laranja-texto) !important;
}
html[data-modo] .btn-cancel:hover,
html[data-modo] .button-shut:hover,
html[data-modo] .button-form.cancel:hover { background: var(--laranja-claro) !important; border-color: var(--laranja) !important; }
/* Secundário (contorno), ex.: "Criar alias": mesma altura e fonte dos demais */
html[data-modo] .button-light { min-height: 44px; padding: 0 20px; gap: 8px; justify-content: center; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
html[data-modo] .button-light > i { font-size: 18px; line-height: 1; }
html[data-modo] .button-form > i,
html[data-modo] .btn-sucess > i,
html[data-modo] .button-submit > i { font-size: 18px; line-height: 1; }
html[data-modo] button.btn-sucess,
html[data-modo] button.btn-cancel,
html[data-modo] button.button-submit,
html[data-modo] button.button-shut { display: inline-flex; }

/* Menu lateral: separador mais leve e item ativo com peso */
html[data-modo] .sidebar li.active a .links_name { font-weight: 600; }

/* ---------- Login: placa da marca + formulário ---------- */
html[data-modo] .login-palco {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(320px, 460px);
  gap: 0;
  align-content: center;
  align-items: stretch;
  justify-content: center;
  padding: 32px 16px;
  background: var(--fundo);
}

.login-marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 44px 40px;
  border: 1px solid var(--placa-borda);
  border-right: 0;
  border-top: 4px solid var(--laranja);
  border-radius: 16px 0 0 16px;
  background: var(--placa-fundo);
  color: var(--placa-texto);
}

/* Mesmo padrão da placa do dashboard: branca no claro, grafite no escuro (logo trocado pela regra de logos) */
html[data-modo] .login-marca img { width: 190px; height: auto; }
.login-marca-titulo { margin-top: 18px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.login-marca-texto { color: var(--placa-suave); font-size: 15px; line-height: 23px; max-width: 34ch; }
.login-marca-ajuda { margin-top: 18px; color: var(--placa-suave); font-size: 13px; }
html[data-modo] .login-marca-ajuda a { color: var(--placa-chip); text-decoration: underline !important; text-underline-offset: 2px; }

html[data-modo] .login-palco .bx-login {
  width: 100%;
  margin: 0;
  padding: 44px 40px;
  border: 1px solid var(--borda); /* a borda esquerda divide as metades (no claro as duas são brancas) */
  border-radius: 0 16px 16px 0;
  background: var(--superficie);
  align-items: stretch;
}

html[data-modo] .login-palco .bx-login .logo_info { display: none; }
html[data-modo] .login-palco .bx-login h1 { color: var(--texto); font-size: 26px; font-weight: 700; line-height: 32px; }
html[data-modo] .login-palco .bx-login > p { color: var(--texto-suave); font-size: 15px; margin-bottom: 8px; }
html[data-modo] .login-palco .button-ha { width: 100%; font-size: 16px; }
html[data-modo] .login-palco .captcha-area { align-self: flex-start; min-height: 78px; }
/* 2026-11-04: a borda clara do Turnstile no tema escuro é desenhada dentro do widget (shadow DOM); o recorte de 1 px a remove sem bloquear cliques */
html[data-modo="escuro"] #captcha-area > div { clip-path: inset(1px round 6px); }
/* O iframe do reCAPTCHA é sempre "light": com a página em color-scheme dark o Chrome pinta fundo branco
   atrás dele (borda branca de 1px em volta do widget). Mesmo esquema do documento interno = fundo transparente. */
html[data-modo] .g-recaptcha iframe,
html[data-modo] iframe[src*="recaptcha"] { color-scheme: light; }

@media (max-width: 860px) {
  html[data-modo] .login-palco { grid-template-columns: minmax(0, 460px); }
  .login-marca { display: none; }
  html[data-modo] .login-palco .bx-login { border-left: 1px solid var(--borda); border-radius: 16px; padding: 32px 22px; }
  html[data-modo] .login-palco .bx-login .logo_info { display: block; align-self: center; margin-bottom: 8px; }
}

html[data-modo] .login-palco .label-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
html[data-modo] .login-palco .label-check label { margin: 0; color: var(--texto); font-size: 14px; }

/* Login: "Esqueci minha senha" e a página de orientação */
html[data-modo] .login-palco .esqueci-senha { align-self: flex-end; margin: -6px 0 2px; color: var(--laranja-texto); font-size: 14px; font-weight: 500; text-decoration: underline !important; text-underline-offset: 2px; }
html[data-modo] .login-simples { grid-template-columns: minmax(0, 480px); }
html[data-modo] .login-simples .bx-login { border-left: 1px solid var(--borda); border-radius: 16px; border-top: 4px solid var(--laranja); }
html[data-modo] .login-simples .bx-login .logo_info { display: block; align-self: flex-start; margin-bottom: 12px; }
html[data-modo] .login-simples .bx-login > p { line-height: 23px; }
.senha-passos { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.senha-passos li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto); font-size: 15px; line-height: 22px; }
.senha-passos i { color: var(--laranja); font-size: 20px; line-height: 22px; }
html[data-modo] .senha-passos a { color: var(--laranja-texto); font-weight: 600; text-decoration: underline !important; }
html[data-modo] .botao-link { display: flex; align-items: center; justify-content: center; color: #ffffff; }
html[data-modo] .voltar-login { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-top: 16px; color: var(--texto-suave); font-size: 14px; }
html[data-modo] .voltar-login:hover { color: var(--laranja-texto); }
/* Neutraliza a regra antiga ".bx-login a" (margem, borda à esquerda e cor cinza) nos links novos */
html[data-modo] .login-palco .bx-login a.botao-link,
html[data-modo] .login-palco .bx-login a.voltar-login,
html[data-modo] .login-palco .bx-login a.esqueci-senha { margin-left: 0; padding: 0; border-left: 0; line-height: normal; }
html[data-modo] .login-palco .bx-login a.botao-link { color: #ffffff; padding: 0 20px; font-size: 16px; font-weight: 600; }
html[data-modo] .login-palco .bx-login a.esqueci-senha { color: var(--laranja-texto); font-size: 14px; }
html[data-modo] .login-palco .bx-login a.voltar-login { color: var(--texto-suave); font-size: 14px; }
html[data-modo] .login-palco .bx-login a.voltar-login:hover { color: var(--laranja-texto); }

/* ---------- Pente fino (19/10) ---------- */
/* Textos de ajuda nunca abaixo de 12 px (eram 10 px em DMARC e "(Opcional)") */
html[data-modo] .col-input-field small,
html[data-modo] .input-group small,
html[data-modo] .sub-group small { font-size: 12.5px !important; line-height: 18px !important; color: var(--texto-suave); }
html[data-modo] .info-recomendado { font-size: 12px; }
/* Campo obrigatório: vermelho do tema (o #ff0000 puro tinha 3,6:1 sobre o fundo) */
html[data-modo] .required-label { color: var(--vermelho) !important; }
/* Aviso de falha (config/painel_comum.php): fonte do painel e link legível */
html[data-modo] .painel-erro { font-family: inherit !important; border-radius: 10px !important; }
html[data-modo] .painel-erro a { color: inherit !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; }

/* Ícone do título dos cartões (+, lista): laranja da marca, como os blocos do Dashboard (era #d9d9d9, quase invisível) */
html[data-modo] .title-table > i { color: var(--laranja); }