/* ===========================================================================
   PADRÃO DE COMPONENTES
   Camada carregada DEPOIS do style.css. Reúne o que antes estava repetido como
   style="..." no HTML: textos de apoio, mensagens de erro/sucesso, botões
   secundário e perigoso, campos de filtro, linhas de ação e o menu do perfil.

   Regra da casa: marcação nova usa estas classes, nunca style="" para cor,
   tamanho de fonte, borda ou espaçamento. Só valor que muda por registro
   (largura de barra de progresso, por exemplo) fica inline.

   Tudo sai das variáveis do style.css (--esp-*, --raio-*, --toque-min, cores
   por tema), então os dois temas e o celular funcionam sem regra extra.
   =========================================================================== */

/* ---- TEXTO DE APOIO ---------------------------------------------------- */
.dica {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.dica-bloco {
    display: block;
    margin-top: var(--esp-2);
}
.conta-dados + .dica-bloco { margin-top: var(--esp-4); }
.descricao-painel {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--esp-4);
}
.descricao-painel.sm { font-size: 13px; }
.descricao-painel.mb-6 { margin-bottom: var(--esp-6); }
.estado-vazio {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--esp-4);
}
.estado-vazio.lg { padding: var(--esp-6); }
.estado-vazio.xl { padding: var(--esp-8); }

/* Utilitários de texto. !important de propósito: antes eram style="" inline
   (que sempre ganhava de qualquer regra de componente); sem isso uma regra de
   tabela ou badge com mais especificidade desfaria a cor. */
.texto-suave  { color: var(--text-secondary) !important; }
.texto-erro   { color: var(--accent-red) !important; }
.texto-ok     { color: var(--accent-green) !important; }
.texto-centro { text-align: center !important; }
.fs-11 { font-size: 11px !important; }
.fs-13 { font-size: 13px !important; }

/* ---- MENSAGENS (erro, sucesso, aviso) ----------------------------------
   Substitui os <p style="display:none; color:red; background:rgba(...)">.
   Continuam escondidas por padrão; o JS mostra com style.display = 'block'. */
.msg {
    display: none;
    font-size: 13px;
    line-height: 1.45;
    padding: var(--esp-3);
    margin: 0 0 var(--esp-3);
    border-radius: var(--raio-sm);
    border: 1px solid transparent;
}
.msg.visivel { display: block; }
.msg-erro  { color: var(--danger-text);  background: var(--danger-bg);  border-color: var(--danger-text); }
.msg-ok    { color: var(--success-text); background: var(--success-bg); border-color: var(--success-text); }
.msg-aviso { color: var(--text-primary); background: var(--accent-soft); border-color: var(--accent-orange); }
.msg.centro { text-align: center; }

/* ---- BOTÕES: variantes que faltavam ------------------------------------
   Os três pesos do style.css continuam valendo (preenchido .btn-submit, tonal
   .btn-table, fantasma .btn-back). Aqui entram o secundário com contorno e o
   perigoso, que existiam só como style="" nos painéis de Teams e 2FA. */
.btn-secundario,
.btn-perigo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: var(--toque-min);
    padding: 0 var(--esp-5);
    border-radius: var(--raio-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s var(--mola), transform 0.15s var(--mola), box-shadow 0.2s var(--mola);
}
.btn-secundario { color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secundario:hover { background: var(--overlay-medium); border-color: var(--accent-blue); }
.btn-perigo { color: var(--danger-text); border: 1px solid var(--danger-text); }
.btn-perigo:hover { background: var(--danger-bg); }
.btn-secundario:active,
.btn-perigo:active { transform: scale(0.97); }
.btn-secundario:focus-visible,
.btn-perigo:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); }
.btn-secundario:disabled,
.btn-perigo:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (min-width: 769px) {
    .config-panel .btn-secundario,
    .config-panel .btn-perigo { min-height: 36px; }
}

/* Largura natural: o .btn-submit nasce com width:100%; em painel de
   configuração o botão não deve esticar a linha toda. */
.btn-auto { width: auto; }
.btn-submit.btn-auto { padding: 0 var(--esp-5); }

