/* =========================================================
   PPD — Inscrições
   Paleta bordô (#18), opção "Bordô PPD com preto": cor padrão #A50752
   (a mesma do site antigo), áreas quase pretas e fundo branco. Responsivo (#19).
   ========================================================= */

:root {
    --bordo-950: #100c0e;
    --bordo-900: #151012;
    --bordo-800: #26191f;
    --bordo-700: #85063f;
    --bordo-600: #a50752;
    --bordo-500: #c8346f;
    --rosa-600: #b0255f;
    --rosa-500: #c8346f;
    --rosa-300: #d9afc0;
    --rosa-200: #f1e1e8;
    --rosa-100: #f6ebf0;
    --rosa-50: #fbf6f8;

    --texto: #26191f;
    --texto-suave: #6b5a62;
    --borda: #ece3e7;
    --fundo: #ffffff;
    --fundo-suave: #f7f5f6;

    --sucesso: #2f7d4f;
    --sucesso-fundo: #e8f4ec;
    --aviso: #8a5d00;
    --aviso-fundo: #fbf3e0;
    --erro: #a4243b;
    --erro-fundo: #fbe9ec;

    --raio: 12px;
    --raio-controle: 8px;
    --sombra: 0 1px 2px rgba(21, 16, 18, .06), 0 4px 16px rgba(21, 16, 18, .06);
    --fonte-titulo: "Montserrat", "Segoe UI", Roboto, sans-serif;
    --fonte-texto: "Roboto", "Segoe UI", system-ui, sans-serif;
    --largura: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo-suave);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--bordo-600);
}

a:hover {
    color: var(--rosa-600);
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    color: var(--bordo-800);
    line-height: 1.25;
    margin: 0 0 .6em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

p {
    margin: 0 0 1em;
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 16px;
}

.conteudo {
    flex: 1;
    padding: 28px 0 40px;
}

.texto-suave {
    color: var(--texto-suave);
}

.icone {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.2em;
}

/* =========================================================
   SITE PÚBLICO E ÁREA DA ESCOLA — layout do protótipo
   (prototipos/site-institucional/index.html), com a paleta bordô/preto
   no lugar dos tons roxos do modelo
   ========================================================= */

.site-publico {
    --site-1: #1c0f14;   /* hero */
    --site-2: #23141a;   /* fundo e galeria */
    --site-3: #2b1820;   /* "Sobre o evento" */
    --site-4: #391a25;   /* faixa dos atalhos */
    --site-card: rgba(190, 71, 103, .49);
    --site-topo: rgba(190, 71, 103, .79); /* cabeçalho fixo: menos transparente que os cards, para o menu não sumir sobre os painéis brancos ao rolar */
    --site-card-hover: #85063f;
    --site-sep: #6b1d3a;
    --site-texto: #ffffff;
    --site-suave: #d8b4c3;
    --site-rodape: #140b0f;
    --site-destaque: #a50752;
    --site-destaque-claro: #c0175f;

    background: var(--site-2);
    color: var(--site-texto);
    font-family: var(--fonte-titulo);
    font-size: 15px;
}

/* textos soltos sobre o fundo escuro; dentro de cards e modais continuam escuros */
.site-publico h1,
.site-publico h2,
.site-publico h3 {
    color: #fff;
}

.site-publico .texto-suave {
    color: var(--site-suave);
}

.site-publico a {
    color: var(--rosa-200);
}

.site-publico a:hover {
    color: #fff;
}

.site-publico .card,
.site-publico .modal {
    color: var(--texto);
}

.site-publico .card h1,
.site-publico .card h2,
.site-publico .card h3,
.site-publico .modal h2,
.site-publico .modal h3 {
    color: var(--bordo-800);
}

.site-publico .card .texto-suave,
.site-publico .modal .texto-suave {
    color: var(--texto-suave);
}

.site-publico .card a,
.site-publico .modal a {
    color: var(--bordo-600);
}

.site-publico .card a.btn,
.site-publico .modal a.btn {
    color: #fff;
}

.site-publico .card a.btn--secundario,
.site-publico .modal a.btn--secundario {
    color: var(--bordo-600);
}

.site-publico a.btn {
    color: #fff;
}

.site-publico .btn--secundario {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.site-publico .btn--secundario:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.site-publico .card .btn--secundario,
.site-publico .modal .btn--secundario {
    background: var(--fundo);
    color: var(--bordo-600);
    border-color: var(--rosa-200);
}

.site-publico .card .btn--secundario:hover,
.site-publico .modal .btn--secundario:hover {
    background: var(--rosa-50);
}

.container-site {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- topo ---------- */

.cabecalho-site {
    background: var(--site-topo);
    border-bottom: 1px solid var(--site-sep);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(6px);
}

.cabecalho-site .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
}

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

.marca-site img:first-child {
    height: 44px;
    width: auto;
}

.marca-site img + img {
    height: 44px;
    width: auto;
}

.menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.menu a {
    color: #ddd;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 0;
}

.menu a:hover,
.menu a.ativo {
    color: #fff;
}

.menu a.ativo {
    border-bottom: 2px solid var(--site-destaque);
}

.menu a.btn {
    padding: 7px 14px;
    letter-spacing: 1px;
}

.menu form {
    margin: 0;
}

/* botão hambúrguer (celular), com animação em X */
.menu-botao {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px 4px;
}

.menu-botao span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}

.menu-aberto .menu-botao span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-aberto .menu-botao span:nth-child(2) {
    opacity: 0;
}

.menu-aberto .menu-botao span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
    .menu-botao {
        display: flex;
    }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 16px;
        background: var(--site-1);
        border-bottom: 1px solid var(--site-sep);
    }

    .menu a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .menu a.ativo {
        border-bottom-color: var(--site-destaque);
    }

    .menu a.btn {
        margin-top: 12px;
    }

    .menu-aberto .menu {
        display: flex;
    }
}

/* faixa do evento selecionado e avisos fixos (área da escola) */
.faixa {
    font-size: .85rem;
    padding: 8px 0;
}

.faixa .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.faixa--evento {
    background: var(--site-4);
    color: var(--site-suave);
    border-bottom: 1px solid var(--site-sep);
}

.faixa--evento strong,
.faixa--evento a {
    color: #fff;
}

.faixa--encerrado {
    background: var(--aviso-fundo);
    color: var(--aviso);
    font-weight: 500;
}

.faixa--admin {
    background: var(--rosa-500);
    color: #fff;
}

.faixa--admin a {
    color: #fff;
    font-weight: 600;
}

/* ---------- hero do evento ---------- */

.hero {
    background: var(--site-1);
    position: relative;
    overflow: hidden;
}

.hero__fundo {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(180, 40, 90, .07) 0, rgba(180, 40, 90, .07) 1px, transparent 1px, transparent 60px),
        var(--site-1);
}

.hero__fundo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--foto, url(/img/banner.jpg));
    background-size: cover;
    background-position: center;
    opacity: .14;
}

.hero__grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--colunas, 1), minmax(0, 1fr));
}

.hero__evento {
    position: relative;
    text-align: center;
    padding: 60px 24px 56px;
}

.hero__evento + .hero__evento {
    border-left: 1px solid var(--site-sep);
}

/* vários eventos: colunas da mesma altura, com os atalhos alinhados embaixo */
.hero--varios .hero__evento {
    display: flex;
    flex-direction: column;
}

.hero--varios .hero__conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero--varios .atalhos__grade {
    margin-top: auto;
    padding-top: 24px;
}

.hero__evento .hero__fundo::before {
    opacity: .16;
}

/* miniaturas "Participe dos workshops" abaixo das informações do evento */
.hero-workshops {
    margin-top: 36px;
}

