/* =====================================================================
   Intranet APS Administração e Contabilidade
   Identidade visual oficial da APS Consulting, extraída do manual de marca:
   azul-marinho + azul vibrante + preto (logo), sobre fundo neutro claro.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --aps-azul-escuro: #0C178B;   /* azul-marinho oficial do logo - cor primária */
    --aps-azul-medio:  #2147CC;   /* azul vibrante oficial do logo - hover / degradê */
    --aps-dourado:     #2147CC;   /* alias de destaque (mantido pelo nome por compatibilidade interna) */
    --aps-dourado-escuro: #17359E;
    --aps-preto:       #000000;   /* preto oficial do wordmark */
    --aps-fundo:       #F4F6F9;
    --aps-branco:      #FFFFFF;
    --aps-texto:       #14171F;
    --aps-texto-suave: #5B6675;
    --aps-borda:       #E1E5EB;
    --aps-sucesso:     #2E7D52;
    --aps-sucesso-bg:  #E7F5EC;
    --aps-perigo:      #B3392C;
    --aps-perigo-bg:   #FBEAE8;
    --aps-alerta:      #A6740F;
    --aps-alerta-bg:   #FBF1DA;
    --sombra: 0 2px 10px rgba(12, 23, 139, 0.10);
    --raio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--aps-fundo);
    color: var(--aps-texto);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--aps-azul-escuro);
    margin: 0 0 .5rem;
}

a { color: var(--aps-azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout geral ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--aps-azul-escuro), #0A1E36);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 3px solid var(--aps-dourado);
}

.sidebar .marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.4rem 1.2rem;
    background: #fff;
    border-bottom: 1px solid var(--aps-borda);
}

.marca .logo-mark {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.marca .logo-mark img { width: 100%; height: 100%; object-fit: contain; }

.marca .marca-texto { line-height: 1.2; }
.marca .marca-texto strong { display: block; font-size: .95rem; color: #000; }
.marca .marca-texto span { font-size: .72rem; color: #4A5568; letter-spacing: .04em; text-transform: uppercase; }

.sidebar nav { flex: 1; padding: 1rem 0; overflow-y: auto; }

.sidebar .grupo-titulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    padding: 1rem 1.2rem .35rem;
}

.sidebar a.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .65rem 1.2rem;
    color: rgba(255,255,255,.82);
    font-size: .9rem;
    border-left: 3px solid transparent;
}
.sidebar a.item:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar a.item.ativo {
    background: rgba(255,255,255,.08);
    border-left-color: var(--aps-dourado);
    color: #fff;
    font-weight: 600;
}
.badge-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--aps-perigo);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.sidebar .rodape-usuario {
    padding: 1rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .82rem;
}
.sidebar .rodape-usuario a { color: rgba(255,255,255,.75); }

/* ---------- Conteúdo principal ---------- */
.conteudo-principal { flex: 1; min-width: 0; }

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--aps-borda);
    padding: 1rem 1.6rem;
    display: flex; align-items: center; justify-content: space-between;
}
.topbar h1 { font-size: 1.25rem; margin: 0; }
.topbar .subtitulo { color: var(--aps-texto-suave); font-size: .85rem; }

.area-conteudo { padding: 1.6rem; max-width: 1100px; margin: 0 auto; }

