/* Estilos compartilhados das telas de segunda via de boletos. */
/* ==========================================================
   Reset mínimo (substitui o preflight do Tailwind)
   ========================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background-color: #F4F8FD;
    background-attachment: fixed;
    background-image: radial-gradient(circle at 85% 8%, rgba(218, 41, 28, 0.10) 0, rgba(218, 41, 28, 0) 14px), radial-gradient(circle at 6% 62%, rgba(125, 187, 34, 0.14) 0, rgba(125, 187, 34, 0) 22px), radial-gradient(circle at 92% 88%, rgba(0, 61, 138, 0.12) 0, rgba(0, 61, 138, 0) 16px), radial-gradient(circle, rgba(0, 61, 138, 0.10) 1.2px, transparent 1.6px);
    background-size: auto, auto, auto, 24px 24px;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0F1B2D;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input {
    font: inherit;
    margin: 0;
}

p {
    margin: 0;
}

/* ==========================================================
   Layout geral
   ========================================================== */
.pagina-form {
    display: flex;
    min-height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    padding-top: calc(2rem + env(safe-area-inset-top));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.cartao {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    border: 1px solid #D5E0EE;
    background-color: #FFFFFF;
    padding: 2.25rem 1.75rem 1.75rem;
    box-shadow: 0 1px 2px rgba(0, 61, 138, 0.06), 0 24px 48px -24px rgba(0, 61, 138, 0.32);
}

.secao {
    margin-top: 2rem;
}

/* ==========================================================
   Cabeçalho
   ========================================================== */
.logo-escola {
    display: block;
    width: 200px;
    max-width: 70%;
    height: auto;
    max-height: 6rem;
    margin: 0 auto 1.75rem;
    object-fit: contain;
}

.titulo-pagina {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #003D8A;
}

.alerta {
    display: block;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #F5C2C0;
    border-radius: 12px;
    background-color: #FDECEC;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #B42318;
}

/* ==========================================================
   Campo de CPF
   ========================================================== */
.rotulo-campo {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 15px;
    font-weight: 700;
    color: #0F1B2D;
}

.campo-cpf {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 0.875rem;
    border: 1.5px solid #B9C6D8;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 17px;
    color: #0F1B2D;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .campo-cpf::placeholder {
        color: #8593A6;
    }

    .campo-cpf:focus {
        border-color: #003D8A;
        box-shadow: 0 0 0 4px rgba(0, 61, 138, 0.20);
    }

/* ==========================================================
   Botões
   ========================================================== */
.botao-primario {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 1.5rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 10px;
    background-color: #003D8A;
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .botao-primario:hover {
        background-color: #002A60;
    }

    .botao-primario:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(0, 61, 138, 0.20);
    }

    .botao-primario:disabled {
        cursor: wait;
        background-color: #8EA0BA;
        opacity: 1;
    }

.botao-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 1rem;
    padding: 0 1.25rem;
    border-radius: 10px;
    background-color: #7DBB22;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .botao-download:hover {
        background-color: #659A1B;
    }

    .botao-download:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(125, 187, 34, 0.25);
    }

/* ==========================================================
   Seleção de escola
   ========================================================== */
.texto-escola-titulo {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F1B2D;
}

.texto-escola-descricao {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 15px;
    line-height: 1.5rem;
    color: #55657A;
}

