/* Tema global — Associação Espírita Pai Kachambi.
   Carregado por templates/aepk.html, então vale para o site inteiro. */

/* A home (assistencia.html) ainda monta suas próprias seções full-bleed
   dentro de um wrapper .pk-page; aepk.html embrulha {% block content %}
   em <main class="container">, que limitaria essas seções à largura
   boxed do site. Quebra pro viewport só quando esse wrapper existe. */
main.container:has(> .pk-page) {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Páginas internas (sem o wrapper .pk-page) não têm uma última seção com o
   respiro de .pk-section antes do rodapé — dá um espaço aqui, no mesmo
   valor, pra não ficar colado. A home já resolve isso sozinha. */
main.container:not(:has(> .pk-page)) {
    padding-bottom: 44px;
}
@media (min-width: 992px) {
    main.container:not(:has(> .pk-page)) {
        padding-bottom: 80px;
    }
}

/* Na tela, a largura boxed do .container centraliza o conteúdo — no
   papel isso só sobra como margem enorme dos dois lados sem ganhar
   nada; o papel já tem sua própria margem física. */
@media print {
    main.container {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* O tom claro de fundo do site (body { background: var(--pk-bg) })
       não faz sentido no papel — só gasta tinta/toner. */
    body {
        background: #fff !important;
    }
}

:root {
    --pk-purple: var(--cl-iorima, #9370DB);
    --pk-purple-hover: #7E58D0;
    --pk-purple-text: #5A4796;
    --pk-purple-bg: #F2EDFB;
    --pk-purple-border: #E4DBF6;
    --pk-purple-border-soft: #DCD3EE;

    --pk-dark: #221E2C;
    --pk-dark-card: #2C2739;
    --pk-dark-border: #3B3549;

    --pk-text: #221E2C;
    --pk-text-muted: #544D63;
    --pk-text-soft: #4A4459;
    --pk-label: #8A82A0;

    --pk-border: #E9E4F2;
    --pk-border-soft: #EBE6F3;

    --pk-bg: #FBFAFD;
    --pk-bg-alt: #F6F3FB;

    --pk-success-text: #2F7A5B;
    --pk-success-bg: #EAF6F0;
    --pk-success-border: #CFE9DD;

    --pk-warning-text: #8A5A18;
    --pk-warning-bg: #FDF3E6;
    --pk-warning-border: #F2E0C4;

    --pk-danger-text: #A34141;
    --pk-danger-bg: #FBEEEE;
    --pk-danger-border: #F0D3D3;

    --pk-notice-bg: #FDF6EC;
    --pk-notice-border: #F0E2CB;
    --pk-notice-icon-bg: #F7E7CE;
    --pk-notice-icon: #8A5A18;
    --pk-notice-title: #2E2415;
    --pk-notice-text: #5C5140;
}

body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    color: var(--pk-text);
    background: var(--pk-bg);
}

/* :where() keeps this reset at zero specificity so any component class
   below (.pk-btn-primary etc.) wins its own color without fighting it. */
:where(body) a {
    text-decoration: none;
    color: var(--pk-purple-text);
}
:where(body) a:hover {
    color: var(--pk-purple);
}

h1, h2, h3, h4 {
    font-family: 'Newsreader', serif;
    font-weight: 400;
    color: var(--pk-text);
}

.pk-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-purple);
}

.pk-eyebrow-muted {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-label);
}

/* header */
.pk-header {
    background: rgba(251, 250, 253, .92);
    border-bottom: 1px solid var(--pk-border-soft);
    backdrop-filter: blur(6px);
}
.pk-header .navbar-brand-title {
    font-family: 'Newsreader', serif;
    font-size: 1.2rem;
    color: var(--pk-text);
    line-height: 1.15;
}
.pk-header .navbar-brand-subtitle {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pk-label);
}
.pk-header .nav-link {
    color: var(--pk-text-soft);
    font-size: .95rem;
}
.pk-header .nav-link:hover {
    color: var(--pk-purple);
}
@media (max-width: 991.98px) {
    .pk-header .navbar-toggler {
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--pk-purple-border);
        border-radius: 11px;
        box-shadow: none !important;
    }
}
@media (min-width: 992px) {
    .pk-header .navbar-nav {
        gap: 2rem !important;
    }
}
.pk-pill-link {
    font-size: .9rem;
    color: var(--pk-purple-text);
    border: 1px solid var(--pk-purple-border-soft);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    display: inline-block;
}
.pk-pill-link:hover {
    border-color: var(--pk-purple);
    background: var(--pk-purple-bg);
    color: var(--pk-purple-text);
}

