/**
 * stdapp.css — biblioteca de estilos verdadeiramente compartilhada do
 * projeto: variáveis CSS globais, feedback de validação de senha, modal de
 * ajuda, componente de globo/leque de seleção de idioma, e o rodapé de
 * marca. Usado por TODAS as 9 telas com globo (5 de auth, manutencao.php,
 * central/questionário/resultado) — qualquer mudança aqui afeta todas elas
 * de uma vez, ao contrário de login.css/central.css (escopados por grupo de
 * telas).
 */
:root {

    --BtnCorPadrao: #64B5F6;
    --BtnCorHover: #1E88E5;
    --BtnBorderRadius: 6px;
    --BtnCorFontePadrao: white;
    --BtnCursor: pointer;
    --BtnBorder: none;
    --BtnPadding: 8px 16px;
    --BtnFontSize:   14px;
    --BtnFontWeight: 500;
    --BtnCorAjuda: #FFB74D;

    --Input_Background_Cor_Ativo: #E3F2FD;
    --InputBorder: 1px solid #ccc;
    --InputBorderRadius: 8px;

    --LabelCor: #1565C0;

    --H2BGCor: #0D47A1;

    --PnBorder: 3px solid #ccc;
    --PnBorderRadius: 20px;

    --TblCbcBGCor: #1565C0;

    --FrmQstRspBG: #f0f0f0;
    --FrmQstRspborder: 2px solid #BBB;
    --FrmQstNaoRspBG: #ffffff;
    --FrmQstNaoRspborder: 1px solid #ccc;
    --FrmLblRspBG: #1565C0;

    --cor-texto-leve: #888;

}