.lista-escolas {
    max-height: 20rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.tabela-escolas {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
}

.escola-opcao {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #DCE3EE;
    border-radius: 12px;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

    .escola-opcao:hover {
        border-color: #8EA0BA;
    }

    .escola-opcao:has(:checked) {
        border-color: #003D8A;
        background-color: #F3F7FC;
    }

.radio-escola {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    accent-color: #003D8A;
}

.escola-texto {
    min-width: 0;
}

.escola-nome {
    display: block;
    overflow-wrap: break-word;
    font-size: 1rem;
    font-weight: 700;
    color: #0F1B2D;
}

.escola-quantidade {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #55657A;
}

/* ==========================================================
   Lista de boletos
   ========================================================== */
.aviso-boletos {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #DCE3EE;
    border-radius: 12px;
    background-color: #F3F7FC;
    font-size: 0.875rem;
    color: #55657A;
}

.wrapper-tabela {
    display: block;
    width: 100%;
    max-height: 18rem;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.tabela-boletos {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    text-align: left;
    font-size: 0.875rem;
}

.cabecalho-tabela {
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #55657A;
}

.linha-tabela {
    vertical-align: top;
}

.celula-boleto {
    vertical-align: top;
}

/* Card inteiro clicável: o <label> envolve o checkbox e o conteúdo */
.cartao-boleto {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    border: 1.5px solid #DCE3EE;
    border-radius: 12px;
    background-color: #F8FAFD;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

    .cartao-boleto:hover {
        border-color: #8EA0BA;
    }

    /* Checkbox real, escondido visualmente mas ainda focável por teclado.
   Seleciona pelo tipo, porque o asp:CheckBox põe a CssClass no <span> externo */
    .cartao-boleto input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Indicador circular no canto superior direito */
    .cartao-boleto::after {
        content: "";
        position: absolute;
        top: 0.875rem;
        right: 0.875rem;
        width: 1.25rem;
        height: 1.25rem;
        border: 1.5px solid #B9C6D8;
        border-radius: 50%;
        background-color: #FFFFFF;
        transition: background-color 0.15s, border-color 0.15s;
    }

    /* Estado selecionado */
    .cartao-boleto:has(input[type="checkbox"]:checked) {
        border-color: #003D8A;
        background-color: #F3F7FC;
    }

        .cartao-boleto:has(input[type="checkbox"]:checked)::after {
            border-color: #003D8A;
            background-color: #003D8A;
            box-shadow: inset 0 0 0 4px #FFFFFF;
        }

    /* Foco por teclado */
    .cartao-boleto:has(input[type="checkbox"]:focus-visible) {
        box-shadow: 0 0 0 4px rgba(0, 61, 138, 0.20);
    }

/* Único boleto: sem seleção */
.sem-selecao .cartao-boleto {
    cursor: default;
    pointer-events: none;
}

    .sem-selecao .cartao-boleto::after {
        display: none;
    }

.boleto-vencimento {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #55657A;
}

.boleto-vencimento-valor {
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: #0F1B2D;
}

.boleto-aluno {
    display: block;
    margin-top: 0.5rem;
    overflow-wrap: break-word;
    font-size: 1rem;
    font-weight: 700;
    color: #0F1B2D;
}

.boleto-serie {
    display: block;
    margin-top: 0.125rem;
    overflow-wrap: break-word;
    font-size: 0.875rem;
    color: #55657A;
}

.boleto-instrucao {
    display: block;
    margin-top: 0.5rem;
    overflow-wrap: break-word;
    font-size: 0.875rem;
    color: #55657A;
}

.boleto-codigo {
    display: block;
    margin-top: 0.5rem;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #718096;
}

/* ==========================================================
   Rodapé
   ========================================================== */
.rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #DCE3EE;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #55657A;
}

.rodape-logo {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ==========================================================
   Estado de carregamento dos botões
   ========================================================== */
@keyframes pulsar-carregando {
    0%, 100% {
        background-color: #8EA0BA;
    }

    50% {
        background-color: #7388A6;
    }
}

.botao-primario[data-carregando="true"],
.botao-primario[aria-busy="true"] {
    padding-left: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 0 1 9 9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.125rem center;
    background-size: 1.25rem 1.25rem;
    background-color: #8EA0BA;
    animation: pulsar-carregando 1.6s ease-in-out infinite;
    cursor: wait;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Usuários com "reduzir movimento" veem o spinner parado e sem pulsação */
@media (prefers-reduced-motion: reduce) {
    .botao-primario[data-carregando="true"],
    .botao-primario[aria-busy="true"] {
        animation: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 0 1 9 9'/%3E%3C/svg%3E");
    }
}