/* ---------------------------------------------------------------------------
   Cadastro de empresa (wizard de 4 etapas) — handoff `CADASTRO_EMPRESA_PORTAL.md`.

   Veste o `gen_layout_new_empresa` e o `gen_banco_layout`
   (`utils/originador/common_originador.py`).

   O formulario e antigo e compartilhado por tres telas, entao aqui nao ha reescrita: o
   Python passou a emitir rotulo-acima (`campo_cadastro_v2`) e callouts no lugar dos textos
   vermelhos, e o resto — inputs, stepper, largura da coluna — e vestido daqui.

   As classes `cartao_indisp_v2`, `icone_aviso_v2` e `cartoes_modo_v2` sao reaproveitadas
   do simulador: sao os mesmos componentes (callout e cartao de radio), e duplicar a
   definicao daria duas verdades para o mesmo desenho.
   --------------------------------------------------------------------------- */

/* ============================================================ COLUNA E GRADE

   O formulario vivia em `flex_desktop` + `center_horiz_desktop`, classes genericas do
   portal: a linha virava um flex de largura cheia e os quatro campos do representante
   esticavam de ponta a ponta da tela. O handoff pede coluna de 640px com grade de duas
   colunas, e e isto. */

.form_cad_v2 {
    max-width: 640px;
    margin: 0 auto;
}

.grade_cad_v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

/* Campo que ocupa a linha inteira — o `html.Div` de um campo so, ou o ultimo de uma
   grade impar. Marcado pelo proprio numero de filhos: com tres campos (etapa 1) o
   terceiro desce sozinho e ficaria com metade da largura. */
.grade_cad_v2 > .campo_cad_v2:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .grade_cad_v2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ CAMPOS */

