/* ============================================================
   Pré-cadastro público de competidor — usa as variáveis de
   cor/tipografia de landing.css (precisa vir carregado antes).

   Fundo AZUL, como o resto do sistema: os cards brancos por cima
   é que carregam o formulário. Por isso os títulos e textos de
   apoio fora dos cards são claros, e dentro dos cards, escuros.
============================================================ */

/* Coluna flex + .pc-main crescendo: sem isto o rodape parava logo depois do conteudo, no meio
   da tela, quando a pagina era curta (achado do Alex em 11/09/2026 na aba de cadastro). */
.pc-body { background: var(--ds-azul); min-height: 100vh; display: flex; flex-direction: column; }

/* Header sólido desde o topo — esta página não tem hero por trás */
.ds-header-solid { background: var(--ds-azul-dark); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }

/* O padding-top tira o conteúdo de baixo do header fixo */
.pc-main { padding: 130px 0 80px; flex: 1 0 auto; }

/* ---------- Título ---------- */
.pc-titulo { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.pc-pretitle {
    color: var(--ds-dourado); font-size: 12.5px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 10px;
}
.pc-titulo h1 {
    font-family: var(--font-serif); font-size: 34px; color: #fff;
    margin: 0 0 12px; font-weight: 400; line-height: 1.25;
}
.pc-destaque { color: var(--ds-dourado); }
.pc-sub { color: #B8C6D9; font-size: 15px; margin: 0; }

/* ---------- Aviso "já usou o sistema?" ---------- */
.pc-aviso-topo {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(216, 154, 31, .12); border: 1px solid rgba(216, 154, 31, .4);
    border-left: 4px solid var(--ds-dourado);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 26px;
    font-size: 14px; color: #E8DCC0; line-height: 1.55;
}
.pc-aviso-topo > i { color: var(--ds-dourado); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.pc-aviso-topo b { color: #fff; }
.pc-link { color: var(--ds-dourado-claro); font-weight: 600; text-decoration: underline; }
.pc-link:hover { color: #fff; }

/* ---------- Blocos do formulário (cards brancos sobre o azul) ---------- */
.pc-form { display: flex; flex-direction: column; gap: 20px; }
.pc-bloco {
    background: #fff; border-radius: 14px; padding: 22px 24px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}
.pc-bloco-titulo {
    font-family: var(--font-serif); font-size: 19px; color: var(--ds-azul);
    margin: 0 0 18px; font-weight: 400; display: flex; align-items: center; gap: 9px;
    padding-bottom: 12px; border-bottom: 1px solid #eef1f5;
}
.pc-bloco-titulo > i { color: var(--ds-dourado); font-size: 20px; }

/* ---------- Campos ---------- */
.pc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pc-campo { display: flex; flex-direction: column; margin-bottom: 16px; }
.pc-campo:last-child { margin-bottom: 0; }
.pc-campo > label { font-size: 13px; font-weight: 700; color: var(--ds-azul); margin-bottom: 6px; }
.pc-obr { color: #c0392b; }
.pc-campo input[type="text"],
.pc-campo input[type="tel"],
.pc-campo select,
.pc-campo textarea {
    border: 1px solid #d9e0e8; border-radius: 9px; padding: 10px 12px;
    font-size: 14px; color: #223; background: #fdfdfe; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.pc-campo input:focus, .pc-campo select:focus, .pc-campo textarea:focus {
    outline: none; border-color: var(--ds-dourado);
    box-shadow: 0 0 0 3px rgba(216, 154, 31, .18);
}
.pc-campo input.pc-invalido { border-color: #c0392b; background: #fff6f5; }
.pc-ajuda { font-size: 11.5px; color: #7b8794; margin-top: 5px; line-height: 1.45; }
.pc-ajuda.mb-2 { margin-top: 0; margin-bottom: 8px; }
.pc-status { font-size: 12px; margin-top: 5px; font-weight: 600; min-height: 16px; }
.pc-status.ok  { color: #1e7e46; }
.pc-status.erro { color: #c0392b; }

/* ---------- Lista de campeonatos (com logo) ---------- */
.pc-lista-campeonatos {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
    max-height: 320px; overflow-y: auto;
}
.pc-item-campeonato {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: #fdfdfe; border: 1.5px solid #d9e0e8; border-radius: 10px;
    padding: 9px 12px; cursor: pointer; text-align: left; transition: all .15s;
}
.pc-item-campeonato:hover { border-color: var(--ds-dourado); }
.pc-item-campeonato.ativa {
    border-color: var(--ds-dourado); background: #fff8e6;
    box-shadow: 0 0 0 2px rgba(216, 154, 31, .18);
}
.pc-item-campeonato-logo {
    width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e8edf2;
}
.pc-item-campeonato-logo-vazia {
    display: inline-flex; align-items: center; justify-content: center; color: #9aa8b6; font-size: 18px;
}
/* min-width:0 é o que deixa o texto quebrar linha em vez de estourar a largura do card
   quando o endereço do campeonato é longo. */
.pc-item-campeonato-texto { min-width: 0; flex: 1; }
.pc-item-campeonato-nome {
    display: block; font-weight: 700; font-size: 14px; color: var(--ds-azul); overflow-wrap: break-word;
}
.pc-item-campeonato-meta {
    display: block; font-size: 12px; color: #7b8794; overflow-wrap: break-word; margin-top: 1px;
}

/* Campo que só existe dentro de outro (ex.: descrição do grupo dentro do bloco de par/grupo) */
.pc-subcampo { margin-top: 14px; }
.pc-subcampo > label { display: block; font-size: 13px; font-weight: 700; color: var(--ds-azul); margin-bottom: 6px; }

/* ---------- "Já existe alguém parecido" ---------- */
.pc-semelhantes {
    background: #fff8e6; border: 1px solid #f0d98a; border-radius: 10px;
    padding: 14px 16px; margin: -4px 0 16px;
}
.pc-semelhantes-topo {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 700; color: #5a4a1a; margin-bottom: 12px;
}
.pc-semelhantes-topo > i { color: #d39e00; }
.pc-semelhantes-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pc-sem-item {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid #ece3c8; border-radius: 8px; padding: 8px 11px;
}
.pc-sem-foto {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #e8edf2; display: inline-flex; align-items: center; justify-content: center;
    color: #9aa8b6; font-size: 17px;
}
.pc-sem-nome { font-weight: 700; font-size: 14px; color: var(--ds-azul); }
.pc-sem-meta { font-size: 12px; color: #7b8794; }
.pc-sem-tag {
    margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 3px 8px; border-radius: 20px;
    background: #eef2f6; color: #5a6b7d;
}
.pc-semelhantes-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pc-sem-item-clicavel { cursor: pointer; transition: all .15s; }
.pc-sem-item-clicavel:hover { border-color: var(--ds-dourado); background: #fffaf0; }
.pc-sem-item-clicavel .pc-sem-tag { background: var(--ds-dourado); color: var(--ds-azul); }

/* ---------- Opções (formato / papel) ---------- */
.pc-opcoes { display: flex; gap: 9px; flex-wrap: wrap; }
.pc-opcao {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid #d9e0e8; background: #fdfdfe; color: #4a5a6b;
    border-radius: 9px; padding: 9px 15px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.pc-opcao:hover { border-color: var(--ds-dourado); color: var(--ds-azul); }
.pc-opcao.ativa {
    border-color: var(--ds-dourado); background: var(--ds-dourado); color: var(--ds-azul);
    box-shadow: 0 2px 8px rgba(216, 154, 31, .35);
}
/* Formato travado porque veio da categoria escolhida */
.pc-opcao:disabled { opacity: .45; cursor: not-allowed; }
.pc-opcao:disabled:hover { border-color: #d9e0e8; color: #4a5a6b; }

/* ---------- Portão inicial (Competidor x Jurado) ---------- */
.pc-opcoes-portao { gap: 14px; }
.pc-opcao-grande {
    flex: 1 1 220px; justify-content: center; padding: 14px 20px;
    font-size: 15.5px; border-radius: 12px; gap: 12px;
}
/* Ícone dourado em quadrado azul-escuro — mesmo padrão do .ds-feature-icon da home */
.pc-opcao-icone {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px;
    background: var(--ds-azul); color: var(--ds-dourado);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}

/* ---------- Voltar ao portão ---------- */
.pc-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    color: #5a6b7d; font-size: 13.5px; font-weight: 600;
    background: none; border: none; padding: 4px 0; margin-bottom: 4px; cursor: pointer;
}
.pc-voltar:hover { color: var(--ds-azul); }

/* ---------- Foto ---------- */
.pc-foto-wrap { display: flex; gap: 14px; align-items: flex-start; }
.pc-foto-preview {
    width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
    background: #e8edf2; display: flex; align-items: center; justify-content: center;
    color: #9aa8b6; font-size: 28px; overflow: hidden; border: 2px solid #d9e0e8;
}
.pc-foto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Termo ---------- */
.pc-termo {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: 13px; color: #4a5a6b; line-height: 1.55; cursor: pointer;
}
.pc-termo input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.pc-termo .pc-link { color: var(--ds-azul); }

/* ---------- Botões ---------- */
.pc-btn-enviar {
    background: var(--ds-dourado); color: var(--ds-azul); border: none;
    border-radius: 10px; padding: 15px 24px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: filter .15s, transform .1s;
    box-shadow: 0 4px 14px rgba(216, 154, 31, .3);
}
.pc-btn-enviar:hover { filter: brightness(1.07); }
.pc-btn-enviar:active { transform: translateY(1px); }
.pc-btn-enviar:disabled { opacity: .6; cursor: not-allowed; }
.pc-btn-sec {
    display: inline-flex; align-items: center;
    background: #fff; color: var(--ds-azul); border: 1.5px solid var(--ds-azul);
    border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: all .15s;
}
.pc-btn-sec:hover { background: var(--ds-azul); color: #fff; }
.pc-btn-link {
    background: none; border: none; color: #7b8794; font-size: 13px;
    text-decoration: underline; cursor: pointer; padding: 4px;
}
.pc-btn-link:hover { color: var(--ds-azul); }

/* ---------- Erro / sucesso ---------- */
.pc-erro {
    background: #fff6f5; border: 1px solid #f3c9c4; border-left: 4px solid #c0392b;
    border-radius: 9px; padding: 12px 15px; color: #a03028; font-size: 14px; font-weight: 600;
}
.pc-sucesso {
    background: #fff; border-radius: 14px; padding: 48px 30px; text-align: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}
.pc-sucesso > i { font-size: 58px; color: #1e7e46; display: block; margin-bottom: 16px; }
.pc-sucesso h2 {
    font-family: var(--font-serif); font-size: 26px; color: var(--ds-azul);
    margin: 0 0 12px; font-weight: 400;
}
.pc-sucesso p { color: #5a6b7d; font-size: 15px; margin: 0 0 22px; line-height: 1.6; }

/* ---------- Recorte da foto ---------- */
#pcCropImagem { max-height: 55vh; }

/* ---------- Celular ----------
   A maioria vai preencher isto no telefone, então aqui vale mais o dedo do que a estética:
   campo em coluna única, alvo de toque grande e nada de zoom automático. */
@media (max-width: 640px) {
    .pc-linha { grid-template-columns: 1fr; gap: 0; }
    .pc-bloco { padding: 18px 16px; }
    .pc-main { padding: 110px 0 60px; }
    .pc-titulo h1 { font-size: 27px; }
    .pc-opcao { flex: 1 1 calc(50% - 5px); justify-content: center; min-height: 46px; }
    .pc-opcao-grande { flex: 1 1 100%; min-height: 54px; }
    .pc-btn-enviar { width: 100%; padding: 17px 24px; }

    /* 16px é o mínimo que o iOS aceita sem dar zoom sozinho ao focar o campo. Abaixo disso a
       página "pula" a cada toque e a pessoa precisa fechar o zoom na mão o formulário inteiro. */
    .pc-campo input[type="text"],
    .pc-campo input[type="tel"],
    .pc-campo select,
    .pc-campo textarea { font-size: 16px; padding: 13px 12px; }

    /* Alvos de toque: 44px é a medida recomendada pra dedo. */
    .pc-btn-sec { min-height: 44px; padding: 11px 16px; }
    .pc-termo input { width: 24px; height: 24px; margin-top: 1px; }
    .pc-termo { padding: 4px 0; }
    .pc-campo { margin-bottom: 20px; }

    /* A foto ganha a linha inteira: o botão do lado do avatar fica apertado em tela estreita. */
    .pc-foto-wrap { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .pc-foto-preview { width: 88px; height: 88px; font-size: 36px; }
    .pc-semelhantes-acoes { flex-direction: column; align-items: stretch; }
    .pc-semelhantes-acoes .pc-btn-sec { justify-content: center; }
    .pc-item-campeonato { min-height: 46px; padding: 10px 12px; }
    .pc-lista-campeonatos { max-height: 260px; }
}