.hero-workshops__titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto 16px;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--site-suave);
}

.hero-workshops__titulo::before,
.hero-workshops__titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--site-sep);
}

.hero-workshops__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.site-publico a.hero-workshop {
    width: 150px;
    color: var(--site-texto);
    text-decoration: none;
    text-align: center;
}

.hero-workshop__foto {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .18);
    background: var(--bordo-900);
    transition: border-color .15s, transform .15s;
}

.hero-workshop__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-workshop__nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
}

.site-publico a.hero-workshop:hover {
    color: #fff;
}

.hero-workshop:hover .hero-workshop__foto,
.hero-workshop:focus-visible .hero-workshop__foto {
    border-color: var(--site-destaque-claro);
    transform: translateY(-3px);
}

/* card aberto pela miniatura da tela inicial (#workshop-ID) */
.workshop-card:target {
    scroll-margin-top: 90px;
    animation: workshop-alvo 2.4s ease-out;
}

@keyframes workshop-alvo {
    0%,
    40% {
        box-shadow: 0 0 0 4px var(--rosa-500);
    }

    100% {
        box-shadow: var(--sombra);
    }
}

/* carrossel de eventos (mais de um evento ativo) */
.carrossel {
    position: relative;
    background: var(--site-1);
}

/* a altura acompanha o evento à mostra (o script ajusta), em vez de todos ficarem com a altura do maior */
.carrossel__janela {
    overflow: hidden;
    transition: height .7s cubic-bezier(.65, 0, .35, 1);
}

.carrossel__trilho {
    display: flex;
    align-items: flex-start;
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}

/* evento que acabou de entrar: textos sobem em sequência e a foto de fundo recua */
.carrossel__slide.entrando .hero__conteudo > * {
    animation: carrossel-texto .6s cubic-bezier(.2, .7, .3, 1) both;
}

.carrossel__slide.entrando .hero__conteudo > :nth-child(1) { animation-delay: .1s; }
.carrossel__slide.entrando .hero__conteudo > :nth-child(2) { animation-delay: .2s; }
.carrossel__slide.entrando .hero__conteudo > :nth-child(3) { animation-delay: .3s; }
.carrossel__slide.entrando .hero__conteudo > :nth-child(n+4) { animation-delay: .4s; }

.carrossel__slide.entrando .hero__fundo::before {
    animation: carrossel-fundo 1.6s ease-out both;
}

@keyframes carrossel-texto {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes carrossel-fundo {
    from {
        transform: scale(1.12);
        opacity: 0;
    }

    to {
        transform: scale(1);
    }
}

.carrossel__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.carrossel__slide .hero__evento {
    padding-left: 88px;
    padding-right: 88px;
    padding-bottom: 72px;
}

/* largura do texto limitada, para as setas ficarem logo ao lado dele */
.carrossel__slide .hero__conteudo {
    max-width: 820px;
    margin: 0 auto;
}

.carrossel__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 8px;
    border: none;
    background: none;
    color: #fff;
    opacity: .45;
    display: flex;
    cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
    transition: opacity .15s, transform .15s;
}

.carrossel__seta:hover,
.carrossel__seta:focus-visible {
    opacity: .9;
}

.carrossel__seta--anterior:hover {
    transform: translateY(-50%) translateX(-4px);
}

.carrossel__seta--proximo:hover {
    transform: translateY(-50%) translateX(4px);
}

.carrossel__seta svg {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* metade do texto (410px) + folga; nunca encosta na borda da tela */
.carrossel__seta--anterior {
    left: max(8px, calc(50% - 410px - 96px));
}

.carrossel__seta--proximo {
    right: max(8px, calc(50% - 410px - 96px));
}

.carrossel__pontos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.carrossel__ponto {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    background: transparent;
    cursor: pointer;
    transition: background-color .15s, width .2s;
}

.carrossel__ponto.ativo {
    width: 28px;
    border-radius: 6px;
    background: var(--site-destaque-claro);
    border-color: var(--site-destaque-claro);
}

@media (max-width: 600px) {
    .carrossel__slide .hero__evento {
        padding-left: 34px;
        padding-right: 34px;
    }

    /* miniaturas dos workshops em duas colunas menores, para o painel não ficar tão alto */
    .hero-workshops__lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
        max-width: 320px;
        margin: 0 auto;
    }

    .site-publico a.hero-workshop {
        width: auto;
    }

    /* número ímpar: o último fica centralizado na linha */
    .site-publico a.hero-workshop:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 6px);
    }

    .hero-workshop__nome {
        font-size: 12px;
    }

    /* no celular as setas ficam no meio da altura do painel, nas bordas, mais transparentes e por cima do conteúdo */
    .carrossel__seta,
    .carrossel__seta--anterior:hover,
    .carrossel__seta--proximo:hover {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        padding: 4px 0;
        opacity: .35;
    }

    .carrossel__seta svg {
        width: 34px;
        height: 34px;
    }

    .carrossel__seta--anterior {
        left: 0;
    }

    .carrossel__seta--proximo {
        right: 0;
    }
}

.hero__conteudo {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.hero__titulo-varios {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.hero__sub {
    font-size: 20px;
    color: var(--rosa-200);
    margin-bottom: 8px;
    font-style: italic;
}

.hero__info {
    font-size: 13px;
    color: var(--site-suave);
    letter-spacing: .5px;
    margin-bottom: 28px;
}

.hero--varios .hero__sub {
    font-size: 15px;
}

.hero__acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.hero--varios .hero__acoes {
    gap: 18px;
    flex-direction: column;
}

.hero__acoes-esquerda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.btn-inscricao {
    display: inline-block;
    background: var(--site-destaque);
    color: #fff !important;
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-inscricao:hover {
    background: var(--site-destaque-claro);
}

.btn-inscricao--desligado {
    background: rgba(255, 255, 255, .12);
    cursor: default;
}

.btn-inscricao--desligado:hover {
    background: rgba(255, 255, 255, .12);
}

.hero--varios .btn-inscricao {
    font-size: 16px;
    letter-spacing: 1.5px;
}

.link-regulamento {
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: underline;
}

.hero__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

/* contagem regressiva */
.contagem {
    border: 2px solid var(--site-destaque);
    border-radius: 4px;
    padding: 14px 24px 12px;
    text-align: center;
    background: rgba(165, 7, 82, .25);
    min-width: 170px;
}

.contagem__linha {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.contagem__faltam {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rosa-200);
}

.contagem__numero {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.contagem__dias {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}

.contagem__chamada {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff6aa6;
    margin-top: 6px;
}

/* subtítulo das páginas internas sobre o fundo escuro */
.site-publico .destaque p {
    color: var(--site-suave);
}

/* faixa de título das páginas internas (Sobre, Contato), com o fundo do hero */
.hero--pagina .hero__aguarde {
    padding: 48px 24px 40px;
}

.hero--pagina h1 {
    font-size: 30px;
}

/* texto corrido nas seções escuras */
.texto-secao {
    max-width: 680px;
    margin: 0 auto;
    color: #e6d3db;
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

/* cards de contato no estilo dos atalhos */
.contatos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.contatos .atalho {
    text-align: center;
}

.contatos .atalho__valor {
    font-size: 13px;
    color: var(--rosa-100);
    word-break: break-word;
}

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

/* sem evento ativo */
.hero__aguarde {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 72px 24px;
}

.hero__aguarde .contagem {
    display: inline-block;
    margin-top: 12px;
}

/* ---------- atalhos (Minha inscrição, Programação, Regulamento, Resultados) ---------- */

.atalhos {
    background: var(--site-4);
    padding: 20px 0;
}

.atalhos__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero--varios .atalhos__grade {
    max-width: 360px;
    gap: 10px;
    margin-top: 24px;
    padding: 0;
}

.atalho {
    background: var(--site-card);
    border-radius: 6px;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: background .2s;
    border: none;
    color: #fff !important;
}

.atalho:hover {
    background: var(--site-card-hover);
}

.hero--varios .atalho {
    padding: 14px 10px 12px;
    gap: 8px;
}

.hero--varios .atalho svg {
    width: 28px;
    height: 28px;
}

.atalho__rotulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}

.atalho--em-breve {
    opacity: .55;
    cursor: default;
}

.atalho--em-breve:hover {
    background: var(--site-card);
}

.atalho__em-breve {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rosa-200);
    margin-top: -6px;
}

/* ---------- seções "Sobre o evento" e "Galeria" ---------- */

.secao-sobre {
    background: var(--site-3);
    padding: 44px 0;
}

.secao-galeria {
    background: var(--site-2);
    padding: 44px 0;
}

.secao-titulo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.secao-titulo::before,
.secao-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--site-sep);
}

.secao-titulo span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.destaques {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.destaques__item {
    text-align: center;
    padding: 16px 12px 8px;
}

.destaques__item + .destaques__item {
    border-left: 1px solid var(--site-sep);
}

.destaques__icone {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 60px;
}

.destaques__texto {
    font-weight: 600;
    font-size: 16px;
    color: #ddd;
    margin-top: 4px;
    letter-spacing: .3px;
}

.destaques__detalhe {
    font-size: 13px;
    color: var(--site-suave);
    margin-top: 8px;
    font-family: var(--fonte-texto);
}

.galeria {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
}

.galeria__item {
    background-color: var(--site-4);
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    aspect-ratio: 3 / 4;
}

/* ---------- rodapé ---------- */

.rodape {
    background: var(--site-rodape);
    border-top: 1px solid var(--site-sep);
    padding: 36px 0 24px;
}

.rodape__grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.rodape h4 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--site-sep);
}

