/**
 * Configuracao inicial da escola (wizard de setup) — estilos proprios.
 *
 * Carregado por `config/backpack/theme-tabler.php` DEPOIS de palette, admin e
 * badges: assim qualquer regra daqui vence as anteriores por ordem de cascata,
 * sem `!important` (padrao do projeto). As cores vem das variaveis definidas
 * em `surfapp-palette.css` (--surf-navy, --surf-teal-deep, --tblr-*): nenhuma
 * cor nova e inventada aqui para a tela nao destoar do resto do painel.
 *
 * Prefixo unico `.surf-setup-` para nao colidir com `.surf-stat`/`.surf-empty`
 * do parcial `admin/partials/styles`, que as telas do wizard tambem incluem.
 */

/* -----------------------------------------------------------------------
   Trilha de progresso (10 etapas + revisao)
   -----------------------------------------------------------------------
   ICONE EM CIMA, TEXTO EMBAIXO.

   O desenho anterior era horizontal — bolinha e titulo lado a lado, com
   `white-space: nowrap` e `min-width: max-content` na lista. Com onze nos, e
   com titulos como "Politica de cancelamento" ocupando sozinho o dobro dos
   vizinhos, a trilha so cabia com barra de rolagem horizontal. Uma trilha que
   precisa ser arrastada nao faz o unico trabalho que tem: mostrar de relance
   onde a escola esta e quanto falta.

   Empilhado, cada no ocupa a largura do proprio texto quebrado em duas linhas
   e os onze cabem lado a lado. `flex: 1 1 0` distribui a sobra igualmente,
   entao nenhum titulo longo empurra os outros.

   A rolagem continua declarada como ultimo recurso para telas muito estreitas,
   e acontece DENTRO do container, nunca na pagina — mesma regra do
   .surf-table-wrap das listagens. O que sumiu foi o `min-width: max-content`,
   que forcava a rolagem mesmo quando havia espaco. */
