/* ==========================================================
   Portal PAA AEA v1.0 RC1
   Agrupamento de Escolas de Almodôvar
   css/style.css
========================================================== */

/* ==========================================================
   RESET
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: #f4f7fb;
    color: #243447;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root {
    --cor-primaria: #0d47a1;
    --cor-secundaria: #1565c0;
    --cor-destaque: #1976d2;

    --cor-fundo: #f4f7fb;
    --cor-branco: #ffffff;

    --cor-texto: #243447;
    --cor-texto-claro: #64748b;

    --cor-borda: #d9e3ef;

    --cor-sucesso: #16a34a;
    --cor-alerta: #ea580c;
    --cor-erro: #dc2626;

    --cor-sombra: rgba(15, 23, 42, .08);

    --raio: 16px;

    --largura: 1280px;

    --sidebar: 270px;
}

/* ==========================================================
   BASE
========================================================== */

body {
    min-height: 100vh;
}

main {
    width: 100%;
}

section {
    margin-bottom: 28px;
}

h1 {
    font-size: 2rem;
    color: var(--cor-primaria);
    margin-bottom: 8px;
}

h2 {
    font-size: 1.5rem;
    color: var(--cor-primaria);
}

h3 {
    font-size: 1.05rem;
}

p {
    color: var(--cor-texto-claro);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button,
select,
input {
    font-family: inherit;
}

.oculto {
    display: none !important;
}

/* ==========================================================
   CONTAINER PRINCIPAL
========================================================== */

.container {
    width: min(100% - 40px, var(--largura));
    margin: 0 auto;
}

/* ==========================================================
   CONTEÚDO
========================================================== */

.conteudo {
    width: 100%;
    min-height: 100vh;
    padding: 4px 0 24px;
}

/* ==========================================================
   UTILITÁRIOS
========================================================== */

.texto-centro {
    text-align: center;
}

.margem-topo {
    margin-top: 30px;
}

.loading {
    padding: 40px;
    text-align: center;
    color: var(--cor-texto-claro);
}

.erro {
    max-width: var(--largura);
    margin: 30px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: var(--raio);
}

.erro h2 {
    color: var(--cor-erro);
    margin-bottom: 8px;
}
/* ==========================================================
   CABEÇALHO
========================================================== */

.topo {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: linear-gradient(
        180deg,
        #ffffff,
        #f7f9fc
    );

    border-bottom: 1px solid #dbe4ee;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, .08);

    backdrop-filter: blur(8px);
}

.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 24px;

    min-height: 68px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 14px;
}

.marca img {
    width: 62px;
    height: 62px;

    object-fit: contain;
    flex-shrink: 0;
}

.marca div {
    display: flex;
    flex-direction: column;
}

.marca span {
    font-size: 1.35rem;
    font-weight: 700;

    color: var(--cor-primaria);

    line-height: 1.1;
}

.marca small {
    font-size: .80rem;
    font-weight: 600;

    color: var(--cor-texto-claro);

    white-space: nowrap;
}

.pesquisa-topo {
    width: min(390px, 40%);
    margin-left: auto;
}

.pesquisa-topo input {
    width: 100%;

    padding: 11px 16px;

    border-radius: 10px;
    border: 1px solid #d9e3ef;

    background: #ffffff;

    font-size: .94rem;

    transition: .25s;
}

.pesquisa-topo input:hover {
    border-color: var(--cor-secundaria);
}

.pesquisa-topo input:focus {
    outline: none;

    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .10);
}

/* ==========================================================
   HERO
========================================================== */

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 250px;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .68),
            rgba(13, 71, 161, .68)
        ),
        url("../img/escola.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, 0)
        );
}

.hero .container {
    position: relative;

    min-height: 250px;

    display: flex;
    align-items: center;
}

.hero-texto {
    max-width: 620px;
}

.hero h1,
.hero h2 {
    color: #ffffff;

    line-height: 1.2;

    margin-bottom: 10px;
}

.hero h1 {
    font-size: 2.2rem;
}

.hero h2 {
    font-size: 2rem;
}

.hero p {
    color: #ffffff;

    font-size: 1.15rem;

    line-height: 1.6;

    margin-bottom: 26px;

    max-width: 600px;
}

/* ==========================================================
   PESQUISA NO HERO
========================================================== */

.pesquisa-banner {
    width: 100%;
    max-width: 520px;
}

.pesquisa-banner input {
    width: 100%;

    padding: 15px 18px;

    border: none;
    border-radius: 999px;

    font-size: 1rem;

    outline: none;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .18);
}

.hero-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}

.hero-acoes .pesquisa-banner {
    width: 260px;
    max-width: 260px;
}

.hero-acoes .pesquisa-banner input {
    width: 100%;
    padding: 8px 12px;
    font-size: .82rem;
}

.hero-acoes .botao {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: .82rem;
}
/* ==========================================================
   HERO — HOME
========================================================== */

.hero-home {
    position: relative;

    width: 100%;
    height: 140px;
    min-height: 140px;

    color: #ffffff;

    background-image:
    linear-gradient(
        rgba(13, 71, 161, .35),
        rgba(13, 71, 161, .35)
    ),
    url("../img/escolabanner.jpg");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-home::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, 0)
        );

z-index: 1;

}

.hero-home .container {
    position: relative;

    min-height: 0;

    display: flex;
    align-items: center;

    padding: 4px 14px 18px 16px;

z-index: 1;

}

.hero-home h2 {
    color: #ffffff;

    font-size: 2.35rem;

    line-height: 1.15;

    margin-bottom: 10px;
}

.hero-home p {
    color: #ffffff;

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: 18px;

    max-width: 560px;
}
.hero-home .hero-texto {
    text-shadow:
        0 2px 6px rgba(0, 0, 0, .45);
}

/* ==========================================================
   HERO HOME — TEXTO + PESQUISA
========================================================== */

.hero-home-conteudo {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 30px;
}


.hero-home .hero-texto {
    flex: 1 1 auto;

    min-width: 0;
    max-width: 620px;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, .45);
}


.hero-home .hero-pesquisa {
    flex: 0 0 230px;

    width: 230px;

    margin-left: auto;

    align-self: center;
}
.hero-home .hero-texto {
    flex: 1;
    min-width: 0;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, .45);
}


.hero-home .hero-texto h1 {
    color: #ffffff;

    font-size: 1.75rem;

    line-height: 1.15;

    margin: 0 0 6px;
}


.hero-home .hero-texto p {
    color: #ffffff;

    font-size: .88rem;

    line-height: 1.4;

    margin: 0;

    max-width: 620px;
}


.hero-home .hero-pesquisa {
    position: relative;

    flex: 0 0 250px;

    width: 250px;

    align-self: flex-end;

    margin-bottom: 18px;
}

.hero-home .hero-pesquisa input {
    width: 100%;

    padding: 8px 12px 8px 34px;

    border: none;

    border-radius: 999px;

    background: #ffffff;

    font-size: .78rem;

    outline: none;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .16);
}


.hero-home .icone-pesquisa {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    font-size: .9rem;

    z-index: 2;

    pointer-events: none;
}

/* ==========================================================
   HERO — CALENDÁRIO
   Cabeçalho intermédio com fotografia da escola
========================================================== */

.hero-calendario {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .35),
            rgba(13, 71, 161, .35)
        ),
        url("../img/escolabanner.jpg");

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-calendario::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, 0)
        );

    pointer-events: none;
}

.hero-calendario .container {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-calendario .hero-texto {
    position: relative;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-calendario .hero-texto h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1.75rem;
    line-height: 1.2;

    white-space: normal;
}

.hero-calendario .hero-texto p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .95rem;
    line-height: 1.45;

    max-width: 680px;

    white-space: normal;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .hero-calendario,
    .hero-calendario .container {

        min-height: 100px;

    }

    .hero-calendario .container {

        padding-top: 16px;
        padding-bottom: 16px;

    }

    .hero-calendario .hero-texto h2 {

        font-size: 1.45rem;

    }

    .hero-calendario .hero-texto p {

        font-size: .85rem;

    }

}

/* ==========================================================
   HERO — ATIVIDADES
   Cabeçalho intermédio com fotografia da escola
========================================================== */

.hero-atividades {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .35),
            rgba(13, 71, 161, .35)
        ),
        url("../img/escolabanner.jpg");

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-atividades::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, 0)
        );

    pointer-events: none;
}

.hero-atividades .container {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-atividades .hero-texto {
    position: relative;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-atividades .hero-texto h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1.75rem;
    line-height: 1.2;

    white-space: normal;
}

.hero-atividades .hero-texto p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .95rem;
    line-height: 1.45;

    max-width: 680px;

    white-space: normal;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .hero-atividades,
    .hero-atividades .container {

        min-height: 100px;

    }

    .hero-atividades .container {

        padding-top: 16px;
        padding-bottom: 16px;

    }

    .hero-atividades .hero-texto h2 {

        font-size: 1.45rem;

    }

    .hero-atividades .hero-texto p {

        font-size: .85rem;

    }

}

/* ==========================================================
   HERO — ESTATÍSTICAS
   Cabeçalho intermédio com fotografia da escola
========================================================== */

.hero-estatisticas {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .35),
            rgba(13, 71, 161, .35)
        ),
        url("../img/escolabanner.jpg");

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-estatisticas::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, 0)
        );

    pointer-events: none;
}