/* Grupo de ações (Salvar / Testar / Remover): quebra linha no celular em vez
   de estourar a largura. */
.acoes-linha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    align-items: center;
}
.acoes-linha.fim { justify-content: flex-end; }
@media (max-width: 480px) {
    .acoes-linha > .btn-submit,
    .acoes-linha > .btn-secundario,
    .acoes-linha > .btn-perigo { flex: 1 1 100%; }
}

/* ---- CAMPOS AVULSOS (filtros e barras de ferramentas) -------------------
   Fora do .premium-form o select/input ficava com a aparência do navegador ou
   com 8 linhas de estilo inline. */
.campo-filtro {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0 var(--esp-3);
    min-height: var(--toque-min);
    border-radius: var(--raio-sm);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s var(--mola), box-shadow 0.2s var(--mola);
}
.campo-filtro:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 4px var(--accent-ring); }
@media (min-width: 769px) {
    .campo-filtro { min-height: 36px; }
}

/* ---- CAMPO PADRÃO FORA DO .premium-form ---------------------------------
   Vários painéis (Minha Conta, Configurações, modais) usam .form-group sem o
   .premium-form em volta e o select/input caía na aparência nativa do
   navegador: fundo branco, rótulo ao lado do campo. Estas regras dão a todo
   .form-group o mesmo desenho do formulário premium. */
.form-group:not(.premium-form .form-group) {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    margin-bottom: var(--esp-4);
}
.form-group:not(.premium-form .form-group) > label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}
.form-group:not(.premium-form .form-group) > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.form-group:not(.premium-form .form-group) > select,
.form-group:not(.premium-form .form-group) > textarea {
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0 var(--esp-4);
    min-height: var(--toque-min);
    border-radius: var(--raio-md);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s var(--mola), box-shadow 0.2s var(--mola);
}
.form-group:not(.premium-form .form-group) > textarea { padding: var(--esp-3) var(--esp-4); min-height: 88px; }
.form-group:not(.premium-form .form-group) > input:focus,
.form-group:not(.premium-form .form-group) > select:focus,
.form-group:not(.premium-form .form-group) > textarea:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
@media (min-width: 769px) {
    .config-panel .form-group:not(.premium-form .form-group) > input:not([type="checkbox"]):not([type="radio"]),
    .config-panel .form-group:not(.premium-form .form-group) > select { min-height: 40px; }
}

/* Rede de segurança: todo campo que nenhuma regra de componente estilizou
   (filtro no cabeçalho da Agenda, descrição do cartão, tempos do rodízio,
   horários) nunca fica com a cara nativa do navegador. :where() zera a
   especificidade, então qualquer regra específica de componente continua
   ganhando deste padrão. */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea
) {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0 var(--esp-3);
    min-height: var(--toque-min);
    border-radius: var(--raio-sm);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
:where(textarea) { padding: var(--esp-2) var(--esp-3); min-height: 88px; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]), select, textarea):focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
@media (min-width: 769px) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="hidden"]), select) { min-height: 36px; }
}