/* ---------- Cards / painéis ---------- */
.card {
    background: #fff;
    border: 1px solid var(--aps-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.card-titulo {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }

.mini-card {
    background: #fff; border: 1px solid var(--aps-borda); border-radius: var(--raio);
    padding: 1.1rem; box-shadow: var(--sombra);
}
.mini-card .valor { font-size: 1.8rem; font-weight: 700; color: var(--aps-azul-escuro); font-family: 'Poppins', sans-serif; }
.mini-card .rotulo { color: var(--aps-texto-suave); font-size: .82rem; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--aps-azul-escuro); color: #fff; }
.btn-primario:hover { background: var(--aps-azul-medio); }
.btn-destaque { background: var(--aps-dourado); color: #fff; }
.btn-destaque:hover { background: var(--aps-dourado-escuro); color: #fff; }
.btn-perigo { background: var(--aps-perigo); color: #fff; }
.btn-perigo:hover { background: #8f2c22; }
.btn-secundario { background: #fff; color: var(--aps-azul-escuro); border-color: var(--aps-borda); }
.btn-secundario:hover { background: #f0f2f5; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; }

/* ---------- Formulários ---------- */
.form-grupo { margin-bottom: 1rem; }
.form-grupo label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-grupo .ajuda { font-size: .78rem; color: var(--aps-texto-suave); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=month],
select, textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--aps-borda);
    border-radius: 7px;
    font-family: inherit;
    font-size: .9rem;
    background: #fff;
    color: var(--aps-texto);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--aps-dourado);
    outline-offset: 1px;
    border-color: var(--aps-azul-medio);
}
textarea { resize: vertical; min-height: 100px; }

/* ---------- Tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--aps-borda); }
th { color: var(--aps-texto-suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: #fafbfc; }

/* ---------- Badges / status ---------- */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge-ativo, .badge-publicado, .badge-respondido, .badge-lido { background: var(--aps-sucesso-bg); color: var(--aps-sucesso); }
.badge-bloqueado, .badge-danger { background: var(--aps-perigo-bg); color: var(--aps-perigo); }
.tradingview-widget-container { border-radius: 8px; overflow: hidden; border: 1px solid var(--aps-borda); }
.badge-pendente, .badge-rascunho, .badge-em_analise { background: var(--aps-alerta-bg); color: var(--aps-alerta); }
.badge-admin { background: #EAE1F5; color: #5B3B95; }
.badge-rh { background: #DDEBF7; color: #1D5F91; }
.badge-colaborador { background: #E7EEF5; color: var(--aps-azul-medio); }

/* ---------- Mensagens flash ---------- */
.flash { padding: .8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: .88rem; }
.flash-sucesso { background: var(--aps-sucesso-bg); color: var(--aps-sucesso); border: 1px solid #c7e6d3; }
.flash-erro { background: var(--aps-perigo-bg); color: var(--aps-perigo); border: 1px solid #f0cac5; }
.flash-info { background: #E7EEF5; color: var(--aps-azul-medio); border: 1px solid #cfe0f0; }

/* ---------- Login ---------- */
.pagina-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--aps-azul-escuro), #0A1E36);
    padding: 1rem;
}
.caixa-login {
    background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
    width: 100%; max-width: 380px; padding: 2.2rem;
}
.caixa-login .marca-login { text-align: center; margin-bottom: 1.6rem; }
.caixa-login .marca-login .logo-mark {
    width: auto; height: 64px; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center;
}
.caixa-login .marca-login .logo-mark img { height: 100%; width: auto; object-fit: contain; }
.caixa-login .marca-login span { font-size: .78rem; color: var(--aps-texto-suave); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Utilitários ---------- */
.texto-suave { color: var(--aps-texto-suave); }
.flex { display: flex; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: .5rem; }
.mt-1 { margin-top: 1rem; }
.oculto-mobile { display: block; }

.lista-documentos li { margin-bottom: .6rem; }
.lista-documentos .doc-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .9rem; border: 1px solid var(--aps-borda); border-radius: 8px; background: #fff;
}

.rodape-institucional {
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--aps-borda);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    font-size: .76rem;
    color: var(--aps-texto-suave);
    background: #fff;
}
.rodape-institucional a { color: var(--aps-azul-medio); font-weight: 600; }

.banner-rodape-fixo {
    background: #fff;
    text-align: center;
    padding: 1.5rem 1.6rem;
}
.banner-rodape-fixo img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

@media (max-width: 820px) {
    .rodape-institucional { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 820px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: relative; }
    .sidebar nav { display: flex; flex-wrap: wrap; padding: .5rem; }
    .sidebar a.item { border-left: none; border-radius: 6px; }
    .sidebar .grupo-titulo { display: none; }
    .oculto-mobile { display: none; }
}

/* Acessibilidade: foco visível em navegação por teclado */
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--aps-dourado);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Conteúdo formatado (Avisos, Notícias, Conhecimento, Orientações, Clipping) */
.conteudo-rico { line-height: 1.6; color: var(--aps-texto); }
.conteudo-rico p { margin: 0 0 .9rem; }
.conteudo-rico p:last-child { margin-bottom: 0; }
.conteudo-rico ul, .conteudo-rico ol { margin: 0 0 .9rem 1.4rem; padding: 0; }
.conteudo-rico li { margin-bottom: .3rem; }
.conteudo-rico h1, .conteudo-rico h2, .conteudo-rico h3, .conteudo-rico h4 {
    color: var(--aps-azul-escuro); margin: 1.1rem 0 .5rem;
}
.conteudo-rico h1:first-child, .conteudo-rico h2:first-child,
.conteudo-rico h3:first-child, .conteudo-rico h4:first-child { margin-top: 0; }
.conteudo-rico blockquote {
    margin: 0 0 .9rem; padding: .5rem 1rem; border-left: 3px solid var(--aps-azul-medio);
    background: var(--aps-fundo); color: var(--aps-texto-suave);
}
.conteudo-rico a { color: var(--aps-azul-medio); }
.conteudo-rico a:hover { text-decoration: underline; }
.conteudo-rico .ql-align-center { text-align: center; }
.conteudo-rico .ql-align-right { text-align: right; }
.conteudo-rico .ql-align-justify { text-align: justify; }