.hero-estatisticas .container {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-estatisticas .hero-texto {
    position: relative;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-estatisticas .hero-texto h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1.75rem;
    line-height: 1.2;

    white-space: normal;
}

.hero-estatisticas .hero-texto p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .95rem;
    line-height: 1.45;

    max-width: 680px;

    white-space: normal;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .hero-estatisticas,
    .hero-estatisticas .container {

        min-height: 100px;

    }

    .hero-estatisticas .container {

        padding-top: 16px;
        padding-bottom: 16px;

    }

    .hero-estatisticas .hero-texto h2 {

        font-size: 1.45rem;

    }

    .hero-estatisticas .hero-texto p {

        font-size: .85rem;

    }

}

/* ==========================================================
   HERO — DOCUMENTOS
   Cabeçalho intermédio com fotografia da escola
========================================================== */

.hero-documentos {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .35),
            rgba(13, 71, 161, .35)
        ),
        url("../img/escolabanner.jpg");

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-documentos::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, 0)
        );

    pointer-events: none;
}

.hero-documentos .container {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-documentos .hero-texto {
    position: relative;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-documentos .hero-texto h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1.75rem;
    line-height: 1.2;

    white-space: normal;
}

.hero-documentos .hero-texto p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .95rem;
    line-height: 1.45;

    max-width: 680px;

    white-space: normal;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .hero-documentos,
    .hero-documentos .container {

        min-height: 100px;

    }

    .hero-documentos .container {

        padding-top: 16px;
        padding-bottom: 16px;

    }

    .hero-documentos .hero-texto h2 {

        font-size: 1.45rem;

    }

    .hero-documentos .hero-texto p {

        font-size: .85rem;

    }

}

/* ==========================================================
   FILTROS
========================================================== */

.filtros {
    background: #ffffff;

    border: 1px solid var(--cor-borda);
    border-radius: 16px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .05);

    margin-top: -8px;
    margin-bottom: 18px;
}

.filtros .container {
    padding: 18px 22px;
}

.linha-filtros {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.linha-filtros input,
.linha-filtros select,
select {
    width: 100%;

    padding: 12px 14px;

    font-size: .95rem;

    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    background: #ffffff;

    transition: .25s;

    cursor: pointer;
}

.linha-filtros input:focus,
.linha-filtros select:focus,
select:focus {
    outline: none;

    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .12);
}

.linha-filtros input:hover,
.linha-filtros select:hover,
select:hover {
    border-color: var(--cor-secundaria);
}

/* ==========================================================
   ESTATÍSTICAS
========================================================== */

.estatisticas {
    padding: 14px 0 10px;
}

.cards-estatisticas {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.secao-distribuicao {
    margin-top: 18px;
}

.card-estatistica {
    position: relative;

    background: #ffffff;

    border: 1px solid #e4ebf3;
    border-radius: 14px;

    padding: 14px 16px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .05);

    transition: .25s;
}

.card-estatistica:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .10);
}

.card-estatistica span {
    position: absolute;

    top: 12px;
    right: 14px;

    font-size: 1.1rem;

    opacity: .45;
}

.card-estatistica h3 {
    margin: 0;

    font-size: 1.8rem;

    color: var(--cor-primaria);

    line-height: 1;
}

.card-estatistica small {
    display: block;

    margin-top: 6px;

    font-size: .78rem;

    color: var(--cor-texto-claro);

    font-weight: 600;
}

/* ==========================================================
   CABEÇALHO DA LISTA
========================================================== */

.cabecalho-lista {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}

.cabecalho-lista h2 {
    font-size: 1.8rem;

    color: var(--cor-primaria);
}

#contadorResultados {
    font-weight: 600;

    color: var(--cor-texto-claro);
}
/* ==========================================================
   LISTA DE ATIVIDADES
========================================================== */

.lista-atividades {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(260px, 1fr));

    gap: 16px;

    align-items: stretch;
}

/* ==========================================================
   CARD
========================================================== */

.card {
    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(0, 0, 0, .05);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    min-width: 0;
}

.card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .14);
}

.card-topo {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    padding: 18px 18px 8px;
}

.categoria {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: .80rem;

    font-weight: 700;

    white-space: nowrap;
}

.data {
    font-size: .85rem;

    color: var(--cor-texto-claro);

    font-weight: 600;

    white-space: nowrap;
}

.card-topo .data {
    margin-left: auto;

    text-align: right;

    flex-shrink: 0;
}

.card h3 {
    padding: 0 18px;

    margin: 0 0 10px;

    font-size: 1.18rem;

    line-height: 1.35;

    color: var(--cor-primaria);

    min-height: 64px;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.card h3:hover {
    color: var(--cor-destaque);
}

.descricao {
    padding: 0 18px;

    min-height: 54px;

    color: #64748b;

    font-size: .94rem;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.card-info {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    margin-top: auto;

    font-size: .84rem;

    color: #64748b;

    border-top: 1px solid #edf2f7;

    flex-wrap: wrap;
}

.card-info span {
    display: flex;

    align-items: center;

    gap: 6px;

    font-weight: 500;

    min-width: 0;
}

/* ==========================================================
   BOTÕES
========================================================== */

.botao {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 10px;

    background: var(--cor-primaria);

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    border: none;

    cursor: pointer;

    transition:
        background .25s,
        transform .25s,
        box-shadow .25s;
}

.botao:hover {
    background: var(--cor-destaque);

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(13, 71, 161, .25);
}

.botao:active {
    transform: scale(.98);
}

.card .botao {
    width: calc(100% - 36px);

    margin: 14px 18px 18px;
}

/* ==========================================================
   BOTÃO SECUNDÁRIO
========================================================== */

.botao-secundario {
    background: #ffffff;

    color: var(--cor-primaria);

    border: 1px solid var(--cor-borda);
}

.botao-secundario:hover {
    background: #eef5fd;

    color: var(--cor-primaria);

    box-shadow: none;
}

/* ==========================================================
   DESTAQUES
========================================================== */

.destaques {
    padding: 0;
    margin-top: -20px;
}

.destaques .lista-atividades {
    gap: 18px;
}

.destaques .card {
    min-height: 0;
}

.destaques .card-topo {
    padding: 16px 18px 8px;
}

.destaques .card .categoria {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin: 8px 14px 12px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}

.destaques .card .link-ver {
    display: block;

    margin-top: auto;
    padding: 2px 12px 6px 0;

    text-align: right;

    font-size: .78rem;
    font-weight: 700;

    color: var(--cor-primaria);

    text-decoration: none;
}

.destaques .card .link-ver:hover {
    text-decoration: underline;
}

.destaques .card h3 {
    min-height: auto;

    font-size: 1.18rem;

    margin-bottom: 10px;
}

.destaques .descricao {
    min-height: 52px;

    -webkit-line-clamp: 2;
}

.destaques .botao {
    margin-top: auto;
}
.destaques .titulo-secao {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.destaques .titulo-secao h2 {
    margin: 0;
}

.destaques .titulo-secao p {
    margin: 0;
    font-size: .82rem;
    color: var(--cor-texto-claro);
}
    
/* ==========================================================
   SEM RESULTADOS
========================================================== */

.sem-resultados {
    text-align: center;

    padding: 50px 20px;

    color: var(--cor-texto-claro);
}

.sem-resultados h3 {
    margin-bottom: 12px;

    color: var(--cor-primaria);
}
/* ==========================================================
   CALENDÁRIO
========================================================== */

.calendario {
    padding: 18px 0 2px;
}

.cabecalho-calendario {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 16px;

    flex-wrap: wrap;
}

.cabecalho-calendario h2 {
    min-width: 220px;

    text-align: center;

    color: var(--cor-primaria);

    font-size: 1.55rem;
}

.grelha-calendario {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 2px;

    background: var(--cor-borda);

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 24px;
}

.dia-semana {
    background: var(--cor-primaria);

    color: #ffffff;

    text-align: center;

    padding: 10px;

    font-weight: 700;
}

#diasCalendario {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    grid-column: 1 / -1;

    gap: 2px;

    background: var(--cor-borda);
}

.dia {
    background: #ffffff;

    min-height: 80px;

    padding: 8px;

    display: flex;

    flex-direction: column;
    align-items: flex-start;

    transition: .25s;

    cursor: pointer;

    overflow: hidden;

    min-width: 0;
}

.dia:hover {
    background: #f7fbff;
}

.numero-dia {
    font-weight: 700;

    color: var(--cor-primaria);

    margin-bottom: 6px;
}

.lista-atividades-dia {
    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 6px;

    width: 100%;

    min-width: 0;
}

.atividade-calendario {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 3px 6px;

    border-radius: 6px;

    color: #ffffff;

    text-decoration: none;

    font-size: .72rem;

    line-height: 1.2;

    overflow: hidden;

    transition: .2s;

    width: 100%;

    box-sizing: border-box;

    min-width: 0;
}

.atividade-calendario:hover {
    transform: scale(1.02);

    filter: brightness(.92);
}

.atividade-calendario .icone {
    flex: 0 0 auto;
}

.atividade-calendario .titulo {
    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

/* ==========================================================

/* ==========================================================
   MARCADOR DO DIA
========================================================== */

.marcador-dia {
    margin-top: auto;

    color: var(--cor-primaria);

    font-size: .90rem;

    letter-spacing: 2px;
}


/* ==========================================================
   ATIVIDADES NO CALENDÁRIO
========================================================== */

.evento-calendario {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;

    margin-top: 5px;

    padding: 5px 7px 5px 10px;

    box-sizing: border-box;

    background: #ffffff !important;

    border: 1px solid #dbe4ee;

    border-left: 8px solid var(--cor-categoria, #64748b);

    border-radius: 6px;

    color: #334155 !important;

    font-size: .72rem;

    font-weight: 600;

    line-height: 1.25;

    text-align: left;

    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, .06);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}


.evento-calendario:hover {

    transform: translateY(-1px);

    border-color: #64748b;

    box-shadow:
        0 3px 8px rgba(15, 23, 42, .12);

}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 700px) {

    .evento-calendario {

        padding: 4px 6px 4px 8px;

        font-size: .68rem;

    }

}
/* ==========================================================
   MINI CALENDÁRIO
========================================================== */

.mini-calendario {
    width: 100%;

    background: #ffffff;

    border: 1px solid var(--cor-borda);

    border-radius: 16px;

    padding: 4px 8px;

    box-sizing: border-box;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .05);
}

.mini-calendario h3 {
    margin-bottom: 14px;
}

.mini-calendario table {
    width: 100%;

    border-collapse: collapse;

    text-align: center;
}

.mini-calendario th {
    padding: 4px;

    color: var(--cor-secundaria);

    font-size: .80rem;
}

.mini-calendario td {
    padding: 1px 4px;

    border-radius: 8px;
}

.mini-calendario td.hoje {
    background: var(--cor-secundaria);

    color: #ffffff;

    font-weight: 700;
}

/* ==========================================================
   CARTÃO POP-UP DE ATIVIDADES
========================================================== */

.mini-cartao-atividades {
    display: none;
    position: fixed;
    z-index: 1000;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(360px, calc(100vw - 32px));

    padding: 20px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .18);

    border: 1px solid #dbe4ef;
}