/* Campo com erro de validação (aplicado via aria-invalid ou classe). */
.premium-form input[aria-invalid="true"],
.premium-form select[aria-invalid="true"],
.premium-form textarea[aria-invalid="true"],
.campo-invalido {
    border-color: var(--accent-red);
}
.premium-form input:disabled,
.premium-form select:disabled,
.premium-form textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Marca de campo obrigatório: o asterisco vem do CSS, o HTML só marca required. */
.premium-form label.obrigatorio::after,
.premium-form .form-group:not(#view-login .form-group):has(> input[required]) > label::after,
.premium-form .form-group:not(#view-login .form-group):has(> select[required]) > label::after,
.premium-form .form-group:not(#view-login .form-group):has(> textarea[required]) > label::after {
    content: ' *';
    color: var(--accent-red);
}

/* ---- LAYOUT DE PAINEL --------------------------------------------------- */
.config-panel.estreito { max-width: 600px; }
.separador-topo {
    border-top: 1px solid var(--border-color);
    padding-top: var(--esp-5);
}
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-6 { margin-bottom: var(--esp-6); }
.w-auto { width: auto; }
.w-full { width: 100%; }

/* ===========================================================================
   MENU DO PERFIL
   Cabeçalho com avatar, nome, e-mail e perfil (papel + áreas); atalhos que
   levam direto à aba certa de "Minha Conta"; sair separado no fim.
   =========================================================================== */
.perfil-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--esp-1);
}
.perfil-cabecalho-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--accent-blue);
}
.perfil-cabecalho-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.perfil-cabecalho-texto strong {
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.perfil-cabecalho-texto .perfil-email {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.perfil-papel {
    align-self: flex-start;
    margin-top: var(--esp-1);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--raio-pill);
    color: var(--accent-blue);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
}
.menu-item .menu-icone {
    flex: 0 0 20px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}
.menu-divisor {
    height: 1px;
    margin: var(--esp-1) 0;
    background: var(--border-color);
}
.menu-suspenso .menu-item[hidden] { display: none; }

/* No tema verde o texto do .top-nav é branco e atinge o cabeçalho do menu,
   que abre sobre fundo claro; o avatar interno precisa manter contraste. */
:root[data-tema="verde"] .top-nav .perfil-cabecalho-avatar { color: #fff; background: var(--accent-blue); }
:root[data-tema="verde"] .top-nav .perfil-papel { color: var(--accent-blue); }

/* ===========================================================================
   MINHA CONTA — abas
   Antes eram sete painéis empilhados numa rolagem comprida. Agora abas
   (Perfil, Segurança, Preferências, Notificações); a aba ativa vem do menu do
   perfil. Usa as .sub-abas do style.css, aqui só o que é específico.
   =========================================================================== */
#agent-minha-conta .conta-painel.active {
    display: grid;
    gap: var(--esp-6);
    grid-template-columns: minmax(0, 600px);
}
@media (max-width: 768px) {
    #agent-minha-conta .conta-painel.active { grid-template-columns: minmax(0, 1fr); }
    /* Abas rolam na horizontal em vez de quebrar em duas linhas. */
    #agent-minha-conta .sub-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #agent-minha-conta .sub-aba { padding: 10px 10px; font-size: 13px; }
    #agent-minha-conta .sub-abas::-webkit-scrollbar { display: none; }
}

/* ---- 2FA (Minha Conta > Segurança) ---- */
.totp-espaco { margin: 0 0 var(--esp-4); }
.totp-qr-area { text-align: center; }
.totp-qr-img {
    max-width: 200px;
    width: 100%;
    border-radius: var(--raio-sm);
    background: #fff;
    padding: var(--esp-2);
}
.totp-linha {
    display: flex;
    gap: var(--esp-2);
    flex-wrap: wrap;
    margin-bottom: var(--esp-3);
}
.totp-qr-area .totp-linha { justify-content: center; }
.totp-codigo {
    width: 160px;
    min-height: var(--toque-min);
    padding: 0 var(--esp-3);
    text-align: center;
    letter-spacing: 6px;
    font-size: 18px;
    font-family: inherit;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--raio-md);
    outline: none;
}
.totp-codigo:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 4px var(--accent-ring); }
.totp-codigo::placeholder { letter-spacing: 2px; font-size: 14px; }
.totp-ativo {
    border: 1px solid var(--success-text);
    background: var(--success-bg);
    padding: var(--esp-4);
    border-radius: var(--raio-md);
}
.totp-ativo-titulo { color: var(--success-text); font-weight: 600; margin-bottom: var(--esp-2); }
.separador-fino { border: none; border-top: 1px solid var(--border-color); margin: var(--esp-4) 0; }
.link-discreto { color: var(--text-secondary); text-decoration: none; }
.link-discreto:hover { color: var(--text-primary); text-decoration: underline; }
#totp-reconfig-area { margin-top: var(--esp-2); }