/* comunicado */
.pk-notice {
    background: var(--pk-notice-bg);
    border-bottom: 1px solid var(--pk-notice-border);
}
.pk-notice-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--pk-notice-icon-bg);
    color: var(--pk-notice-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.pk-notice-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pk-notice-icon);
}
.pk-notice-title {
    font-family: 'Newsreader', serif;
    font-size: 1.4rem;
    color: var(--pk-notice-title);
}
.pk-notice-text {
    color: var(--pk-notice-text);
}

/* hero */
.pk-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F2FD 100%);
    border-bottom: 1px solid var(--pk-border-soft);
    padding: 36px 0 32px;
}
.pk-hero h1 {
    font-weight: 300;
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: -.01em;
}
@media (min-width: 992px) {
    .pk-hero {
        padding: 72px 0 64px;
    }
    .pk-hero h1 {
        font-size: 3.75rem;
        line-height: 1.06;
        letter-spacing: -.015em;
    }
}

/* títulos de seção da home — Newsreader leve e maior que o h2 padrão do Bootstrap */
.pk-page h2 {
    font-weight: 300;
    font-size: 1.8125rem;
    line-height: 1.15;
}
@media (min-width: 992px) {
    .pk-page h2 {
        font-size: 2.625rem;
        line-height: 1.1;
    }
}

/* respiro vertical das seções da home — bem maior no desktop que o py-5 padrão do Bootstrap */
.pk-section {
    padding-top: 44px;
    padding-bottom: 44px;
}
@media (min-width: 992px) {
    .pk-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
/* eventos emenda direto na agenda da semana, sem respiro/borda no topo */
.pk-section-eventos {
    padding-top: 0;
    padding-bottom: 44px;
}
@media (min-width: 992px) {
    .pk-section-eventos {
        padding-bottom: 80px;
    }
}

.pk-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--pk-purple-bg);
    border: 1px solid var(--pk-purple-border);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .8rem;
    color: var(--pk-purple-text);
}
.pk-badge-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--pk-purple);
    display: inline-block;
}
.pk-btn-primary {
    background: var(--pk-purple);
    color: #fff;
    font-weight: 500;
    padding: .85rem 1.6rem;
    border-radius: .75rem;
    display: inline-block;
    text-align: center;
}
.pk-btn-primary:hover {
    background: var(--pk-purple-hover);
    color: #fff;
}
.pk-btn-outline {
    border: 1px solid var(--pk-purple-border-soft);
    color: var(--pk-text-soft);
    padding: .85rem 1.5rem;
    border-radius: .75rem;
    display: inline-block;
    text-align: center;
}
.pk-btn-outline:hover {
    border-color: var(--pk-purple);
    background: #F7F4FD;
    color: var(--pk-text-soft);
}
.pk-btn-dark {
    background: var(--pk-dark);
    color: #fff;
    font-weight: 500;
    padding: .85rem;
    border-radius: .75rem;
    display: block;
    text-align: center;
}
.pk-btn-dark:hover {
    background: #3A3348;
    color: #fff;
}

/* variante compacta — rodapé de card com 2-3 ações lado a lado */
.pk-btn-sm {
    padding: .4rem .85rem;
    font-size: .8rem;
    border-radius: .55rem;
}

.pk-badge-status {
    font-size: .75rem;
    border-radius: 999px;
    padding: .3rem .7rem;
    display: inline-block;
    white-space: nowrap;
}
.pk-badge-status.free {
    color: var(--pk-success-text);
    background: var(--pk-success-bg);
    border: 1px solid var(--pk-success-border);
}
.pk-badge-status.inscricao {
    color: var(--pk-warning-text);
    background: var(--pk-warning-bg);
    border: 1px solid var(--pk-warning-border);
}
.pk-badge-status.category {
    color: var(--pk-purple-text);
    background: var(--pk-purple-bg);
    border: 1px solid var(--pk-purple-border);
}
/* status administrativo — neutro pra rascunho (ainda em preparação, normal),
   vermelho/alerta pra suspenso (já foi publicado e foi tirado do ar) */