.rodape ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rodape li {
    margin-bottom: 8px;
}

.rodape li a,
.rodape li button,
.rodape li span {
    color: var(--site-suave);
    font: inherit;
    font-size: 12px;
    letter-spacing: .4px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: color .2s;
}

.rodape li span {
    cursor: default;
    opacity: .7;
}

.rodape li a:hover,
.rodape li button:hover {
    color: #ff6aa6;
}

.rodape__base {
    text-align: center;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #2c1219;
    font-size: 11px;
    color: #9a5a72;
    letter-spacing: .5px;
}

/* modal de localização dos eventos */
.local-evento + .local-evento {
    border-top: 1px solid var(--borda);
    margin-top: 14px;
    padding-top: 14px;
}

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

    .hero__evento + .hero__evento {
        border-left: none;
        border-top: 1px solid var(--site-sep);
    }
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: 26px;
        letter-spacing: 2px;
    }

    .hero__sub {
        font-size: 16px;
    }

    .btn-inscricao {
        font-size: 18px;
    }

    .atalhos__grade {
        grid-template-columns: 1fr;
        padding: 0 40px;
    }

    .hero--varios .atalhos__grade {
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

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

    .destaques__item + .destaques__item {
        border-left: none;
        border-top: 1px solid var(--site-sep);
    }

    .galeria {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
        gap: 24px;
    }

    .rodape__grade {
        grid-template-columns: 1fr 1fr;
    }
}
/* ---------- cards e grade ---------- */

.card {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
}

.card + .card {
    margin-top: 16px;
}

.card__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card__titulo h2,
.card__titulo h3 {
    margin: 0;
}

.card__titulo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
}

/* aparece só no papel (ex.: escola e evento no topo de uma lista impressa) */
.so-impressao {
    display: none;
}

.grade {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.grade .card + .card {
    margin-top: 0;
}

/* painel do admin: números em 3 colunas; abaixo, tempo por dia (mais largo) e atalhos dos relatórios */
.grade--painel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grade--painel-largo {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    margin-top: 16px;
    align-items: start;
}

.painel-numero .numero {
    margin: 4px 0;
}

.painel-atalhos {
    display: grid;
    gap: 6px;
}

.painel-atalhos button {
    display: flex;
    width: 100%;
    background: var(--fundo);
    font: inherit;
    text-align: left;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    color: var(--bordo-700);
    text-decoration: none;
    font-weight: 500;
    transition: background-color .15s, border-color .15s;
}

.painel-atalhos button:hover {
    background: var(--rosa-50);
    border-color: var(--rosa-200);
}

/* tela de relatórios: 4 colunas de cards, mais espaçadas, com o botão alinhado embaixo */
.grade--relatorios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* exportação das músicas: nova exportação e arquivo para baixar, lado a lado */
.grade--exportacao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.barra-progresso {
    overflow: hidden;
    height: 12px;
    margin: 8px 0 6px;
    border-radius: 999px;
    background: var(--rosa-100, #f6ebf0);
}

.barra-progresso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bordo-600, #a50752);
    transition: width .4s ease;
}

.exportacao-dados {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
}

.exportacao-dados dt {
    color: var(--texto-suave);
}

.exportacao-dados dd {
    margin: 0;
    font-weight: 600;
}

@media (max-width: 900px) {
    .grade--exportacao {
        grid-template-columns: 1fr;
    }
}

.relatorio-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.relatorio-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 1200px) {
    .grade--relatorios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .grade--painel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 600px) {
    .grade--painel,
    .grade--relatorios {
        grid-template-columns: 1fr;
    }
}

.numero {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bordo-600);
    line-height: 1.1;
}

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.cabecalho-pagina h1 {
    margin: 0;
}

/* ---------- botões ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 .9rem var(--fonte-titulo);
    letter-spacing: .02em;
    padding: 10px 18px;
    border-radius: var(--raio-controle);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
    background: var(--bordo-600);
    color: #fff;
}

.btn:hover {
    background: var(--bordo-700);
    color: #fff;
}

.btn--destaque {
    background: var(--rosa-500);
}

.btn--destaque:hover {
    background: var(--rosa-600);
}

.btn--secundario {
    background: var(--fundo);
    color: var(--bordo-600);
    border-color: var(--rosa-200);
}

.btn--secundario:hover {
    background: var(--rosa-50);
    color: var(--bordo-700);
}

.btn--perigo {
    background: var(--fundo);
    color: var(--erro);
    border-color: #efc3cb;
}

.btn--perigo:hover {
    background: var(--erro-fundo);
    color: var(--erro);
}

.btn--pequeno {
    padding: 6px 12px;
    font-size: .8rem;
}

.btn--bloco {
    width: 100%;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ---------- formulários ---------- */

.formulario {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.formulario .largura-total {
    grid-column: 1 / -1;
}

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

.campo label {
    font-weight: 500;
    font-size: .9rem;
}

.campo input,
.campo select,
.campo textarea {
    font: inherit;
    color: var(--texto);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    padding: 10px 12px;
    width: 100%;
}

.campo textarea {
    min-height: 110px;
    resize: vertical;
}

/* texto de exemplo (placeholder) bem claro, para não parecer campo preenchido; vale no site, na área da escola e no admin */
input::placeholder,
textarea::placeholder {
    color: #d6cbd0;
    opacity: 1;
}

/* campo de arquivo: botão "Escolher arquivo" no estilo dos botões secundários do site */
.campo input[type="file"] {
    padding: 7px 8px;
    color: var(--texto-suave);
    font-size: .9rem;
    cursor: pointer;
}

.campo input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--rosa-200);
    border-radius: var(--raio-controle);
    background: var(--fundo);
    color: var(--bordo-600);
    font: 600 .8rem var(--fonte-titulo);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s;
}