.conta-resumo {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    flex-wrap: wrap;
}
.conta-resumo .perfil-cabecalho-avatar { width: 56px; height: 56px; font-size: 18px; }
.conta-dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--esp-2) var(--esp-4);
    margin-top: var(--esp-4);
    font-size: 14px;
}
.conta-dados dt { color: var(--text-secondary); }
.conta-dados dd { margin: 0; color: var(--text-primary); word-break: break-word; }
@media (max-width: 480px) {
    .conta-dados { grid-template-columns: 1fr; gap: 0; }
    .conta-dados dt { margin-top: var(--esp-3); font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Listas administrativas longas (Configurações Globais > Organização)
   Busca + filtro por situação + "mostrar todas" (ver aplicarFiltroLista).
   `hidden` precisa de !important: no celular a linha vira cartão com
   display:block e anularia o atributo.
   --------------------------------------------------------------------------- */
.admin-table tr[hidden] { display: none !important; }
.lista-filtro { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin: 0 0 var(--esp-3); }
.lista-filtro[hidden], .lista-mais[hidden] { display: none; }
.lista-filtro-busca { flex: 1 1 180px; min-width: 0; }
.lista-filtro-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.filtro-chip {
    min-height: var(--toque-min);
    padding: 0 var(--esp-4);
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.filtro-chip[aria-pressed="true"] { background: var(--accent-orange, var(--accent)); border-color: transparent; color: #fff; }
.lista-mais { width: 100%; margin-top: var(--esp-2); justify-content: center; min-height: var(--toque-min); }

/* Células com campos largos (cartão do departamento, canal do Teams): no
   celular o rótulo vai pra cima e o conteúdo ocupa a largura toda. Antes o
   rótulo e os campos disputavam a mesma linha e a célula passava da tela. */
@media (max-width: 1280px) {
    .admin-table td.celula-bloco {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--esp-2);
        text-align: left;
    }
    .admin-table td.celula-bloco::before { margin-right: 0; }
    .admin-table td.celula-bloco .linha-acoes { flex-wrap: wrap; }
    .admin-table td.celula-bloco .linha-acoes input { flex: 1 1 100%; }
    .depto-cartao-admin { align-items: flex-start; }
}

/* Unidades e Setores: uma linha enxuta por item em vez de um cartão de quatro
   linhas — nome e situação lado a lado, ações logo abaixo. */
@media (max-width: 768px) {
    #unidades-body tr:not(.linha-mensagem),
    #setores-solicitante-body tr:not(.linha-mensagem) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--esp-2);
        row-gap: var(--esp-2);
        padding: var(--esp-2) var(--esp-3);
        margin-bottom: var(--esp-2);
    }
    #unidades-body tr:not(.linha-mensagem) td,
    #setores-solicitante-body tr:not(.linha-mensagem) td { padding: 0; border: none; text-align: left; }
    #unidades-body tr:not(.linha-mensagem) td::before,
    #setores-solicitante-body tr:not(.linha-mensagem) td::before { content: none; }
    #unidades-body tr:not(.linha-mensagem) td:nth-child(2),
    #setores-solicitante-body tr:not(.linha-mensagem) td:nth-child(2) { font-weight: 600; overflow-wrap: anywhere; }
    #unidades-body tr:not(.linha-mensagem) td:nth-child(3),
    #setores-solicitante-body tr:not(.linha-mensagem) td:nth-child(3) { justify-content: flex-end; }
    #unidades-body tr:not(.linha-mensagem) td:nth-child(4),
    #setores-solicitante-body tr:not(.linha-mensagem) td:nth-child(4) { grid-column: 1 / -1; }
    #unidades-body td:nth-child(4) .btn-table,
    #setores-solicitante-body td:nth-child(4) .btn-table { flex: 1 1 0; min-height: 36px; padding-block: 0; }
}

/* Formulários de uma coluna só (nome + botão): o campo ocupa a linha inteira. */
@media (max-width: 900px) {
    #form-unidade-nova input,
    #form-setor-solicitante-novo input { grid-column: 1 / -1; }
    #form-unidade-nova .btn-submit,
    #form-setor-solicitante-novo .btn-submit { grid-column: 1 / -1; }
}