.pk-badge-status.rascunho {
    color: var(--pk-text-muted);
    background: #F1F0F3;
    border: 1px solid var(--pk-border);
}
.pk-badge-status.suspenso {
    color: var(--pk-danger-text);
    background: var(--pk-danger-bg);
    border: 1px solid var(--pk-danger-border);
}

/* próxima sessão card */
.pk-next-card {
    background: #fff;
    border: 1px solid var(--pk-purple-border);
    border-radius: 16px;
    box-shadow: 0 16px 34px -26px rgba(60, 40, 110, .4);
    padding: 22px;
    gap: 14px;
}
.pk-next-card .day,
.pk-next-card .time {
    font-family: 'Newsreader', serif;
    font-size: 2.25rem;
    line-height: 1;
}
.pk-next-card .time {
    color: var(--pk-purple);
}
/* lista de avisos do card "Próxima sessão" — cada linha com marcador */
.pk-dot-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.pk-dot-list > div {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-size: .9375rem;
    color: var(--pk-text-muted);
}
.pk-dot-list > div::before {
    content: "•";
    color: var(--pk-purple);
    line-height: 1.5;
}
/* markdownify sempre embrulha em <p>; aqui o texto precisa correr numa
   linha só, junto com a data que vem antes dele */
.pk-inline-md p {
    display: inline;
    margin: 0;
}
@media (min-width: 992px) {
    .pk-next-card {
        border-radius: 18px;
        box-shadow: 0 18px 40px -28px rgba(60, 40, 110, .35);
        padding: 32px;
        gap: 20px;
    }
    .pk-next-card .day,
    .pk-next-card .time {
        font-size: 3.25rem;
    }
}

/* divisor de contas — sete guias, entre o hero e a agenda da semana */
.pk-line-divider {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px;
    background: var(--pk-bg);
    border-bottom: 1px solid var(--pk-border-soft);
}
.pk-line-divider-line {
    height: 1px;
    background: #EDE8F5;
    flex: 1;
}
.pk-line-divider-bead {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--bead, #C0AEE6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    opacity: .9;
}
.pk-line-divider-bead span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--bead, #C0AEE6);
    border: 1px solid rgba(0, 0, 0, .07);
    display: block;
}
.pk-line-divider-bead--spirit {
    background: #F4F0FB;
}
.pk-line-divider-bead--spirit span {
    background: #FFFFFF;
    border-color: #CFC4E4;
}
@media (min-width: 992px) {
    .pk-line-divider {
        padding: 26px 48px;
    }
    .pk-line-divider-bead {
        width: 24px;
        height: 24px;
    }
    .pk-line-divider-bead span {
        width: 10px;
        height: 10px;
    }
}

/* cards genéricos */
.pk-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 1rem;
    transition: border-color .15s ease;
    height: 100%;
}
.pk-card:hover {
    border-color: #C9B8EC;
}
/* card com inscrição em aberto/perto de abrir — leve destaque, como no design */
.pk-card--highlight,
.pk-card--highlight:hover {
    border-color: #DCD0F3;
    box-shadow: 0 14px 34px -26px rgba(60, 40, 110, .4);
}
/* caixa "vagas abrem em" nos cards da agenda */
.pk-vagas-abrem {
    background: #FBF8FF;
    box-shadow: inset 0 0 0 1px #EDE6F9;
    border-radius: 10px;
    padding: .75rem .875rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pk-text-muted);
}
.pk-vagas-abrem strong {
    color: var(--pk-text);
}
/* botão "Quero me inscrever" no card da agenda — mesma altura do box de vagas/aviso
   (mesmo padding vertical e line-height do texto, já que a borda do box virou box-shadow) */
.pk-day-card .pk-btn-primary {
    padding-top: .75rem;
    padding-bottom: .75rem;
    line-height: 1.3125;
}
.pk-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--pk-purple-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pk-purple-text);
    font-size: 1.4rem;
}
@media (min-width: 992px) {
    .pk-card-icon {
        width: 56px;
        height: 56px;
    }
}