.surf-setup-progress {
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    padding: .5rem .5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.surf-setup-progress__list {
    display: flex;
    /* QUEBRA EM LINHAS, E NAO ROLAGEM.

       Numa tela estreita os onze nos nao cabem lado a lado de jeito nenhum. As
       duas saidas eram rolar ou passar para a linha de baixo, e rolar tem o
       mesmo defeito que motivou este redesenho: o que esta fora da tela some do
       relance. Empilhado em duas ou tres fileiras, o caminho inteiro continua
       visivel no celular. */
    flex-wrap: wrap;
    align-items: stretch;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.surf-setup-progress__list li {
    display: flex;
    /* Base de 5.5rem: largura minima em que "Disponibilidades" cabe sem partir
       a palavra. Abaixo disso o texto vira uma coluna de silabas, que e pior do
       que uma fileira a mais. Com `flex-grow` os nos ainda dividem a sobra por
       igual quando ha espaco. */
    flex: 1 1 5.5rem;
    min-width: 5.5rem;
}

.surf-setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .3rem;
    width: 100%;
    padding: .5rem .25rem;
    border-radius: .5rem;
    font-size: .72rem;
    line-height: 1.2;
    text-align: center;
    color: var(--tblr-muted, #857f78);
    text-decoration: none;
}

/* O texto quebra ENTRE PALAVRAS: e isso que faz os onze nos caberem sem
   rolagem. `break-word`, e nao `anywhere` — o segundo partia "Disponibilidades"
   no meio ("Disponibilid / ades") mesmo quando havia como quebrar antes. */
.surf-setup-step__label {
    display: block;
    overflow-wrap: break-word;
}

.surf-setup-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    background: var(--tblr-bg-surface-secondary, #faf8f5);
    font-size: 1rem;
    flex: 0 0 auto;
}

/* Etapa ja preenchida: verde-agua da marca, com check no lugar do numero. */
.surf-setup-step--done {
    color: var(--tblr-primary-text, #146973);
}

.surf-setup-step--done .surf-setup-step__num {
    background: var(--surf-teal-deep, #1a828e);
    border-color: var(--surf-teal-deep, #1a828e);
    color: #fff;
}

/* Etapa atual: bloco cheio em navy — e o unico item "solido" da trilha. */
.surf-setup-step--current {
    background: var(--surf-navy, #0a2638);
    color: #fff;
    font-weight: 600;
}

.surf-setup-step--current .surf-setup-step__num {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* Etapa clicavel (ja visitada) ganha feedback de hover. */
a.surf-setup-step:hover {
    background: var(--tblr-gray-100, #f2efe8);
    color: var(--surf-navy, #0a2638);
}

a.surf-setup-step--current:hover {
    background: var(--surf-navy, #0a2638);
    color: #fff;
}

/* -----------------------------------------------------------------------
   Barras de percentual (index e resultado)
   ----------------------------------------------------------------------- */
.surf-setup-bar {
    height: .5rem;
    border-radius: .25rem;
    background: var(--tblr-gray-200, #e3ddd1);
    overflow: hidden;
}

.surf-setup-bar__fill {
    height: 100%;
    border-radius: .25rem;
    background: var(--surf-teal-deep, #1a828e);
    transition: width .3s ease;
}

.surf-setup-bar__fill--recommended {
    background: var(--surf-teal, #4aa5a6);
}

.surf-setup-bar__fill--overall {
    background: var(--surf-navy, #0a2638);
}

/* -----------------------------------------------------------------------
   Checklist do diagnostico (index) e checklist pos-setup (resultado)
   ----------------------------------------------------------------------- */
.surf-setup-check {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--tblr-border-color, #e3ddd1);
}

.surf-setup-check:last-child {
    border-bottom: 0;
}

.surf-setup-check__icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-top: .1rem;
    background: var(--tblr-gray-100, #f2efe8);
    color: var(--tblr-muted, #857f78);
}

.surf-setup-check--done .surf-setup-check__icon {
    background: var(--tblr-success-bg-subtle, #dcefe7);
    color: var(--tblr-success-text, #175c46);
}

.surf-setup-check__body {
    flex: 1 1 auto;
    min-width: 0;
}

.surf-setup-check__label {
    font-weight: 600;
    color: var(--surf-navy, #0a2638);
}

.surf-setup-check--done .surf-setup-check__label {
    font-weight: 500;
}

.surf-setup-check__detail {
    font-size: .82rem;
    color: var(--tblr-muted, #857f78);
}

.surf-setup-check__actions {
    flex: 0 0 auto;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* -----------------------------------------------------------------------
   Cards de perfil operacional (etapa Dados)
   ----------------------------------------------------------------------- */
.surf-setup-profile {
    display: block;
    height: 100%;
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    padding: .85rem 1rem;
    cursor: pointer;
    background: var(--tblr-bg-surface, #fff);
}

.surf-setup-profile:hover {
    border-color: var(--surf-teal, #4aa5a6);
}

/* `:has` pinta o card escolhido; onde nao houver suporte, o proprio radio
   visivel dentro do card ja comunica a escolha. */
.surf-setup-profile:has(input:checked) {
    border-color: var(--surf-teal-deep, #1a828e);
    background: var(--tblr-primary-bg-subtle, #ddeff1);
}

.surf-setup-profile__title {
    font-weight: 600;
    color: var(--surf-navy, #0a2638);
}

.surf-setup-profile__desc {
    font-size: .82rem;
    color: var(--tblr-muted, #857f78);
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Linhas dinamicas (locais, tipos, equipe, pacotes, evolucao)
   ----------------------------------------------------------------------- */
.surf-setup-row {
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    padding: .85rem 1rem;
    background: var(--tblr-bg-surface, #fff);
    position: relative;
}

.surf-setup-row + .surf-setup-row {
    margin-top: .75rem;
}

/* Linha desmarcada (checkbox "incluir" desligado): esmaece sem esconder,
   para o administrador ver o que esta abrindo mao. */
.surf-setup-row--excluded {
    opacity: .55;
    background: var(--tblr-bg-surface-secondary, #faf8f5);
}

.surf-setup-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.surf-setup-row__title {
    font-weight: 600;
    color: var(--surf-navy, #0a2638);
    font-size: .9rem;
}

/* Sub-bloco dentro de uma linha (campos de instrutor na Equipe,
   habilidades dentro de uma categoria na Evolucao). */
.surf-setup-subblock {
    border-left: 3px solid var(--surf-mint, #c2dfdb);
    padding-left: .85rem;
    margin-top: .75rem;
}

/* -----------------------------------------------------------------------
   Tabela de janelas de disponibilidade (etapa Horarios)
   ----------------------------------------------------------------------- */
.surf-setup-table-wrap {
    overflow-x: auto;
}

.surf-setup-table-wrap table {
    min-width: 860px;
}

.surf-setup-table-wrap td {
    vertical-align: top;
}

/* -----------------------------------------------------------------------
   Revisao e resultado
   ----------------------------------------------------------------------- */
.surf-setup-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.surf-setup-plan-entry {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--tblr-border-color, #e3ddd1);
    font-size: .875rem;
}

.surf-setup-plan-entry:last-child {
    border-bottom: 0;
}

.surf-setup-warnings {
    background: var(--tblr-warning-bg-subtle, #f7eedf);
    border: 1px solid var(--tblr-warning-border-subtle, #e6d0ab);
    border-radius: .5rem;
    padding: .6rem .8rem;
    font-size: .85rem;
    color: var(--tblr-warning-text, #8a622b);
}

.surf-setup-warnings ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* -----------------------------------------------------------------------
   Rodape de acoes das etapas
   ----------------------------------------------------------------------- */
.surf-setup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.surf-setup-actions__right {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* -----------------------------------------------------------------------
   Etapa Recebimentos — a decisao comercial
   -----------------------------------------------------------------------
   Sao dois cartoes de contrato lado a lado. O "recomendado" precisa se
   distinguir do outro a um metro de distancia, senao a recomendacao nao
   recomenda nada: borda em teal, faixa e sombra. */
.surf-setup-plan {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    background: var(--tblr-bg-surface, #fff);
    padding: 1.25rem 1.1rem 1.1rem;
}

.surf-setup-plan--recommended {
    border-color: var(--surf-teal-deep, #1a828e);
    border-width: 2px;
    box-shadow: 0 .35rem 1.1rem rgba(10, 38, 56, .08);
}

.surf-setup-plan__badge {
    position: absolute;
    top: -.7rem;
    left: 1.1rem;
    background: var(--surf-teal-deep, #1a828e);
    color: #fff;
    border-radius: 1rem;
    padding: .1rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.surf-setup-plan__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--surf-navy, #0a2638);
    margin-bottom: .35rem;
}

.surf-setup-plan__desc {
    color: var(--tblr-body-color, #40403f);
    font-size: .9rem;
    margin-bottom: .75rem;
}

.surf-setup-plan__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .84rem;
    color: var(--tblr-muted, #857f78);
}

.surf-setup-plan__list li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: .35rem;
}

.surf-setup-plan__list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--surf-teal-deep, #1a828e);
    font-weight: 700;
}

/* Empurra o botao para a base: com listas de tamanhos diferentes os dois
   cartoes terminam com o CTA na mesma linha. */
.surf-setup-plan__foot {
    margin-top: auto;
}

/* Estado resolvido (conta conectada / plano escolhido). */
.surf-setup-connected {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--tblr-success-border-subtle, #a8d5c2);
    background: var(--tblr-success-bg-subtle, #dcefe7);
    border-radius: .75rem;
    padding: 1rem 1.1rem;
}

.surf-setup-connected__icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tblr-success-text, #175c46);
    color: #fff;
    font-size: 1.3rem;
}

.surf-setup-connected__body {
    flex: 1 1 auto;
    min-width: 0;
}

.surf-setup-connected__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tblr-success-text, #175c46);
}

.surf-setup-connected__text {
    font-size: .9rem;
    color: var(--surf-navy, #0a2638);
}

.surf-setup-connected__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
}

/* Faixa de ambiente de testes.

   Deliberadamente feia: listrada, em ambar, largura inteira. Ela existe porque
   fora de producao a conexao acontece sozinha e a pessoa entende que a conta
   Mercado Pago DELA ja foi ligada — sai da tela achando que terminou. Um aviso
   discreto aqui seria pior do que nenhum. */
.surf-setup-sandbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--tblr-warning-border-subtle, #e6d0ab);
    border-left-width: .35rem;
    border-radius: .5rem;
    background: repeating-linear-gradient(
        135deg,
        var(--tblr-warning-bg-subtle, #f7eedf),
        var(--tblr-warning-bg-subtle, #f7eedf) 12px,
        rgba(255, 255, 255, .55) 12px,
        rgba(255, 255, 255, .55) 24px
    );
    color: var(--tblr-warning-text, #8a622b);
    padding: .65rem .85rem;
    margin-bottom: 1rem;
}

.surf-setup-sandbox__tag {
    flex: 0 0 auto;
    background: var(--tblr-warning-text, #8a622b);
    color: #fff;
    border-radius: .3rem;
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.surf-setup-sandbox__text {
    flex: 1 1 16rem;
    font-size: .87rem;
}

/* -----------------------------------------------------------------------
   Etapa Horarios — faixa de conferencia e destaque de erro
   -----------------------------------------------------------------------

   A conferencia era uma COLUNA lateral que listava janela por janela — a mesma
   informacao da tabela ao lado, escrita de novo, custando 4/12 da largura e
   empurrando as nove colunas da tabela para a rolagem horizontal. Virou esta
   faixa: uma ficha por dia da semana com o total de janelas e o intervalo que
   elas cobrem. E o agregado que a tabela nao consegue mostrar, e cabe em duas
   linhas no rodape do formulario. */
.surf-setup-daybar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .8rem;
}

.surf-setup-daybar:not(:first-child) {
    margin-top: .5rem;
}

.surf-setup-daybar__day {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: 1rem;
    padding: .1rem .6rem;
    /* `white-space` para a ficha nunca quebrar no meio: meia ficha numa linha
       e meia na outra le-se como duas fichas erradas. */
    white-space: nowrap;
}

.surf-setup-daybar__name {
    font-weight: 600;
    color: var(--surf-navy, #0a2638);
}

.surf-setup-daybar__count {
    background: var(--tblr-gray-100, #f2efe8);
    color: var(--tblr-muted, #857f78);
    border-radius: 1rem;
    padding: 0 .4rem;
    font-size: .72rem;
    font-weight: 600;
}

.surf-setup-daybar__span {
    font-variant-numeric: tabular-nums;
    color: var(--surf-teal-deep, #1a828e);
}

/* Resumo de conflitos no topo: um item por janela recusada, com ancora. */
.surf-setup-error-list {
    padding-left: 1.1rem;
    font-size: .85rem;
}

.surf-setup-error-list li + li {
    margin-top: .35rem;
}

/* Faixa de largura inteira sob a linha recusada. A mensagem de cruzamento tem
   uma frase inteira (dia, intervalo e com o que conflita) e nao cabe dentro da
   celula de 92px do campo de hora. */
.surf-setup-window-error td {
    background: var(--tblr-danger-bg-subtle, #f7dedb);
    color: var(--tblr-danger-text, #8a2f26);
    font-size: .82rem;
    border-top: 0;
    white-space: normal;
}

/* Pulso ao chegar pela ancora: a linha ja e vermelha permanente, o brilho so
   diz "e ESTA". */
.surf-setup-window--flash > td {
    animation: surf-setup-flash 1.2s ease-in-out 2;
}

@keyframes surf-setup-flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: var(--tblr-warning-bg-subtle, #f7eedf); }
}

@media (prefers-reduced-motion: reduce) {
    .surf-setup-window--flash > td {
        animation: none;
        outline: 2px solid var(--tblr-warning-text, #8a622b);
    }
}

/* -----------------------------------------------------------------------
   Etapa Pacotes — realce do preco
   -----------------------------------------------------------------------
   O preco e o unico campo que o assistente nunca preenche (sugerir valor
   induziria erro de cobranca), e por isso o unico que passa batido numa tela
   onde tudo o mais ja chega pronto. O selo e o realce vivem enquanto o campo
   esta vazio e somem sozinhos: `:placeholder-shown` responde pelo "vazio" sem
   uma linha de JS nem um segundo estado para manter. */
.surf-setup-price {
    border-radius: .5rem;
}

/* Sem margem propria: o rotulo do preco precisa ter EXATAMENTE a altura e o
   respiro do `.form-label` dos vizinhos, senao o campo desalinha de novo — foi
   a margem reduzida (herdada de quando a dica ficava logo abaixo) que somava
   com a dica para desencaixar a linha inteira. */
.surf-setup-price__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--surf-navy, #0a2638);
}

/* A dica vive ABAIXO do campo, como texto de apoio, e nao entre o rotulo e o
   input. Ali em cima cada linha dela empurrava so esta coluna para baixo, e os
   campos vizinhos da mesma linha (aulas, validade) deixavam de comecar na mesma
   horizontal. Embaixo ela cresce sem mover nada. */
.surf-setup-price__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--tblr-muted, #857f78);
    margin-top: .25rem;
}

.surf-setup-price__flag {
    display: none;
    background: var(--tblr-warning-bg-subtle, #f7eedf);
    border: 1px solid var(--tblr-warning-border-subtle, #e6d0ab);
    color: var(--tblr-warning-text, #8a622b);
    border-radius: 1rem;
    padding: 0 .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Onde `:has` nao existir, o campo continua obrigatorio e a mensagem de
   validacao continua aparecendo: perde-se o realce, nao a regra. */
.surf-setup-price:has(input:placeholder-shown) .surf-setup-price__flag {
    display: inline-block;
}

.surf-setup-price:has(input:placeholder-shown) .form-control:not(.is-invalid) {
    border-color: var(--tblr-warning-border-subtle, #e6d0ab);
    background-color: var(--tblr-warning-bg-subtle, #f7eedf);
}

.surf-setup-price:has(input:placeholder-shown) .input-group-text {
    border-color: var(--tblr-warning-border-subtle, #e6d0ab);
    background-color: var(--tblr-warning-bg-subtle, #f7eedf);
    color: var(--tblr-warning-text, #8a622b);
    font-weight: 600;
}

/* -----------------------------------------------------------------------
   Resultado — confirmacao, proximos passos e avisos curtos
   ----------------------------------------------------------------------- */
.surf-setup-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-radius: .75rem;
    border: 1px solid var(--tblr-success-border-subtle, #a8d5c2);
    background: var(--tblr-success-bg-subtle, #dcefe7);
    padding: 1.1rem 1.2rem;
}

.surf-setup-done--warning {
    border-color: var(--tblr-warning-border-subtle, #e6d0ab);
    background: var(--tblr-warning-bg-subtle, #f7eedf);
}

.surf-setup-done__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--tblr-success-text, #175c46);
    color: #fff;
}

.surf-setup-done--warning .surf-setup-done__icon {
    background: var(--tblr-warning-text, #8a622b);
}

.surf-setup-done__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.surf-setup-done__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--surf-navy, #0a2638);
    margin: 0;
}

.surf-setup-done__text {
    font-size: .87rem;
    color: var(--tblr-muted, #857f78);
}

.surf-setup-done__aside {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Os quatro proximos passos. */
.surf-setup-next {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    background: var(--tblr-bg-surface, #fff);
    padding: 1rem;
}

.surf-setup-next__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--tblr-primary-bg-subtle, #ddeff1);
    color: var(--surf-teal-deep, #1a828e);
    margin-bottom: .6rem;
}

.surf-setup-next__step {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tblr-muted, #857f78);
}

.surf-setup-next__title {
    font-weight: 700;
    color: var(--surf-navy, #0a2638);
    margin-bottom: .3rem;
}

.surf-setup-next__text {
    font-size: .82rem;
    color: var(--tblr-muted, #857f78);
    margin-bottom: .85rem;
}

.surf-setup-next__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* "Antes de comecar": uma frase por cartao, sem parede de texto. */
.surf-setup-tip {
    height: 100%;
    border-left: 3px solid var(--surf-mint, #c2dfdb);
    background: var(--tblr-bg-surface-secondary, #faf8f5);
    border-radius: .35rem;
    padding: .6rem .75rem;
}

.surf-setup-tip__title {
    font-weight: 600;
    font-size: .85rem;
    color: var(--surf-navy, #0a2638);
}

.surf-setup-tip__text {
    font-size: .8rem;
    color: var(--tblr-muted, #857f78);
}

/* Relatorio dobrado. */
.surf-setup-details {
    border: 1px solid var(--tblr-border-color, #e3ddd1);
    border-radius: .75rem;
    background: var(--tblr-bg-surface, #fff);
}

.surf-setup-details__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: .9rem;
}

.surf-setup-details__summary::-webkit-details-marker {
    display: none;
}

/* Seta propria: a nativa some junto com o marker acima e some de vez em
   alguns navegadores. */
.surf-setup-details__summary::after {
    content: '\203A';
    margin-left: auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tblr-muted, #857f78);
    transform: rotate(90deg);
    transition: transform .2s ease;
}

.surf-setup-details[open] > .surf-setup-details__summary::after {
    transform: rotate(-90deg);
}

.surf-setup-details__ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--tblr-success-text, #175c46);
    color: #fff;
    font-size: .85rem;
}

.surf-setup-details__ok--warning {
    background: var(--tblr-warning-text, #8a622b);
}

.surf-setup-details__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--tblr-border-color, #e3ddd1);
    padding-top: 1rem;
}

/* -----------------------------------------------------------------------
   Ajustes para telas menores (tablet/celular)
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .surf-setup-plan {
        padding: 1.1rem .9rem .9rem;
    }

    .surf-setup-connected {
        padding: .85rem;
    }

    .surf-setup-done__aside {
        margin-left: 0;
        width: 100%;
    }

    .surf-setup-done__aside .btn {
        width: 100%;
    }

    .surf-setup-done__title {
        font-size: 1.15rem;
    }

    .surf-setup-step {
        font-size: .78rem;
        padding: .3rem .45rem;
    }

    .surf-setup-check {
        flex-wrap: wrap;
    }

    .surf-setup-check__actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 2.25rem;
    }

    .surf-setup-actions,
    .surf-setup-actions__right {
        width: 100%;
    }

    .surf-setup-actions__right .btn {
        flex: 1 1 auto;
    }
}

/* -----------------------------------------------------------------------
   Etapa "Clientes e alunos": o aviso de lista vazia
   -----------------------------------------------------------------------
   A mensagem "nenhum aluno ainda" vive sempre no HTML e some quando a lista
   ganha o primeiro aluno. E CSS, e nao Blade, porque a linha criada pelo
   JavaScript nao passa pelo Blade: com `@if` a mensagem continuava embaixo de
   dois alunos recem-adicionados. Uma regra cobre os dois casos, e o JS nao
   precisa lembrar de esconder nada.

   `:has(.js-aluno)`, e nao `:not(:empty)`: `:empty` conta TEXTO, e o Blade
   deixa a quebra de linha do `@foreach` dentro do container mesmo quando nao ha
   aluno nenhum. O container nunca era `:empty`, entao a mensagem ficava
   escondida SEMPRE — inclusive na tela em branco, que e a unica em que ela
   precisava aparecer. Quem perdia com isso era justamente o "E o proprio
   aluno": a frase que ensina o botao a existir nunca chegou a ser lida.
   `:has()` conta ELEMENTO, e acerta os dois casos. */
.js-alunos:has(.js-aluno) + .surf-setup-vazio {
    display: none;
}

/* -----------------------------------------------------------------------
   Etapa "Clientes e alunos": a linha do aluno
   -----------------------------------------------------------------------
   Sao seis campos em duas faixas (quem o aluno e / como ele entra), e nao
   uma linha unica: com e-mail e acesso ao portal, tudo junto espremeria o
   nascimento a ponto de o botao do calendario nao caber.

   Duas faixas por aluno pedem uma separacao entre alunos, senao a segunda
   faixa de um parece a primeira do seguinte. Tracejada e discreta de
   proposito: ela separa irmaos dentro da MESMA familia, e nao pode competir
   com a borda cheia que separa um cliente do outro. */
.surf-setup-aluno {
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px dashed var(--tblr-border-color, #e3ddd1);
}

.surf-setup-aluno:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* O BOTAO DO CALENDARIO NA ALTURA DO CAMPO.

   O campo de nascimento virou texto com calendario proprio
   (`surfapp-datepicker.js`), que embrulha o input num `.input-group` e
   acrescenta um botao. Esse botao nasce com a altura padrao do tema,
   enquanto a linha do aluno usa campos `form-control-sm` — e um campo mais
   alto que os vizinhos desalinha a faixa inteira, que e exatamente o defeito
   que o texto de apoio "dia/mes/ano" causava e que esta mudanca foi feita
   para acabar.

   O que segura a altura e o `min-height` que o tema da a todo `.btn` (40px, a
   altura do campo GRANDE) — o padding sozinho nao resolve, e foi o primeiro
   palpite errado. Zerado ele, o `.input-group` estica o botao ate a altura do
   grupo e quem passa a mandar e o proprio input: os 40px viram os 32px do
   `form-control-sm`, iguais aos dos vizinhos. */
.surf-setup-aluno .surf-date__toggle {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .8125rem;
}

/* A caixa de acesso encosta pela base no campo de e-mail ao lado (a faixa usa
   `align-items-end`); o respiro a coloca na altura do texto do campo, e nao
   grudada na linha de baixo dele. */
.surf-setup-aluno__acesso {
    padding-bottom: .35rem;
}