.mini-cartao-atividades.visivel {
    display: block;
}

.mini-cartao-fechar {
    position: absolute;

    top: 8px;
    right: 10px;

    border: 0;
    background: transparent;

    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;

    color: #64748b;
}

.mini-cartao-atividades h4 {
    margin: 0 30px 16px 0;

    font-size: 1rem;

    color: #17365d;
}

.mini-cartao-atividade {
    padding: 12px 0;

    border-top: 1px solid #e5e7eb;
}

.mini-cartao-atividade strong {
    display: block;

    margin-bottom: 8px;

    color: #243447;

    font-size: .9rem;
}

.mini-cartao-ver {
    border: 0;

    padding: 6px 10px;

    border-radius: 6px;

    background: #0b4ea2;

    color: #ffffff;

    cursor: pointer;

    font-size: .78rem;
}

/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard {
    padding: 24px 0;
}

.grelha-dashboard {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;
}

.card-dashboard {
    background: #ffffff;

    border-radius: var(--raio);

    padding: 20px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .06);
}

.card-dashboard h3 {
    margin-bottom: 12px;

    color: var(--cor-primaria);
}

.card-dashboard .valor {
    font-size: 2rem;

    font-weight: 700;

    color: var(--cor-primaria);
}
/* ==========================================================
   PÁGINA DA ATIVIDADE — LAYOUT FINAL
========================================================== */

.detalhe-atividade {
    width: 100%;
    max-width: none;

    margin: 12px 0 20px;

    background: #ffffff;

    border: 1px solid var(--cor-borda);

    border-radius: 18px;

    padding: 16px 28px 24px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .05);
}

/* ==========================================================
   CABEÇALHO DA ATIVIDADE
========================================================== */

.detalhe-topo {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px 24px;

    margin-bottom: 20px;

    align-items: end;
}


/* ==========================================================
   TÍTULO / CATEGORIA
========================================================== */

.detalhe-titulo {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
}


.detalhe-topo h1,
.detalhe-topo h2 {
    margin: 0;

    font-size: 1.65rem;

    line-height: 1.25;

    color: var(--cor-primaria);

    min-width: 0;
}


/* ==========================================================
   DATA / EIXO
========================================================== */

.detalhe-meta {
    grid-column: 2;

    grid-row: 1;

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    align-items: center;

    gap: 14px;

    margin: 0;

    padding-bottom: 2px;

    font-size: .85rem;

    color: var(--cor-texto-claro);
}


.detalhe-meta span {
    white-space: nowrap;
}


.detalhe-meta strong {
    color: var(--cor-primaria);
}

/* ==========================================================
   SECÇÕES
========================================================== */

.detalhe-atividade .bloco {
    width: 100%;

    margin-bottom: 18px;
}

.detalhe-atividade .bloco h2,
.detalhe-atividade .bloco h3 {
    margin: 0 0 8px;

    padding-bottom: 5px;

    border-bottom: 2px solid #e5edf7;

    color: var(--cor-primaria);

    font-size: .95rem;
}

/* ==========================================================
   GRELHAS DA ATIVIDADE
========================================================== */

.detalhe-atividade .grelha-info {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.detalhe-atividade .grelha-info > div {
    min-width: 0;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 10px;

    padding: 9px 11px;
}

.detalhe-atividade .grelha-info > .campo-largo {
    grid-column: span 2;
}

.detalhe-atividade .grelha-info strong {
    display: block;

    margin-bottom: 3px;

    font-size: .72rem;

    color: var(--cor-primaria);
}

.detalhe-atividade .grelha-info p {
    margin: 0;

    font-size: .82rem;

    line-height: 1.3;

    color: var(--cor-texto);

    overflow-wrap: anywhere;
}

/* ==========================================================
   LINK DE RECURSO DA ATIVIDADE
========================================================== */

.link-atividade {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--cor-primaria);

    font-weight: 600;

    text-decoration: none;

    font-size: .9rem;

}


.link-atividade:hover {

    text-decoration: underline;

}

/* ==========================================================
   PASTA / FICHEIROS
========================================================== */

.campo-pasta {
    margin-top: 12px;

    padding: 12px;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 10px;
}

.campo-pasta strong {
    display: block;

    margin-bottom: 6px;

    font-size: .72rem;

    color: var(--cor-primaria);
}

/* ==========================================================
   NAVEGAÇÃO ENTRE ATIVIDADES
========================================================== */

.detalhe-atividade .navegacao-atividades {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;
}

.voltar {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: var(--cor-primaria);

    font-weight: 700;
}

.voltar:hover {
    color: var(--cor-destaque);
}

/* ==========================================================
   GALERIA
========================================================== */

.galeria {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));

    gap: 18px;
}

.galeria img {
    width: 100%;

    height: 170px;

    object-fit: cover;

    border-radius: 12px;

    cursor: pointer;

    transition: .25s;
}

.galeria img:hover {
    transform: scale(1.03);
}

/* ==========================================================
   DOCUMENTOS
========================================================== */

.lista-documentos {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.documento {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 12px;

    padding: 14px 18px;
}

.documento:hover {
    background: #eef5ff;
}

/* ==========================================================
   BALANÇO
========================================================== */

.painel-balanco {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.painel-balanco > div {
    background: #ffffff;

    padding: 16px;

    border-radius: 12px;

    border: 1px solid var(--cor-borda);

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .05);
}

.linha-balanco {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid #eef2f7;
}

.linha-balanco:last-child {
    border-bottom: none;
}

.linha-balanco span {
    color: var(--cor-texto);
}

.linha-balanco strong {
    color: var(--cor-primaria);

    font-size: 1rem;
}
/* ==========================================================
   RODAPÉ
========================================================== */

.rodape {
    margin-top: 40px;

    padding: 20px 0;

    background: var(--cor-primaria);

    color: #ffffff;
}

.rodape .container {
    text-align: center;
}

.rodape p {
    margin: 4px 0;

    color: #ffffff;

    opacity: .92;

    font-size: .90rem;
}

/* ==========================================================
   ANIMAÇÕES GERAIS
========================================================== */

.card,
.card-estatistica,
.botao,
select,
#pesquisa {
    transition:
        all .25s ease;
}

#pesquisa:focus {
    outline: none;

    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .15);
}

/* ==========================================================
   RESPONSIVIDADE — 1100px
========================================================== */