/* cards da agenda da semana — padding/gap responsivos e título em Newsreader maior */
.pk-day-card {
    padding: 22px;
    gap: 14px;
}
@media (min-width: 992px) {
    .pk-day-card {
        padding: 30px;
        gap: 18px;
    }
}
.pk-day-card-title {
    font-weight: 400;
    font-size: 1.4375rem;
    line-height: 1.2;
    margin: 0;
}
@media (min-width: 992px) {
    .pk-day-card-title {
        font-size: 1.75rem;
    }
}
.pk-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--pk-purple-bg);
    border-radius: .75rem;
    padding: .7rem .8rem;
    flex: none;
}
.pk-event-date .num {
    font-family: 'Newsreader', serif;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--pk-purple-text);
}
.pk-event-date .mon {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pk-label);
}

/* seção alternada */
.pk-section-alt {
    background: var(--pk-bg-alt);
    border-top: 1px solid var(--pk-border-soft);
    border-bottom: 1px solid var(--pk-border-soft);
}
/* "Onde estamos" emenda direto no rodapé escuro — sem hairline no design,
   só o contraste de cor separa as duas seções */
#pk-local {
    border-bottom: none;
}
.pk-photo {
    width: 100%;
    height: 180px;
    border-radius: .9rem;
    border: 1px solid #E1D9F0;
    object-fit: cover;
    display: block;
}
@media (min-width: 992px) {
    .pk-photo {
        height: 220px;
    }
}
/* no mobile empilha e deita o valor ao lado da descrição; no desktop volta a ser coluna */
.pk-stat-card {
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: .9rem;
    padding: 1.125rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pk-stat-card .value {
    font-family: 'Newsreader', serif;
    font-size: 1.875rem;
    color: var(--pk-purple);
    line-height: 1;
    flex: none;
}
@media (min-width: 992px) {
    .pk-stat-card {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: 1.375rem;
    }
    .pk-stat-card .value {
        font-size: 2.125rem;
    }
}

/* seis combinados */
.pk-step-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    color: var(--pk-purple);
    border: 1px solid var(--pk-purple-border);
    border-radius: .5rem;
    padding: .35rem .55rem;
    flex: none;
    align-self: flex-start;
}

/* vestimenta (seção escura) */
.pk-dark-section {
    background: var(--pk-dark);
}
.pk-dark-section .pk-eyebrow {
    color: #B79AEF;
}
.pk-dark-section h2 {
    color: #FBFAFD;
}
.pk-dark-section p {
    color: #B9B3C7;
}
.pk-dark-card {
    background: var(--pk-dark-card);
    border: 1px solid var(--pk-dark-border);
    border-radius: 1rem;
    padding: 1.75rem;
}
.pk-dark-card .title {
    color: #FBFAFD;
    font-weight: 500;
}
.pk-dark-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #C9C3D6;
}
.pk-dark-card ul li {
    padding: .35rem 0;
}
.pk-check-icon, .pk-x-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.pk-check-icon {
    background: var(--pk-success-bg);
    color: var(--pk-success-text);
}
.pk-x-icon {
    background: #FBEDED;
    color: #A34141;
}

/* faq */
.pk-faq summary {
    cursor: pointer;
    list-style: none;
}
.pk-faq summary::-webkit-details-marker {
    display: none;
}
.pk-faq details {
    border-top: 1px solid var(--pk-border);
    padding: 1.25rem 0;
}
.pk-faq details:last-child {
    border-bottom: 1px solid var(--pk-border);
}
.pk-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Newsreader', serif;
    font-size: 1.3rem;
    color: var(--pk-text);
}
.pk-faq summary .toggle {
    color: var(--pk-purple);
    font-size: 1.2rem;
    flex: none;
}
.pk-faq details[open] summary .toggle {
    transform: rotate(45deg);
}
.pk-faq p {
    color: var(--pk-text-muted);
    margin: .75rem 0 0;
}

/* colunas de "Nossa casa" / "Vestimenta" / "FAQ" — no desktop o design usa
   64px de respiro entre as colunas e proporções específicas por seção;
   o gutter padrão do Bootstrap (24px) fica bem mais apertado que isso. */