.campo input[type="file"]:hover::file-selector-button {
    background: var(--rosa-50);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--bordo-500);
    box-shadow: 0 0 0 3px rgba(165, 7, 82, .15);
}

/* e-mail de acesso num card próprio: campo de largura limitada */
.formulario--email {
    grid-template-columns: minmax(0, 420px);
}

/* nome da escola, responsável e diretora numa linha */
.formulario--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* lista de coreografias da escola: uma faixa por coreografia, com os dados lado a lado */
.lista-coreografias {
    display: grid;
    gap: 10px;
}

.lista-coreografias .card + .card {
    margin-top: 0;
}

.coreografia-linha {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) auto auto;
    align-items: center;
    gap: 8px 20px;
    padding: 14px 20px;
}

.coreografia-linha__principal,
.coreografia-linha__detalhes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coreografia-linha__nome {
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    color: var(--bordo-800);
    overflow-wrap: anywhere;
}

.coreografia-linha__detalhes {
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.coreografia-linha__valor {
    font-size: 1.15rem;
    white-space: nowrap;
    text-align: right;
}

.coreografia-linha__acoes {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .coreografia-linha {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .coreografia-linha__detalhes {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .coreografia-linha__valor {
        grid-column: 2;
        grid-row: 1;
    }

    .coreografia-linha__acoes {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* aceite do regulamento no cadastro */
.aceite {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.aceite input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--bordo-600);
    flex-shrink: 0;
}

/* botão com cara de link (ex.: abrir o regulamento na janela) */
.link-botao {
    padding: 0;
    border: none;
    background: none;
    color: var(--bordo-600);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* regulamento dentro da janela: rola dentro dela */
.regulamento--janela {
    max-width: none;
    max-height: calc(100vh - 220px);
}

/* aviso de tempo acima do máximo na coreografia (não bloqueia) */
.campo__aviso-tempo {
    padding: 6px 10px;
    border-left: 3px solid var(--aviso);
    border-radius: var(--raio-controle);
    background: var(--aviso-fundo);
    color: var(--aviso);
    font-size: .8rem;
    line-height: 1.4;
}

.campo__aviso-tempo[hidden] {
    display: none;
}

/* página estreita centralizada (ex.: ingressos): 60% da largura no meio, como colunas 2-3-3-2 com as pontas vazias */
.pagina-centralizada {
    max-width: 60%;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .pagina-centralizada {
        max-width: none;
    }
}

/* duas metades (ex.: documento do bailarino: miniatura atual e o campo para enviar/trocar) */
.formulario--metade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .formulario--tres,
    .formulario--metade {
        grid-template-columns: 1fr;
    }
}

/* endereço da escola numa grade de 10 partes: CEP; endereço/número/complemento (7/1/2); bairro/cidade/estado (4/4/2) */
.formulario--endereco {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.formulario--endereco .campo--cep { grid-column: 1 / -1; }
.formulario--endereco .campo--endereco { grid-column: span 7; }
.formulario--endereco .campo--numero { grid-column: span 1; }
.formulario--endereco .campo--complemento { grid-column: span 2; }
.formulario--endereco .campo--bairro { grid-column: span 4; }
.formulario--endereco .campo--cidade { grid-column: span 4; }
.formulario--endereco .campo--estado { grid-column: span 2; }

.campo__cep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.campo__cep input {
    width: 180px;
}

/* situação da busca do CEP ("Buscando...", "CEP não encontrado") */
.campo__situacao {
    font-size: .8rem;
    color: var(--texto-suave);
}

.campo__situacao--ok {
    color: var(--sucesso);
}

.campo__situacao--erro {
    color: var(--erro);
}

@media (max-width: 760px) {
    .formulario--endereco {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .formulario--endereco .campo--endereco,
    .formulario--endereco .campo--bairro,
    .formulario--endereco .campo--cidade { grid-column: 1 / -1; }
    .formulario--endereco .campo--numero { grid-column: span 1; }
    .formulario--endereco .campo--complemento { grid-column: span 3; }
    .formulario--endereco .campo--estado { grid-column: span 2; }
}

/* espaço da mensagem de erro só aparece quando há erro (vazio, não soma espaço embaixo do campo) */
.campo__erro:empty {
    display: none;
}

/* telefones da escola em 4 colunas: os três campos e o aviso do WhatsApp (um pouco mais largo, para o texto caber em duas linhas) */
.formulario--telefones {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
}

/* aviso ao lado do último campo: fino, alinhado à base do campo (texto em até duas linhas) */
.campo__aviso {
    align-self: end;
    display: flex;
    align-items: center;
    min-height: 45px; /* mesma altura dos campos */
    padding: 3px 12px;
    border-left: 3px solid var(--aviso);
    border-radius: var(--raio-controle);
    background: var(--aviso-fundo);
    color: var(--aviso);
    font-size: .76rem;
    line-height: 1.4;
}

.campo__aviso strong {
    white-space: nowrap;
}

.campo__aviso span {
    display: block;
}

@media (max-width: 900px) {
    .formulario--telefones {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .formulario--telefones .campo__aviso {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .formulario--telefones {
        grid-template-columns: 1fr;
    }
}

.campo__ajuda {
    font-size: .8rem;
    color: var(--texto-suave);
}

.campo__erro,
.field-validation-error {
    font-size: .8rem;
    color: var(--erro);
}

.input-validation-error {
    border-color: var(--erro) !important;
}

/* resumo de erros do formulário (asp-validation-summary com classe "alerta alerta--erro") */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obrigatorio::after {
    content: " *";
    color: var(--rosa-600);
}

/* switch (liga/desliga) */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch__trilho {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--rosa-200);
    position: relative;
    transition: background-color .15s;
    flex: none;
}

.switch__trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s;
}

.switch input:checked + .switch__trilho {
    background: var(--bordo-600);
}

.switch input:checked + .switch__trilho::after {
    transform: translateX(20px);
}

.switch input:focus-visible + .switch__trilho {
    box-shadow: 0 0 0 3px rgba(165, 7, 82, .25);
}

/* ---------- tabelas ---------- */

.tabela-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.tabela th {
    text-align: left;
    font-family: var(--fonte-titulo);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-suave);
    padding: 10px 12px;
    border-bottom: 2px solid var(--borda);
    white-space: nowrap;
}

.tabela td {
    padding: 12px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

.tabela tr:hover td {
    background: var(--rosa-50);
}

.tabela .numero-celula {
    text-align: right;
    white-space: nowrap;
}

/* ---------- alertas e etiquetas ---------- */

.alerta {
    border-radius: var(--raio-controle);
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alerta--sucesso {
    background: var(--sucesso-fundo);
    color: var(--sucesso);
    border-color: #cfe6d7;
}

.alerta--aviso {
    background: var(--aviso-fundo);
    color: var(--aviso);
    border-color: #f1e0b5;
}

.alerta--erro {
    background: var(--erro-fundo);
    color: var(--erro);
    border-color: #f2c9d0;
}

.alerta--info {
    background: var(--rosa-50);
    color: var(--bordo-700);
    border-color: var(--rosa-200);
}

.etiqueta {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--rosa-100);
    color: var(--bordo-700);
    white-space: nowrap;
}

.etiqueta--sucesso {
    background: var(--sucesso-fundo);
    color: var(--sucesso);
}

.etiqueta--aviso {
    background: var(--aviso-fundo);
    color: var(--aviso);
}

.etiqueta--neutra {
    background: #eee7ec;
    color: var(--texto-suave);
}

/* ---------- modal (elemento <dialog>) ---------- */

.modal {
    border: none;
    border-radius: var(--raio);
    padding: 0;
    width: min(640px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    box-shadow: 0 20px 60px rgba(21, 16, 18, .35);
    color: var(--texto);
}

.modal::backdrop {
    background: rgba(21, 16, 18, .55);
}

.modal--grande {
    width: min(1000px, calc(100% - 32px));
}

.quadro-relatorio {
    display: block;
    width: 100%;
    height: calc(100vh - 140px);
    border: none;
    background: #fff;
}

.modal__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}

.modal__topo h2 {
    margin: 0;
    font-size: 1.1rem;
}

.modal__corpo {
    padding: 20px;
    overflow: auto;
}

.modal__rodape {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    background: var(--fundo-suave);
}

.modal__fechar {
    background: none;
    border: none;
    color: var(--texto-suave);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--raio-controle);
}

.modal__fechar:hover {
    background: var(--rosa-50);
    color: var(--bordo-700);
}

/* ---------- páginas públicas ---------- */

.destaque {
    text-align: center;
    padding: 12px 0 24px;
}

.destaque h1 {
    font-size: 2rem;
    margin-bottom: .3em;
}

.destaque p {
    color: var(--texto-suave);
    max-width: 640px;
    margin: 0 auto;
}

.evento-hero {
    border-radius: var(--raio);
    background-color: var(--bordo-900);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 48px 20px;
}

.evento-hero h1 {
    color: #fff;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.evento-hero p {
    color: var(--rosa-200);
}

.grade--eventos {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.evento-card {
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}

.evento-card:hover,
.card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(21, 16, 18, .12);
    color: inherit;
}

.evento-card__foto {
    aspect-ratio: 16 / 9;
    background: var(--bordo-900);
}

.evento-card__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evento-card__corpo {
    padding: 16px 20px 20px;
}

.evento-card__corpo h2 {
    margin-bottom: 8px;
}

/* no site público o texto da página é branco: o card mantém o texto escuro ao passar o mouse */
.site-publico .evento-card:hover,
.site-publico .card--link:hover {
    color: var(--texto);
}

/* card de workshop é para marcar, não é link: sem o "levantar" ao passar o mouse, só destaca a borda */
.workshop-card {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.workshop-card:hover {
    transform: none;
    border-color: var(--rosa-300);
    box-shadow: 0 0 0 1px var(--rosa-300);
}

/* foto inteira (sem cortar) dentro do quadro 16:9; as sobras mostram a própria foto desfocada */
/* faixa de altura fixa; a foto fica no tamanho natural, centralizada (não estica na largura do card) */
.workshop-card__foto {
    position: relative;
    overflow: hidden;
    aspect-ratio: auto;
    height: 210px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workshop-card__foto::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--foto) center / cover no-repeat;
    filter: blur(18px) brightness(.55);
}

.workshop-card__foto img {
    position: relative;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}

/* valor no título do card: "R$" e número sempre juntos */
.workshop-card .card__titulo {
    align-items: flex-start;
}

.workshop-card .card__titulo .numero {
    white-space: nowrap;
    flex-shrink: 0;
}

.workshop-card .card__titulo h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* tela de workshops: evento dos cursos (cards para trocar quando mais de um evento tem workshops) */
.workshops-eventos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.site-publico a.workshops-eventos__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--site-sep);
    border-left: 4px solid var(--site-sep);
    border-radius: var(--raio-controle);
    background: rgba(255, 255, 255, .04);
    color: var(--site-texto);
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}

.site-publico a.workshops-eventos__card:hover {
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--site-destaque-claro);
    color: #fff;
}

.site-publico a.workshops-eventos__card.ativo {
    background: var(--site-destaque);
    border-color: var(--site-destaque);
    border-left-color: #fff;
}

.workshops-eventos__nome {
    font-family: var(--fonte-titulo);
    font-weight: 700;
}

.workshops-eventos__info {
    font-size: .82rem;
    color: var(--site-suave);
}

.workshops-eventos__card.ativo .workshops-eventos__info {
    color: var(--rosa-200);
}

.workshops-evento-unico {
    color: var(--site-suave);
    margin: 0 0 16px;
}

/* instruções de pagamento agrupadas por workshop (inscrição e confirmação) */
/* total dos workshops marcados, no título do card de pagamento */
.workshops-total {
    font-family: var(--fonte-titulo);
    font-size: .9rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

.workshops-total strong {
    margin-left: 6px;
    font-size: 1.35rem;
    color: var(--bordo-600);
}

.pagamento-lista {
    margin: 0 0 16px;
    padding-left: 1.2em;
}

.pagamento-lista li + li {
    margin-top: 8px;
}

.pagamento-lista li::marker {
    color: var(--bordo-600);
}

.pagamento-lista strong {
    color: var(--bordo-800);
}

.pagamento-grupo__texto {
    white-space: pre-line;
}

/* todos os cards de workshop com a mesma altura (também entre linhas da grade) */
.grade--workshops {
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.workshop-card {
    display: flex;
    flex-direction: column;
}

.workshop-card .evento-card__corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* descrição com altura máxima (cerca de 3 linhas); texto maior rola dentro do card */
.workshop-card__descricao {
    white-space: pre-line;
    margin: 10px 0 0;
    max-height: 4.5em;
    overflow-y: auto;
    padding-right: 6px;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: var(--rosa-300) transparent;
}

/* "Quero participar" sempre na base do card, com a folga de 14px para o texto acima */
.workshop-card .workshop-card__escolha {
    margin-top: auto;
}

.workshop-card .evento-card__corpo > :has(+ .workshop-card__escolha) {
    margin-bottom: 14px;
}

.workshop-card:has(input:checked) {
    border-color: var(--bordo-600);
    box-shadow: 0 0 0 2px var(--bordo-600);
}

.workshop-card__escolha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
    font-weight: 500;
    color: var(--bordo-600);
}

.workshop-card__escolha input {
    width: 18px;
    height: 18px;
    accent-color: var(--bordo-600);
}

.card--link {
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}

.passos {
    margin: 0 0 16px;
    padding-left: 1.2em;
}

.passos li + li {
    margin-top: 6px;
}

.lista-links {
    margin: 0;
    padding-left: 1.2em;
}

.regulamento {
    max-width: 900px;
    margin: 0 auto;
}

/* conteúdo gravado pelo editor (Quill): listas, recuos e alinhamentos */
.regulamento li[data-list="bullet"] {
    list-style-type: disc;
}

.regulamento li[data-list="ordered"] {
    list-style-type: decimal;
}

.regulamento .ql-ui {
    display: none;
}

.regulamento .ql-indent-1 { margin-left: 3em; }
.regulamento .ql-indent-2 { margin-left: 6em; }
.regulamento .ql-indent-3 { margin-left: 9em; }
.regulamento .ql-align-center { text-align: center; }
.regulamento .ql-align-right { text-align: right; }
.regulamento .ql-align-justify { text-align: justify; }

/* tabelas montadas a partir dos marcadores ([TABELA DE VALORES] etc.) */
.tabela-regulamento {
    border-collapse: collapse;
    margin: 8px 0 16px;
    min-width: min(100%, 420px);
}

.tabela-regulamento th,
.tabela-regulamento td {
    border: 1px solid var(--rosa-200);
    padding: 6px 12px;
    text-align: left;
}

.tabela-regulamento th {
    background: var(--rosa-100);
    color: var(--bordo-700);
    font-family: var(--fonte-titulo);
    font-size: .85rem;
}

.ajuda-marcadores {
    margin-bottom: 16px;
}

.ajuda-marcadores summary {
    cursor: pointer;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--bordo-600);
}

.ajuda-marcadores ul {
    margin: 0;
    padding-left: 1.2em;
}

.ajuda-marcadores code {
    background: var(--rosa-100);
    color: var(--bordo-700);
    padding: 1px 6px;
    border-radius: 4px;
}

.editor-regulamento {
    padding: 0;
    overflow: hidden;
}

.editor-regulamento .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--borda);
    background: var(--fundo-suave);
}