/* ===== FEEDBACK DE SENHA (compartilhado: telas auth + painel central) ===== */
.politica {
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.senha-feedback {
    font-size: 0.8rem;
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.senha-feedback.erro   { color: #c62828; }
.senha-feedback.valida { color: #2e7d32; }

/* Valor unificado (Etapa 5): 12px vinha de central.css, line-height 1.4 vinha de login.css */
.senha-erro-item {
    font-size: 12px;
    color: #c62828;
    line-height: 1.4;
}

/* ===== MODAL DE AJUDA (compartilhado: telas auth + painel central + questionário) ===== */
.modal-ajuda-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-ajuda-container {
    background: #ffffff;
    border-radius: var(--PnBorderRadius, 20px);
    padding: 28px 32px;
    max-width: 540px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: left;
}

.modal-ajuda-titulo {
    color: #1a2744;
    font-size: 1.2rem;
    margin: 0 0 16px;
}

.modal-ajuda-subtitulo {
    color: var(--BtnCorAjuda);
    font-size: 0.95rem;
    margin: 16px 0 8px;
}

.modal-ajuda-corpo p {
    color: #444;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 10px;
}

.modal-ajuda-lista {
    margin: 0 0 10px;
    padding-left: 20px;
}

.modal-ajuda-lista li {
    color: #444;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 6px;
}

.modal-ajuda-destaque {
    font-weight: 600;
    color: #1a2744;
}

.modal-ajuda-fechar {
    display: block;
    margin: 20px auto 0;
    padding: var(--BtnPadding);
    background-color: var(--BtnCorPadrao);
    color: #fff;
    border: var(--BtnBorder);
    border-radius: var(--BtnBorderRadius);
    font-size: var(--BtnFontSize);
    font-weight: var(--BtnFontWeight);
    cursor: var(--BtnCursor);
    transition: background-color 0.2s;
}

.modal-ajuda-fechar:hover { background-color: var(--BtnCorHover); }

/* ===== MODAL DE SUPORTE (compartilhado: mesmas telas do modal de ajuda) =====
   #modal-suporte reaproveita a moldura .modal-ajuda-overlay/-container/
   -titulo do modal de ajuda acima — os overrides abaixo são escopados a
   #modal-suporte especificamente (não mexem no modal de ajuda, cujo
   tamanho/alinhamento de título continuam como estavam). */
#modal-suporte .modal-ajuda-container {
    /* Mesma largura do card de login (.login-container, login.css) — pedido
       explícito de Gilmar para o modal "parecer" com o card, não com o
       modal de ajuda (que é mais largo, 540px, por ter texto corrido). */
    max-width: 480px;
}

#modal-suporte .modal-ajuda-titulo {
    text-align: center;
}

.suporte-form label {
    display: block;
    color: var(--LabelCor);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 14px 0 4px;
}

.suporte-form input[type="text"],
.suporte-form input[type="email"],
.suporte-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: var(--InputBorder);
    border-radius: var(--InputBorderRadius);
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}

.suporte-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* input[type=file] não recebe bem padding/border como os outros campos (o
   botão nativo "Escolher arquivo" é renderizado pelo navegador, fora do
   nosso controle de estilo) — só largura/fonte/espaçamento, sem moldura. */
.suporte-form input[type="file"] {
    width: 100%;
    padding: 6px 0;
    font-size: 0.85rem;
    font-family: inherit;
}

/* Reaproveita .senha-feedback (definida acima) para o feedback de
   sucesso/erro do envio — a classe é genérica (texto pequeno colorido
   verde/vermelho), não exclusiva de senha, apesar do nome. */
.suporte-form .senha-feedback {
    margin-top: 10px;
}

/* Enviar + Fechar lado a lado, mesmo padrão de .recuperar-btns/.login-btn-row
   (login.css) — reimplementado aqui (não reaproveitado direto) porque este
   modal também aparece em telas que carregam central.css, não login.css. */
.suporte-form-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

/* Selecionadas por [type="..."] (não só "button" puro) de propósito: login.css
   tem um `button[type="submit"] { display:block; margin:22px auto 0;
   min-width:150px; ... }` global (não escopado a nenhuma classe), mesma
   especificidade CSS (0,1,1) de um `.suporte-form-btns button` genérico — em
   empate de especificidade quem carrega por último no <head> vence, e
   login.css carrega depois de stdapp.css. Resultado: só o botão Enviar
   (type=submit) herdava aquele reset global (min-width 150px, margem
   22px auto 0 etc.), enquanto Fechar (type=button, fora do seletor de
   login.css) ficava só com os valores daqui — daí os dois saírem com
   tamanhos diferentes mesmo com a mesma regra-base "genérica" abaixo.
   Incluir [type="..."] aqui sobe a especificidade para (0,2,1), que bate a
   de login.css de forma determinística, não dependente de ordem de <link>. */
.suporte-form-btns button[type="button"],
.suporte-form-btns button[type="submit"] {
    display: inline-block;
    margin: 0;
    padding: var(--BtnPadding);
    border: var(--BtnBorder);
    border-radius: var(--BtnBorderRadius);
    font-size: var(--BtnFontSize);
    font-weight: var(--BtnFontWeight);
    letter-spacing: normal;
    cursor: var(--BtnCursor);
    white-space: nowrap;
    min-width: 140px;
    text-align: center;
    transition: background-color 0.2s;
}

.suporte-form-btns button[type="submit"] { background-color: var(--BtnCorPadrao); color: #fff; }
.suporte-form-btns button[type="submit"]:hover { background-color: var(--BtnCorHover); }
.suporte-form-btns button[type="submit"]:disabled { background-color: #ccc; cursor: not-allowed; }

/* Mesma cor de "Cancelar"/"Fechar" já usada em outros modais do projeto
   (ex: #modal-btn-cancelar do modal de exclusão em viewcentral.php, que
   reaproveita .btn-cancelar-perfil de central.css) — antes este botão usava
   um cinza genérico (#eee/#333) sem relação com o resto do sistema, mesmo
   já herdando padding/border-radius/fonte corretos da regra base acima. */
.suporte-form-btns button[type="button"] { background-color: #e53935; color: #fff; }
.suporte-form-btns button[type="button"]:hover { background-color: #c62828; }
.suporte-form button[type="submit"]:disabled { background-color: #ccc; cursor: not-allowed; }

/* ===== GLOBO SELETOR DE IDIOMA (compartilhado: telas auth + painel central) ===== */
/* Wrapper reduzido ao tamanho do globo — globo é o centro horizontal */
.lang-globe-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 48px;
    height: 48px;
}

.lang-globe {
    position: relative;
    z-index: 201;
    width: 48px;
    height: 48px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

.lang-globe img {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: center center;
    animation: girar-globo 11.4s linear infinite;
}

@keyframes girar-globo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Fora do fluxo flex — não desloca o globo */
.lang-connector {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 1px;
    background: #64B5F6;
}

/* Fora do fluxo flex — posicionada à direita do globo sem deslocá-lo */
.lang-active-flag {
    position: absolute;
    left: 68px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 201;
    width: 32px;
    height: auto;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    transition: opacity 0.3s ease;
}

/* Com o leque aberto, a bandeira ativa ao lado do globo fica redundante com
   as bandeiras do próprio leque — escondida enquanto .lang-fan estiver
   .open, restaurada ao fechar (mesmo fade de 0.3s da transição acima).
   Testado e aprovado primeiro só em authlogin.php (escopado via uma classe
   exclusiva daquela tela); replicado em 2026-07-09 generalizando a regra
   aqui em stdapp.css — .lang-globe-wrapper/.lang-fan/.lang-active-flag já
   são compartilhados daqui por TODAS as telas com globo (5 telas de auth +
   manutencao.php + central/questionário/resultado via .sidebar-globe-wrap),
   então uma regra só aqui cobre todas de uma vez, sem duplicar em login.css/
   central.css. Dirigido por :has() a partir do estado real do DOM (.lang-fan
   .open, a mesma classe que openFan()/closeFan() em i18n.js já alternam) —
   nenhuma linha de i18n.js precisou mudar, e não há risco de dessincronia
   entre a bandeira e o leque em nenhum caminho de fechamento (clique fora,
   seleção de bandeira, toggle direto). opacity (não display:none nem
   visibility:hidden) — mantém o elemento no fluxo, com foco/aria-expanded
   intactos para navegação por teclado. */
.lang-globe-wrapper:has(.lang-fan.open) .lang-active-flag {
    opacity: 0;
}

/* Valor unificado (Etapa 4): 4px 0 0 vinha de central.css */
.lang-globe-hint {
    width: 100%;
    font-size: 11px;
    color: #94a3b8;
    font-weight: normal;
    text-align: center;
    margin: 4px 0 0;
    padding: 0;
}

/* Container do leque — overflow:visible pra deixar as bandeiras se estenderem além dos limites do container (elas ficam posicionadas bem fora da caixa 0x0 abaixo). */
.lang-fan {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 200;
}

.lang-fan.open {
    pointer-events: auto;
}

/* Cada bandeira do leque: centrada no globo, recolhida (scale(0), opacity:0)
   por padrão. top/left usam variáveis calculadas pelo JS (initGlobe(),
   i18n.js); fallback 24px assume globo de 48px padrão. */
.lang-fan-flag {
    position: absolute;
    width: 28px;
    height: auto;
    border-radius: 3px;
    cursor: pointer;
    top: var(--globe-cy, 24px);
    left: var(--globe-cx, 24px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Estado aberto: move pra posição do leque via --fx/--fy, calculadas e setadas pelo JS (ver initGlobe() em i18n.js). */
.lang-fan.open .lang-fan-flag {
    opacity: 1;
    transform: translate(calc(-50% + var(--fx, 0)), calc(-50% + var(--fy, 0)));
}

.lang-fan.open .lang-fan-flag:hover {
    transform: translate(calc(-50% + var(--fx, 0)), calc(-50% + var(--fy, 0))) scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .lang-fan-flag {
        width: 32px;
        padding: 6px;
        box-sizing: content-box;
        margin: -6px;
    }
}

/* Faixa curva em U (tigela) atrás do leque — aparece só quando .lang-fan
   está .open (regra logo abaixo). Dois sub-paths + evenodd: anel entre
   r=100 (furo, deixa o globo visível no meio) e r=180 (borda externa),
   abertura voltada pra cima. left/top são sobrescritos pelo JS com base no
   centro real do globo no DOM (ver initGlobe() em i18n.js) — os valores
   aqui são só fallback estático. */
.fan-arc-bg {
    position: absolute;
    top: -8px;
    left: -156px;
    width: 360px;
    height: 200px;
    background: rgba(250, 250, 250, 0.20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    clip-rule: evenodd;
    clip-path: path('M 0 0 A 180 180 0 0 0 360 0 Z M 80 0 A 100 100 0 0 0 280 0 Z');
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lang-fan.open .fan-arc-bg {
    opacity: 1;
}

/* ===== RODAPÉ DE MARCA — mesmo estilo do rodapé dos e-mails (renderEmailShell,
   app/mail/EmailTemplate.php: fundo #111d3a, texto #64B5F6, 11px, letter-spacing
   1px, centralizado). Compartilhado entre telas de auth e o menu lateral. ===== */
.rodape-marca {
    background-color: #111d3a;
    color: #64B5F6;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px 40px;
}

/* No sidebar (painel central/questionário/resultado), o fundo já é escuro
   (.sidebar/.sidebar-nav) — sem caixa extra, só o texto, grudado no rodapé do
   menu (margin-top:auto empurra pro fim do flex-column) e com uma linha sutil
   separando de "Preciso de ajuda" acima. */
.sidebar-nav .rodape-marca {
    background-color: transparent;
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Padding lateral reduzido em telas pequenas (mesmo breakpoint de login.css)
   — evita aperto do texto "ESTILOS DE APRENDIZAGEM © AAAA" em telas estreitas. */
@media (max-width: 480px) {
    .rodape-marca {
        padding: 12px 16px;
    }
}