@media (min-width: 992px) {
    #pk-como > .container > .row,
    #pk-vestimenta > .container > .row,
    #pk-faq > .container > .row {
        display: grid;
        gap: 64px;
    }
    #pk-como > .container > .row > [class*="col-"],
    #pk-vestimenta > .container > .row > [class*="col-"],
    #pk-faq > .container > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
    }
    #pk-como > .container > .row {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
    #pk-vestimenta > .container > .row {
        grid-template-columns: .85fr 1.15fr;
    }
    #pk-faq > .container > .row {
        grid-template-columns: .8fr 1.2fr;
    }
}

/* blogs (home) — cards de largura fixa, sem esticar quando há poucos itens */
#pk-blogs .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    gap: 1.5rem;
    margin: 0;
}
#pk-blogs .row > .col {
    width: auto;
    max-width: none;
    padding: 0;
}

/* mapa (localização) — moldura larga e baixa, não um retângulo alto */
.pk-map-frame {
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
}
.pk-map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}
@media (min-width: 992px) {
    .pk-map-frame {
        height: 360px;
        border-radius: 16px;
    }
}

/* páginas internas — breadcrumb, cabeçalho, prosa e paginação */
.pk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pk-label);
}
.pk-breadcrumb li {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pk-breadcrumb li + li::before {
    content: "/";
    color: var(--pk-border);
}
.pk-breadcrumb a {
    color: var(--pk-label);
}
.pk-breadcrumb a:hover {
    color: var(--pk-purple);
}
.pk-breadcrumb li.active {
    color: var(--pk-text-soft);
}

.pk-page-header {
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid var(--pk-border-soft);
    margin-bottom: 2.5rem;
}
@media print {
    .pk-page-header {
        padding-top: 0;
    }
}

.pk-permalink {
    color: var(--pk-label);
    font-size: .8rem;
    display: inline-flex;
}
.pk-permalink:hover {
    color: var(--pk-purple);
}

.pk-prose {
    color: var(--pk-text-soft);
    line-height: 1.75;
}
.pk-prose > * + * {
    margin-top: 1.1em;
}
.pk-prose h2, .pk-prose h3, .pk-prose h4 {
    margin-top: 1.75em;
}
.pk-prose a {
    text-decoration: underline;
    text-decoration-color: var(--pk-purple-border);
    text-underline-offset: 3px;
}
.pk-prose a:hover {
    text-decoration-color: var(--pk-purple);
}
.pk-prose img {
    max-width: 100%;
    border-radius: .75rem;
}
.pk-prose blockquote {
    margin: 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--pk-purple-border);
    color: var(--pk-text-muted);
    font-style: italic;
}
.pk-prose ul, .pk-prose ol {
    padding-left: 1.4rem;
}
.pk-prose li + li {
    margin-top: .4em;
}
.pk-prose hr {
    border: 0;
    border-top: 1px solid var(--pk-border-soft);
    margin: 2em 0;
}

.pk-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 3rem 0;
}
.pk-pagination a, .pk-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .6rem;
    border-radius: .6rem;
    font-size: .85rem;
    color: var(--pk-text-soft);
}
.pk-pagination a:hover {
    background: var(--pk-purple-bg);
    color: var(--pk-purple-text);
}
.pk-pagination li.active span {
    background: var(--pk-purple);
    color: #fff;
}
.pk-pagination li.disabled span {
    color: var(--pk-border);
    cursor: default;
}

/* formulários */
.form-label,
.pk-form-card label:not(.form-check-label) {
    font-size: .85rem;
    font-weight: 500;
    color: var(--pk-text-soft);
    margin-bottom: .35rem;
}
.form-control,
.form-select {
    border: 1px solid var(--pk-border);
    border-radius: .6rem;
    color: var(--pk-text);
    padding: .6rem .85rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--pk-purple);
    box-shadow: 0 0 0 .2rem var(--pk-purple-bg);
}
.form-control::placeholder {
    color: var(--pk-label);
}
.form-check-input {
    border: 1px solid var(--pk-purple-border-soft);
}
.form-check-input:checked {
    background-color: var(--pk-purple);
    border-color: var(--pk-purple);
}
.form-check-input:focus {
    border-color: var(--pk-purple);
    box-shadow: 0 0 0 .2rem var(--pk-purple-bg);
}
.form-check-label {
    color: var(--pk-text-soft);
}
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #D98A8A;
}
.is-invalid:focus {
    box-shadow: 0 0 0 .2rem #FBEDED;
}
.invalid-feedback {
    color: #A34141;
    font-size: .85rem;
}

