/* Design do novo Simulador — paleta e layout inspirados em
   https://simulador-bolsa-846123317466.europe-west1.run.app/ */

.simulador-novo {
    --brand-blue: #082878;
    --brand-blue-2: #0b348f;
    --brand-purple: #8d42ff;
    --brand-purple-soft: #efe7ff;
    --brand-cyan: #00dfc0;
    --brand-cyan-soft: #dffbf6;
    --ink: #071633;
    --muted: #58647a;
    --line: #d8deea;
    --panel: #ffffff;
    --field: #f9fbfe;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink);
}

.simulador-novo h2 {
    color: var(--brand-blue);
}

.simulador-novo .workspace {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.simulador-novo .form-panel,
.simulador-novo .result-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(7, 22, 51, 0.04);
}

.simulador-novo .form-panel {
    border-top: 4px solid var(--brand-purple);
}

.simulador-novo .result-panel {
    border-top: 4px solid var(--brand-cyan);
    position: sticky;
    top: 1rem;
}

.simulador-novo .info-highlight {
    background: var(--brand-purple-soft);
    border-left: 4px solid var(--brand-purple);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.simulador-novo .info-highlight p {
    margin: 0 0 0.75rem;
}

.simulador-novo .info-highlight p:last-child {
    margin-bottom: 0;
}

.simulador-novo .section-title {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.simulador-novo .form-panel > .section-title:first-child,
.simulador-novo .result-panel > .section-title:first-child {
    margin-top: 0;
}

.simulador-novo .grid-2 {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.simulador-novo .field.full {
    grid-column: 1 / -1;
}

/* Espaço entre um campo e o seguinte — sem isto, o único espaçamento vertical do formulário era o
   margin-bottom da label (0.35rem), dando a sensação confusa de a label estar mais perto do campo
   anterior do que do seu próprio campo (esta página não usa .grid-2, que noutras páginas já dava
   este espaçamento via "gap"). Maior que o espaço label→campo para a leitura ficar clara: cada
   label fica visualmente agrupada com o campo que lhe pertence. */
.simulador-novo .field {
    margin-bottom: 1.1rem;
}

.simulador-novo .field label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

/* Ícone de ajuda ao lado da label mas FORA dela — um <label for="..."> reencaminha cliques para o
   input associado (bloqueante quando o input é type="file", abre logo o seletor nativo). */
.simulador-novo .label-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.35rem;
}

.simulador-novo .label-row label {
    margin-bottom: 0;
}

/* Campo só de leitura (ex.: NIF, já associado à conta) — visualmente "trancado", distinto dos
   campos editáveis. */
.simulador-novo .field .form-control[readonly] {
    background: var(--line);
    color: var(--muted);
    cursor: default;
}

.simulador-novo .file-loading-spinner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.simulador-novo .field .form-control,
.simulador-novo .field .form-select {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
}

/* Dropdown de sugestões da instituição de ensino (substitui <datalist> nativo, ver
   PedidoIncentivo.cshtml) — largura igual ao campo (em vez de largura pelo conteúdo, que
   ultrapassava o painel do formulário e sobrepunha-se ao painel de ajuda ao lado): nomes
   compridos quebram linha em vez de precisarem de scroll lateral. */
.simulador-novo .instituicao-ensino-sugestoes {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 380px;
    overflow-y: auto;
    border-radius: 8px;
    background: var(--panel);
}

.simulador-novo .instituicao-ensino-sugestoes .list-group-item {
    white-space: normal;
    cursor: pointer;
}

/* Detalhe do rendimento anual do agregado: uma única coluna, label à esquerda, campo à
   direita, como numa tabela — todos os campos ficam alinhados, independentemente do
   comprimento de cada label. */
.simulador-novo .detail-table {
    display: grid;
    grid-template-columns: 1fr 11rem;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}

.simulador-novo .detail-table label {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.simulador-novo .detail-table .form-control,
.simulador-novo .detail-table .form-select {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
}

.simulador-novo .detail-table .form-control:focus,
.simulador-novo .detail-table .form-select:focus {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 0.2rem var(--brand-purple-soft);
}

.simulador-novo .detail-table .text-danger {
    grid-column: 1 / -1;
    margin-top: -0.25rem;
}

.simulador-novo .info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    color: var(--brand-purple);
    cursor: help;
    vertical-align: -2px;
}

.simulador-novo .tooltip {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: 240px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ink);
    color: #ffffff;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.simulador-novo .tooltip,
.simulador-novo .tooltip * {
    color: #ffffff;
}

.simulador-novo .info-tip:hover .tooltip,
.simulador-novo .info-tip:focus .tooltip {
    opacity: 1;
}

.simulador-novo .field .form-control:focus,
.simulador-novo .field .form-select:focus {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 0.2rem var(--brand-purple-soft);
}

.simulador-novo details {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--field);
}

.simulador-novo details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-blue);
}

.simulador-novo details[open] summary {
    margin-bottom: 0.75rem;
}

.simulador-novo .btn-primary {
    background-color: var(--brand-purple);
    border-color: var(--brand-purple);
}