.campo_cad_v2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.rotulo_cad_v2 {
    margin-bottom: 7px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ajuda_cad_v2 {
    margin-top: 5px;
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* Escopado em `.stepper_cad_v2` — a raiz deste wizard — e nao em `#main-content`. Com o
   ancoradouro largo isto vestia **todo** input do portal, inclusive telas que nao foram
   redesenhadas: a altura de 46px, que aqui e a do handoff, la esticava filtro de tabela e
   campo de modal sem que ninguem tivesse pedido. E o ancoradouro tem de ser o stepper, e
   nao a coluna `.form_cad_v2`: a etapa de revisao nao usa a coluna, e ficaria com os
   inputs em outro desenho no meio do mesmo formulario.

   Vale para o wizard inteiro, inclusive os campos de conta bancaria, que nunca foram
   `FormFloating` e ja tinham rotulo proprio. */
.stepper_cad_v2 .form-control,
.stepper_cad_v2 .form-select {
    height: 46px;
    border-radius: 10px;
    border-color: var(--v-borda-input);
    font: 600 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.stepper_cad_v2 .form-control:focus,
.stepper_cad_v2 .form-select:focus {
    border-color: var(--v-verde-escuro);
    box-shadow: none;
}

/* O `-` entre conta e digito e um `.input-group-text`: sem isto ele fica na altura antiga
   e a linha ganha um degrau no meio. */
.stepper_cad_v2 .input-group-text {
    height: 46px;
    border-color: var(--v-borda-input);
    background: transparent;
    color: #93A6A0;
}

/* ============================================================ CAMPO COM BOTAO

   O codigo do banco e o unico campo com um botao colado: o input cresce, a lupa fica
   quadrada do tamanho da altura do input. Antes o `html.Form` que embrulha o input tinha
   largura fixa e a lupa sobrava para fora da celula da grade. */

.campo_com_botao_v2 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.campo_flex_v2 {
    flex: 1;
    min-width: 0;
}

.stepper_cad_v2 .btn_lupa_v2 {
    flex: 0 0 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    border-color: var(--v-borda-input);
    color: var(--v-verde-escuro);
}

.stepper_cad_v2 .btn_lupa_v2:hover,
.stepper_cad_v2 .btn_lupa_v2:active {
    background: var(--v-tint);
    border-color: var(--v-verde-escuro);
    color: var(--v-verde-escuro);
}

.stepper_cad_v2 .btn_lupa_v2 svg {
    width: 18px;
    height: 18px;
}

/* Linha de apoio que carrega o aviso e o link de acao — o "Adicionar digito" da agencia.
   O link precisa caber ao lado do texto sem virar um paragrafo proprio. */
.ajuda_com_link_v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.ajuda_com_link_v2 .link {
    font-size: inherit;
    font-weight: 700;
    color: var(--v-verde-escuro);
}

/* ============================================================ CHECKBOX

   O "Sou pessoa fisica" perdeu o `format_checklist` no Python (o vermelho de desmarcado);
   a cor de marcado vinha de la junto, e volta aqui — verde, como o resto da tela. */
.check_cad_v2 .form-check-input:checked {
    background-color: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

.check_cad_v2 .form-check-input:focus {
    border-color: var(--v-verde-escuro);
    box-shadow: none;
}

.check_cad_v2 .form-check-label {
    font: 600 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ============================================================ AVISO DE CAMPO

   Mesmo callout do simulador, um degrau menor: aqui ele acompanha um campo, e nao ocupa o
   lugar do conteudo da tela. */

.aviso_campo_v2 {
    max-width: 640px;
    padding: 12px 14px;
    align-items: center;
}

.aviso_campo_v2 .motivos_indisp_v2 {
    font: 500 12.5px/1.5 Manrope, sans-serif;
}

/* SVG inline dentro de um contentor de tamanho fixo: os arquivos vem com `width`/`height`
   de 24, e o `<svg>` respeita esses atributos a menos que alguem diga o contrario. */
.icone_svg_16_v2 svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ============================================================ STEPPER

   O `dmc.Stepper` ja desenha bolinha, linha e rotulo; o que muda e a cor, que sem isto
   sairia no azul padrao do Mantine. */

#main-content .mantine-Stepper-stepIcon[data-progress],
#main-content .mantine-Stepper-stepIcon[data-completed] {
    background-color: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

#main-content .mantine-Stepper-separator[data-active] {
    background-color: var(--v-verde-escuro);
}

/* O icone do stepper e SVG inline, entao herda a cor do `stepIcon` — branco no circulo
   preenchido, mudo na etapa futura — sem precisar de regra por estado. */
#main-content .mantine-Stepper-stepIcon svg {
    width: 20px;
    height: 20px;
}

#main-content .mantine-Stepper-stepLabel {
    font: 600 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

#main-content .mantine-Stepper-step[data-progress] .mantine-Stepper-stepLabel {
    font-weight: 800;
}

/* ============================================================ TIPO DE CONTA

   O `dbc.Select` de CC/Poupanca/Pagamento continua sendo um `select`: o handoff desenha um
   segmentado de dois botoes, mas a tela oferece **tres** tipos, e transformar em
   segmentado esconderia um deles ou espremeria os tres. O que da para alinhar e a pele. */

/* A altura vem da regra unica em `.form_cad_v2 .form-control, .form_cad_v2 .form-select`,
   la em cima — este bloco so existia para dar 46px ao `select`, quando o input ainda
   estava na altura padrao. */

/* ============================================================ REVISAO (etapa 4)

   Uma tabela so, com cabecalho por secao — e nao tres `DataTable` empilhados, que era o
   que havia: cada um trazia a propria borda, a propria rolagem horizontal e um cabecalho
   vazio escondido por CSS, e o rotulo saia com o mesmo peso do valor. */

.faixa_revisao_v2 {
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid var(--v-borda-tint);
    border-radius: 10px;
    background: var(--v-tint);
    font: 700 13.5px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    text-align: center;
}

.rev_tabela_v2 {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    /* Segura o fundo do cabecalho da primeira secao dentro do canto arredondado. */
    overflow: hidden;
}

.rev_cabecalho_v2 {
    padding: 11px 16px;
    background: var(--v-tab-cabecalho);
    border-bottom: 1px solid var(--v-borda-clara);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

/* Sem o `Editar` do handoff — voce pediu para tirar; o stepper acima ja navega.

   E sem `border-top` no cabecalho: a ultima linha da secao anterior ja fecha com a
   divisoria dela, e as duas juntas dariam um traco de 2px entre as secoes. */

.rev_linha_v2 {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    border-bottom: 1px solid var(--v-tab-divisoria);
}

/* A ultima linha encosta na borda do cartao — duas linhas ali viram um traco grosso. */
.rev_linha_v2:last-child {
    border-bottom: 0;
}

.rev_rotulo_v2 {
    padding: 12px 16px;
    font: 500 13px Manrope, sans-serif;
    color: #6B7F78;
}

.rev_valor_v2 {
    padding: 12px 16px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    /* CNPJ e e-mail longos quebram dentro da celula em vez de esticar a tabela. */
    overflow-wrap: anywhere;
}

/* O icone do banco na linha "Banco", do lado do nome. */
.rev_banco_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev_banco_v2 img {
    flex: none;
}

@media (max-width: 575.98px) {
    .rev_linha_v2 {
        grid-template-columns: 1fr;
    }

    .rev_rotulo_v2 {
        padding-bottom: 0;
    }
}

/* Uma linha por mensagem no callout de atencao — sem isto os dois avisos da conta
   ficariam colados num paragrafo so. */
.linha_aviso_v2 + .linha_aviso_v2 {
    margin-top: 5px;
}