/* protocolo de cancelamento em 4 caixas (estilo OTP) — mais fácil de ler
   e digitar que um único campo de texto pra um código curto (ver
   static/assets/js/otp-input.js). */
.pk-otp-group {
    display: flex;
    justify-content: center;
    gap: .6rem;
}
.pk-otp-box {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.35rem;
    font-weight: 500;
    border: 1px solid var(--pk-border);
    border-radius: .6rem;
    color: var(--pk-text);
}
.pk-otp-box:focus {
    outline: none;
    border-color: var(--pk-purple);
    box-shadow: 0 0 0 .2rem var(--pk-purple-bg);
}
.pk-otp-group.is-invalid .pk-otp-box {
    border-color: #D98A8A;
}
.pk-otp-group.is-invalid .pk-otp-box:focus {
    box-shadow: 0 0 0 .2rem #FBEDED;
}

/* "número de participantes" como botões, quando são poucas opções —
   mais rápido de tocar no mobile do que abrir o teclado numérico */
.pk-radio-btn-group {
    display: flex;
    justify-content: center;
    gap: .6rem;
}
.pk-radio-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid var(--pk-purple-border-soft);
    border-radius: .6rem;
    font-weight: 500;
    color: var(--pk-text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pk-radio-btn input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pk-radio-btn:has(input:checked) {
    background: var(--pk-purple);
    border-color: var(--pk-purple);
    color: #fff;
}
.pk-radio-btn:has(input:focus-visible) {
    border-color: var(--pk-purple);
    box-shadow: 0 0 0 .2rem var(--pk-purple-bg);
}
.pk-radio-btn-group.is-invalid .pk-radio-btn {
    border-color: #D98A8A;
}

/* card de formulário */
.pk-form-card {
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 1.1rem;
    padding: 1.75rem;
}

/* alertas */
.pk-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: .9rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.pk-alert-icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.4;
}
.pk-alert-title {
    font-weight: 500;
    margin-bottom: .15rem;
}
.pk-alert-danger {
    background: #FBEDED;
    border: 1px solid #F2D4D4;
    color: #8A3232;
}
.pk-alert-danger .pk-alert-title {
    color: #7A2C2C;
}
.pk-alert-warning {
    background: var(--pk-warning-bg);
    border: 1px solid var(--pk-warning-border);
    color: var(--pk-warning-text);
}
.pk-alert-warning .pk-alert-title {
    color: #6B4512;
}

/* banner de reserva de vaga com contagem regressiva */
.pk-reserva-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: .9rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--pk-success-bg);
    border: 1px solid var(--pk-success-border);
    color: var(--pk-success-text);
}
.pk-reserva-banner-icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.4;
}
.pk-reserva-banner-body {
    flex: 1;
    min-width: 0;
}
.pk-reserva-banner-tempo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.pk-progress-track {
    margin-top: .6rem;
    height: .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    overflow: hidden;
}
.pk-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--pk-success-text);
    transition: width 1s linear;
}
.pk-progress-bar.is-warning {
    background: var(--pk-warning-text);
}

/* stepper */
.pk-stepper {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.75rem 0;
}
.pk-stepper .pk-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--pk-label);
}
.pk-stepper .pk-step-num {
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border-color: var(--pk-border);
    color: var(--pk-label);
    background: transparent;
}
.pk-stepper .pk-step-label {
    font-size: .85rem;
    display: none;
}
@media (min-width: 768px) {
    .pk-stepper .pk-step-label {
        display: inline;
    }
}
.pk-stepper .pk-step.done .pk-step-num {
    background: var(--pk-purple-bg);
    border-color: var(--pk-purple-border);
    color: var(--pk-purple-text);
}
.pk-stepper .pk-step.done .pk-step-label {
    color: var(--pk-text-soft);
}
.pk-stepper .pk-step.current .pk-step-num {
    background: var(--pk-purple);
    border-color: var(--pk-purple);
    color: #fff;
}
.pk-stepper .pk-step.current .pk-step-label {
    color: var(--pk-text);
    font-weight: 500;
}
.pk-stepper .pk-step-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--pk-border);
    min-width: 1.25rem;
}
.pk-stepper .pk-step-line.done {
    background: var(--pk-purple-border);
}