.editor-regulamento .ql-container.ql-snow {
    border: none;
    font-family: var(--fonte-texto);
    font-size: 1rem;
}

.editor-regulamento .ql-editor {
    min-height: 420px;
}

/* ---------- inscrições (bailarinos, coreografias, músicas) ---------- */

fieldset.sem-borda {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lista-escolha {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin-top: 8px;
}

.escolha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    cursor: pointer;
    background: var(--fundo);
}

.escolha:hover {
    border-color: var(--rosa-300);
}

.escolha:has(input:checked) {
    border-color: var(--bordo-500);
    background: var(--rosa-50);
}

.escolha input {
    margin-top: 4px;
    accent-color: var(--bordo-600);
}

.escolha span {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
}

.escolha[hidden] {
    display: none;
}

/* escolha de bailarinos com busca: lista com altura fixa e rolagem (a página não cresce com 50 bailarinos) */
.escolha-bailarinos__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.escolha-bailarinos__busca {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    background: var(--fundo);
}

.escolha-bailarinos__busca:focus-within {
    border-color: var(--bordo-500);
    box-shadow: 0 0 0 3px rgba(165, 7, 82, .15);
}

.escolha-bailarinos__busca .icone {
    color: var(--texto-suave);
    flex-shrink: 0;
}

.escolha-bailarinos__busca input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--texto);
}

