/* ============================================================
   criar-conta.css — Estilos da página pública de cadastro
   Usa variáveis do admin.css (cores, radius, transições)
   ============================================================ */

/* ============================================================
   TELA / LAYOUT GERAL
   ============================================================ */

.tela-cadastro {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;

    background-image: url('../assets/img/hero-bg.png');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}
.tela-cadastro::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.88) 0%,
        rgba(10, 10, 10, 0.72) 45%,
        rgba(10, 10, 10, 0.78) 70%,
        rgba(10, 10, 10, 0.92) 100%
    );
    z-index: 0;
    pointer-events: none;
}
.tela-cadastro::after {
    content: '';
    position: fixed;
    top: -20%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(101,233,217,0.15), transparent 60%);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 1;
}

.cadastro-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
}

.cadastro-card {
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   HEADER
   ============================================================ */

.cadastro-header {
    padding: 26px 28px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.cadastro-header .logo-marca {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    display: block;
    border-radius: 12px;
}
.cadastro-header h1 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--texto);
}
.cadastro-header p {
    margin: 0;
    color: var(--texto-suave);
    font-size: .9rem;
}

/* ============================================================
   STEPS (barra de progresso)
   ============================================================ */

.steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    /* Centralizado e com largura limitada para não esticar demais */
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 20px 24px 4px;

    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid var(--border);
}

/* Se preferir a barra alinhada ao corpo do card (sem "flutuar"),
   descomente o bloco abaixo e comente o de cima:

.steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 60px 4px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid var(--border);
}
*/

.step-item {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}
.step-item:last-child { flex: 0 0 auto; }

.step-bola {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    background: var(--bg);
    border: 2px solid var(--border-forte);
    color: var(--texto-fraco);
    flex-shrink: 0;
    transition: all .25s ease;
}
.step-bola svg { width: 14px; height: 14px; }

.step-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--texto-fraco);
    margin-left: 8px;
    white-space: nowrap;
    transition: color .25s ease;
}

.step-linha {
    width: 48px;              /* ← largura fixa da linha (era flex) */
    height: 2px;
    background: var(--border-forte);
    margin: 0 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.step-linha::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cyan);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.step-item.concluido .step-linha::before { transform: translateX(0); }
.step-item.concluido + .step-item .step-linha::before { transform: translateX(-100%); }

.step-item.ativo .step-bola {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #0a0a0a;
    box-shadow: 0 0 0 4px rgba(101,233,217,.15);
}
.step-item.ativo .step-label { color: var(--cyan); font-weight: 700; }

.step-item.concluido .step-bola {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #0a0a0a;
}
.step-item.concluido .step-label { color: var(--cyan); }

.step-item:last-child .step-linha { display: none; }

/* ============================================================
   CORPO / PAINÉIS
   ============================================================ */

.cadastro-body { padding: 24px 28px 28px; }

.painel-step { display: none; }
.painel-step.ativo { display: block; animation: fadeStep .25s ease; }

@keyframes fadeStep {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Cabeçalho de cada passo */
.step-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.step-titulo-icone {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(101,233,217,.12);
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-titulo-icone svg { width: 20px; height: 20px; }
.step-titulo h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--texto);
    letter-spacing: -.3px;
}
.step-titulo p {
    margin: 0;
    font-size: .82rem;
    color: var(--texto-suave);
}

/* ============================================================
   CARROSSEL DE PLANOS
   ============================================================ */

.carrossel-wrap-cad {
    position: relative;
    padding: 12px 44px 8px;
    margin: 0 -8px;
}

