: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;

}

.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;

}

}

/* =========================================================
   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%;
    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.65;
    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;
    color: var(--cor-cinza);
    font-size: 0.84rem;
}

.sessao-bloco__vagas {
    display: inline-block;
    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 diário
   ========================================================= */

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

.mapa-dia-cabecalho__etiqueta {
    margin-bottom: 6px;
    color: var(--cor-principal);
    font-size: 0.85rem;
    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);
}

.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);
}

.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;
}

.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 diário
   ========================================================= */

.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.55;
}

.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;
}

.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;
}

@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%;
    }
}