.escolha-bailarinos__filtro {
    display: flex;
    border: 1px solid var(--rosa-200);
    border-radius: var(--raio-controle);
    overflow: hidden;
}

.escolha-bailarinos__filtro button {
    padding: 9px 14px;
    border: none;
    background: var(--fundo);
    color: var(--bordo-600);
    font: 600 .82rem var(--fonte-titulo);
    cursor: pointer;
}

.escolha-bailarinos__filtro button + button {
    border-left: 1px solid var(--rosa-200);
}

.escolha-bailarinos__filtro button.ativo {
    background: var(--bordo-600);
    color: #fff;
}

.escolha-bailarinos__escolhidos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
    align-items: center;
    margin-top: 12px;
    font-size: .85rem;
}

.etiqueta-escolhido {
    padding: 4px 10px;
    border: 1px solid var(--rosa-300);
    border-radius: 999px;
    background: var(--rosa-100);
    color: var(--bordo-700);
    font: 500 .82rem var(--fonte-texto);
    cursor: pointer;
}

.etiqueta-escolhido:hover {
    background: var(--rosa-200);
}

/* uma linha só, com rolagem horizontal: com 50 bailarinos a altura não muda, só a faixa fica mais comprida */
.lista-escolha--rolagem {
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: 230px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    align-items: stretch;
    justify-content: start;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--rosa-300) transparent;
}

.lista-escolha--rolagem .escolha {
    scroll-snap-align: start;
    min-width: 0;
}

.lista-escolha--rolagem .escolha > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .lista-escolha--rolagem {
        grid-auto-columns: 75%;
    }
}

/* setas nas laterais da faixa (sem círculo, como as do carrossel); na ponta, a seta daquele lado some */
.faixa-bailarinos {
    display: flex;
    align-items: center;
    gap: 2px;
}

.faixa-bailarinos .lista-escolha {
    flex: 1;
    min-width: 0;
}

.faixa-bailarinos__seta {
    flex: none;
    display: flex;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--bordo-600);
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s, transform .15s;
}

.faixa-bailarinos__seta[hidden] {
    display: none;
}

.faixa-bailarinos__seta:disabled {
    visibility: hidden;
}

.faixa-bailarinos__seta:hover,
.faixa-bailarinos__seta:focus-visible {
    opacity: 1;
    transform: translateX(-3px);
}

.faixa-bailarinos__seta--proximo:hover,
.faixa-bailarinos__seta--proximo:focus-visible {
    transform: translateX(3px);
}

.faixa-bailarinos__seta svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faixa-bailarinos__seta--proximo svg {
    transform: scaleX(-1);
}

@media (max-width: 600px) {
    .faixa-bailarinos__seta svg {
        width: 24px;
        height: 24px;
    }

    .lista-escolha--rolagem {
        grid-auto-columns: 85%;
    }
}

.escolha-bailarinos__vazio {
    margin: 12px 0 0;
}

.musica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
}

.musica__nome {
    flex: 1 1 220px;
    font-size: .9rem;
}

.musica audio {
    height: 36px;
    max-width: 100%;
}

.musica .campo__erro {
    flex-basis: 100%;
}

.documento-miniatura {
    max-height: 160px;
    width: auto;
    border-radius: var(--raio-controle);
    border: 1px solid var(--borda);
}

/* miniatura clicável (abre o documento na janela) */
.documento-botao {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.documento-botao:hover .documento-miniatura {
    border-color: var(--rosa-300);
}

/* janela do documento: maior que as outras, com a imagem inteira */
.modal--documento {
    width: min(900px, calc(100% - 32px));
}

.modal--documento__corpo {
    display: flex;
    justify-content: center;
    background: var(--fundo-suave);
}

.modal--documento__corpo img {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    border-radius: var(--raio-controle);
}

/* texto curto que não deve quebrar (ex.: "19 anos" na lista de bailarinos) */
.sem-quebra {
    white-space: nowrap;
}

/* barra de filtros das listas do admin */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.filtros .campo {
    flex: 1 1 260px;
}

.filtros .switch {
    padding-bottom: 10px;
}

.senha-revelada {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    letter-spacing: .03em;
}

/* ---------- lista de eventos do admin ---------- */

.evento-admin {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    grid-template-areas:
        "foto dados controles"
        "foto acoes acoes";
    gap: 12px 20px;
    align-items: start;
}

.evento-admin h2 {
    margin: 0 0 4px;
}

.evento-admin__foto {
    grid-area: foto;
    width: 96px;
    height: 96px;
    border-radius: var(--raio-controle);
    background: var(--rosa-100);
    color: var(--bordo-500);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.evento-admin__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evento-admin__foto .icone {
    width: 36px;
    height: 36px;
}

.evento-admin__dados {
    grid-area: dados;
    min-width: 0;
}

.evento-admin__controles {
    grid-area: controles;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evento-admin__acoes {
    grid-area: acoes;
}

@media (max-width: 700px) {
    .evento-admin {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "foto dados"
            "controles controles"
            "acoes acoes";
    }

    .evento-admin__foto {
        width: 64px;
        height: 64px;
    }
}

/* ---------- login (escola e admin) ---------- */

.pagina-login {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.pagina-login .card {
    width: 100%;
    max-width: 420px;
}

/* ---------- login da escola (modelo 2B): container de ~80%, foto à esquerda e login com os dois cards à direita ---------- */

.login-escola {
    padding: 48px 0 64px;
    background: radial-gradient(1200px 500px at 50% -10%, #4a0b28, var(--site-1) 60%);
}

.login-escola__caixa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.login-escola__foto {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: url(/img/banner.jpg) center / cover;
    color: #fff;
}

.login-escola__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 15, 20, .2), rgba(133, 6, 63, .92));
}

.login-escola__chamada {
    position: relative;
    padding: 56px;
}

.login-escola__selo {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
    font: 700 12px var(--fonte-titulo);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.site-publico .login-escola__chamada h1 {
    margin: 0 0 18px;
    color: #fff;
    font: 800 38px/1.12 var(--fonte-titulo);
}

.login-escola__chamada ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.login-escola__chamada li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-escola__chamada li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 13px;
}

.login-escola__lado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 40px;
    background: var(--rosa-50);
    color: var(--texto);
}

.login-escola__conteudo {
    width: min(500px, 100%);
}

.site-publico .login-escola__conteudo h2 {
    margin: 0 0 8px;
    color: var(--bordo-800);
    font: 800 30px var(--fonte-titulo);
}

.login-escola__sub {
    margin: 0 0 32px;
    color: var(--texto-suave);
}

.login-escola .campo {
    margin-bottom: 20px;
    gap: 8px;
}

.login-escola__entrada {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    transition: border-color .15s, box-shadow .15s;
}

.login-escola__entrada:focus-within {
    border-color: var(--bordo-500);
    box-shadow: 0 0 0 3px rgba(165, 7, 82, .15);
}

.login-escola__entrada .icone {
    flex-shrink: 0;
    color: var(--texto-suave);
}

.login-escola .login-escola__entrada input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    font: 15px var(--fonte-texto);
    color: var(--texto);
}