@media (max-width: 1100px) {

    .container {
        width: min(100% - 32px, var(--largura));
    }

    .cards-estatisticas {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .detalhe-atividade .grelha-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .detalhe-atividade .grelha-info > .campo-largo {
        grid-column: span 2;
    }
}

/* ==========================================================
   RESPONSIVIDADE — 900px
========================================================== */

@media (max-width: 900px) {

    .barra-superior {
        flex-wrap: wrap;

        padding: 10px 0;
    }

    .pesquisa-topo {
        width: 100%;

        margin-left: 0;

        order: 3;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .hero h2 {
        font-size: 1.8rem;
    }

    .linha-filtros {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cards-estatisticas {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cabecalho-lista {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .painel-grid {
        grid-template-columns: 1fr;
    }

    .painel-balanco {
        grid-template-columns: 1fr;
    }

    .detalhe-atividade .grelha-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .detalhe-atividade .grelha-info > .campo-largo {
        grid-column: span 2;
    }
}

/* ==========================================================
   RESPONSIVIDADE — 700px
========================================================== */

@media (max-width: 700px) {

    .container {
        width: min(100% - 24px, var(--largura));
    }

    .hero {
        min-height: 220px;
    }

    .hero .container {
        min-height: 220px;
    }

    .hero h1 {
        font-size: 1.75rem;

        white-space: normal;
    }

    .hero h2 {
        font-size: 1.6rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-acoes {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-acoes .botao {
        width: 100%;
    }

    .linha-filtros {
        grid-template-columns: 1fr;
    }

    .cards-estatisticas {
        grid-template-columns: 1fr;
    }

    .lista-atividades {
        grid-template-columns: 1fr;
    }

    .card-topo {
        flex-direction: column;

        align-items: flex-start;
    }

    .card-topo .data {
        margin-left: 0;

        text-align: left;
    }

    #atividadesDestaque {
        grid-template-columns: 1fr;
    }

    .grelha-calendario {
        overflow-x: auto;
    }

    .detalhe-topo {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }

    .detalhe-meta {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

    .detalhe-atividade {
        padding: 20px;
    }

    .detalhe-atividade .grelha-info {
        grid-template-columns: 1fr;
    }

    .detalhe-atividade .grelha-info > .campo-largo {
        grid-column: span 1;
    }

    .detalhe-atividade .navegacao-atividades {
        flex-direction: column;

        align-items: stretch;
    }

    .detalhe-atividade .navegacao-atividades .botao {
        width: 100%;
    }
}

/* ==========================================================
   RESPONSIVIDADE — 600px
========================================================== */

@media (max-width: 600px) {

    body {
        font-size: 15px;
    }

    section {
        margin-bottom: 22px;
    }

    .topo {
        position: relative;
    }

    .marca {
        width: 100%;
    }

    .marca small {
        white-space: normal;
    }

    .hero-home h2 {
        font-size: 1.5rem;
    }

    .hero-calendario h2 {
        font-size: 1.45rem;
    }

    .dia {
        min-height: 70px;

        padding: 6px;
    }

    .atividade-calendario {
        font-size: .68rem;
    }
}
/* ==========================================================
   PORTAL PRINCIPAL — ESTRUTURA COM MENU LATERAL
========================================================== */

.layout-portal {
    display: flex;
    min-height: 100vh;
    width: 100%;

    background: #f4f7fb;
}

/* ==========================================================
   MENU LATERAL
========================================================== */

.menu-lateral {
    width: 200px;
    min-width: 200px;

    min-height: 100vh;

    background: #0f2747;
    color: #ffffff;

    display: flex;
    flex-direction: column;

    padding: 24px 18px;

    flex-shrink: 0;
}

.menu-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 32px;
}

.menu-logo img {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    object-fit: contain;

    margin-bottom: 12px;
}

.menu-logo h2 {
    margin: 0 0 4px;

    font-size: 1.35rem;

    color: #ffffff;
}
.menu-logo h2 {
    white-space: nowrap;
    font-size: 1.15rem;
}

.menu-logo p {
    margin: 0;

    font-size: .9rem;

    color: #ffffff;

    opacity: .8;
}

/* ==========================================================
   NAVEGAÇÃO LATERAL
========================================================== */

.menu-lateral nav {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
}

.menu-lateral nav a {
    display: flex;
    align-items: center;

    width: 100%;

    color: #ffffff;

    text-decoration: none;

    padding: 12px 14px;

    border-radius: 10px;

    font-weight: 600;

    transition:
        background .25s ease,
        transform .20s ease;
}

.menu-lateral nav a:hover {
    background: rgba(255, 255, 255, .12);

    transform: translateX(2px);
}

.menu-lateral nav a.ativo {
    background: #0aa5b8;

    color: #ffffff;
}

/* ==========================================================
   ÁREA PRINCIPAL DO PORTAL
========================================================== */

.conteudo-principal {
    flex: 1;

    min-width: 0;

    width: calc(100% - 250px);
}

/*
   Quando existe menu lateral, o conteúdo não deve ficar
   limitado artificialmente a uma coluna estreita.
*/

.conteudo-principal > .container {
    width: min(
        calc(100% - 40px),
        1400px
    );

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   HEADER DO PORTAL COM MENU
========================================================== */

.conteudo-principal .topo {
    width: 100%;
}

/* ==========================================================
   LOGO — IMPEDIR DIMENSÃO GIGANTE
========================================================== */

.conteudo-principal .logo img,
.conteudo-principal .cabecalho img {
    max-width: 90px;
    max-height: 90px;

    width: auto;
    height: auto;

    object-fit: contain;
}

/* ==========================================================
   RESPONSIVO — TABLET
========================================================== */

@media (max-width: 900px) {

    .layout-portal {
        display: block;
    }

    .menu-lateral {
        width: 100%;
        min-width: 0;
        min-height: auto;

        padding: 14px 16px;
    }

    .menu-logo {
        margin-bottom: 14px;
    }

    .menu-logo img {
        width: 58px !important;
        height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;
    }

    .menu-lateral nav {
        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;
    }

    .menu-lateral nav a {
        width: auto;
    }

    .conteudo-principal {
        width: 100%;
    }

    .conteudo-principal > .container {
        width: min(
            calc(100% - 32px),
            1400px
        );
    }
}

/* ==========================================================
   RESPONSIVO — TELEMÓVEL
========================================================== */

@media (max-width: 600px) {

    .menu-lateral nav {
        flex-direction: column;
    }

    .menu-lateral nav a {
        width: 100%;
    }

    .conteudo-principal > .container {
        width: calc(100% - 24px);
    }
}

/* ==========================================================
   PAINEL PRINCIPAL — CALENDÁRIO + ESTATÍSTICAS + FILTROS
========================================================== */

.painel-principal {
    width: 100%;
    padding: 0 14px;
    margin-top: -10px;
    margin-bottom: 0px;
}

.painel-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    align-items: stretch;
}

/* ==========================================================
   PAINÉIS
========================================================== */

.painel-calendario,
.painel-estatisticas,
.painel-filtros {
    width: 100%;
    min-width: 0;

    background: #ffffff;

    border-radius: 16px;

    padding: 10px;

    border: 1px solid var(--cor-borda);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .05);
}


/* ==========================================================
   CALENDÁRIO
========================================================== */

.painel-calendario {
    min-height: 0;
}

#miniCalendario {
    width: 100%;

    min-height: 0px;
    height: auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px dashed var(--cor-borda);

    border-radius: 12px;

    margin-bottom: 8px;
}


/* ==========================================================
   ESTATÍSTICAS
========================================================== */

.painel-estatisticas {
    min-height: 0;
}

.cards-estatisticas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.painel-estatisticas .card-estatistica {
    display: grid !important;

    grid-template-columns: 16px minmax(0, 1fr) minmax(90px, auto);

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 8px 10px;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 10px;

    position: static !important;
}

.painel-estatisticas .card-estatistica span {
    position: static !important;

    display: block;

    width: auto;
    height: auto;

    margin: 0 !important;

    font-size: 1rem;

    line-height: 1;

    text-align: center;
}

.painel-estatisticas .card-estatistica h3 {
    position: static !important;

    margin: 0 !important;

    font-size: 1rem;

    line-height: 1.2;

    color: var(--cor-primaria);
}

.painel-estatisticas .card-estatistica small {
    position: static !important;

    margin: 0 !important;

    font-size: .72rem;

    line-height: 1.2;

    color: var(--cor-texto-claro);

    text-align: right;
}
.painel-estatisticas .cards-estatisticas {
    margin-top: 8px;
}

.painel-estatisticas .card-estatistica {
    min-height: 40px;
}

.painel-filtros select {
    min-height: 40px;
}

.painel-filtros select[multiple] {
    min-height: 40px;
    height: auto;
}

.painel-filtros select[multiple] option {
    padding: 4px 6px;
}

.painel-estatisticas .card-estatistica {
    min-height: 40px;
}

.painel-estatisticas .card-estatistica h3 {
    white-space: normal;
    font-size: .9rem;
    line-height: 1.25;
    padding-left: 6px;
}

.painel-estatisticas .card-estatistica small {
    white-space: nowrap;
}
/* ==========================================================
   FILTROS
========================================================== */

.painel-filtros {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.painel-filtros h3 {
    margin: 0;

    color: var(--cor-primaria);

    font-size: .95rem;
}
.painel-calendario .titulo-secao h2,
.painel-estatisticas .titulo-secao h2,
.painel-filtros .titulo-secao h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}
.painel-filtros select,
.painel-filtros input {
    width: 100%;

    font-size: .82rem;
    line-height: 1.2;

    padding: 8px 10px;
}
/* ==========================================================
   OUTROS
========================================================== */

.brevemente {
    color: var(--cor-texto-claro);

    text-align: center;
}


/* ==========================================================
   PAINEL PRINCIPAL — TABLET
========================================================== */

@media (max-width: 900px) {

    .painel-grid {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================
   CARDS — COMPACTAÇÃO FINAL DO PORTAL
========================================================== */

.lista-atividades {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

/* ==========================================================
   DESTAQUES
========================================================== */

.destaques .lista-atividades {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.destaques .card {
    min-width: 0;
}

.destaques .card-topo {
    padding: 12px 14px 6px;

    gap: 8px;
}

.destaques .card h3 {
    padding: 0 14px;

    margin-bottom: 7px;

    font-size: 1rem;

    line-height: 1.25;

    min-height: 50px;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.destaques .descricao {
    padding: 0 14px;

    min-height: 42px;

    font-size: .82rem;

    line-height: 1.3;

    -webkit-line-clamp: 2;
}

.destaques .card-info {
    padding: 9px 14px;

    font-size: .74rem;

    gap: 6px;
}

.destaques .card .botao {
    width: calc(100% - 28px);

    margin: 10px 14px 14px;

    padding: 9px 12px;

    font-size: .80rem;
}

/* ==========================================================
   LISTA GERAL
========================================================== */

.lista-atividades .card .categoria {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin: 8px 14px 12px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}

.lista-atividades .card-topo {
    padding: 12px 14px 6px;
}

.lista-atividades .card h3 {
    padding: 0 14px;

    font-size: 1rem;

    line-height: 1.28;

    min-height: 42px;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.lista-atividades .descricao {
    padding: 0 14px;

    min-height: 42px;

    font-size: .82rem;

    line-height: 1.3;

    -webkit-line-clamp: 2;
}

.lista-atividades .card-info {
    padding: 9px 14px;

    font-size: .74rem;
}

.lista-atividades .card .link-ver {
    display: block;

    margin-top: auto;
   padding: 2px 12px 6px 0;

    text-align: right;

    font-size: .78rem;
    font-weight: 700;

    color: var(--cor-primaria);

    text-decoration: none;
}

.lista-atividades .card .link-ver:hover {
    text-decoration: underline;
}
/* ==========================================================
   ECRÃ MÉDIO
========================================================== */

@media (max-width: 1100px) {

    .lista-atividades,
    .destaques .lista-atividades {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .lista-atividades,
    .destaques .lista-atividades {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   TELEMÓVEL
========================================================== */

@media (max-width: 600px) {

    .lista-atividades,
    .destaques .lista-atividades {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   TÍTULO DOS CARDS — MÁXIMO 2 LINHAS
========================================================== */

.card h3,
.destaques .card h3,
.lista-atividades .card h3 {

    min-height: 2.6em;

    line-height: 1.3;

    white-space: normal;

    overflow: hidden;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow-wrap: anywhere;
}

/* ==========================================================
   NOME DA ESCOLA — UMA LINHA
========================================================== */

.menu-logo h2 {
    display: block !important;

    width: 100% !important;

    max-width: none !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    font-size: 1.05rem !important;

    line-height: 1.2 !important;

    text-align: center !important;
}
/* ==========================================================
   HERO — NOME DO AGRUPAMENTO NUMA ÚNICA LINHA
========================================================== */

.hero-home .hero-texto h1 {
    white-space: nowrap !important;
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}
/* ==========================================================
   MINI CALENDÁRIO — COMPACTAÇÃO FINAL
========================================================== */

.mini-calendario h3 {
    margin-bottom: 6px;
}

.mini-calendario th {
    padding: 2px 4px;
    font-size: .75rem;
    line-height: 1;
}

.mini-calendario td {
    padding: 1px 4px;
    font-size: .80rem;
    line-height: 1;
    height: 24px;
}
.mini-atividade-indicador {
    display: block;
    width: 6px;
    height: 6px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: #0b4ea2;
}
/* ==========================================================
   AJUSTE VISUAL — PÁGINA CALENDÁRIO
   Portal PAA AEA
   ----------------------------------------------------------
   Compactação específica do calendário completo.
   Não altera o mini-calendário nem a ficha da atividade.
========================================================== */


/* ==========================================================
   CABEÇALHO DO CALENDÁRIO
========================================================== */

.cabecalho-calendario {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    flex-wrap: nowrap;

}


/* Setas de navegação */

.cabecalho-calendario .botao {

    min-width: 44px;

    height: 38px;

    padding: 4px 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    line-height: 1;

}


/* Título do mês */

#tituloCalendario {

    margin: 0;

    min-width: 190px;

    text-align: center;

    font-size: 21px;

    line-height: 1.2;

}


/* ==========================================================
   GRELHA DOS DIAS DA SEMANA
========================================================== */

.grelha-calendario {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 4px;

}


/* Cabeçalho dos dias */

.dia-semana {

    min-height: 28px;

    padding: 5px 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    line-height: 1;

}


/* ==========================================================
   DIAS DO CALENDÁRIO
========================================================== */

.dias-calendario {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 4px;

}


.dia {

    min-height: 72px;

    padding: 6px;

    border-radius: 8px;

    overflow: hidden;

}


/* Número do dia */

.numero-dia {

    font-size: 12px;

    line-height: 1;

    margin-bottom: 4px;

}


/* ==========================================================
   ATIVIDADES DENTRO DOS DIAS
========================================================== */

.lista-atividades-dia {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.atividade-calendario {

    min-height: 22px;

    padding: 3px 5px;

    display: flex;

    align-items: center;

    gap: 4px;

    border-radius: 5px;

    font-size: 11px;

    line-height: 1.15;

}


.atividade-calendario .icone {

    flex: 0 0 auto;

    font-size: 11px;

}


.atividade-calendario .titulo {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/* ==========================================================
   LEGENDA DO CALENDÁRIO
========================================================== */

.legenda-calendario {

    margin-top: 10px;

    padding: 12px 16px;

    width: 100%;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid var(--cor-borda);

    border-radius: 16px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .05);
}


.legenda-calendario h3 {

    margin: 0 0 8px;

    color: var(--cor-primaria);

    font-size: 1rem;
}


.legenda-itens {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px 16px;

    width: 100%;
}

.legenda-categoria {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    color: var(--cor-texto);

    font-size: .85rem;

    line-height: 1.3;

    white-space: nowrap;
}


.legenda-categoria .cor {

    width: 14px;
    height: 14px;

    display: inline-block;

    flex: 0 0 14px;

    border-radius: 50%;
}
/* ==========================================================
   ECRÃS MAIS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .cabecalho-calendario {

        gap: 8px;

    }


    #tituloCalendario {

        min-width: 150px;

        font-size: 18px;

    }


    .cabecalho-calendario .botao {

        min-width: 38px;

        height: 36px;

        font-size: 16px;

    }


    .dia {

        min-height: 52px;

        padding: 4px;

    }


    .atividade-calendario {

        font-size: 10px;

    }


    .legenda-calendario {

        overflow-x: auto;

        white-space: nowrap;

    }

}

.dia {

    min-height: 58px;

    padding: 5px;

    border-radius: 8px;

    overflow: hidden;

}
/* ==========================================================
   LEGENDA DO CALENDÁRIO — ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .legenda-itens {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}


/* ==========================================================
   LEGENDA DO CALENDÁRIO — ECRÃS MUITO PEQUENOS
========================================================== */

@media (max-width: 600px) {

    .legenda-itens {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}

/* ==========================================================
   MINI CALENDÁRIO — NAVEGAÇÃO
========================================================== */

.mini-calendario-navegacao {

    width: 32px;
    min-width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 6px;

    background: transparent;

    font-size: 26px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}


.mini-calendario-navegacao:hover {

    background-color: #f1f5f9;

    transform: scale(1.08);
}


.mini-calendario-navegacao:active {

    transform: scale(0.96);
}
/* ==========================================================
   MINI CALENDÁRIO — INDICADOR DE ATIVIDADE
========================================================== */

.mini-atividade-indicador {

    width: 8px;
    height: 8px;

    padding: 0;
    margin: 3px auto 0;

    display: block;

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);

    cursor: pointer;
}
/* ==========================================================
   GRÁFICOS — ESTATÍSTICAS
========================================================== */

.estatisticas-graficos {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin-top: 24px;

}


/* ==========================================================
   CARTÃO DO GRÁFICO
========================================================== */

.grafico-estatistica {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 24px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.06);

    min-width: 0;

}


/* ==========================================================
   TÍTULO
========================================================== */

.grafico-titulo {

    margin: 0 0 22px 0;

    font-size: 1.15rem;

    font-weight: 700;

    color: #1f2937;

}


/* ==========================================================
   ÁREA DAS BARRAS
========================================================== */

.grafico-barras {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


/* ==========================================================
   LINHA
========================================================== */

.grafico-linha {

    display: grid;

    grid-template-columns:
        minmax(90px, 130px)
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;

}


/* ==========================================================
   NOME
========================================================== */

.grafico-nome {

    font-size: 0.88rem;

    color: #374151;

    line-height: 1.25;

    overflow-wrap: anywhere;

}


/* ==========================================================
   ÁREA DA BARRA
========================================================== */

.grafico-barra-area {

    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    min-height: 24px;

}


/* ==========================================================
   BARRA
========================================================== */

.grafico-barra {

    height: 20px;

    min-width: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    transition:
        width 0.4s ease;

}


/* ==========================================================
   VALOR
========================================================== */

.grafico-valor {

    margin-left: 8px;

    font-size: 0.85rem;

    font-weight: 700;

    color: #1f2937;

    flex-shrink: 0;

}


/* ==========================================================
   SEM DADOS
========================================================== */

.grafico-sem-dados {

    margin: 0;

    color: #6b7280;

    font-size: 0.9rem;

}


/* ==========================================================
   ECRÃS MÉDIOS
========================================================== */

@media (max-width: 1100px) {

    .estatisticas-graficos {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 700px) {

    .estatisticas-graficos {

        grid-template-columns:
            1fr;

    }


    .grafico-estatistica {

        padding: 18px;

    }


    .grafico-linha {

        grid-template-columns:
            minmax(85px, 120px)
            minmax(0, 1fr);

        gap: 8px;

    }


    .grafico-nome {

        font-size: 0.82rem;

    }


    .grafico-valor {

        font-size: 0.8rem;

    }

}

/* ==========================================================
   PÁGINA DE ESTATÍSTICAS — INDICADORES PRINCIPAIS
========================================================== */

body:has(#graficoMeses) .cards-estatisticas {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 24px;

}


/* ==========================================================
   CARTÃO
========================================================== */

body:has(#graficoMeses) .cards-estatisticas .card-estatistica {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 145px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.06);

    text-align: center;

}


/* ==========================================================
   ÍCONE
========================================================== */

body:has(#graficoMeses) .cards-estatisticas .card-estatistica span {

    position: static !important;

    width: auto;

    height: auto;

    margin: 0 0 10px 0 !important;

    font-size: 1.8rem;

    line-height: 1;

}


/* ==========================================================
   NÚMERO
========================================================== */

body:has(#graficoMeses) .cards-estatisticas .card-estatistica h3 {

    position: static !important;

    margin: 0 0 6px 0 !important;

    font-size: 2rem;

    line-height: 1;

    font-weight: 700;

    color: var(--cor-primaria);

}


/* ==========================================================
   DESCRIÇÃO
========================================================== */

body:has(#graficoMeses) .cards-estatisticas .card-estatistica small {

    position: static !important;

    margin: 0 !important;

    font-size: 0.82rem;

    line-height: 1.3;

    color: var(--cor-texto-claro);

    white-space: normal;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .cards-estatisticas {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ==========================================================
   TELEMÓVEL
========================================================== */

@media (max-width: 600px) {

    .cards-estatisticas {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .cards-estatisticas .card-estatistica {

        min-height: 125px;

    }

}
/* ==========================================================
   PÁGINA DE ESTATÍSTICAS — 5 INDICADORES
========================================================== */

/*
   Os cinco blocos seguintes passam a funcionar
   como uma grelha:
   
   Linha 1 → 2 blocos
   Linha 2 → 3 blocos
*/

body:has(#estatisticasMes)
    .container:has(#estatisticasMes),

body:has(#estatisticasMes)
    .container:has(#estatisticasGrupos) {

    width: auto;

}


/* ==========================================================
   GRELHA DOS 5 INDICADORES
========================================================== */

body:has(#estatisticasMes) {

    --estatisticas-gap: 20px;

}


/*
   A partir da secção "Atividades por mês",
   os blocos são posicionados numa grelha.
*/

body:has(#estatisticasMes)
    #estatisticasMes {

    margin: 0;

}


/* ==========================================================
   CARTÕES DE DISTRIBUIÇÃO
========================================================== */

body:has(#estatisticasMes)
    .estatisticas-lista {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.06);

}


/* ==========================================================
   TÍTULOS
========================================================== */

body:has(#estatisticasMes)
    .titulo-secao {

    margin-bottom: 16px;

}


body:has(#estatisticasMes)
    .titulo-secao h2 {

    margin-bottom: 6px;

}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width: 900px) {

    body:has(#estatisticasMes)
        .estatisticas-lista {

        padding: 16px;

    }

}

/* ==========================================================
   GRELHA DAS ESTATÍSTICAS DETALHADAS
========================================================== */

.grelha-estatisticas-detalhadas {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 20px;

    margin-top: 50px;

    padding-top: 0;
}

/* ==========================================================
   ESPAÇAMENTO — DISTRIBUIÇÃO DAS ATIVIDADES
========================================================== */

.grelha-estatisticas-detalhadas > section {
    padding-top: 40px;
}


/* ==========================================================
   PRIMEIRA LINHA — 2 BLOCOS
========================================================== */

.grelha-estatisticas-detalhadas
> .container:nth-child(1),

.grelha-estatisticas-detalhadas
> .container:nth-child(2) {

    grid-column:
        span 3;

}


/* ==========================================================
   SEGUNDA LINHA — 3 BLOCOS
========================================================== */

.grelha-estatisticas-detalhadas
    > .container:nth-child(3),

.grelha-estatisticas-detalhadas
    > .container:nth-child(4),

.grelha-estatisticas-detalhadas
    > .container:nth-child(5) {

    grid-column:
        span 2;

}


/* ==========================================================
   CONTENTORES
========================================================== */

.grelha-estatisticas-detalhadas
    > .container {

    width: auto;

    margin: 0;

}


/* ==========================================================
   LISTAS
========================================================== */

.grelha-estatisticas-detalhadas
    .estatisticas-lista {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.06);

}


/* ==========================================================
   TÍTULOS
========================================================== */

.grelha-estatisticas-detalhadas
    .titulo-secao {

    margin-bottom: 16px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .grelha-estatisticas-detalhadas {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .grelha-estatisticas-detalhadas
        > .container {

        grid-column:
            span 1;

    }

}


/* ==========================================================
   TELEMÓVEL
========================================================== */

@media (max-width: 600px) {

    .grelha-estatisticas-detalhadas {

        grid-template-columns:
            1fr;

    }


    .grelha-estatisticas-detalhadas
        > .container {

        grid-column:
            span 1;

    }

}

/* ==========================================================
   DOCUMENTOS
========================================================== */

.documentos-pagina {
    padding-top: 20px;
    padding-bottom: 50px;
}

/* ==========================================================
   DOCUMENTOS — PESQUISA
========================================================== */

.documentos-ferramentas {
    width: 100%;
    margin-bottom: 28px;
}

.documentos-ferramentas .pesquisa-banner {
    display: block;

    width: 100%;
    max-width: 680px;
}

.documentos-ferramentas .pesquisa-banner input {
    display: block;

    width: 100%;
    max-width: 680px;

    padding: 14px 20px;

    border: 1px solid var(--cor-borda);
    border-radius: 999px;

    background: #ffffff;

    font-size: .95rem;
    font-weight: 600;

    color: var(--cor-texto);

    outline: none;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, .07);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.documentos-ferramentas .pesquisa-banner input::placeholder {
    color: var(--cor-texto-claro);

    font-weight: 700;

    opacity: 1;
}

.documentos-ferramentas .pesquisa-banner input:hover {
    border-color: var(--cor-secundaria);
}

.documentos-ferramentas .pesquisa-banner input:focus {
    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .10),
        0 5px 16px rgba(15, 23, 42, .07);
}

/* ==========================================================
   LIGAÇÕES ÚTEIS — CABEÇALHO COMPACTO
========================================================== */

.hero-ligacoes {
    min-height: auto;

    padding-top: 28px;
    padding-bottom: 28px;

    background-image: none;
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — PÁGINA
========================================================== */

.ligacoes-pagina {
    padding-top: 32px;
    padding-bottom: 28px;
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — CABEÇALHOS DE SECÇÃO
========================================================== */

.cabecalho-secao {
    margin-top: 10px;
    margin-bottom: 20px;
}


.cabecalho-secao:not(:first-child) {
    margin-top: 30px;
}


.cabecalho-secao h2 {
    margin: 0;

    font-size: 1.35rem;
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — GRELHA
========================================================== */

.grelha-ligacoes {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    width: 100%;

    align-items: stretch;
}

/* ==========================================================
   LIGAÇÕES ÚTEIS — CARTÃO
========================================================== */

.cartao-ligacao {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.05);

    text-decoration: none;

    color: inherit;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.cartao-ligacao:hover {
    transform: translateY(-3px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.09);
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — ÍCONE
========================================================== */

.ligacao-icone {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eef4fb;

    font-size: 1.7rem;
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — CONTEÚDO
========================================================== */

.ligacao-conteudo {
    min-width: 0;
}


.ligacao-conteudo h3 {
    margin: 0 0 6px;

    font-size: 1.05rem;
}


.ligacao-conteudo p {
    margin: 0;

    line-height: 1.5;

    color: #5f6b76;
}


/* ==========================================================
   LIGAÇÕES ÚTEIS — ECRÃS PEQUENOS
========================================================== */

@media (max-width: 600px) {

    .grelha-ligacoes {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================
   HERO — LIGAÇÕES ÚTEIS
   Cabeçalho intermédio com fotografia da escola
========================================================== */

.hero-ligacoes {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(13, 71, 161, .35),
            rgba(13, 71, 161, .35)
        ),
        url("../img/escolabanner.jpg");

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-ligacoes::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, 0)
        );

    pointer-events: none;
}

.hero-ligacoes .container {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-ligacoes .hero-texto {
    position: relative;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-ligacoes .hero-texto h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1.75rem;
    line-height: 1.2;

    white-space: normal;
}

.hero-ligacoes .hero-texto p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .95rem;
    line-height: 1.45;

    max-width: 680px;

    white-space: normal;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 800px) {

    .hero-ligacoes,
    .hero-ligacoes .container {

        min-height: 100px;

    }

    .hero-ligacoes .container {

        padding-top: 16px;
        padding-bottom: 16px;

    }

    .hero-ligacoes .hero-texto h2 {

        font-size: 1.45rem;

    }

    .hero-ligacoes .hero-texto p {

        font-size: .85rem;

    }

}
/* ==========================================================
   AJUSTE — PESQUISA DOCUMENTOS
========================================================== */

.documentos-ferramentas {
    width: 100%;
    margin-bottom: 28px;
}

.documentos-ferramentas .pesquisa-banner {
    width: 100%;
    max-width: 580px;
}

.documentos-ferramentas .pesquisa-banner input {
    width: 100% !important;

    padding: 13px 18px !important;

    border: 1px solid var(--cor-borda) !important;
    border-radius: 999px !important;

    background: #ffffff !important;

    font-size: .95rem !important;
    font-weight: 600 !important;

    color: var(--cor-texto) !important;

    outline: none !important;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, .07) !important;
}

.documentos-ferramentas .pesquisa-banner input::placeholder {
    color: var(--cor-texto-claro) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.documentos-ferramentas .pesquisa-banner input:hover {
    border-color: var(--cor-secundaria) !important;
}

.documentos-ferramentas .pesquisa-banner input:focus {
    border-color: var(--cor-secundaria) !important;

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .10),
        0 5px 16px rgba(15, 23, 42, .07) !important;
}
/* ==========================================================
   CONTADOR — CABEÇALHO DAS ATIVIDADES
========================================================== */

.titulo-secao h2 #contadorResultados {
    display: inline;

    margin-left: 8px;

    font-size: .85rem;
    font-weight: 500;

    color: var(--cor-texto-claro);
}
/* ==========================================================
   ESPAÇAMENTO — PÁGINA DE ATIVIDADES
========================================================== */

.pagina-filtros {
    margin-top: 20px;
    margin-bottom: 14px;
}
/* ==========================================================
   ESPAÇAMENTO — ORDENAÇÃO DAS ATIVIDADES
========================================================== */

.ordenacao {
    margin-bottom: 14px;
}
/* ==========================================================
   TOPO — PÁGINA DE ATIVIDADES
========================================================== */

.topo-atividades {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 28px;

    margin-top: 20px;
    margin-bottom: 28px;

    align-items: stretch;
}


/* ==========================================================
   COLUNA ESQUERDA
========================================================== */

.topo-atividades-esquerda {
    display: flex;
    flex-direction: column;

    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--cor-borda);
    border-radius: 16px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .05);
}


.topo-atividades-esquerda .titulo-secao {
    margin: 0;
}


.topo-atividades-esquerda .titulo-secao h2 {
    margin: 0;
}


/* ==========================================================
   LINHA AZUL
========================================================== */

.linha-ordenacao {
    height: 2px;

    width: 100%;

    margin: 18px 0;
    
    background: var(--cor-primaria);
}


/* ==========================================================
   ORDENAÇÃO
========================================================== */

.topo-atividades-esquerda .ordenacao {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin: 0;
}


.topo-atividades-esquerda .ordenacao label {
    font-weight: 600;
}


.topo-atividades-esquerda .ordenacao select {
    width: 100%;
}


/* ==========================================================
   COLUNA DIREITA
========================================================== */

.topo-atividades-direita {
    min-width: 0;
}


.topo-atividades-direita .pagina-filtros {
    height: 100%;

    margin: 0;
}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width: 800px) {

    .topo-atividades {
        grid-template-columns: 1fr;

        gap: 18px;
    }

}
/* ==========================================================
   AJUSTE FINAL — HERO HOME
========================================================== */

.hero-home .hero-home-conteudo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
    width: 100% !important;
}

.hero-home .hero-home-conteudo .hero-texto {
    flex: 0 1 650px !important;
    max-width: 650px !important;
    min-width: 0 !important;
}

.hero-home .hero-home-conteudo .hero-texto h1 {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
}

.hero-home .hero-home-conteudo .hero-texto p {
    font-size: .88rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.hero-home .hero-home-conteudo .hero-pesquisa {
    flex: 0 0 230px !important;
    width: 230px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.hero-home .hero-home-conteudo .hero-pesquisa input {
    width: 100% !important;
    padding: 8px 12px 8px 34px !important;
    font-size: .78rem !important;
}

/* ==========================================================
   PESQUISA — DOCUMENTOS
========================================================== */

.pesquisa-documentos {

    position: relative;

    width: 100%;
    max-width: 460px;

    margin: 0 0 20px 0;

}


.pesquisa-documentos .sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


.pesquisa-documentos input {

    width: 100%;

    height: 42px;

    box-sizing: border-box;

    padding: 8px 16px 8px 40px;

    border: 1px solid #dbe4ee;

    border-radius: 999px;

    background: #ffffff;

    color: var(--cor-texto);

    font-size: .95rem;

    outline: none;

}


.pesquisa-documentos input:focus {

    border-color: var(--cor-primaria);

}


.pesquisa-documentos .icone-pesquisa {

    position: absolute;

    left: 15px;
    top: 21px;

    transform: translateY(-50%);

    font-size: .9rem;

    line-height: 1;

    z-index: 2;

    pointer-events: none;

}
.pesquisa-banner {
    position: relative;
}

.pesquisa-banner .icone-pesquisa {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: .9rem;
    line-height: 1;

    z-index: 2;
    pointer-events: none;
}

.pesquisa-banner input {
    padding-left: 40px;
}

/* ==========================================================
   FILTROS COM SELEÇÃO MÚLTIPLA — MENU COM CAIXAS DE SELEÇÃO
========================================================== */

.filtro-multiselect {
    position: relative;
    width: 100%;
}

.filtro-multiselect-botao {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: #ffffff;
    color: var(--cor-texto);
    font-size: .82rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.filtro-multiselect-botao:hover,
.filtro-multiselect.aberto .filtro-multiselect-botao {
    border-color: var(--cor-secundaria);
}

.filtro-seta {
    flex: 0 0 auto;
    font-size: .9rem;
}

.filtro-multiselect-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.filtro-multiselect.aberto .filtro-multiselect-menu {
    display: block;
}

.filtro-opcao {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 7px;
    border-radius: 7px;
    cursor: pointer;
    font-size: .82rem;
    line-height: 1.25;
}

.filtro-opcao:hover {
    background: #f4f7fb;
}

.filtro-opcao input {
    width: 16px !important;
    height: 16px;
    margin: 0;
    padding: 0 !important;
    flex: 0 0 auto;
    cursor: pointer;
}

/* ==========================================================
   ESTATÍSTICAS — CATEGORIAS NO MESMO CARTÃO
========================================================== */

.painel-estatisticas .cards-estatisticas {
    gap: 8px;
}

/* Área das 3 categorias */
.painel-estatisticas .categorias-destaque {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    background: transparent;
}

.painel-estatisticas .titulo-categorias {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.painel-estatisticas .titulo-categorias span {
    font-size: .9rem;
}

.painel-estatisticas .titulo-categorias small {
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.painel-estatisticas .top-categorias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

/* Cada categoria */
.painel-estatisticas .mini-categoria {
    min-width: 0;
    padding: 6px 4px;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.painel-estatisticas .mini-categoria:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.painel-estatisticas .mini-categoria-icone {
    display: block;
    font-size: .9rem;
    line-height: 1.1;
    margin-bottom: 2px;
}

.painel-estatisticas .mini-categoria strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    line-height: 1.2;
}

.painel-estatisticas .mini-categoria small {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 700;
}
/* ==========================================================
   HOMEPAGE — CATEGORIAS EM DESTAQUE
   ========================================================== */

.painel-estatisticas .categorias-destaque {
    margin-top: 4px;
    padding-top: 4px;
}

.painel-estatisticas .titulo-categorias {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.painel-estatisticas .titulo-categorias span {
    font-size: .85rem;
}

.painel-estatisticas .titulo-categorias small {
    font-size: .68rem;
    color: var(--cor-texto-claro);
}

.painel-estatisticas .top-categorias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.painel-estatisticas .mini-categoria {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 5px;

    padding: 6px 7px;
    min-height: 42px;

    background: #ffffff;
    border: 1px solid var(--cor-borda);
    border-radius: 9px;

    transition: transform .18s ease, box-shadow .18s ease;
}

.painel-estatisticas .mini-categoria:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .07);
}

.painel-estatisticas .mini-categoria-icone {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    border-radius: 7px;

    font-size: .85rem;
}

.painel-estatisticas .mini-categoria strong {
    min-width: 0;

    font-size: .7rem;
    line-height: 1.15;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.painel-estatisticas .mini-categoria small {
    font-size: .65rem;
    line-height: 1.1;
    color: var(--cor-texto-claro);
}

/* Mantém a zona compacta em ecrãs pequenos */
@media (max-width: 900px) {
    .painel-estatisticas .top-categorias {
        gap: 5px;
    }

    .painel-estatisticas .mini-categoria {
        padding: 5px 6px;
    }
}
/* ==========================================================
   ENVOLVENTE AZUL SUAVE DAS 3 CATEGORIAS
   ========================================================== */

.painel-estatisticas .categorias-destaque {
    margin-top: 4px;
    padding: 8px;
    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
}

/* Título dentro da zona azul */
.painel-estatisticas .titulo-categorias {
    margin-bottom: 7px;
}

/* Os 3 cartões continuam brancos */
.painel-estatisticas .mini-categoria {
    background: #ffffff;
    
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

/* Movimento subtil ao passar o rato */
.painel-estatisticas .mini-categoria:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .10);
}

/* ==========================================================
   ESTATÍSTICAS — NOVA ORGANIZAÇÃO
   2 INDICADORES + 3 CATEGORIAS EM LINHAS
========================================================== */

/* Os dois indicadores principais lado a lado */
.painel-estatisticas .cards-estatisticas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Os cartões principais */
.painel-estatisticas .card-estatistica {
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

/* Movimento dos cartões principais */
.painel-estatisticas .card-estatistica:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .10);
}


/* ==========================================================
   ZONA DAS 3 CATEGORIAS
========================================================== */

.painel-estatisticas .categorias-destaque {
    grid-column: 1 / -1;

    margin-top: 0;
    padding: 8px;

    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    transition:
        box-shadow .22s ease;
}

/* Pequeno efeito na zona azul */
.painel-estatisticas .categorias-destaque:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}


/* ==========================================================
   TÍTULO
========================================================== */

.painel-estatisticas .titulo-categorias {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 6px;
}

.painel-estatisticas .titulo-categorias span {
    font-size: .85rem;
}

.painel-estatisticas .titulo-categorias small {
    font-size: .68rem;
    color: var(--cor-texto-claro);
}


/* ==========================================================
   3 CATEGORIAS — UMA POR LINHA
========================================================== */

.painel-estatisticas .top-categorias {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}


/* Cartão individual da categoria */

.painel-estatisticas .mini-categoria {
    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr)
        auto;

    grid-template-rows: 1fr;

    align-items: center;

    column-gap: 7px;

    min-height: 32px;
    padding: 4px 7px;

    background: #ffffff;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


/* Movimento individual */

.painel-estatisticas .mini-categoria:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .09);
}


/* Ícone */

.painel-estatisticas .mini-categoria-icone {
    grid-row: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 7px;

    font-size: .82rem;
}


/* Nome da categoria */

.painel-estatisticas .mini-categoria strong {
    min-width: 0;

    font-size: .72rem;
    line-height: 1.15;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Número de atividades */

.painel-estatisticas .mini-categoria small {
    font-size: .65rem;
    line-height: 1.1;

    color: var(--cor-texto-claro);

    white-space: nowrap;
}

/* ==========================================================
   PÁGINA INICIAL — PESQUISA + CALENDÁRIO ESCOLAR +
   ATIVIDADE DO DIA
========================================================== */

.painel-acoes-inicio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ==========================================================
   PESQUISA
========================================================== */

.pesquisa-inicio {
    position: relative;
    width: 100%;
}

.pesquisa-inicio .icone-pesquisa {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);

    font-size: .9rem;
    pointer-events: none;
}

.pesquisa-inicio input {
    width: 100%;

    height: 40px;

    padding: 8px 10px 8px 34px;

    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    background: #ffffff;

    font-size: .8rem;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.pesquisa-inicio input:focus {
    border-color: var(--cor-destaque);

    box-shadow:
        0 0 0 3px rgba(25, 118, 210, .10);
}


/* ==========================================================
   CALENDÁRIO ESCOLAR
========================================================== */

.atalho-calendario-escolar {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 8px 9px;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.atalho-calendario-escolar:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}

.atalho-icone {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: #ffffff;

    font-size: .9rem;
}

.atalho-texto {

    display: flex;

    flex-direction: column;

    min-width: 0;

    flex: 1;
}

.atalho-texto strong {

    font-size: .75rem;

    color: var(--cor-primaria);

}

.atalho-texto small {

    font-size: .65rem;

    color: var(--cor-texto-claro);

}

.atalho-seta {

    font-size: 1rem;

    color: var(--cor-primaria);

}


/* ==========================================================
   ATIVIDADE DO DIA
========================================================== */

.atividade-dia {

    width: 100%;

    padding: 8px 9px;

    background: #f8fbff;

    border: 1px solid var(--cor-borda);

    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.atividade-dia:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}

.atividade-dia-titulo {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 5px;
}

.atividade-dia-titulo span {

    font-size: .85rem;
}

.atividade-dia-titulo strong {

    font-size: .75rem;

    color: var(--cor-primaria);
}

.atividade-dia-conteudo {

    font-size: .72rem;

    line-height: 1.3;

    color: var(--cor-texto-claro);
}

.atividade-dia-nome {

    display: block;

    font-weight: 600;

    color: var(--cor-texto);

    margin-bottom: 3px;
}

.atividade-dia-info {

    font-size: .65rem;

    color: var(--cor-texto-claro);
}

.atividade-dia-vazia {

    font-size: .68rem;

    color: var(--cor-texto-claro);

    line-height: 1.35;
}

/* ==========================================================
   PAINEL DIREITO DA PÁGINA INICIAL
========================================================== */

.painel-acoes-inicio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ==========================================================
   PESQUISA
========================================================== */

.painel-acoes-inicio .pesquisa-inicio {
    position: relative;

    width: 100%;

    padding: 8px;

    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.painel-acoes-inicio .pesquisa-inicio:hover {
    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}

.painel-acoes-inicio .pesquisa-inicio input {
    display: block;

    width: 100%;
    height: 40px;

    padding: 8px 10px 8px 34px;

    border: 1px solid var(--cor-borda);
    border-radius: 9px;

    background: #ffffff;

    color: var(--cor-texto);

    font-size: .8rem;

    outline: none;
}

.painel-acoes-inicio .pesquisa-inicio input:focus {
    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, .10);
}

.painel-acoes-inicio .pesquisa-inicio .icone-pesquisa {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    font-size: .9rem;
    line-height: 1;

    pointer-events: none;
}


/* ==========================================================
   CALENDÁRIO ESCOLAR
========================================================== */

.painel-acoes-inicio .atalho-calendario-escolar {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 8px;

    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.painel-acoes-inicio .atalho-calendario-escolar:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}


/* ==========================================================
   ATIVIDADE DO DIA
========================================================== */

.painel-acoes-inicio .atividade-dia {

    width: 100%;

    padding: 8px;

    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.painel-acoes-inicio .atividade-dia:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}


/* ==========================================================
   PEQUENO AJUSTE DOS CONTEÚDOS
========================================================== */

.painel-acoes-inicio .atalho-icone {
    flex: 0 0 28px;
}

.painel-acoes-inicio .atalho-texto {
    flex: 1;
    min-width: 0;
}

.painel-acoes-inicio .atividade-dia-titulo {
    margin-bottom: 5px;
}

/* ==========================================================
   EMAIL PAA
========================================================== */

.painel-acoes-inicio .atalho-email-paa {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 8px;

    background: #f8fbff;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.painel-acoes-inicio .atalho-email-paa:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .09);
}
/* ==========================================================
   CALENDÁRIO ESCOLAR
========================================================== */

.cartao-calendario-escolar {

    width: 100%;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--cor-borda);

    border-radius: 14px;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .06);
}

.cabecalho-calendario-escolar h2 {

    margin: 0 0 16px;
}

.imagem-calendario-escolar {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;
}

@media (max-width: 700px) {

    .imagem-calendario-escolar {
        content: url("../img/Calendario_AEA_26-27_Vertical.jpg");
    }

}

/* ==========================================================
   DOCUMENTOS — CATEGORIAS E CARTÕES
========================================================== */

#listaDocumentos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}


/* ==========================================================
   CADA CATEGORIA
========================================================== */

.documentos-grupo {
    width: 100%;
    margin: 0;

    background: #ffffff;

    border: 1px solid var(--cor-borda);
    border-radius: 12px;

    overflow: hidden;

    box-sizing: border-box;
}


/* ==========================================================
   ZONA DA CATEGORIA
========================================================== */

.documentos-grupo-zona {
    display: flex;
    align-items: stretch;

    width: 100%;
}


/* ==========================================================
   CATEGORIA — LADO ESQUERDO
========================================================== */

.documentos-grupo-cabecalho {
    flex: 0 0 245px;

    display: flex;
    align-items: center;

    margin: 6px;
    padding: 10px 14px;

    background: #f8fbff;

    border: 0;
    border-radius: 8px;

    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition: background .2s ease;
}


.documentos-grupo-cabecalho:hover {
    background: #eef5fc;
}


.documentos-grupo-titulo {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.25;
}


/* ==========================================================
   ÁREA DOS DOCUMENTOS
========================================================== */

.documentos-lista {
    display: none;

    flex: 1;
    flex-direction: column;

    gap: 5px;

    min-width: 0;

    padding: 6px 8px 6px 2px;

    background: #ffffff;

    box-sizing: border-box;
}


.documentos-grupo.aberto .documentos-lista {
    display: flex;
}


/* ==========================================================
   CARTÃO DO DOCUMENTO
========================================================== */

.cartao-documento {
    display: grid;

    grid-template-columns: 28px minmax(0, 1fr) auto;

    align-items: center;

    gap: 7px;

    width: 100%;
    height: 38px;

    margin: 0;
    padding: 4px 7px;

    background: #ffffff;

    border: 1px solid #b8c7d9;
    border-radius: 7px;

    box-sizing: border-box;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .04);
}


.cartao-documento:hover {
    box-shadow:
        0 2px 7px rgba(0, 0, 0, .07);
}


/* ==========================================================
   ÍCONE + NOME
========================================================== */

.documento-icone {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    font-size: 1.05rem;

    background: rgba(0, 0, 0, .04);

    border-radius: 6px;

    box-sizing: border-box;
}


.documento-conteudo {
    min-width: 0;

    overflow: hidden;
}


.documento-conteudo h3 {
    margin: 0;

    color: var(--cor-primaria);

    font-size: .84rem;
    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   NÃO MOSTRAR A DESCRIÇÃO
========================================================== */

.documento-conteudo p {
    display: none !important;
}


/* ==========================================================
   BOTÃO — PEQUENO E À DIREITA
========================================================== */

.botao-documento {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;

    margin: 0;
    padding: 4px 8px;

    font-size: .68rem;
    line-height: 1;

    white-space: nowrap;

    border-radius: 6px;

    box-sizing: border-box;
}


/* ==========================================================
   CATEGORIA SEM DOCUMENTOS
========================================================== */

.documentos-vazio {
    margin: 0;
    padding: 7px 8px;

    font-size: .78rem;

    opacity: .6;
}


/* ==========================================================
   ECRÃS PEQUENOS
========================================================== */

@media (max-width: 700px) {

    .documentos-grupo-zona {
        display: block;
    }


    .documentos-grupo-cabecalho {
        width: calc(100% - 12px);
        margin: 6px;
    }


    .documentos-grupo.aberto .documentos-lista {
        display: flex;
    }


    .documentos-lista {
        padding: 6px;
    }


    .cartao-documento {
        grid-template-columns: 28px minmax(0, 1fr) auto;

        height: 38px;
    }

}