/*
 * Controles do painel (req-219): select, chave, abas, diálogos, avisos, dica e carregando.
 * CSS próprio, sem framework (prefixo `c2fc-`), para valer igual nas páginas Fomantic, Tailwind e híbridas:
 * classes geradas pelo JavaScript não passam pela compilação do Tailwind.
 * Paleta do painel Tailwind: slate para texto e bordas, sky para ação.
 */
.c2fc-oculto { display: none !important; }

/* ---------- cursor de clique: o preflight do Tailwind deixa <button> com cursor padrão */
button:not(:disabled):not(.disabled), [role="button"]:not([aria-disabled="true"]), [role="tab"], summary, select:not(:disabled),
input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), label[for], [data-tab], .ui.button:not(.disabled) { cursor: pointer; }

/* ---------- listagem (req-220): cabeçalho ordenável ocupa a célula toda, com fundo no hover; linha destacada */
#_gestor-interface-listar thead th:has(> button) { padding: 0; }
#_gestor-interface-listar thead th > button { width: 100%; padding: 12px; border-radius: 0; transition: background-color .15s, color .15s; }
#_gestor-interface-listar thead th > button:not(:disabled):hover { background: #e0f2fe; color: #0284c7; }
/* coluna ainda sem ordem: seta fraca no hover avisando que dá para ordenar (Ctrl+clique soma colunas) */
#_gestor-interface-listar thead th[aria-sort="none"] > button:not(:disabled):hover [data-lista-direcao]:empty::after { content: "↑"; opacity: .4; }
#_gestor-interface-listar thead th > button [data-lista-direcao] { min-width: 1.5em; font-variant-numeric: tabular-nums; }
#_gestor-interface-listar thead th > button:not(:disabled):focus-visible { outline: 2px solid #0284c7; outline-offset: -2px; }
#_gestor-interface-listar thead th[aria-sort="ascending"] > button, #_gestor-interface-listar thead th[aria-sort="descending"] > button { background: #f0f9ff; color: #0369a1; }
#_gestor-interface-listar tbody td { transition: background-color .12s; }
/* coluna sob o cursor (até 12 colunas), depois a linha, depois a célula: o destaque fica mais forte no cruzamento */
#_gestor-interface-listar table:has(tbody td:nth-child(1):hover) :is(td, th):nth-child(1), #_gestor-interface-listar table:has(tbody td:nth-child(2):hover) :is(td, th):nth-child(2), #_gestor-interface-listar table:has(tbody td:nth-child(3):hover) :is(td, th):nth-child(3), #_gestor-interface-listar table:has(tbody td:nth-child(4):hover) :is(td, th):nth-child(4), #_gestor-interface-listar table:has(tbody td:nth-child(5):hover) :is(td, th):nth-child(5), #_gestor-interface-listar table:has(tbody td:nth-child(6):hover) :is(td, th):nth-child(6), #_gestor-interface-listar table:has(tbody td:nth-child(7):hover) :is(td, th):nth-child(7), #_gestor-interface-listar table:has(tbody td:nth-child(8):hover) :is(td, th):nth-child(8), #_gestor-interface-listar table:has(tbody td:nth-child(9):hover) :is(td, th):nth-child(9), #_gestor-interface-listar table:has(tbody td:nth-child(10):hover) :is(td, th):nth-child(10), #_gestor-interface-listar table:has(tbody td:nth-child(11):hover) :is(td, th):nth-child(11), #_gestor-interface-listar table:has(tbody td:nth-child(12):hover) :is(td, th):nth-child(12) { background: #f0f9ff; }
#_gestor-interface-listar tbody tr:hover > td { background: #e0f2fe; }
#_gestor-interface-listar tbody tr:hover > td:hover { background: #bae6fd; }