.carrossel-cad {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 4px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carrossel-cad::-webkit-scrollbar { display: none; }

.carrossel-cad .plano-card-cad {
    flex: 0 0 calc(50% - 7px);
    min-width: 250px;
    scroll-snap-align: center;
}

.carrossel-seta-cad {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--border-forte);
    color: var(--texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 5;
    padding: 0;
}
.carrossel-seta-cad:hover {
    background: var(--cyan);
    color: #0a0a0a;
    border-color: var(--cyan);
}
.carrossel-seta-cad:disabled { opacity: 0.3; cursor: not-allowed; }
.carrossel-seta-cad svg { width: 18px; height: 18px; }
.carrossel-seta-esq { left: 0; }
.carrossel-seta-dir { right: 0; }

/* Dots */
.carrossel-dots-cad {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.carrossel-dot-cad {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border-forte);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
.carrossel-dot-cad.ativo {
    background: var(--cyan);
    width: 22px;
    border-radius: 999px;
}

/* ============================================================
   CARD DE PLANO
   ============================================================ */

.plano-card-cad {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px 18px;
    cursor: pointer;
    transition: all .2s ease;
    background: rgba(30, 41, 59, 0.5);
    margin: 0;
    min-height: 180px;
}
.plano-card-cad:hover {
    border-color: rgba(101,233,217,.4);
    background: rgba(101,233,217,.04);
    transform: translateY(-2px);
}
.plano-card-cad.selecionado {
    border-color: var(--cyan);
    background: rgba(101,233,217,.08);
    box-shadow: 0 0 0 3px rgba(101,233,217,.12), 0 12px 30px rgba(101,233,217,.15);
}
.plano-card-cad input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Topo: chip + check */
.plano-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    min-height: 22px;
}

/* Chips */
.plano-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
.plano-chip svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.5;
}
.plano-chip-personal {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}
.plano-chip-aluno {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
}
.plano-chip-popular {
    background: var(--cyan);
    color: #0a0a0a;
    border: 1px solid var(--cyan);
    box-shadow: 0 2px 8px rgba(101,233,217,0.35);
}

/* Check circular */
.plano-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-forte);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    flex-shrink: 0;
}
.plano-check svg {
    width: 12px;
    height: 12px;
    color: transparent;
    stroke-width: 3;
}
.plano-card-cad.selecionado .plano-check {
    background: var(--cyan);
    border-color: var(--cyan);
}
.plano-card-cad.selecionado .plano-check svg { color: #0a0a0a; }

/* Conteúdo */
.plano-nome-cad {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--texto);
    margin-bottom: 8px;
    line-height: 1.2;
    min-height: 2.4em;
}
.plano-preco-cad {
    color: var(--cyan);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    margin-bottom: 6px;
}
.plano-preco-cad span {
    font-size: 0.78rem;
    color: var(--texto-suave);
    font-weight: 500;
}
.plano-limite-cad {
    font-size: 0.75rem;
    color: var(--texto-suave);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}
.plano-limite-cad svg {
    width: 12px;
    height: 12px;
    color: var(--cyan);
    flex-shrink: 0;
}

/* ============================================================
   AVISOS
   ============================================================ */

.aviso-cadastro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: .84rem;
    line-height: 1.5;
    margin: 8px 0 20px;
    border-left: 3px solid;
}
.aviso-cadastro.trial {
    background: rgba(101,233,217,.06);
    border-left-color: var(--cyan);
    color: var(--cyan);
}
.aviso-cadastro.aprovacao {
    background: rgba(234,179,8,.06);
    border-left-color: #eab308;
    color: #eab308;
}
.aviso-cadastro strong { color: var(--texto); }
.aviso-cadastro svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   RESUMO DO PLANO (passos 2 e 3)
   ============================================================ */

.plano-resumo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(101,233,217,.06);
    border: 1px solid rgba(101,233,217,.2);
    border-radius: 10px;
    margin-bottom: 20px;
}
.plano-resumo-icone {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(101,233,217,.15);
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.plano-resumo-icone svg { width: 18px; height: 18px; }
.plano-resumo-info {
    flex: 1;
    min-width: 0;
}
.plano-resumo-info .label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
    font-weight: 700;
}
.plano-resumo-info .nome {
    font-size: .95rem;
    font-weight: 700;
    color: var(--texto);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plano-resumo-info .preco {
    font-size: .82rem;
    color: var(--cyan);
    font-weight: 700;
    margin-top: 2px;
}
.plano-resumo-trocar {
    background: transparent;
    border: 1px solid var(--border-forte);
    color: var(--texto-suave);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.plano-resumo-trocar:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}
.plano-resumo-trocar svg { width: 12px; height: 12px; }

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */

.cadastro-body .campo { margin-bottom: 12px; }

.cadastro-body .campo label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--texto);
}
.cadastro-body .campo label svg {
    width: 14px; height: 14px;
    color: var(--cyan);
    flex-shrink: 0;
    stroke-width: 2.2;
}
.cadastro-body .campo input,
.cadastro-body .campo select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-forte);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: var(--texto);
    font-family: inherit;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cadastro-body .campo input:focus,