.login-escola .login-escola__entrada input:focus {
    outline: none;
    box-shadow: none;
}

.login-escola__olho {
    display: flex;
    padding: 6px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-suave);
    cursor: pointer;
}

.login-escola__olho:hover,
.login-escola__olho.ativo {
    color: var(--bordo-600);
}

.login-escola__botao {
    height: 50px;
    border-radius: 8px;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-escola__ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 34px 0 18px;
    color: var(--texto-suave);
    font-size: 13px;
}

.login-escola__ou::before,
.login-escola__ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}

.login-escola__opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.login-escola__opcao {
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo);
    transition: border-color .15s, box-shadow .15s;
}

.login-escola__opcao:hover {
    border-color: var(--rosa-300);
}

.login-escola__opcao.aberta {
    border-color: var(--rosa-300);
    box-shadow: 0 8px 24px rgba(165, 7, 82, .1);
}

.login-escola__opcao-topo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 18px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.login-escola__opcao.aberta .login-escola__opcao-topo {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-bottom: 6px;
}

.login-escola__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rosa-100);
    color: var(--bordo-600);
}

.login-escola__opcao strong {
    display: block;
    color: var(--bordo-700);
    font: 700 15px var(--fonte-titulo);
}

.login-escola__descricao {
    color: var(--texto-suave);
    font-size: 13px;
}

.login-escola__opcao em {
    margin-top: 4px;
    color: var(--bordo-600);
    font: 600 13px var(--fonte-titulo);
    font-style: normal;
}

.login-escola__opcao.aberta em {
    display: none;
}

.login-escola__opcao-corpo {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 8px 18px 20px;
}

.login-escola__opcao.aberta .login-escola__opcao-corpo {
    display: flex;
}

/* com um card aberto, os dois ficam empilhados e o fechado vira uma linha compacta */
.login-escola__opcoes:has(.aberta) {
    grid-template-columns: 1fr;
}

.login-escola__opcoes:has(.aberta) .login-escola__opcao:not(.aberta) .login-escola__opcao-topo {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}

.login-escola__opcoes:has(.aberta) .login-escola__opcao:not(.aberta) .login-escola__descricao {
    display: none;
}

.login-escola__opcoes:has(.aberta) .login-escola__opcao:not(.aberta) em {
    margin: 0 0 0 auto;
}

.login-escola__retorno {
    display: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.login-escola__retorno.visivel {
    display: block;
}

.login-escola__retorno--ok {
    background: var(--sucesso-fundo);
    color: var(--sucesso);
}

.login-escola__retorno--erro {
    background: var(--erro-fundo);
    color: var(--erro);
}

.login-escola__retorno--aviso {
    background: var(--aviso-fundo);
    color: var(--aviso);
}

.login-escola__acoes-retorno {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.login-escola__acoes-retorno button {
    padding: 0;
    border: none;
    background: none;
    color: var(--bordo-600);
    font: 600 14px var(--fonte-titulo);
    text-decoration: underline;
    cursor: pointer;
}

/* e-mail já verificado no cadastro */
.campo input.campo--travado {
    background: var(--fundo-suave);
    color: var(--texto-suave);
}

@media (max-width: 900px) {
    .login-escola {
        padding: 0;
    }

    .login-escola__caixa,
    .login-escola__opcoes {
        grid-template-columns: 1fr;
    }

    .login-escola__caixa {
        width: 100%;
        border-radius: 0;
    }

    .login-escola__chamada {
        padding: 32px 24px;
    }

    .site-publico .login-escola__chamada h1 {
        font-size: 28px;
    }

    .login-escola__lado {
        padding: 36px 20px;
    }
}

/* ---------- Área Administrativa (layout com menu lateral) ---------- */

.admin {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

.admin__lateral {
    background: var(--bordo-900);
    color: var(--rosa-200);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background-color: var(--bordo-700);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    color: #fff;
    text-decoration: none;
}

.admin__marca:hover {
    color: #fff;
}

.admin__marca img {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.admin__marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.admin__marca-titulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .03em;
}

.admin__marca-sub {
    font-size: .72rem;
    color: var(--rosa-200);
    opacity: .9;
}

.admin__secao {
    padding: 16px 12px 4px;
}

.admin__secao-titulo {
    font-family: var(--fonte-titulo);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rosa-300);
    opacity: .75;
    padding: 0 8px 6px;
}

.admin__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rosa-200);
    text-decoration: none;
    font-size: .92rem;
    padding: 9px 10px;
    border-radius: var(--raio-controle);
}

.admin__menu a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.admin__menu a.ativo {
    background: var(--bordo-600);
    color: #fff;
}

.admin__principal {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin__evento {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin__evento select {
    font: inherit;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    padding: 7px 10px;
    max-width: 320px;
    background: var(--fundo);
}

/* seletor de evento do topo do admin: card com o evento atual e painel de cards para trocar */
.seletor-evento {
    position: relative;
}

.seletor-evento__atual {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    max-width: 440px;
    padding: 8px 14px;
    border: 1px solid var(--rosa-200);
    border-left: 4px solid var(--bordo-600);
    border-radius: var(--raio-controle);
    background: var(--fundo);
    cursor: pointer;
    list-style: none;
    transition: border-color .15s, box-shadow .15s;
}

.seletor-evento__atual::-webkit-details-marker {
    display: none;
}

.seletor-evento__atual:hover,
.seletor-evento[open] .seletor-evento__atual {
    border-color: var(--bordo-600);
    box-shadow: 0 0 0 3px var(--rosa-100);
}

.seletor-evento__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.seletor-evento__nome {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: .95rem;
    color: var(--bordo-800);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seletor-evento__data {
    font-size: .8rem;
    color: var(--texto-suave);
    line-height: 1.3;
}

.seletor-evento__inativo {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--aviso-fundo);
    color: var(--aviso);
    font-size: .7rem;
    font-weight: 600;
}

.seletor-evento__seta {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--bordo-600);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
}

.seletor-evento[open] .seletor-evento__seta {
    transform: rotate(180deg);
}

.seletor-evento__painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: max(100%, 380px);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo);
    box-shadow: 0 12px 40px rgba(21, 16, 18, .18);
    display: grid;
    gap: 6px;
}

.seletor-evento__titulo {
    font-family: var(--fonte-titulo);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    padding: 2px 6px 4px;
}

.seletor-evento__opcao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-left: 4px solid transparent;
    border-radius: var(--raio-controle);
    background: var(--fundo);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.seletor-evento__opcao .seletor-evento__nome {
    white-space: normal;
}

.seletor-evento__opcao:hover,
.seletor-evento__opcao:focus-visible {
    background: var(--rosa-50);
    border-color: var(--rosa-200);
    border-left-color: var(--rosa-500);
}

