@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   TOKENS — identidade visual do Portal
   Papel frio (não creme), tinta azul-marinho, crachá dourado
   e verde-selo para o que é "meu" no chat.
   ============================================================ */
:root {
    --ink:            #16233B;
    --ink-soft:       #2C3E5C;
    --paper:          #EEF1F6;
    --card:           #FFFFFF;
    --line:           #DCE3EB;
    --line-forte:     #C3CEDA;
    --text:           #212B39;
    --text-muted:     #626E7E;
    --text-fraco:     #8B96A5;

    --dourado:        #D6A73B;
    --dourado-escuro: #B4841F;
    --selo:           #1F7A67;
    --selo-escuro:    #145A4B;
    --coral:          #D9694C;

    --cracha-0: #1F7A67;
    --cracha-1: #B4841F;
    --cracha-2: #C15B3F;
    --cracha-3: #3D5A8A;
    --cracha-4: #7A4F73;
    --cracha-5: #56702F;

    --raio-lg: 20px;
    --raio-md: 13px;
    --raio-sm: 8px;

    --sombra-card: 0 1px 2px rgba(22,35,59,.05), 0 10px 28px -14px rgba(22,35,59,.18);
    --sombra-flutuante: 0 12px 32px -8px rgba(22,35,59,.32);

    --fonte-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fonte-corpo: 'Inter', 'Segoe UI', Arial, sans-serif;
    --fonte-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    background: var(--paper);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--selo-escuro); }

::selection { background: var(--dourado); color: var(--ink); }

/* ---------- Crachá (avatar de iniciais) — elemento assinatura ---------- */
.cracha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--fonte-mono);
    font-weight: 500;
    color: #fff;
    letter-spacing: .02em;
    background: var(--cracha-0);
}
.cracha--sm { width: 30px; height: 30px; font-size: .7rem; }
.cracha--md { width: 42px; height: 42px; font-size: .85rem; }
.cracha--lg { width: 56px; height: 56px; font-size: 1.1rem; }

