/* Configurações em painel de atalhos (14/10/2026, ver js/configuracoes-atalhos.js).
   Vale só com body.cfg-atalhos. As abas e painéis originais continuam no DOM (escondidos):
   os cartões saem deles só enquanto a gaveta está aberta e voltam ao fechar.
   Visual: identidade Contrô 3.0 (grafite sustenta, azul elétrico destaca) com acabamento hi-tech
   discreto — ícone em "chip" grafite com aro azul, selo de estado com luz, seta que avança no hover. */

/* ---- Abas e painéis originais: escondidos (a navegação agora é a grade de atalhos) ---- */
body.cfg-atalhos #config-abas,
body.cfg-atalhos .config-tab-painel { display: none !important; }

/* ---- Topo: categorias + busca ---- */
.cfg-atalhos-raiz { --cfg-raio: 12px; max-width: 1400px; }
.cfg-categorias {
  position: sticky; top: 0; z-index: 30;
  padding: 4px; margin: 0 0 18px;
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--cfg-raio);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 6%, transparent);
}
.cfg-categorias { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cfg-categorias::-webkit-scrollbar { display: none; }
.cfg-categoria {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cfg-categoria svg { width: 16px; height: 16px; }
.cfg-categoria:hover { background: var(--surface-2); color: var(--text); transform: none; }
.cfg-categoria.ativa {
  background: var(--text); color: var(--card-bg);
  box-shadow: inset 0 -2px 0 var(--primary), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.cfg-categoria.ativa svg { color: var(--primary); }
.cfg-atalhos-titulo { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.cfg-atalhos-titulo .cfg-categoria-cabeca { flex: 1; min-width: 0; margin: 0; }
.cfg-busca {
  flex: 0 0 320px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px;
  min-height: 36px; border-radius: 9px; background: var(--surface-2); border: 1px solid transparent; cursor: text;
}
.cfg-busca { background: var(--card-bg); border-color: var(--border); }
.cfg-busca:focus-within { border-color: var(--primary); background: var(--card-bg); }
.cfg-busca svg { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; }
.cfg-busca input {
  flex: 1; min-width: 0; min-height: 0 !important; height: 34px; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13px;
}

/* ---- Cabeçalho da categoria ---- */
.cfg-categoria-cabeca { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.cfg-categoria-cabeca h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.cfg-categoria-resumo { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.cfg-atalhos-conteudo > .cfg-categoria-resumo { margin: 0 0 12px; }
.cfg-categoria-icone,
.cfg-atalho-icone,
.cfg-gaveta-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: var(--marca-eletrico, var(--primary)); background: var(--marca-grafite, var(--text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca-eletrico, var(--primary)) 45%, transparent), 0 6px 16px color-mix(in srgb, var(--marca-eletrico, var(--primary)) 20%, transparent);
}
.cfg-categoria-icone { width: 40px; height: 40px; border-radius: 11px; }
.cfg-categoria-icone svg { width: 20px; height: 20px; }

/* ---- Grupos e grade de atalhos ---- */
.cfg-grupo { margin: 0 0 20px; }
.cfg-grupo h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
}
.cfg-grupo h3::before { content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--marca-eletrico, var(--primary)); }
.cfg-grupo h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }

.cfg-atalho {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 14px 30px 14px 16px; margin: 0;
  text-align: left; cursor: pointer; overflow: hidden;
  color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--cfg-raio);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cfg-atalho::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--primary), transparent); transition: opacity .15s ease;
}
.cfg-atalho:hover,
.cfg-atalho:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cfg-atalho:hover::before, .cfg-atalho:focus-visible::before { opacity: 1; }
.cfg-atalho-icone { align-self: start; width: 38px; height: 38px; border-radius: 10px; }
.cfg-atalho-icone svg { width: 18px; height: 18px; }
.cfg-atalho-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cfg-atalho-texto b { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.cfg-atalho-texto small {
  font-size: 11.5px; line-height: 1.35; color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cfg-atalho-texto em {
  order: -1; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
.cfg-atalho-seta { position: absolute; right: 12px; top: 50%; margin-top: -10px; font-size: 18px; line-height: 1; color: var(--text-3); transition: transform .15s ease, color .15s ease; }
.cfg-atalho:hover .cfg-atalho-seta { transform: translateX(3px); color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .cfg-atalho, .cfg-atalho-seta { transition: none; } .cfg-atalho:hover { transform: none; } }

/* Selo de estado: luz + texto curto em fonte técnica */
.cfg-selo {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-family: "Cascadia Mono", Consolas, monospace; font-size: 10.5px; letter-spacing: .02em;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2);
}
.cfg-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cfg-selo-ok { color: var(--green-text); background: var(--green-bg); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.cfg-selo-ok::before { box-shadow: 0 0 6px var(--success); }
.cfg-selo-alerta { color: var(--amber-text); background: var(--amber-bg); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.cfg-selo-vazio { display: none; }

/* Zona de perigo: vermelho só no detalhe */
.cfg-grupo-perigo h3 { color: var(--red-text); }
.cfg-grupo-perigo h3::before { background: var(--danger); }
.cfg-atalho-perigo .cfg-atalho-icone { color: #ff8a8a; box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); }
.cfg-atalho-perigo:hover, .cfg-atalho-perigo:focus-visible { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.cfg-atalho-perigo::before { background: linear-gradient(90deg, transparent, var(--danger), transparent); }
.cfg-atalho-perigo:hover .cfg-atalho-seta { color: var(--danger); }

/* ---- Gaveta lateral ---- */
.cfg-gaveta { position: fixed; inset: 0; z-index: 2100; }
.cfg-gaveta-fundo { position: absolute; inset: 0; background: rgba(32, 39, 52, .32); animation: cfg-fade .14s ease both; }
html[data-tema="escuro"] .cfg-gaveta-fundo, html[data-tema="noturno"] .cfg-gaveta-fundo { background: rgba(0, 0, 0, .55); }
.cfg-gaveta-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(860px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; background: var(--bg);
  border-left: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: -16px 0 40px color-mix(in srgb, var(--text) 20%, transparent);
  animation: cfg-entrar .2s ease both;
}
.cfg-gaveta-cabeca {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex: 0 0 auto;
  background: var(--card-bg); border-bottom: 1px solid var(--border);
}
.cfg-gaveta-cabeca > div { flex: 1; min-width: 0; }
.cfg-gaveta-icone { width: 36px; height: 36px; border-radius: 10px; }
.cfg-gaveta-icone svg { width: 18px; height: 18px; }
.cfg-gaveta-contexto { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cfg-gaveta-cabeca h2 { margin: 1px 0 0; font-size: 17px; }
.cfg-gaveta-perigo .cfg-gaveta-icone { color: #ff8a8a; box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); }
.cfg-gaveta-perigo .cfg-gaveta-painel { border-left-color: var(--danger); }
/* Na zona de perigo o aviso aparece sempre inteiro (nada de "Detalhes" escondendo o que será apagado) */
.cfg-hitech .cfg-gaveta-perigo .cfg-explicacao { display: block; -webkit-line-clamp: unset; color: var(--text) !important; }
.cfg-gaveta-perigo .cfg-detalhes { display: none !important; }
.cfg-gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.cfg-gaveta-corpo > .card { margin: 0; }
/* O título do cartão repete o da gaveta quando é um cartão só: fica discreto */
.cfg-gaveta-corpo > .card:only-child > h2:first-child { font-size: 11px; color: var(--text-muted); }
@keyframes cfg-fade { from { opacity: 0; } }
@keyframes cfg-entrar { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cfg-gaveta-fundo, .cfg-gaveta-painel { animation: none; } }
body.cfg-gaveta-aberta .cfg-categorias { z-index: 1; }

/* Cartões dentro da gaveta: mesmo acabamento do configuracoes-hitech.css */
.cfg-hitech .cfg-gaveta-corpo .card {
  position: relative; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}
.cfg-hitech .cfg-gaveta-corpo .card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; opacity: .55;
  background: linear-gradient(90deg, var(--primary), transparent 60%);
}
.cfg-hitech .cfg-gaveta-corpo .card h2,
.cfg-hitech .cfg-gaveta-corpo .card h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text);
}
.cfg-hitech .cfg-gaveta-corpo .card h2::before { content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--marca-eletrico, var(--primary)); flex: 0 0 auto; }
.cfg-hitech .cfg-gaveta-corpo .switch + span,
.cfg-hitech .cfg-gaveta-corpo [id$="_linha"] > span { font-size: 13px !important; font-weight: 600; line-height: 1.35; color: var(--text); }
.cfg-hitech .cfg-gaveta-corpo label:has(> input[type="checkbox"]),
.cfg-hitech .cfg-gaveta-corpo label:has(> input[type="radio"]) { font-size: 12.5px; line-height: 1.45; }
.cfg-hitech .cfg-gaveta-corpo .card button { min-height: 32px; padding: 6px 12px; font-size: 12.5px; }

@media (max-width: 760px) {
  .cfg-atalhos-titulo { flex-wrap: wrap; }
  .cfg-busca { flex: 1 1 100%; }
  .cfg-grade { grid-template-columns: minmax(0, 1fr); }
  .cfg-atalho { min-height: 0; }
}

/* ---- Revisão de 15/10/2026: filtros, tipo de cada atalho e cartões uniformes ---- */
.cfg-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.cfg-filtros:empty { display: none; }
.cfg-filtro {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); box-shadow: none;
  color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer;
}
.cfg-filtro span { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.cfg-filtro:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--text); transform: none; }
.cfg-filtro.ativo { background: var(--text); border-color: var(--text); color: var(--card-bg); }
.cfg-filtro.ativo span { background: var(--marca-eletrico, var(--primary)); color: var(--marca-grafite, #202734); }
.cfg-filtro-risco:not(.ativo) { color: var(--red-text); }
.cfg-filtro-risco.ativo { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Cartão: título + resumo de UMA linha (o resto no title) + linha de selos; todos da mesma altura */
.cfg-atalho { min-height: 88px; align-items: start; }
.cfg-atalho-texto small { -webkit-line-clamp: 1; line-clamp: 1; }
.cfg-atalho-selos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cfg-atalho-selos:not(:has(> :not(.cfg-selo-vazio))) { display: none; }
.cfg-atalho-selos .cfg-selo { margin-top: 0; }
.cfg-selo { font-family: Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 10.5px; }
.cfg-tipo {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; border: 1px dashed var(--border); color: var(--text-muted);
}
.cfg-tipo-ferramenta::before { content: "▸"; font-size: 9px; }
.cfg-tipo-risco { border-style: solid; color: var(--red-text); background: var(--red-bg); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.cfg-tipo-risco::before { content: "!"; font-weight: 800; }
.cfg-atalho-seta { top: 28px; margin-top: 0; }
.cfg-vazio { padding: 28px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--cfg-raio); }
.cfg-vazio button { display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent-text); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Foco visível de teclado (anel na cor de destaque), igual em categorias, filtros e atalhos */
.cfg-categoria:focus-visible, .cfg-filtro:focus-visible, .cfg-atalho:focus-visible, .cfg-gaveta-fechar:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}