.cadastro-body .campo select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(101,233,217,.15);
}
.cadastro-body .campo input.invalido,
.cadastro-body .campo select.invalido {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.cadastro-body .campo small.erro-campo {
    display: block;
    color: #ef4444;
    font-size: .75rem;
    margin-top: 4px;
    font-weight: 500;
}

/* Campo de senha com botão olho */
.campo-senha-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.campo-senha-wrap input { padding-right: 42px; }
.btn-olho {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--texto-suave);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease;
}
.btn-olho:hover { color: var(--cyan); }
.btn-olho svg { width: 16px; height: 16px; }

/* Grid de duas colunas */
.linha-cadastro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (min-width: 520px) {
    .linha-cadastro.duas { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NAVEGAÇÃO ENTRE PASSOS
   ============================================================ */

.nav-steps {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.nav-steps .btn {
    flex: 1;
    min-height: 46px;
    justify-content: center;
    font-size: .92rem;
    font-weight: 700;
}
.btn-voltar {
    background: transparent;
    border: 1px solid var(--border-forte);
    color: var(--texto-suave);
    max-width: 130px;
}
.btn-voltar:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

/* ============================================================
   FOOTER DO CARD
   ============================================================ */

.cadastro-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .85rem;
    color: var(--texto-suave);
    background: rgba(15, 23, 42, 0.6);
}
.cadastro-footer a {
    color: var(--cyan);
    font-weight: 600;
    text-decoration: none;
}
.cadastro-footer a:hover { text-decoration: underline; }

/* ============================================================
   MODAL DE ERROS
   ============================================================ */

.modal-erros .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-erros .lista-erros {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-erros .lista-erros li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239,68,68,.06);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--texto);
    line-height: 1.4;
}
.modal-erros .lista-erros li svg {
    width: 14px; height: 14px;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}
.modal-erros .lista-erros li strong {
    color: #fca5a5;
    display: block;
    font-size: .78rem;
    margin-bottom: 2px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 768px) {
    .tela-cadastro {
        background-attachment: scroll;
        background-position: center center;
        align-items: flex-start;
        padding: 20px 12px 40px;
    }
}

@media (max-width: 620px) {
    .carrossel-wrap-cad { padding: 12px 36px 8px; }
    .carrossel-seta-cad { width: 32px; height: 32px; }
    .carrossel-cad .plano-card-cad {
        flex: 0 0 78%;
        min-width: 220px;
    }
}

@media (max-width: 520px) {
    .steps-bar {
        max-width: 260px;
        padding: 16px 20px 4px;
    }
    .step-label { display: none; }
    .step-linha { width: 36px; margin: 0 10px; }
    .step-bola { width: 28px; height: 28px; font-size: .78rem; }
}

@media (max-width: 480px) {
    .cadastro-header { padding: 22px 20px 18px; }
    .cadastro-body   { padding: 18px 18px 22px; }
    .cadastro-footer { padding: 14px 20px; }
    .cadastro-header h1 { font-size: 1.2rem; }
    .step-titulo h2 { font-size: 1rem; }
    .btn-voltar { max-width: 100px; }
    .carrossel-wrap-cad { padding: 12px 32px 4px; }
    .carrossel-cad .plano-card-cad { flex: 0 0 82%; }
    .plano-nome-cad { font-size: .9rem; }
    .plano-preco-cad { font-size: 1.35rem; }
}