.simulador-novo .btn-primary:hover,
.simulador-novo .btn-primary:focus {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.simulador-novo .result-placeholder {
    color: var(--muted);
    text-align: center;
    padding: 2rem 0;
}

.simulador-novo .result-lead {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}

.simulador-novo .cards {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.simulador-novo .cards.two {
    grid-template-columns: repeat(2, 1fr);
}

.simulador-novo .result-card {
    background: var(--brand-purple-soft);
    border-radius: 10px;
    padding: 1rem;
}

.simulador-novo .result-card.highlight {
    background: var(--brand-cyan-soft);
}

.simulador-novo .result-card.incentivo {
    background: var(--brand-purple-soft);
    border: 1px solid var(--brand-purple);
    text-align: center;
}

.simulador-novo .result-card.incentivo .amount {
    font-size: 1.8rem;
    color: var(--brand-purple);
}

.simulador-novo .result-card .card-header {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: transparent;
    border: none;
    padding: 0 0 0.35rem;
}

.simulador-novo .result-card .amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-blue);
}

.simulador-novo .result-card.indeferido {
    background: #fde7e9;
}

.simulador-novo .result-card.indeferido .amount {
    color: #b3261e;
    font-size: 1.05rem;
    font-weight: 500;
}

.simulador-novo .result-banner {
    background: var(--brand-cyan-soft);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 1rem;
}

.simulador-novo .result-banner.warning {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #fff6e0;
    border: 1px solid #f2c94c;
    color: #7a5b00;
    text-align: left;
    font-weight: 500;
    line-height: 1.4;
}

.simulador-novo .result-banner.warning svg {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #b3860b;
}

.simulador-novo .result-card .breakdown {
    margin-top: 0.75rem;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

.simulador-novo .result-card .breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.2rem 0;
}

.simulador-novo .result-card .breakdown-row .label {
    color: var(--muted);
}

.simulador-novo .result-card .breakdown-row .label.bold {
    font-weight: 700;
    color: var(--ink);
}

.simulador-novo .result-card .breakdown-row .value {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .simulador-novo .workspace {
        grid-template-columns: 1fr;
    }

    .simulador-novo .result-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .simulador-novo .grid-2,
    .simulador-novo .cards.two {
        grid-template-columns: 1fr;
    }

    .simulador-novo .detail-table {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }

    .simulador-novo .detail-table input {
        margin-bottom: 0.5rem;
    }
}

/* Painel do Pedido de Incentivo — 30% mais largo que o padrão dos outros ecrãs de auth (480px em
   site.css), mais 20% adicionais (624px → 749px) depois dos campos de titularidade do IBAN. Seletor
   com 3 classes para vencer ".auth-panel-wrapper .form-panel" de site.css independentemente da
   ordem dos ficheiros CSS. */
.pedido-incentivo-wrapper.auth-panel-wrapper .form-panel {
    max-width: 749px;
}

/* Painel do Login 20% mais largo que o padrão (480px em site.css) — texto introdutório da bolsa de
   incentivo precisa de mais espaço horizontal. Mesmo mecanismo de 3 classes acima. */
.login-wrapper.auth-panel-wrapper .form-panel {
    max-width: 576px;
}

/* Painel do Registar 20% mais largo que o padrão, mesma razão/valor do Login. */
.registar-wrapper.auth-panel-wrapper .form-panel {
    max-width: 576px;
}

/* Título "Entrar" reposicionado depois do texto introdutório (ver Login.cshtml) — fica mais
   pequeno que um <h2> normal para não competir visualmente com o bloco de texto acima. */
.simulador-novo .titulo-secundario {
    color: var(--brand-blue);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* Painel lateral de auxílio (offcanvas) — mesmo padrão do #painelAjudaV2 no SimuladorV2. */
#painelAjudaPedido {
    width: min(420px, 100vw);
}

/* Popup "Li e concordo" (autorização AT/SS) 10% mais largo que o padrão do Bootstrap (500px). */
#modalAutorizaConsultaATeSS .modal-dialog {
    max-width: min(550px, 100vw);
}

#painelAjudaPedido .offcanvas-header {
    border-bottom: 1px solid var(--line, #d8deea);
}

#painelAjudaPedido .offcanvas-title {
    color: var(--brand-blue, #082878);
    font-weight: 700;
}

#painelAjudaPedido .offcanvas-body {
    color: var(--ink, #071633);
    line-height: 1.5;
}

#painelAjudaPedido .painel-titulo {
    color: var(--brand-blue, #082878);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
}

#painelAjudaPedido .painel-subtitulo {
    font-weight: 700;
    color: var(--ink, #071633);
    margin-bottom: 0.4rem;
}

#painelAjudaPedido .painel-paragrafo {
    color: var(--muted, #58647a);
    margin-bottom: 0.75rem;
}

#painelAjudaPedido .painel-imagem {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line, #d8deea);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

#painelAjudaPedido hr {
    border-color: var(--line, #d8deea);
    margin: 1rem 0;
}