.seletor-evento__opcao.ativo {
    background: var(--rosa-100);
    border-color: var(--rosa-200);
    border-left-color: var(--bordo-600);
}

@media (max-width: 600px) {
    .seletor-evento__atual {
        min-width: 0;
        max-width: calc(100vw - 100px);
    }

    .seletor-evento__painel {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* seletor em cards sempre visíveis (view "Cards" do componente): fileira que rola para o lado se não couber */
.admin__evento:has(.seletor-cards) {
    flex: 1;
    min-width: 0;
}

.seletor-cards {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--rosa-300) transparent;
}

.seletor-cards__card {
    flex: 0 0 auto;
    width: auto;
    min-width: 190px;
    max-width: 340px;
    padding: 7px 12px;
}

.seletor-cards__card .seletor-evento__nome {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .88rem;
}

.seletor-cards__card .seletor-evento__data {
    white-space: nowrap;
}

.seletor-cards__card.ativo {
    background: var(--bordo-600);
    border-color: var(--bordo-600);
    border-left-color: var(--bordo-800);
}

.seletor-cards__card.ativo .seletor-evento__nome,
.seletor-cards__card.ativo .seletor-evento__data {
    color: #fff;
}

/* evento fixado pela tela (ex.: edição de workshop): cards desabilitados, só o evento dele marcado */
.seletor-cards--fixo .seletor-cards__card:disabled {
    cursor: default;
}

.seletor-cards--fixo .seletor-cards__card:not(.ativo):disabled {
    opacity: .4;
    cursor: not-allowed;
}

.seletor-cards--fixo .seletor-cards__card:not(.ativo):disabled:hover {
    background: var(--fundo);
    border-color: var(--borda);
    border-left-color: transparent;
}

.admin__conteudo {
    padding: 24px;
    flex: 1;
}

.admin__menu-botao {
    display: none;
    background: none;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    padding: 6px 10px;
    cursor: pointer;
    color: var(--bordo-700);
}

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

    .admin__lateral {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        z-index: 30;
        transform: translateX(-100%);
        transition: transform .2s;
    }

    .menu-aberto .admin__lateral {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, .4);
    }

    .admin__menu-botao {
        display: inline-flex;
    }

    .admin__topo,
    .admin__conteudo {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- impressão ---------- */

/* ---------- janelas de mensagem (Dialogo.confirmar / avisar) e toasts, no lugar de confirm() e alert() ----------
   Faixa lateral, ícone e botão principal na cor de cada tipo: excluir e erro em vermelho, informação em azul,
   aviso em laranja claro, pergunta em bordô e sucesso em verde */

.dialogo--perigo,
.dialogo--erro,
.toast--erro {
    --cor-msg: #d0453b;
    --cor-msg-fundo: #fdecea;
    --cor-msg-texto: #fff;
}

.dialogo--info,
.toast--info {
    --cor-msg: #2f6db5;
    --cor-msg-fundo: #e7effa;
    --cor-msg-texto: #fff;
}

.dialogo--aviso,
.toast--aviso {
    --cor-msg: #e8a33c;
    --cor-msg-fundo: #fdf3e1;
    --cor-msg-texto: #4a3000;
    --cor-msg-botao: #f6c986;
}

.dialogo--pergunta {
    --cor-msg: var(--bordo-600);
    --cor-msg-fundo: var(--rosa-50);
    --cor-msg-texto: #fff;
}

.dialogo--sucesso,
.toast--sucesso {
    --cor-msg: #3e9a64;
    --cor-msg-fundo: #e6f4ec;
    --cor-msg-texto: #fff;
}

.dialogo {
    width: min(420px, calc(100% - 32px));
    padding: 0;
    border: none;
    border-left: 6px solid var(--cor-msg);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(21, 16, 18, .16);
    color: var(--texto);
    text-align: center;
}

.dialogo::backdrop {
    background: rgba(21, 16, 18, .32);
    backdrop-filter: blur(2px);
}

.dialogo[open] {
    animation: dialogo-entrar .16s ease-out;
}

@keyframes dialogo-entrar {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.985);
    }
}

.dialogo__corpo {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 26px 6px;
}

.dialogo__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--cor-msg-fundo);
    color: var(--cor-msg);
}

.dialogo__icone svg {
    width: 24px;
    height: 24px;
}

.dialogo__titulo {
    margin: 0;
    font-size: 1.05rem;
}

.dialogo__texto {
    margin: 0;
    color: var(--texto-suave);
    font-size: .95rem;
    line-height: 1.5;
}

.dialogo__botoes {
    display: flex;
    gap: 8px;
    padding: 18px 22px 22px;
}

.dialogo__botoes .btn {
    flex: 1;
    justify-content: center;
    padding: 9px 16px;
}

.dialogo__principal,
.dialogo__principal:hover {
    border-color: var(--cor-msg-botao, var(--cor-msg));
    background: var(--cor-msg-botao, var(--cor-msg));
    color: var(--cor-msg-texto);
}

.dialogo__principal:hover {
    filter: brightness(.94);
}

.toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: grid;
    justify-items: end;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(21, 16, 18, .16);
    color: var(--texto);
    font-size: .92rem;
    font-weight: 500;
    pointer-events: auto;
    animation: toast-entrar .2s ease-out;
}

.toast__icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cor-msg);
    color: #fff;
}

.toast__icone svg {
    width: 16px;
    height: 16px;
}

.toast--saindo {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s;
}

@keyframes toast-entrar {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@media print {
    .topo,
    .rodape,
    .faixa,
    .admin__lateral,
    .admin__topo,
    .nao-imprimir {
        display: none !important;
    }

    body,
    .admin__conteudo {
        background: #fff;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    /* sem o menu lateral, o conteúdo do admin ocupa a página inteira (a grade deixava ele na coluna de 250px) */
    .admin {
        display: block;
    }

    .admin__principal {
        display: block;
    }

    /* tabelas inteiras na largura da página: sem barra de rolagem, quebrando o texto se precisar */
    .tabela-rolagem {
        overflow: visible !important;
    }

    .tabela {
        width: 100%;
        font-size: 10pt;
    }

    .tabela thead {
        display: table-header-group;
    }

    .tabela tr {
        break-inside: avoid;
    }

    .tabela th,
    .tabela td {
        white-space: normal !important;
    }

    /* valores não quebram ("R$" junto do número) */
    .tabela .numero-celula {
        white-space: nowrap !important;
    }

    .so-impressao {
        display: block;
        margin: 0 0 4px;
        color: var(--texto-suave);
        font-size: 10pt;
    }

    /* Imprimir de uma parte da página (data-imprimir-parte): só ela vai para o papel */
    body.imprimindo-parte .conteudo .container > :not(.imprimir-esta-parte) {
        display: none !important;
    }

    body.imprimindo-parte .imprimir-esta-parte {
        margin-top: 0 !important;
    }

    /* chaves (ex.: Pago / A conferir): só o texto */
    .switch input,
    .switch__trilho {
        display: none !important;
    }

    /* site público (ex.: regulamento): sem cabeçalho e menu do site, fundo branco e texto escuro */
    .cabecalho-site,
    .modal {
        display: none !important;
    }

    body.site-publico {
        background: #fff;
        color: var(--texto);
    }

    .conteudo {
        padding: 0;
    }

    .regulamento {
        max-width: none;
    }

    .regulamento h1 {
        color: var(--bordo-600);
    }

    /* tabelas do regulamento com as cores mesmo sem "imprimir planos de fundo" ligado */
    .tabela-regulamento th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

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

@page {
    margin: 14mm 12mm;
}