/* ---------- Topo do site ---------- */
.topo-site {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topo-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}
.logo {
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -.01em;
}
.menu-principal { display: flex; align-items: center; gap: 22px; }
.menu-principal a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 500;
    transition: color .15s ease;
}
.menu-principal a:hover { color: var(--ink); }
.btn-login, .btn-sair {
    background: var(--ink);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: var(--raio-sm);
    font-weight: 600;
    transition: background .15s ease;
}
.btn-login:hover, .btn-sair:hover { background: var(--ink-soft); }
.usuario-logado {
    color: var(--text-muted);
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Login ---------- */
.pagina-login {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(214,167,59,.10), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(31,122,103,.12), transparent 45%),
        var(--ink);
}
.card-login {
    background: var(--card);
    padding: 44px 40px;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-flutuante);
    width: 100%;
    max-width: 380px;
}
.card-login h1 {
    font-family: var(--fonte-display);
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.subtitulo { color: var(--text-muted); margin-bottom: 22px; font-size: .92rem; }
.card-login form { display: flex; flex-direction: column; gap: 4px; }
.card-login label { font-size: .8rem; font-weight: 600; margin-top: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.card-login input {
    padding: 11px 12px; border: 1.5px solid var(--line); border-radius: var(--raio-sm);
    font-size: .95rem; font-family: var(--fonte-corpo); transition: border-color .15s ease;
}
.card-login input:focus { outline: none; border-color: var(--selo); }
.card-login button {
    margin-top: 22px; padding: 13px; background: var(--ink); color: #fff;
    border: none; border-radius: var(--raio-sm); font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}
.card-login button:hover { background: var(--ink-soft); }
.alerta-erro { background: #FBEAE5; color: #A13A22; padding: 10px 12px; border-radius: var(--raio-sm); font-size: .87rem; border: 1px solid #F0C4B6; }
.link-voltar { display: block; margin-top: 22px; text-align: center; font-size: .85rem; color: var(--text-fraco); text-decoration: none; }
.link-voltar:hover { color: var(--text-muted); }

/* ---------- Painel do colaborador ---------- */
.painel-colaborador { max-width: 1100px; margin: 0 auto; padding: 36px 24px 60px; }
.painel-colaborador h1 {
    font-family: var(--fonte-display); font-weight: 600; font-size: 1.9rem; color: var(--ink);
    letter-spacing: -.01em; margin-bottom: 4px;
}
.cards-resumo { display: flex; gap: 16px; margin: 24px 0 32px; flex-wrap: wrap; }
.card-resumo {
    flex: 1; min-width: 210px; background: var(--card); border-radius: var(--raio-md); padding: 22px;
    text-decoration: none; color: var(--text); box-shadow: var(--sombra-card);
    border: 1px solid var(--line);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card-resumo:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(22,35,59,.24); }
.card-resumo h3 {
    margin: 0 0 6px; color: var(--ink); font-family: var(--fonte-display); font-weight: 600; font-size: 1.15rem;
}
.card-resumo p { margin: 0; color: var(--text-muted); font-size: .88rem; }

.tabela-holerites { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--raio-md); overflow: hidden; box-shadow: var(--sombra-card); }
.tabela-holerites th {
    padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600;
    background: var(--paper);
}
.tabela-holerites td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
.tabela-holerites tr:last-child td { border-bottom: none; }
.tabela-holerites td a { font-weight: 600; text-decoration: none; }
.tabela-holerites td a:hover { text-decoration: underline; }

/* ---------- Chat completo (tela cheia) ---------- */
.pagina-chat-completa {
    display: flex; height: calc(100vh - 65px); max-width: 1200px; margin: 0 auto;
    background: var(--card); box-shadow: var(--sombra-card); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.lista-conversas { width: 300px; border-right: 1px solid var(--line); overflow-y: auto; padding: 16px 12px; background: var(--paper); flex-shrink: 0; }
.lista-conversas h2 {
    font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 600; color: var(--ink);
    margin: 4px 8px 14px;
}
.lista-conversas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.item-conversa {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--raio-md); cursor: pointer;
    transition: background .12s ease;
}
.item-conversa:hover { background: #E4E9F0; }
.item-conversa.ativa { background: var(--card); box-shadow: var(--sombra-card); }
.item-conversa .conversa-info { min-width: 0; flex: 1; }
.item-conversa strong { display: block; font-size: .92rem; color: var(--text); font-weight: 600; }
.item-conversa p { margin: 2px 0 0; color: var(--text-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-conversa .conversa-vazia { padding: 20px 10px; color: var(--text-fraco); font-size: .88rem; text-align: center; }

.area-mensagens-completa { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-cabecalho {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.chat-cabecalho strong { font-family: var(--fonte-display); font-size: 1.05rem; color: var(--ink); }
.chat-cabecalho span { font-size: .78rem; color: var(--text-fraco); }

.chat-corpo { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.placeholder-chat { color: var(--text-fraco); text-align: center; margin: auto; font-size: .95rem; }

.chat-form-completo { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; }
.chat-form-completo input {
    flex: 1; border: 1.5px solid var(--line); border-radius: 24px; padding: 11px 18px; font-size: .92rem; font-family: var(--fonte-corpo);
}
.chat-form-completo input:focus { outline: none; border-color: var(--selo); }
.chat-form-completo button {
    border: none; background: var(--selo); color: #fff; padding: 0 22px; border-radius: 24px; cursor: pointer;
    font-weight: 600; font-size: .9rem; transition: background .15s ease;
}
.chat-form-completo button:hover { background: var(--selo-escuro); }

/* Bolhas de mensagem — reutilizadas no chat completo e no widget */
.msg-linha { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.msg-linha.linha-enviada { align-self: flex-end; flex-direction: row-reverse; }
.msg-hora { font-family: var(--fonte-mono); font-size: .68rem; color: var(--text-fraco); margin-top: 3px; display: block; }
.msg { padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.4; box-shadow: var(--sombra-card); }
.msg-recebida { background: var(--card); color: var(--text); border-bottom-left-radius: 4px; }
.msg-enviada { background: var(--selo); color: #fff; border-bottom-right-radius: 4px; }
.msg-enviada .msg-hora { color: rgba(255,255,255,.75); text-align: right; }

/* ---------- Widget de chat flutuante ---------- */
.widget-chat { position: fixed; bottom: 20px; right: 20px; z-index: 999; font-family: var(--fonte-corpo); }
.btn-abrir-chat {
    width: 58px; height: 58px; border-radius: 50%; border: none;
    background: var(--ink); color: #fff; font-size: 1.4rem; cursor: pointer;
    box-shadow: var(--sombra-flutuante);
    transition: transform .15s ease, background .15s ease;
    display: flex; align-items: center; justify-content: center;
}
.btn-abrir-chat:hover { transform: translateY(-2px); background: var(--ink-soft); }
.janela-chat {
    display: none; position: absolute; bottom: 72px; right: 0;
    width: 340px; max-height: 460px; background: var(--card); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-flutuante); flex-direction: column; overflow: hidden;
    border: 1px solid var(--line);
}
.widget-chat-aberto .janela-chat { display: flex; }
.janela-chat-topo {
    background: var(--ink); color: #fff; padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
}
.janela-chat-topo span { font-family: var(--fonte-display); font-weight: 600; font-size: 1rem; }
.janela-chat-topo button { background: none; border: none; color: rgba(255,255,255,.7); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.janela-chat-topo button:hover { color: #fff; }
.janela-chat-mensagens { flex: 1; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.janela-chat-form { display: flex; border-top: 1px solid var(--line); background: var(--card); }
.janela-chat-form input { flex: 1; border: none; padding: 13px 16px; font-size: .9rem; font-family: var(--fonte-corpo); background: transparent; }
.janela-chat-form input:focus { outline: none; }
.janela-chat-form button { border: none; background: transparent; color: var(--selo); padding: 0 16px; cursor: pointer; font-weight: 700; }
.janela-chat-form button:hover { color: var(--selo-escuro); }

/* ---------- Rodapé ---------- */
.rodape-site { text-align: center; padding: 24px; color: var(--text-fraco); font-size: .82rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
    .menu-principal { gap: 12px; }
    .menu-principal a:not(.btn-login):not(.btn-sair) { display: none; }
    .pagina-chat-completa { height: calc(100vh - 60px); }
    .lista-conversas { width: 92px; padding: 12px 6px; }
    .lista-conversas h2 { display: none; }
    .item-conversa .conversa-info { display: none; }
    .item-conversa { justify-content: center; }
    .janela-chat { width: calc(100vw - 40px); }
}

/* ---------- Acessibilidade ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [onclick]:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Login embutido no chat (widget) ---------- */
.login-inline { align-self: stretch; }
.login-inline-form {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-md);
    padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra-card);
}
.login-inline-form input {
    padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--raio-sm);
    font-size: .85rem; font-family: var(--fonte-corpo);
}
.login-inline-form input:focus { outline: none; border-color: var(--selo); }
.login-inline-form button {
    border: none; background: var(--ink); color: #fff; padding: 9px; border-radius: var(--raio-sm);
    font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .15s ease;
}
.login-inline-form button:hover { background: var(--ink-soft); }
.login-inline-form button:disabled { opacity: .6; cursor: default; }
.login-inline-form a { font-size: .78rem; color: var(--text-muted); text-align: center; text-decoration: none; }
.login-inline-form a:hover { color: var(--selo-escuro); text-decoration: underline; }
.login-inline-erro { color: var(--coral); font-size: .8rem; margin: 0; }
.login-inline-ok {
    background: #EAF4F1; color: var(--selo-escuro); border: 1px solid #BFE0D6;
    padding: 10px 12px; border-radius: var(--raio-md); font-size: .85rem; margin: 0;
}