/* tabelas */
.pk-table {
    width: 100%;
    border-collapse: collapse;
}
.pk-table th,
.pk-table td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--pk-border-soft);
    vertical-align: middle;
}
.pk-table thead th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pk-label);
    font-weight: 400;
    border-bottom: 1px solid var(--pk-border);
    text-align: left;
}
.pk-table tbody tr:hover {
    background: var(--pk-bg-alt);
}
.pk-table tfoot td {
    border-bottom: 0;
    color: var(--pk-text-muted);
    font-size: .85rem;
}
/* O Bootstrap Table só estiliza cursor/seta de ordenação sob a classe
   `.table` — mas `data-classes="pk-table"` a substitui em vez de somar,
   então essas regras do vendor nunca batem. Reproduz aqui (mesmos SVGs
   do bootstrap-table.min.css, só troca a cor de destaque pro roxo do
   tema) pra colunas ordenáveis voltarem a ter cursor e indicador. */
.pk-table thead th .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px !important;
}
.pk-table thead th .both {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23dcdcdc"><path d="m103.05877,41.4c9.37707,-12.5 24.60541,-12.5 33.98248,0l96.02113,128c6.90152,9.2 8.92696,22.9 5.17614,34.9s-12.45274,19.8 -22.20489,19.8l-192.04225,-0.1c-9.67713,0 -18.45406,-7.8 -22.20489,-19.8s-1.65036,-25.7 5.17614,-34.9l96.02113,-128l0.07501,0.1zm0,429.3l-96.02113,-128c-6.90152,-9.2 -8.92696,-22.9 -5.17614,-34.9s12.45274,-19.8 22.20489,-19.8l192.04225,0c9.67713,0 18.45406,7.8 22.20489,19.8s1.65036,25.7 -5.17614,34.9l-96.02113,128c-9.37707,12.5 -24.60541,12.5 -33.98248,0l-0.07501,0z"/></svg>');
    background-size: 16px 16px;
    background-position: center right 2px;
}
.pk-table thead th .asc {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%239370DB"><path d="m136.9496,41.4c-9.3763,-12.5 -24.60342,-12.5 -33.97972,0l-96.01334,128c-6.90096,9.2 -8.92624,22.9 -5.17572,34.9s12.45173,19.8 22.20309,19.8l192.02668,0c9.67634,0 18.45256,-7.8 22.20309,-19.8s1.65023,-25.7 -5.17572,-34.9l-96.01334,-128l-0.07501,0z"/></svg>');
}
.pk-table thead th .desc {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%239370DB"><path d="m136.94959,471.6c-9.3763,12.5 -24.60342,12.5 -33.97972,0l-96.01334,-128c-6.90096,-9.2 -8.92624,-22.9 -5.17572,-34.9s12.45173,-19.8 22.20308,-19.8l192.02667,0c9.67634,0 18.45256,7.8 22.20308,19.8s1.65023,25.7 -5.17572,34.9l-96.01334,128l-0.07501,0z"/></svg>');
}

/* Listas de presença viram muitas páginas com o padding/fonte de tela;
   aperta só na impressão pra caber mais linhas por página. */
@media print {
    .pk-table td {
        padding-top: .2rem;
        padding-bottom: .2rem;
        font-size: .9rem;
    }
}

/* estado de status (páginas de confirmação/erro) */
.pk-status {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
}
.pk-status-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    background: var(--pk-purple-bg);
    color: var(--pk-purple-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}
.pk-status h1 {
    margin-bottom: 1rem;
}
.pk-status p {
    color: var(--pk-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}
/* fica vazio até o countdown.js preencher; reserva a altura da linha
   pra não dar o "pulo" no layout quando o texto aparece */
#contagemRegressiva {
    min-height: 1.6em;
}

/* footer */
.pk-footer {
    background: var(--pk-dark);
    color: #B9B3C7;
}
.pk-footer a {
    color: #B9B3C7;
}
.pk-footer a:hover {
    color: #FBFAFD;
}