/* ---------- diálogos (alerta, confirmar, perguntar) — mesma cara do modal do painel */
.c2fc-overlay { position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .6); }
.c2fc-dialogo { width: 100%; max-width: 28rem; background: #fff; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.2); color: #334155; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; outline: none; }
.c2fc-dialogo-titulo { margin: 0; padding: 12px 20px; border-bottom: 1px solid #e2e8f0; font-size: 16px; font-weight: 600; color: #0f172a; }
.c2fc-dialogo-corpo { padding: 16px 20px; }
.c2fc-dialogo-corpo p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c2fc-dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e2e8f0; }
.c2fc-botao { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 8px 16px; font: 500 14px/1.2 inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.06); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.c2fc-botao:hover { background: #f1f5f9; border-color: #94a3b8; box-shadow: 0 4px 10px -3px rgba(15,23,42,.2); transform: translateY(-1px); }
.c2fc-botao:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.c2fc-botao:focus-visible, .c2fc-entrada:focus-visible, .c2fc-select-gatilho:focus-visible, .c2fc-aba:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.c2fc-botao-primario { border-color: #0284c7; background: #0284c7; color: #fff; }
.c2fc-botao-primario:hover { background: #0369a1; border-color: #0369a1; }
.c2fc-botao-perigo { border-color: #dc2626; background: #dc2626; color: #fff; }
.c2fc-botao-perigo:hover { background: #b91c1c; border-color: #b91c1c; }
.c2fc-entrada { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; font: 14px/1.4 inherit; color: #0f172a; background: #fff; }

/* ---------- campos (controles_campo no PHP) */
.c2fc-campo { display: flex; flex-direction: column; gap: 4px; }
.c2fc-campo-rotulo { display: block; font-size: 14px; font-weight: 500; color: #334155; }
.c2fc-campo-obrigatorio { color: #dc2626; }
.c2fc-campo-entrada { display: block; width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 8px 12px; font: 14px/1.4 inherit; color: #0f172a; }
.c2fc-campo-entrada::placeholder { color: #94a3b8; }
.c2fc-campo-entrada:hover:not(:disabled):not(:focus), .c2fc-select-gatilho:hover, .c2fc-campo:hover > .c2fc-campo-entrada:not(:disabled):not(:focus) { border-color: #94a3b8; }
.c2fc-campo:focus-within > .c2fc-campo-rotulo { color: #0369a1; }
.c2fc-campo-entrada:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.25); }
.c2fc-campo-entrada:disabled, .c2fc-campo-entrada[readonly] { background: #f1f5f9; color: #64748b; }
.c2fc-campo-entrada[aria-invalid="true"] { border-color: #dc2626; }
.c2fc-campo-ajuda { margin: 0; font-size: 12px; color: #64748b; }
.c2fc-campo-erro { margin: 0; font-size: 12px; color: #dc2626; }
.c2fc-chave-rotulo { font-size: 14px; color: #334155; }
.c2fc-botao-fantasma { border-color: transparent; background: transparent; color: #475569; }
.c2fc-botao-fantasma:hover { background: #f1f5f9; border-color: transparent; box-shadow: none; transform: none; }
.c2fc-botao:disabled, .c2fc-botao.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* `loading` é o estado que o JS legado (Fomantic) liga no botão durante o AJAX */
.c2fc-botao.loading { position: relative; color: transparent !important; pointer-events: none; }
.c2fc-botao.loading > * { visibility: hidden; }
.c2fc-botao.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(100,116,139,.35); border-top-color: #334155; border-radius: 50%; animation: c2fc-giro .8s linear infinite; }
.c2fc-botao-primario.loading::after, .c2fc-botao-perigo.loading::after, .c2fc-botao-sucesso.loading::after { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
.c2fc-botao-sucesso { border-color: #059669; background: #059669; color: #fff; }
.c2fc-botao-sucesso:hover { background: #047857; }
.c2fc-botao-pequeno { padding: 5px 10px; font-size: 13px; }
.c2fc-botao-icone { padding: 8px; }
.c2fc-botao-pequeno.c2fc-botao-icone { padding: 5px; }
/* `.active` é o estado que o JS legado do editor liga (tela, variáveis/simulação). */
.c2fc-botao.active { border-color: #0284c7; background: #e0f2fe; color: #075985; }
.c2fc-grupo { display: inline-flex; flex-wrap: wrap; }
.c2fc-grupo > .c2fc-botao { border-radius: 0; margin-left: -1px; }
.c2fc-grupo > .c2fc-botao:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.c2fc-grupo > .c2fc-botao:last-child { border-radius: 0 8px 8px 0; }
a.c2fc-botao { text-decoration: none; }
.c2fc-icone { width: 16px; height: 16px; }

/* ---------- ações por linha da listagem (cores do `cor` de cada opção, como no Fomantic) */
.c2fc-acoes { display: flex; flex-wrap: nowrap; gap: 4px; }
/* ações (ícone) da listagem e de telas: tom claro da cor em repouso; cor cheia, texto branco e leve elevação no hover */
.c2fc-acao { --c2fc-forte: #475569; --c2fc-claro: #f1f5f9; --c2fc-borda: #cbd5e1; --c2fc-texto: #334155; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--c2fc-borda); border-radius: 8px; background: var(--c2fc-claro); color: var(--c2fc-texto); cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.06); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.c2fc-acao svg, .c2fc-acao i { width: 16px; height: 16px; }
.c2fc-acao:hover { background: var(--c2fc-forte); border-color: var(--c2fc-forte); color: #fff; box-shadow: 0 4px 10px -2px rgba(15,23,42,.25); transform: translateY(-1px); }
.c2fc-acao:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15,23,42,.15); }
.c2fc-acao:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.c2fc-acao:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* paleta compartilhada por .c2fc-acao e .c2fc-rotulo (nomes de cor do Fomantic) */
.c2fc-cor-blue { --c2fc-forte: #2563eb; --c2fc-claro: #eff6ff; --c2fc-borda: #93c5fd; --c2fc-texto: #1d4ed8; border-color: #93c5fd; color: #1d4ed8; }
.c2fc-cor-teal { --c2fc-forte: #0d9488; --c2fc-claro: #f0fdfa; --c2fc-borda: #5eead4; --c2fc-texto: #0f766e; border-color: #5eead4; color: #0f766e; }
.c2fc-cor-green { --c2fc-forte: #16a34a; --c2fc-claro: #f0fdf4; --c2fc-borda: #86efac; --c2fc-texto: #15803d; border-color: #86efac; color: #15803d; }
.c2fc-cor-olive { --c2fc-forte: #65a30d; --c2fc-claro: #f7fee7; --c2fc-borda: #bef264; --c2fc-texto: #4d7c0f; border-color: #bef264; color: #4d7c0f; }
.c2fc-cor-yellow { --c2fc-forte: #ca8a04; --c2fc-claro: #fefce8; --c2fc-borda: #fde047; --c2fc-texto: #a16207; border-color: #fde047; color: #a16207; }
.c2fc-cor-orange { --c2fc-forte: #ea580c; --c2fc-claro: #fff7ed; --c2fc-borda: #fdba74; --c2fc-texto: #c2410c; border-color: #fdba74; color: #c2410c; }
.c2fc-cor-brown { --c2fc-forte: #a16207; --c2fc-claro: #fdf6ec; --c2fc-borda: #d6b38a; --c2fc-texto: #92400e; border-color: #d6b38a; color: #92400e; }
.c2fc-cor-red { --c2fc-forte: #dc2626; --c2fc-claro: #fef2f2; --c2fc-borda: #fca5a5; --c2fc-texto: #b91c1c; border-color: #fca5a5; color: #b91c1c; }
.c2fc-cor-pink { --c2fc-forte: #db2777; --c2fc-claro: #fdf2f8; --c2fc-borda: #f9a8d4; --c2fc-texto: #be185d; border-color: #f9a8d4; color: #be185d; }
.c2fc-cor-violet, .c2fc-cor-purple { --c2fc-forte: #7c3aed; --c2fc-claro: #f5f3ff; --c2fc-borda: #c4b5fd; --c2fc-texto: #6d28d9; border-color: #c4b5fd; color: #6d28d9; }
.c2fc-cor-grey, .c2fc-cor-black { --c2fc-forte: #475569; --c2fc-claro: #f1f5f9; --c2fc-borda: #cbd5e1; --c2fc-texto: #334155; border-color: #cbd5e1; color: #334155; }
/* rótulo-link vindo de formatador (ex.: caminho da página no admin-paginas) */
.c2fc-rotulo { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; color: #334155; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
a.c2fc-rotulo { color: #0369a1; text-decoration: none; }
.c2fc-rotulo[class*="c2fc-cor-"] { border-color: var(--c2fc-borda); background: var(--c2fc-claro); color: var(--c2fc-texto); }
a.c2fc-rotulo:hover { border-color: #7dd3fc; background: #f0f9ff; text-decoration: underline; }
.c2fc-texto-suave { color: #94a3b8; }

/* ---------- histórico de alterações (formulário de edição Tailwind)
   O PHP do interface monta a lista com a marcação do Fomantic (`item` > ícone + `content` > `header` +
   `description`). Sem o CSS dele, cada parte caía numa linha; aqui ícone, data/autor e alterações ficam
   numa linha só, como antes. */
[data-c2f-historico] .list > .item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
[data-c2f-historico] .list > .item:last-child { border-bottom: 0; }
[data-c2f-historico] .list > .item > i.icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e0f2fe; color: #0284c7; font: 700 11px/1 system-ui, sans-serif !important; font-style: normal; transform: translateY(2px); }
[data-c2f-historico] .list > .item > i.icon::before { content: "i" !important; font-family: system-ui, sans-serif !important; }
[data-c2f-historico] .list > .item > .content { display: flex; flex-flow: row nowrap; align-items: baseline; gap: 12px; min-width: 0; }
[data-c2f-historico] .list > .item > .content > .header { flex: none; display: inline; font-weight: 600; color: #0f172a; }
[data-c2f-historico] .list > .item > .content > .header::after { content: " — "; font-weight: 400; color: #94a3b8; }
[data-c2f-historico] .list > .item > .content > .description { display: inline; min-width: 0; color: #475569; }
/* REQ-243: texto longo do histórico muda de linha na largura disponível, sem rolagem horizontal. */
[data-c2f-historico] table { table-layout: fixed; width: 100%; min-width: 0; }
[data-c2f-historico] td, [data-c2f-historico] .list > .item > .content > .description { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
[data-c2f-historico] .list > .item { align-items: flex-start; }
@media (max-width: 640px) { [data-c2f-historico] .list > .item > .content { flex-wrap: wrap; gap: 2px 12px; } }
[data-c2f-historico] .first-letter-uppercase::first-letter { text-transform: uppercase; }
[data-c2f-historico] #_gestor-interface-edit-historico-mais { display: inline-flex; margin: 8px auto 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; padding: 6px 14px; font: 500 13px/1.2 inherit; cursor: pointer; }
[data-c2f-historico] #_gestor-interface-edit-historico-mais:hover { background: #f1f5f9; }
[data-c2f-historico] .ui.grid > .column { text-align: center; }

/* ---------- blocos para HTML montado por JS (o Tailwind não compila classe escrita em JS) */
.c2fc-nota { border: 1px solid #bae6fd; border-radius: 8px; background: #f0f9ff; color: #075985; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.c2fc-nota-sucesso { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.c2fc-nota-erro { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.c2fc-nota-alerta { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.c2fc-cartao { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.c2fc-cartao + .c2fc-cartao { margin-top: 12px; }
.c2fc-cartao > * + * { margin-top: 8px; }
.c2fc-cartao-titulo { margin: 0; font-size: 15px; font-weight: 600; color: #0f172a; }
.c2fc-cartao-titulo a { color: #0369a1; text-decoration: none; }
.c2fc-cartao-titulo a:hover { text-decoration: underline; }
.c2fc-texto { margin: 0; font-size: 14px; color: #475569; overflow-wrap: anywhere; }
.c2fc-tabela-caixa { max-width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.c2fc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.c2fc-tabela th { background: #f8fafc; color: #475569; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.c2fc-tabela td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: top; }
.c2fc-tabela tr:last-child td { border-bottom: 0; }
.c2fc-tabela a { color: #0369a1; }
.c2fc-lista { list-style: none; margin: 0; padding: 0; }
.c2fc-lista > li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #1e293b; }
.c2fc-lista > li:last-child { border-bottom: 0; }
.c2fc-lista a { color: #0369a1; font-weight: 600; text-decoration: none; }
.c2fc-lista a:hover { text-decoration: underline; }
.c2fc-lista small { color: #64748b; }
.c2fc-ponto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.c2fc-ponto-ativo { background: #16a34a; }
.c2fc-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.c2fc-numero { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 12px; text-align: center; }
.c2fc-numero-valor { font-size: 24px; font-weight: 600; color: #0f172a; line-height: 1.2; }
.c2fc-numero-rotulo { margin-top: 2px; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: #64748b; }

/* ---------- selo de status (interface_status_selo no PHP) */
.c2fc-selo { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.c2fc-selo-ativo { background: #ecfdf5; color: #047857; }
.c2fc-selo-inativo { background: #fffbeb; color: #92400e; }

/* ---------- avisos rápidos */
.c2fc-avisos { position: fixed; right: 16px; bottom: 16px; z-index: 100030; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.c2fc-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #0f172a; color: #f8fafc; box-shadow: 0 10px 15px -3px rgba(0,0,0,.25); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.c2fc-aviso-sucesso { background: #166534; }
.c2fc-aviso-erro { background: #991b1b; }
.c2fc-aviso-alerta { background: #92400e; }
.c2fc-aviso button { margin-left: auto; background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .8; }
.c2fc-aviso { flex-wrap: wrap; }
.c2fc-aviso button.c2fc-aviso-acao { margin-left: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 4px 10px; font-size: 13px; opacity: 1; }
.c2fc-aviso button.c2fc-aviso-acao:hover { background: rgba(255,255,255,.15); }
.c2fc-aviso button.c2fc-aviso-acao:first-of-type { margin-left: auto; }

/* ---------- select */
.c2fc-select { position: relative; display: block; width: 100%; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.c2fc-select select.c2fc-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.c2fc-select-gatilho { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; min-height: 38px; box-sizing: border-box; padding: 6px 34px 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; text-align: left; cursor: pointer; position: relative; }
.c2fc-select-gatilho::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: translateY(-70%) rotate(45deg); }
.c2fc-select-aberto .c2fc-select-gatilho { border-color: #0284c7; }
/* o JS legado desabilita pondo a classe `disabled` no <select> (era o `.ui.dropdown.disabled` do Fomantic) */
.c2fc-select:has(> select.disabled) .c2fc-select-gatilho { pointer-events: none; opacity: .6; }
.c2fc-select-desabilitado .c2fc-select-gatilho { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.c2fc-select-vazio { color: #94a3b8; }
.c2fc-ficha { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 12px; }
.c2fc-ficha button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
.c2fc-select-painel { position: absolute; z-index: 100015; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.15); overflow: hidden; }
.c2fc-select-painel.c2fc-acima { top: auto; bottom: calc(100% + 4px); }
.c2fc-select-busca { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #e2e8f0; padding: 8px 10px; font: 14px/1.4 inherit; outline: none; }
.c2fc-select-lista { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; }
.c2fc-select-opcao { padding: 7px 12px; cursor: pointer; color: #0f172a; overflow-wrap: anywhere; }
.c2fc-select-opcao[aria-selected="true"] { background: #e0f2fe; color: #075985; font-weight: 600; }
.c2fc-select-opcao.c2fc-ativa { background: #f1f5f9; }
.c2fc-select-opcao[aria-disabled="true"] { color: #94a3b8; cursor: not-allowed; }
.c2fc-select-grupo { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.c2fc-select-nada { padding: 10px 12px; color: #64748b; }

/* ---------- chave liga/desliga (checkbox nativo) */
.c2fc-chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.c2fc-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c2fc-chave-trilho { position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.c2fc-chave-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.c2fc-chave input:checked + .c2fc-chave-trilho { background: #0284c7; }
.c2fc-chave input:checked + .c2fc-chave-trilho::after { transform: translateX(18px); }
.c2fc-chave input:focus-visible + .c2fc-chave-trilho { outline: 2px solid #0284c7; outline-offset: 2px; }
.c2fc-chave input:disabled + .c2fc-chave-trilho { opacity: .5; }

/* ---------- abas */
.c2fc-abas-lista { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; }
.c2fc-aba { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 14px; font-family: inherit; font-size: 14px; line-height: 1.2; font-weight: 600; color: #64748b; cursor: pointer; margin-bottom: -1px; }
.c2fc-aba[aria-selected="true"], .c2fc-aba.active { border-bottom-color: #0284c7; color: #0369a1; }
a.c2fc-aba { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.c2fc-painel-aba { padding: 16px; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
.c2fc-abas-lista.c2fc-anexa { margin-bottom: 0; }

/* ---------- dica (tooltip)
   `data-c2f-dica` + `data-c2f-dica-pos`, ou, sem o Fomantic na página (`html.c2fc-sem-fomantic`, ligado
   pela ponte), o próprio `data-tooltip` + `data-position` do Fomantic: os módulos migrados mantêm os
   atributos e as posições de antes ("top left", "bottom center", "right center"…). */
[data-c2f-dica], .c2fc-sem-fomantic [data-tooltip] { position: relative; }
[data-c2f-dica]:hover::after, [data-c2f-dica]:focus-visible::after,
.c2fc-sem-fomantic [data-tooltip]:hover::after, .c2fc-sem-fomantic [data-tooltip]:focus-visible::after {
    content: attr(data-c2f-dica); position: absolute; z-index: 100025; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 260px; padding: 6px 8px; border-radius: 6px; background: #0f172a; color: #f8fafc;
    font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; white-space: normal; pointer-events: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.2); text-transform: none; letter-spacing: normal;
}
.c2fc-sem-fomantic [data-tooltip]:hover::after, .c2fc-sem-fomantic [data-tooltip]:focus-visible::after { content: attr(data-tooltip); }
/* REQ-243: `outline` é classe-gancho de ícone do Fomantic (`clock outline icon`) e também utility do Tailwind:
   o ícone ganhava um contorno em volta. Ícone nunca tem contorno próprio. */
svg.icon.outline, svg.lucide.outline, i.icon.outline { outline: 0 !important; }
/* REQ-243: item de navegação que aponta para a tela atual (barra de módulo, como a do Host Manager). */
.c2fc-botao[aria-current="page"]:not(.c2fc-botao-primario) { border-color: #0284c7; background: #f0f9ff; color: #075985; }
/* REQ-243: seletor de várias imagens — cancelar e concluir ficam na bandeja do gerenciador, na base do modal. */
.c2fc-ponte-modal.c2f-seletor-multiplo > .actions { display: none; }
/* REQ-243: dica vazia não desenha balão. */
[data-c2f-dica=""]::after, [data-c2f-dica=""]::before, .c2fc-sem-fomantic [data-tooltip=""]::after, .c2fc-sem-fomantic [data-tooltip=""]::before { display: none !important; content: none !important; }
/* posições: alinhamento horizontal */
[data-c2f-dica-pos~="left"]:hover::after, .c2fc-sem-fomantic [data-tooltip][data-position~="left"]:not([data-position^="left"]):hover::after { left: 0; transform: none; }
[data-c2f-dica-pos~="right"]:hover::after, .c2fc-sem-fomantic [data-tooltip][data-position~="right"]:not([data-position^="right"]):hover::after { left: auto; right: 0; transform: none; }
/* posições: embaixo */
[data-c2f-dica-pos^="bottom"]:hover::after, .c2fc-sem-fomantic [data-tooltip][data-position^="bottom"]:hover::after { bottom: auto; top: calc(100% + 6px); }
/* posições: ao lado ("left center" / "right center") */
[data-c2f-dica-pos^="left"]:hover::after, .c2fc-sem-fomantic [data-tooltip][data-position^="left"]:hover::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); }
[data-c2f-dica-pos^="right"]:hover::after, .c2fc-sem-fomantic [data-tooltip][data-position^="right"]:hover::after { bottom: auto; top: 50%; left: calc(100% + 6px); right: auto; transform: translateY(-50%); }
/* ---------- carregando (sobre um elemento ou a página) */
.c2fc-carregando-alvo { position: relative; }
.c2fc-carregando { position: absolute; inset: 0; z-index: 100012; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); border-radius: inherit; }
.c2fc-carregando.c2fc-pagina { position: fixed; background: rgba(15, 23, 42, .35); }
.c2fc-giro { width: 32px; height: 32px; border: 3px solid #bae6fd; border-top-color: #0284c7; border-radius: 50%; animation: c2fc-giro .8s linear infinite; }
@keyframes c2fc-giro { to { transform: rotate(360deg); } }

/* ---------- ponte Fomantic (só quando o Fomantic não está na página) */
.c2fc-ponte-modal { position: relative; width: 100%; max-width: 56rem; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.2); color: #334155; }
.c2fc-ponte-modal > .header { padding: 12px 20px; border-bottom: 1px solid #e2e8f0; font-size: 16px; font-weight: 600; color: #0f172a; }
.c2fc-ponte-modal > .content, .c2fc-ponte-modal > .scrolling.content { padding: 16px 20px; }
.c2fc-ponte-modal > .actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e2e8f0; }
.c2fc-ponte-modal > .close { position: absolute; top: 10px; right: 14px; cursor: pointer; }
.c2fc-ponte-modal.tiny { max-width: 28rem; }
.c2fc-ponte-modal.small { max-width: 40rem; }
.c2fc-ponte-modal.large { max-width: 72rem; }
.c2fc-ponte-modal.fullscreen { max-width: none; width: calc(100vw - 32px); height: calc(100vh - 32px); display: flex !important; flex-direction: column; }
.c2fc-ponte-modal.fullscreen > .content, .c2fc-ponte-modal.fullscreen > .scrolling.content { flex: 1; overflow: auto; }
.ui.dimmer.c2fc-ponte-dimmer { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.7); z-index: 100011; }
.ui.dimmer.c2fc-ponte-dimmer.active { display: flex; }
.tab.c2fc-ponte-tab { display: none; }
.tab.c2fc-ponte-tab.active { display: block; }
.ui.checkbox.c2fc-ponte-checkbox { display: inline-flex; align-items: center; gap: 8px; }

/* Marcação Fomantic que hooks e projetos ainda injetam em página Tailwind (ex.: modal "Workspace Social"
   do conn2flow-site no admin-paginas): o mesmo padrão do Fomantic, só aparece ativa. Igual nas páginas
   Fomantic, onde a regra deles já é esta. */
.ui.modal:not(.c2fc-ponte-modal):not(.active) { display: none; }
.ui.dimmer:not(.active):not(.c2fc-cobertura):not(.c2fc-ponte-dimmer) { display: none; }

/* ---------- cobertura de carregamento das variantes Tailwind (o JS legado liga e desliga `.active`) */
.c2fc-cobertura { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.7); }
.c2fc-cobertura.active { display: flex; }

.c2fc-aba { display: inline-flex; align-items: center; gap: 6px; }
.c2fc-aba:hover { color: #334155; }
.c2fc-aba svg { width: 16px; height: 16px; }

/* REQ-239: controles compartilhados e toolbar acima do iframe. */
.c2fc-botao.hidden, .c2fc-alerta.hidden { display: none; }
.c2fc-botao-editar { border-color: #0d9488; background: #0d9488; color: #fff; }
.c2fc-botao-editar:hover { border-color: #0f766e; background: #0f766e; }
.c2fc-botao-clonar { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.c2fc-botao-clonar:hover { border-color: #4338ca; background: #4338ca; }
.c2fc-alerta { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; }
.c2fc-alerta-info { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.c2fc-alerta-erro { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.c2fc-alerta > svg { flex: 0 0 16px; margin-top: 2px; }
.c2fc-alerta > .content { flex: 1; min-width: 0; }
.c2fc-alerta .header { margin: 0 0 4px; font-weight: 600; }
.c2fc-alerta kbd { display: inline; padding: 2px 4px; white-space: nowrap; }
.publisher-link-preview { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.publisher-link-preview svg { display: inline-block; vertical-align: middle; }
.c2fc-campo-rotulo svg { border: 0; outline: 0; }
._gestor-widgetImage-cont { display: flex; flex-direction: column; gap: 16px; }
._gestor-widgetImage-cont > .fileImageParent { width: 100%; max-height: 160px; flex-shrink: 0; }
._gestor-widgetImage-cont > .fileImageParent img { max-height: 160px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
._gestor-widgetImage-cont > .fileImageParent + div { flex: 1; min-width: 0; }
@media (min-width: 640px) {
    ._gestor-widgetImage-cont { flex-direction: row; }
    ._gestor-widgetImage-cont > .fileImageParent { width: 160px; }
}
.editor-texto-container.ql-container { height: auto; min-height: 150px; }
.editor-texto-container .ql-editor { min-height: 150px; max-height: 480px; }
.c2fc-campo-selecao, .c2fc-campo-moeda { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 8px 12px; color: #0f172a; font-size: 14px; }
.html-editor-visual-topbar { position: relative; z-index: 50; overflow: visible !important; }
.html-editor-add-panel, .html-editor-view-options-panel, .c2fc-select-painel, [data-c2f-dica]::after { z-index: 100050 !important; }
.previsualizar .html-editor-visual-topbar [data-c2f-dica]::after { top: calc(100% + 6px); bottom: auto; }
[data-c2f-historico] .item, [data-c2f-historico] .content { display: flex; flex-flow: row nowrap; align-items: center; gap: 12px; font-size: 14px; color: #475569; }
[data-c2f-historico] .item { padding: 8px 0; }
[data-c2f-historico] .header { white-space: nowrap; }
[data-c2f-historico] .item > svg { flex: 0 0 16px; color: #0284c7; }
.c2f-breadcrumb .c2f-crumb { color: #0369a1; cursor: pointer; }
.c2f-search-box input, .c2f-filter-accordion { background: #fff; border-color: #cbd5e1; }
.template-fields-list #linked-fields-list > *, .template-link-publisher-fields .field-row { min-width: 0; }
.field-row .fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.field-row .fields > .field { flex: 1 1 140px; margin-bottom: 0; }
.field-row .fields > .two.wide { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
/* REQ-243: ações do campo personalizado lado a lado (excluir, subir, descer), "Sim" alinhado à caixa e a
   busca do campo do modelo com os ícones dentro do campo. */
.field-row .remove-field-btn { order: 1; }
.field-row .move-up-btn { order: 2; }
.field-row .move-down-btn { order: 3; }
.field-row .checkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
.field-row .checkbox > label { margin: 0; cursor: pointer; }
.field-row .search > .input { position: relative; display: block; }
.field-row .search > .input > input { padding-right: 60px; }
.field-row .search > .input > svg { position: absolute; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; }
.field-row .search > .input > svg.search { right: 36px; pointer-events: none; }
.field-row .search > .input > svg.remove { right: 12px; cursor: pointer; }
.field-row .search > .input > svg.remove:hover { color: #dc2626; }
.field-row .search > .results { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; padding: 4px; color: #64748b; font-size: 13px; }
.field-row .search > .results[hidden], .field-row .search > .results:empty { display: none; }
.field-row .search > .results > .c2fc-botao { justify-content: flex-start; width: 100%; border-color: transparent; box-shadow: none; }
.field-row .search > .results > .c2fc-botao:hover, .field-row .search > .results > .c2fc-botao:focus-visible { background: #f0f9ff; }
/* REQ-243: mapeamento de variáveis da família publisher — três colunas iguais, cada uma com cabeçalho em
   destaque e respiro até os botões. As colunas vêm daqui, não só das utilities, para não depender da ordem
   das folhas da página. */
.c2fc-mapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 768px) { .c2fc-mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c2fc-mapa > div { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.c2fc-mapa-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; color: #334155; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.c2fc-mapa-titulo kbd { text-transform: none; }
.c2fc-mapa-titulo + div { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 48px; padding: 12px; }
.c2fc-mapa-titulo + div > * { margin: 0 !important; }
.c2fc-mapa-titulo + div > h6 { flex: 0 0 100%; }
.field-row .remove-field-btn, .field-row .move-up-btn, .field-row .move-down-btn { width: 28px; height: 28px; padding: 4px; }
.template-fields-list .label, .template-link-publisher-fields .label { display: inline-flex; align-items: center; gap: 6px; }
.field-row .icon:not(.button), .c2fc-campo-rotulo .icon { border: 0; }
.publisher-type-choice { display: flex; align-items: center; gap: 8px; }
.publisher-highlights-editor .menuContainerPagina { margin-bottom: 0; }
.publisher-highlights-editor .containerPagina { border-top-left-radius: 0; border-top-right-radius: 0; }
[data-schema-list="categories"] th, [data-schema-list="categories"] td { padding: 8px; vertical-align: top; min-width: 120px; }
/* REQ-240: estados do select nativo padronizado e variantes do alerta. */
.c2fc-campo-selecao { box-sizing: border-box; line-height: 1.4; font-family: inherit; }
.c2fc-campo-selecao:hover:not(:disabled):not(:focus) { border-color: #94a3b8; }
.c2fc-campo-selecao:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.25); }
.c2fc-campo-selecao:disabled { background: #f1f5f9; color: #64748b; }
.c2fc-campo-selecao[aria-invalid="true"] { border-color: #dc2626; }
.c2fc-alerta-sucesso { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.c2fc-alerta-aviso { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.c2fc-alerta { overflow-wrap: anywhere; }
.c2fc-alerta > * { min-width: 0; }
.c2fc-alerta:not(:has(> .content)) { display: block; }
.c2fc-alerta:not(:has(> .content)) > svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.c2fc-alerta.hidden { display: none; }
/* REQ-242: rótulo de checkbox e rádio é clicável, então mostra o cursor de clique (rótulo que envolve o
   campo, rótulo logo depois dele e a marcação `.checkbox` que os módulos migrados mantêm). */
label:has(input[type="checkbox"]:not(:disabled)), label:has(input[type="radio"]:not(:disabled)),
input[type="checkbox"]:not(:disabled) + label, input[type="radio"]:not(:disabled) + label,
.checkbox:not(.disabled) > label, .c2fc-chave-rotulo { cursor: pointer; }
/* REQ-242: painel do select dentro de container que recorta (tabela com rolagem, cartão): fixo na tela,
   posicionado pelo controles.js, sem criar barra de rolagem no container. */
.c2fc-select-painel.c2fc-flutuante { position: fixed; right: auto; }
.c2fc-select-painel.c2fc-flutuante.c2fc-acima { top: auto; }
/* REQ-242: botão de ação compacto que nunca quebra o rótulo (copiar ao lado de um campo). */
.c2fc-botao { white-space: nowrap; }
.c2fc-botao-compacto { flex: none; padding: 6px 12px; font-size: 12px; gap: 6px; }
.c2fc-botao-compacto svg { width: 14px; height: 14px; }
/* REQ-243: grade de modelos do editor (aba Modelos). Colunas pela largura do cartão, não pelo breakpoint:
   a grade fica igual em qualquer página, qualquer que seja a ordem das folhas, e o cartão não passa de 240 px. */
.c2fc-modelos-grade { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); gap: 12px; align-items: start; }
.c2fc-modelos-grade:not([style*="display: none"]) { display: grid !important; }
.c2fc-modelo-cartao { min-width: 0; }
.c2fc-modelo-capa > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* REQ-242: destaque do item que é o padrão ativo (estrela cheia). */
.c2fc-botao-destaque { border-color: #f59e0b; background: #f59e0b; color: #fff; }
.c2fc-botao-destaque:hover { border-color: #d97706; background: #d97706; }
.c2fc-botao-destaque svg { fill: currentColor; }
/* REQ-242: modal de tela cheia com iframe (seletor de arquivos e de modelos): o iframe ocupa o espaço que
   sobra entre o título e as ações; quem rola é o conteúdo do iframe, nunca o modal. */
.c2fc-ponte-modal.fullscreen { overflow: hidden; }
.c2fc-ponte-modal.fullscreen > .content:has(.iframe-container) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.c2fc-ponte-modal.fullscreen > .content .iframe-container { display: flex; flex: 1; min-height: 0; }
/* REQ-243: só o iframe dentro de `.iframe-container` perde a altura própria. O palco do editor visual
   (`#iframe-preview`) mora no mesmo modal e guarda a sua, calculada pela tela. */
.c2fc-ponte-modal.fullscreen > .content .iframe-container iframe { flex: 1; width: 100%; height: auto !important; min-height: 0; }
/* REQ-242: listagem sem palavra partida no meio — cabeçalho numa linha e rótulos (cor, slug, tipo) quebrando só
   em espaço; o rótulo-link de caminho continua podendo quebrar. */
#_gestor-interface-listar thead th, #_gestor-interface-listar thead th > button { white-space: nowrap; }
#_gestor-interface-listar tbody td .c2fc-rotulo:not(a) { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
.c2fc-selo-recusado { background: #fef2f2; color: #b91c1c; }
.c2fc-botao-perigo-suave { border-color: #fca5a5; color: #b91c1c; }
.c2fc-botao-perigo-suave:hover { border-color: #f87171; background: #fef2f2; }