:root{

    --cor-principal:#005A9C;
    --cor-secundaria:#0B6CBF;

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

    --cor-texto:#222;
    --cor-cinza:#666;

    --cor-sucesso:#2e7d32;
    --cor-erro:#c62828;

    --raio:12px;

    --sombra:0 3px 15px rgba(0,0,0,.08);

}

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

[hidden] {
    display: none !important;
}

html{
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

body{

    background:var(--cor-fundo);

    color:var(--cor-texto);

}

.topbar{

    background:white;

    box-shadow:var(--sombra);

    position:sticky;

    top:0;

    z-index:999;

}

.topbar__content{

    max-width:1200px;

    margin:auto;

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar__brand{

    background:none;

    border:none;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    text-align:left;

}

.topbar__school{

    font-size:13px;

    color:var(--cor-principal);

    font-weight:bold;

}

.topbar__title{

    font-size:24px;

    font-weight:700;

}

.topbar__acoes{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.topbar__catalogo{
    border:1px solid #b8d5e8;
    border-radius:40px;
    background:#edf6fc;
    color:var(--cor-principal);
    padding:11px 18px;
    cursor:pointer;
    font:inherit;
    font-weight:700;
}

.topbar__catalogo:hover{
    background:#dceef9;
}

.inscricao-indicador{

    background:var(--cor-principal);

    color:white;

    border:none;

    border-radius:40px;

    padding:10px 18px;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

}

.inscricao-indicador__contador{

    background:white;

    color:var(--cor-principal);

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

}

.pagina{

    max-width:1200px;

    margin:auto;

    padding:30px;

}

.estado-carregamento{

    text-align:center;

    padding:100px 20px;

}

.spinner{

    width:60px;

    height:60px;

    border:6px solid #ddd;

    border-top:6px solid var(--cor-principal);

    border-radius:50%;

    margin:auto;

    animation:rodar 1s linear infinite;

}

@keyframes rodar{

    to{

        transform:rotate(360deg);

    }

}

.card{

    background:white;

    border-radius:var(--raio);

    box-shadow:var(--sombra);

    padding:30px;

}

.hero{

    text-align:center;

}

.hero h1{

    font-size:42px;

    margin-bottom:20px;

}

.hero p{

    font-size:20px;

    color:#666;

    line-height:1.5;

}

.botao{

    background:var(--cor-principal);

    color:white;

    border:none;

    padding:16px 28px;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

    margin-top:30px;

}

.botao:hover{

    background:var(--cor-secundaria);

}

.mensagem-global{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    background:#222;

    color:white;

    padding:15px 25px;

    border-radius:10px;

    box-shadow:var(--sombra);

}

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.modal__fundo{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.modal__conteudo{

    position:relative;

    background:white;

    padding:35px;

    border-radius:12px;

    width:min(700px,95%);

    z-index:2;

}

.modal__fechar{

    position:absolute;

    right:10px;

    top:10px;

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

}

.sem-javascript{

    padding:50px;

    text-align:center;

}

@media(max-width:700px){

.hero h1{

font-size:30px;

}

.hero p{

font-size:17px;

}

.topbar__title{

font-size:18px;

}

.topbar__content{
    align-items:flex-start;
    gap:10px;
}

.topbar__acoes{
    flex-direction:column;
    align-items:stretch;
}

.topbar__catalogo,
.inscricao-indicador{
    justify-content:center;
    padding:9px 12px;
    font-size:.9rem;
}

}

/* =========================================================
   Catálogo da oferta extracurricular
   ========================================================= */

.botao-catalogo-inicio{
    display:inline-block;
    margin:14px 0 0 12px;
}

.catalogo-cabecalho{
    margin-bottom:26px;
}

.catalogo-cabecalho > p:first-child{
    color:var(--cor-principal);
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.catalogo-cabecalho h1{
    margin:6px 0 10px;
    font-size:clamp(2rem,5vw,3rem);
}

.catalogo-cabecalho > p:last-child{
    max-width:850px;
    color:var(--cor-cinza);
    line-height:1.55;
}

.catalogo-cabecalho__acoes{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.catalogo-layout{
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    align-items:start;
    gap:24px;
}

.catalogo-sidebar{
    min-width:0;
}

.catalogo-sidebar__interior{
    position:sticky;
    top:18px;
    max-height:calc(100vh - 36px);
    overflow:auto;
    padding:18px;
    border:1px solid #d8e3ed;
    border-radius:var(--raio);
    background:var(--cor-branco);
    box-shadow:var(--sombra);
}

.catalogo-sidebar h2{
    font-size:1.15rem;
}

.catalogo-sidebar p{
    margin:5px 0 14px;
    color:var(--cor-cinza);
    font-size:.85rem;
    line-height:1.4;
}

.catalogo-indice{
    display:grid;
    gap:3px;
    margin:6px 0 0;
    padding:0;
    list-style:none;
}

.catalogo-indice__todos,
.catalogo-indice__botao{
    width:100%;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#25313c;
    padding:8px 9px;
    cursor:pointer;
    font:inherit;
    font-size:.9rem;
    line-height:1.3;
    text-align:left;
}

.catalogo-indice__todos{
    color:var(--cor-principal);
    font-weight:800;
}

.catalogo-indice__todos:hover,
.catalogo-indice__todos:focus-visible,
.catalogo-indice__botao:hover,
.catalogo-indice__botao:focus-visible{
    background:#edf6fc;
    outline:2px solid transparent;
}

.catalogo-indice__todos--ativo,
.catalogo-indice__botao--ativo{
    background:var(--cor-principal);
    color:#fff;
    font-weight:800;
}

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

.catalogo-filtro{
    margin:0 0 22px;
    padding:18px 20px;
    border:1px solid #d8e3ed;
    border-radius:var(--raio);
    background:#f7fafc;
}

.catalogo-filtro legend{
    padding:0 7px;
    color:#1d2b38;
    font-weight:800;
}

.catalogo-filtro__opcoes{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px;
}

.catalogo-filtro__opcao{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:7px 8px;
    border-radius:7px;
    cursor:pointer;
    line-height:1.35;
}

.catalogo-filtro__opcao:hover{
    background:#eaf3f9;
}

.catalogo-filtro__opcao input{
    flex:0 0 auto;
    margin-top:3px;
}

.catalogo-filtro__rodape{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #d8e3ed;
}

.catalogo-resultados{
    color:var(--cor-cinza);
    font-size:.9rem;
    font-weight:700;
}

.catalogo-filtro__limpar{
    border:0;
    background:transparent;
    color:var(--cor-principal);
    cursor:pointer;
    font:inherit;
    font-weight:800;
    text-decoration:underline;
}

.catalogo-filtro__limpar:disabled{
    cursor:not-allowed;
    opacity:.45;
}

.catalogo-sem-resultados{
    padding:28px;
}

.catalogo-sem-resultados p{
    margin:7px 0 16px;
    color:var(--cor-cinza);
}

.catalogo-lista{
    display:grid;
    gap:22px;
}

.catalogo-clube{
    overflow:hidden;
    border:1px solid #d8e3ed;
    border-left:8px solid var(--cor-clube,var(--cor-principal));
    border-radius:var(--raio);
    background:var(--cor-branco);
    box-shadow:var(--sombra);
}

.catalogo-clube__cabecalho{
    padding:22px 24px 16px;
    border-bottom:1px solid #e5ebf0;
}

.catalogo-clube__cabecalho h2{
    font-size:clamp(1.35rem,3vw,1.8rem);
}

.catalogo-clube__conteudo{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:20px 26px;
    padding:22px 24px 26px;
}

.catalogo-clube__conteudo section{
    min-width:0;
}

.catalogo-clube__conteudo h3{
    margin-bottom:7px;
    color:var(--cor-principal);
    font-size:1rem;
}

.catalogo-clube__conteudo p{
    color:#3f4b56;
    line-height:1.6;
    white-space:pre-line;
    text-align:justify;
    overflow-wrap:break-word;
}

.catalogo-clube__conteudo section:nth-child(1),
.catalogo-clube__conteudo section:nth-child(2),
.catalogo-clube__conteudo section:nth-child(4),
.catalogo-competencias{
    grid-column:1/-1;
}

.catalogo-sessoes{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.catalogo-sessao{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px;
    border:1px solid #d5e0e8;
    border-radius:9px;
    background:#f7fafc;
}

.catalogo-sessao strong,
.catalogo-sessao span,
.catalogo-sessao small{
    display:block;
}

.catalogo-sessao span{
    margin-top:3px;
    color:var(--cor-cinza);
}

.catalogo-sessao small{
    margin-top:5px;
    color:var(--cor-principal);
    font-weight:700;
}

.botao-catalogo-sessao{
    flex:0 0 auto;
    border:0;
    border-radius:8px;
    background:var(--cor-principal);
    color:#fff;
    padding:10px 12px;
    cursor:pointer;
    font:inherit;
    font-size:.86rem;
    font-weight:700;
}

.botao-catalogo-sessao:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.catalogo-sem-sessoes{
    padding:12px 14px;
    border-radius:8px;
    background:#f3f6f8;
}

.catalogo-competencias ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.catalogo-competencias li{
    padding:7px 10px;
    border-radius:999px;
    background:#edf6fc;
    color:var(--cor-principal);
    font-size:.88rem;
    font-weight:700;
}

.catalogo-subsite{
    grid-column:1/-1;
    padding-top:2px;
}

.catalogo-subsite .botao-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.catalogo-acoes{
    position:sticky;
    bottom:12px;
    margin-top:24px;
    padding:12px;
    border-radius:12px;
    background:rgba(245,247,251,.95);
    backdrop-filter:blur(8px);
}

@media(max-width:700px){
    .botao-catalogo-inicio{
        display:block;
        width:100%;
        margin:12px 0 0;
    }

    .catalogo-layout{
        grid-template-columns:1fr;
    }

    .catalogo-sidebar__interior{
        position:static;
        max-height:360px;
    }

    .catalogo-filtro__opcoes{
        grid-template-columns:1fr;
    }

    .catalogo-filtro__rodape{
        align-items:flex-start;
        flex-direction:column;
    }

    .catalogo-cabecalho__acoes .botao-secundario{
        width:100%;
    }

    .catalogo-clube__conteudo{
        grid-template-columns:1fr;
        padding:18px;
    }

    .catalogo-clube__conteudo section{
        grid-column:1;
    }

    .catalogo-sessao{
        align-items:stretch;
        flex-direction:column;
    }

    .botao-catalogo-sessao{
        width:100%;
    }
}

/* =========================================================
   Mapa semanal
   ========================================================= */

.mapa-cabecalho {
    margin-bottom: 24px;
}

.mapa-cabecalho h1 {
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.mapa-cabecalho p {
    color: var(--cor-cinza);
    line-height: 1.5;
}

.mapa-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.mapa-legenda__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    color: var(--cor-cinza);
}

.mapa-legenda__cor {
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.mapa-wrapper {
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.mapa-semanal {
    display: grid;
    grid-template-columns: repeat(5, minmax(235px, 1fr));
    gap: 16px;
    min-width: 1240px;
    align-items: start;
}

.mapa-dia {
    background: var(--cor-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.mapa-dia__cabecalho {
    padding: 16px;
    background: var(--cor-principal);
    color: var(--cor-branco);
    text-align: center;
}

.mapa-dia__cabecalho h2 {
    font-size: 1.15rem;
}

.mapa-dia__conteudo {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
    min-height: 180px;
}

.sessao-bloco {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 104px;
    height: auto;
    overflow: visible;
    border: 1px solid #dfe4ea;
    border-left: 7px solid var(--cor-sessao, var(--cor-principal));
    border-radius: 10px;
    background: var(--cor-branco);
    padding: 13px;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.sessao-bloco:hover,
.sessao-bloco:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.11);
    border-color: var(--cor-sessao, var(--cor-principal));
    outline: none;
}

.sessao-bloco:disabled {
    cursor: not-allowed;
    opacity: 0.85;
    transform: none;
    box-shadow: none;
}

.sessao-bloco__hora {
    display: block;
    margin-bottom: 7px;
    color: var(--cor-principal);
    font-size: 0.87rem;
    font-weight: 700;
}

.sessao-bloco__nome {
    display: block;
    margin-bottom: 7px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.sessao-bloco__local {
    display: block;
    overflow-wrap: anywhere;
    color: var(--cor-cinza);
    font-size: 0.84rem;
}

.sessao-bloco__vagas {
    display: inline-block;
    overflow-wrap: anywhere;
    margin-top: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e6f4ea;
    color: var(--cor-sucesso);
    font-size: 0.78rem;
    font-weight: 700;
}

.sessao-bloco__vagas--poucas {
    background: #fff4d6;
    color: #8a5800;
}

.sessao-bloco__vagas--esgotada {
    background: #fce8e6;
    color: var(--cor-erro);
}

.mapa-dia__vazio {
    padding: 20px 8px;
    color: var(--cor-cinza);
    text-align: center;
    font-size: 0.9rem;
}

.navegacao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.botao-secundario {
    background: #e8f1f8;
    color: var(--cor-principal);
    border: 1px solid #bfd4e5;
    padding: 13px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
}

.botao-secundario:hover {
    background: #dceaf5;
}

@media (max-width: 700px) {
    .pagina {
        padding: 18px 14px;
    }

    .mapa-wrapper {
        margin-right: -14px;
        padding-right: 14px;
    }

    .mapa-semanal {
        grid-template-columns: repeat(5, 82vw);
        min-width: max-content;
    }

    .mapa-dia__conteudo {
        min-height: auto;
    }
}


/* =========================================================
   Mapa semanal simplificado
   ========================================================= */

.dias-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}

.dia-card {
    background: var(--cor-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 26px;
    text-align: center;
}

.dia-card__icone {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-principal);
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
}

.dia-card h2 {
    margin-bottom: 10px;
}

.dia-card p {
    color: var(--cor-cinza);
    line-height: 1.5;
}

/* =========================================================
   Mapa de atividades
   ========================================================= */

.mapa-dia-cabecalho {
    margin-bottom: 26px;
}

.mapa-dia-cabecalho__etiqueta {
    margin-bottom: 6px;
    color: var(--cor-principal);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mapa-dia-cabecalho h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 3rem);
}

.mapa-dia-cabecalho p {
    color: var(--cor-cinza);
}

.mapa-dias-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -8px 0 24px;
}

.mapa-dias-nav__botao {
    border: 1px solid #bfd4e5;
    border-radius: 999px;
    background: #e8f1f8;
    padding: 10px 16px;
    color: var(--cor-principal);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mapa-dias-nav__botao:hover,
.mapa-dias-nav__botao:focus-visible {
    border-color: var(--cor-principal);
    background: #dceaf5;
    outline: none;
}

.mapa-dias-nav__botao--ativo {
    border-color: var(--cor-principal);
    background: var(--cor-principal);
    color: var(--cor-branco);
    cursor: default;
}

@media (max-width: 700px) {
    .mapa-dias-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -14px;
        padding: 2px 14px 8px 0;
        -webkit-overflow-scrolling: touch;
    }
}

.horario-dia {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faixa-horaria {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 18px;
    border-top: 4px solid #222;
    border-bottom: 4px solid #222;
    background: var(--cor-branco);
}

.faixa-horaria__tempo {
    min-height: 130px;
    padding: 14px;
    background: #f0f1f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    font-size: 1rem;
}

.faixa-horaria__tempo span {
    color: var(--cor-cinza);
    font-size: 0.8rem;
}

.faixa-horaria__atividades {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.atividade-dia {
    min-height: 130px;
    border: 2px solid #222;
    border-top: 7px solid var(--cor-atividade);
    border-radius: 4px;
    background: white;
    padding: 14px;
    cursor: pointer;
    text-align: center;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.atividade-dia:hover,
.atividade-dia:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);
    outline: none;
}

.atividade-dia:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.atividade-dia__nome {
    display: block;
    font-weight: 800;
    line-height: 1.3;
}

.atividade-dia__local {
    display: block;
    margin-top: 9px;
    color: var(--cor-cinza);
    font-size: 0.82rem;
}

.atividade-dia__vagas {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e6f4ea;
    color: var(--cor-sucesso);
    font-size: 0.76rem;
    font-weight: 700;
}

.atividade-dia__vagas--poucas {
    background: #fff4d6;
    color: #8a5800;
}

.atividade-dia__vagas--esgotada {
    background: #fce8e6;
    color: var(--cor-erro);
}

@media (max-width: 700px) {
    .dias-grid {
        grid-template-columns: 1fr;
    }

    .faixa-horaria {
        grid-template-columns: 82px 1fr;
        padding: 10px;
        gap: 10px;
    }

    .faixa-horaria__tempo {
        padding: 10px 5px;
        font-size: 0.85rem;
    }

    .faixa-horaria__atividades {
        grid-template-columns: 1fr;
    }

    .atividade-dia {
        min-height: 110px;
    }
}

/* =========================================================
   Detalhes do clube
   ========================================================= */

.clube-detalhes__cabecalho {
    border-left: 8px solid var(--cor-principal);
    padding-left: 18px;
}

.clube-detalhes__dia {
    margin-bottom: 8px;
    color: var(--cor-cinza);
}

.clube-detalhes__descricao {
    margin-top: 14px;
    line-height: 1.65;
}

.clube-detalhes__coordenador {
    margin-top: 14px;
    color: var(--cor-cinza);
}

.clube-detalhes__subtitulo {
    margin-top: 30px;
}

.clube-detalhes__ajuda {
    margin-top: 8px;
    color: var(--cor-cinza);
}

.clube-competencias {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid #d8e3ed;
    border-radius: 10px;
    background: #f5f8fb;
}

.clube-competencias h2 {
    margin: 0 0 14px;
    font-size: 1.2rem;
}

.clube-competencias__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clube-competencias__item {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 12px 14px;
    border-left: 5px solid var(--cor-principal);
    border-radius: 7px;
    background: var(--cor-branco);
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 800px) {
    .clube-competencias__lista {
        grid-template-columns: 1fr;
    }
}

.sessoes-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.sessao-bloco--selecionada {
    border-color: var(--cor-sucesso);
    background: #f2faf4;
    opacity: 1 !important;
}

.sessao-bloco__vagas--selecionada {
    background: #d9f2df;
    color: var(--cor-sucesso);
}

/* =========================================================
   A Minha Inscrição
   ========================================================= */

.inscricao-cabecalho {
    margin-bottom: 26px;
}

.inscricao-cabecalho h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 3rem);
}

.inscricao-cabecalho > p:last-child {
    color: var(--cor-cinza);
}

.inscricao-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inscricao-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border-left: 7px solid var(--cor-principal);
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra);
}

.inscricao-item__dia {
    margin-bottom: 5px;
    color: var(--cor-principal);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.inscricao-item__nome {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.inscricao-item__dados {
    margin-top: 4px;
    color: var(--cor-cinza);
}

.botao-remover {
    flex-shrink: 0;
    border: 1px solid #efb8b4;
    border-radius: 9px;
    background: #fce8e6;
    color: var(--cor-erro);
    padding: 11px 16px;
    cursor: pointer;
    font-weight: 700;
}

.botao-remover:hover {
    background: #f8d4d1;
}

.inscricao-vazia {
    padding: 45px 24px;
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra);
    text-align: center;
}

.inscricao-vazia p {
    margin-top: 10px;
    color: var(--cor-cinza);
}

.botao:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 700px) {
    .inscricao-item {
        align-items: stretch;
        flex-direction: column;
    }

    .botao-remover {
        width: 100%;
    }
}

/* =========================================================
   Formulário
   ========================================================= */

.formulario-cabecalho,
.confirmacao-cabecalho {
    margin-bottom: 26px;
}

.formulario-cabecalho h1,
.confirmacao-cabecalho h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 3rem);
}

.formulario-cabecalho > p:last-child,
.confirmacao-cabecalho > p:last-child {
    color: var(--cor-cinza);
}

.formulario {
    text-align: left;
}

.formulario__grupo {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 30px;
    padding: 0;
    border: 0;
}

.formulario__grupo legend {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dfe4ea;
    font-size: 1.3rem;
    font-weight: 800;
}

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

.campo--largo {
    grid-column: 1 / -1;
}

.campo label {
    font-weight: 700;
}

.campo__opcional {
    color: var(--cor-cinza);
    font-size: 0.85rem;
    font-weight: 400;
}

.campo input,
.campo select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #b8c1cc;
    border-radius: 9px;
    background: white;
    padding: 11px 12px;
    color: var(--cor-texto);
    font: inherit;
}

.campo input:focus,
.campo select:focus {
    border-color: var(--cor-principal);
    outline: 3px solid rgba(0, 90, 156, 0.14);
}

.campo small {
    color: var(--cor-cinza);
    line-height: 1.45;
}

.filtro-competencias {
    margin-bottom: 28px;
    padding: 22px;
    background: var(--cor-branco);
    border: 1px solid #d8e3ed;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.filtro-competencias__cabecalho {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.filtro-competencias__cabecalho h2 { margin: 0 0 5px; font-size: 1.25rem; }
.filtro-competencias__cabecalho p { margin: 0; color: var(--cor-cinza); }
.filtro-competencias__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-competencias__acoes button { padding: 8px 12px; color: var(--cor-principal); background: #edf6fc; border: 1px solid #b8d5e8; border-radius: 7px; font: inherit; font-weight: 700; cursor: pointer; }
.filtro-competencias__grelha { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; }
.filtro-competencia__opcao { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; background: #f5f8fb; border-radius: 7px; cursor: pointer; }
.filtro-competencia__opcao input { margin-top: 3px; accent-color: var(--cor-principal); }

@media (max-width:700px) {
    .filtro-competencias__cabecalho { flex-direction: column; }
    .filtro-competencias__grelha { grid-template-columns: 1fr; }
}

.autorizacao-obrigatoria {
    margin-bottom: 20px;
    border-left: 6px solid var(--cor-principal);
}

.autorizacao-obrigatoria h2 {
    font-size: 1.05rem;
    line-height: 1.45;
}

.autorizacao-obrigatoria .campo {
    margin-top: 18px;
}

.autorizacao-obrigatoria__ajuda {
    display: block;
    margin: 10px 0 14px;
    color: var(--cor-cinza);
    line-height: 1.45;
}

.autorizacao-upload-estado {
    margin: 10px 0 0;
    padding: 10px 12px;
    color: #176b2c;
    background: #edf8ef;
    border-radius: 7px;
    font-weight: 700;
}

.autorizacao-upload-estado--curso {
    color: #735200;
    background: #fff7dc;
}

.sucesso__estados-atividades {
    margin: 22px 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.sucesso__atividade-estado {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    padding: 14px 16px;
    background: #f3f6f8;
    border-radius: 8px;
}

.sucesso__atividade-estado span,
.sucesso__atividade-estado strong {
    display: block;
}

.sucesso__atividade-estado .estado-espera {
    color: #8a5900;
}

.sucesso__atividade-estado .estado-pre-confirmada {
    color: #176b2c;
}

.inscricao-item__estado,
.confirmacao-atividade__estado {
    display: inline-block;
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
}

.estado-espera {
    color: #784d00;
    background: #fff1c7;
}

.estado-pre-confirmada {
    color: #176b2c;
    background: #e2f4e6;
}

@media (max-width: 720px) {
    .sucesso__atividade-estado {
        display: block;
    }

    .sucesso__atividade-estado > strong {
        margin-top: 8px;
    }
}

.autorizacao-antecipada {
    margin: 24px 0;
    border: 1px solid #c9d8e5;
    border-radius: 10px;
    background: #f4f8fb;
    padding: 18px;
    text-align: left;
}

.autorizacao-antecipada h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.autorizacao-antecipada p {
    margin-bottom: 16px;
}

.declaracao-aceite {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 4px 0 24px;
    padding: 18px;
    border: 1px solid #c9d8e5;
    border-radius: 10px;
    background: #f4f8fb;
    cursor: pointer;
}

.declaracao-aceite:focus-within {
    border-color: var(--cor-principal);
    outline: 3px solid rgba(0, 90, 156, 0.14);
}

.declaracao-aceite input {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--cor-principal);
}

.declaracao-aceite span {
    line-height: 1.6;
}

.confirmacao-declaracao {
    margin-top: 20px;
    border-left: 6px solid var(--cor-sucesso);
    line-height: 1.6;
}

@media (max-width: 700px) {
    .declaracao-aceite {
        gap: 11px;
        padding: 14px;
    }
}

.formulario__erro {
    margin: 18px 0;
    border: 1px solid #efb8b4;
    border-radius: 9px;
    background: #fce8e6;
    padding: 14px;
    color: var(--cor-erro);
    font-weight: 700;
}

/* =========================================================
   Confirmação
   ========================================================= */

.confirmacao-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.resumo-dados {
    margin-top: 18px;
}

.resumo-dados div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f3;
}

.resumo-dados dt {
    color: var(--cor-cinza);
    font-weight: 700;
}

.resumo-dados dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.confirmacao-atividades {
    margin-top: 20px;
}

.confirmacao-atividades__lista {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.confirmacao-atividade {
    display: grid;
    gap: 5px;
    border-left: 6px solid var(--cor-principal);
    border-radius: 8px;
    background: #f7f9fb;
    padding: 15px;
}

.confirmacao-atividade span {
    color: var(--cor-cinza);
}

/* =========================================================
   Sucesso
   ========================================================= */

.sucesso {
    max-width: 760px;
    margin: 30px auto;
    text-align: center;
}

.sucesso__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #d9f2df;
    color: var(--cor-sucesso);
    font-size: 2.6rem;
    font-weight: 900;
}

.sucesso h1 {
    margin-bottom: 20px;
}

.sucesso p {
    margin-top: 15px;
    line-height: 1.65;
}

.sucesso__destaque {
    color: var(--cor-sucesso);
    font-size: 1.15rem;
    font-weight: 800;
}

.sucesso__codigo {
    margin: 26px 0;
    border-radius: 8px;
    background: #f2f3f5;
    padding: 14px;
    overflow-wrap: anywhere;
}

.botao--link {
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 700px) {
    .formulario__grupo,
    .confirmacao-grid {
        grid-template-columns: 1fr;
    }

    .campo--largo {
        grid-column: auto;
    }

    .resumo-dados div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* =========================================================
   Linha temporal do mapa de atividades
   ========================================================= */

.timeline-wrapper {
    overflow-x: auto;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
}

.timeline-dia {
    display: grid;
    grid-template-columns: 92px minmax(850px, 1fr);
    min-width: 950px;
    border-top: 3px solid #1d2733;
    border-bottom: 3px solid #1d2733;
    background: #fff;
}

.timeline-escala {
    position: relative;
    border-right: 2px solid #1d2733;
    background: #f1f3f5;
}

.timeline-conteudo {
    position: relative;
    background: #fff;
}

.timeline-hora,
.timeline-linha {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    border-top: 1px solid #aeb6bf;
}

.timeline-hora span {
    position: absolute;
    top: -12px;
    right: 12px;
    padding: 2px 5px;
    background: #f1f3f5;
    color: #263238;
    font-size: 0.85rem;
    font-weight: 800;
}

.timeline-sessao {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    border: 2px solid #24303b;
    border-top: 7px solid
        var(--cor-atividade, #005a9c);
    border-radius: 6px;
    background: #fff;
    padding: 9px 11px;
    color: #1e252b;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease;
}

.timeline-sessao:hover,
.timeline-sessao:focus-visible {
    z-index: 5;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px
        rgba(0, 0, 0, 0.18);
    outline: none;
}

.timeline-sessao:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.timeline-sessao--selecionada {
    border-color: var(--cor-sucesso);
    background: #f2faf4;
    opacity: 1;
}

.timeline-sessao__hora {
    flex: 0 0 auto;
    color: #4d5964;
    font-size: 0.84rem;
    font-weight: 800;
}

.sucesso .aviso-operacao {
    text-align: left;
}

.timeline-sessao__nome {
    display: block;
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.25;
}

.timeline-sessao__local {
    display: block;
    flex: 0 0 auto;
    overflow-wrap: anywhere;
    color: #5d6973;
    font-size: 0.83rem;
    line-height: 1.25;
}

.timeline-sessao__vagas {
    flex: 0 0 auto;
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.timeline-sessao--curta { gap: 2px; padding: 5px 8px; border-top-width: 5px; }
.timeline-sessao--curta .timeline-sessao__hora { font-size: .76rem; }
.timeline-sessao--curta .timeline-sessao__nome { flex: 1 1 auto; min-height: 0; overflow: hidden; font-size: .88rem; line-height: 1.1; }
.timeline-sessao--curta .timeline-sessao__local { font-size: .76rem; }
.timeline-sessao--curta .timeline-sessao__vagas { margin-top: 0; font-size: .72rem; }

@media (max-width: 700px) {
    .timeline-dia {
        grid-template-columns:
            72px minmax(760px, 1fr);
        min-width: 832px;
    }

    .timeline-hora span {
        right: 7px;
        font-size: 0.75rem;
    }

    .timeline-sessao {
        padding: 6px 7px;
    }

}

.inscricao-item__estado {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.inscricao-item__estado--confirmada {
    background: #d9f2df;
    color: #2e7d32;
}

.inscricao-item__estado--espera {
    background: #fff3cd;
    color: #7a5200;
}

.atividade-dia__espera {
    display: block;
    margin-top: 7px;
    color: #7a5200;
    font-size: 0.75rem;
    font-weight: 700;
}

/* =========================================================
   Página inicial e operações públicas
   ========================================================= */
.pagina-inicial-cabecalho,
.operacao-cabecalho {
    margin-bottom: 26px;
}

.pagina-inicial-cabecalho h1,
.operacao-cabecalho h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 5vw, 3rem);
}

.pagina-inicial-cabecalho p,
.operacao-cabecalho > p:last-child {
    max-width: 820px;
    color: var(--cor-cinza);
    line-height: 1.65;
}

.acoes-principais {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.acao-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.acao-card--principal {
    grid-column: 1 / -1;
    border-top: 7px solid var(--cor-principal);
}

.acao-card h2 {
    margin-bottom: 12px;
}

.acao-card p {
    color: var(--cor-cinza);
    line-height: 1.65;
}

.acao-card .botao,
.acao-card .botao-secundario {
    margin-top: auto;
}

.acao-card__etiqueta {
    margin-bottom: 8px;
    color: var(--cor-principal) !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.acao-card__botoes,
.sucesso__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.acao-card__botoes .botao,
.acao-card__botoes .botao-secundario,
.sucesso__acoes .botao,
.sucesso__acoes .botao-secundario {
    margin-top: 0;
}

.autorizacao-passos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 22px 0;
    padding: 0;
    list-style: none;
    counter-reset: passos;
}

.autorizacao-passos li {
    padding: 12px 8px;
    border-radius: 8px;
    background: #eef5fb;
    color: var(--cor-principal);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
    counter-increment: passos;
}

.autorizacao-passos li::before {
    content: counter(passos);
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: var(--cor-principal);
    color: white;
    line-height: 24px;
}

.formulario-operacao {
    max-width: 820px;
}

.formulario-operacao .campo-formulario + .campo-formulario {
    margin-top: 20px;
}

.formulario-operacao input[type="file"] {
    padding: 10px;
    background: #f8fafc;
}

.formulario-operacao textarea {
    width: 100%;
    resize: vertical;
}

.confirmacao-autorizacao {
    margin-top: 20px;
    border-left: 6px solid var(--cor-principal);
    line-height: 1.65;
}

.cancelamento-todas {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 8px;
    background: #eef5fb;
}

.cancelamento-sessoes {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.cancelamento-sessoes legend {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 800;
}

.cancelamento-sessao {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d8e0e7;
    border-radius: 9px;
    cursor: pointer;
}

.cancelamento-sessao > span,
.cancelamento-sessao > span > span:not(.inscricao-item__estado) {
    display: block;
}

.cancelamento-sessao--pendente {
    background: #f4f5f6;
    color: var(--cor-cinza);
    cursor: not-allowed;
}

.cancelamento-sessao em {
    display: block;
    margin-top: 8px;
    color: #7a5200;
    font-size: 0.85rem;
}

.aviso-operacao {
    margin-top: 22px;
    padding: 15px;
    border-left: 5px solid #d49300;
    background: #fff8e5;
    line-height: 1.55;
}

.sucesso__data {
    margin-top: 10px;
}

.sucesso__acoes {
    justify-content: center;
}

.sucesso__acoes form {
    margin: 0;
}

.botao--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 760px) {
    .acoes-principais {
        grid-template-columns: 1fr;
    }

    .autorizacao-passos {
        grid-template-columns: 1fr;
    }

    .autorizacao-passos li {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

    .autorizacao-passos li::before {
        flex: 0 0 24px;
        margin: 0;
        text-align: center;
    }

    .acao-card__botoes,
    .sucesso__acoes {
        flex-direction: column;
        width: 100%;
    }
}
.protecao-seguranca {
    margin-top: 1.25rem;
}

.protecao-seguranca p {
    margin-bottom: 0.85rem;
    color: #52657a;
}

.campo-armadilha {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.modo-teste {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    padding: 0.7rem 1rem;
    color: #533a00;
    background: #fff2bd;
    border-bottom: 1px solid #e2c55b;
    text-align: center;
}

.modo-teste a {
    color: #064f83;
    font-weight: 700;
}

.pagina-acesso-teste {
    min-height: 100vh;
    margin: 0;
    background: #eef3f8;
}

.acesso-teste {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.acesso-teste__cartao {
    width: min(100%, 34rem);
}

.acesso-teste__cartao form {
    display: grid;
    gap: 0.8rem;
    margin: 1.25rem 0;
}

.acesso-teste__cartao input {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #afc5d8;
    border-radius: 0.55rem;
    font: inherit;
}

.acesso-teste__erro {
    padding: 0.8rem;
    color: #7c1d1d;
    background: #fde5e5;
    border-radius: 0.55rem;
}