/* Fichas F2 (GO Ari 28-Jul): shell partilhado das duas fichas.
   Paleta por variáveis — coral (inscrição) e água-verde (casting, F3).
   Coluna de passos à esquerda em ecrã grande; barra horizontal no topo
   em telemóvel. Serif nos títulos (stack de sistema, sem fontes externas). */

.ficha--coral {
    --ficha-accent: #C97C5D;
    --ficha-accent-escuro: #a8614a;
    --ficha-suave: #F4DDD2;
    --ficha-fundo: #FBF5F0;
}
.ficha--agua {  /* F3: ficha de casting */
    --ficha-accent: #3F8F7C;
    --ficha-accent-escuro: #2c6b5c;
    --ficha-suave: #E6F2EE;
    --ficha-fundo: #F3FAF7;
}

/* Fix Lara 30-Jul (perguntas ilegíveis): o .container global do
   selftape.css/wizard.css (680/720px) esmagava a grelha — a coluna de
   conteúdo caía a ~280px. Onde vive uma .ficha, o main alarga. */
main.app-main.container:has(.ficha) { max-width: 1160px; }

/* layout: coluna de passos + conteúdo */
.ficha {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
    max-width: 1120px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.ficha-conteudo {
    background: #fff;
    border: 1px solid var(--ficha-suave);
    border-radius: 14px;
    padding: 2rem 2.2rem;
    box-shadow: 0 10px 34px rgba(60, 40, 30, .07);
}

/* coluna de passos */
.ficha-passos {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    background: var(--ficha-fundo);
    border: 1px solid var(--ficha-suave);
    border-radius: 14px;
    padding: 1.3rem 1.1rem;
}
.ficha-passos__marca {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--ficha-accent-escuro);
    margin: 0 0 1rem;
}
.ficha-passos__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: passo;
}
.ficha-passo {
    counter-increment: passo;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .3rem;
    color: #8a8078;
    font-size: .88rem;
    border-radius: 8px;
}
.ficha-passo::before {
    content: counter(passo);
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    border: 1.5px solid #d8cfc7;
    font-size: .78rem;
    background: #fff;
    flex: 0 0 auto;
}
.ficha-passo.is-current {
    color: var(--ficha-accent-escuro);
    font-weight: 600;
    background: var(--ficha-suave);
}
.ficha-passo.is-current::before {
    border-color: var(--ficha-accent);
    background: var(--ficha-accent);
    color: #fff;
}
.ficha-passo.is-done { color: var(--ficha-accent-escuro); }
.ficha-passo.is-done::before {
    content: "✓";
    border-color: var(--ficha-accent);
    color: var(--ficha-accent);
}
.ficha-passos__conta {
    margin: .9rem 0 0;
    font-size: .8rem;
    color: #8a8078;
}

/* títulos editoriais em serif */
.ficha .wizard-step__title,
.ficha .wizard-gate__title,
.ficha .wizard-step__subtitle,
.ficha .wizard-subform__title {
    font-family: Georgia, 'Times New Roman', serif;
    color: #3c332c;
    letter-spacing: .01em;
}
.ficha .wizard-step__title { font-size: 1.7rem; }

/* acentos coral nos controlos */
.ficha .btn--primary,
.ficha .btn--submit {
    background: var(--ficha-accent);
    border-color: var(--ficha-accent);
    color: #fff;
}
.ficha .btn--primary:hover,
.ficha .btn--submit:hover { background: var(--ficha-accent-escuro); }
.ficha input:focus,
.ficha select:focus,
.ficha textarea:focus {
    outline: 2px solid var(--ficha-accent);
    outline-offset: 1px;
}
.ficha .wizard-fieldset { border-color: var(--ficha-suave); }
.ficha .wizard-progress__dot.is-current { background: var(--ficha-accent); }

/* telemóvel: passos viram barra horizontal no topo */
@media (max-width: 899px) {
    .ficha {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1rem auto;
    }
    .ficha-passos {
        position: static;
        padding: .7rem .8rem;
    }
    .ficha-passos__marca { display: none; }
    .ficha-passos__lista {
        display: flex;
        gap: .15rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ficha-passo {
        flex-direction: column;
        gap: .25rem;
        font-size: .62rem;
        padding: .25rem .35rem;
        text-align: center;
        white-space: nowrap;
    }
    .ficha-conteudo { padding: 1.2rem 1rem; }
}

/* Fix ponto 7 verificacao 02-Ago: titulos palavra-unica longos (ex.
   «LicorBeirao-2023-10-24») nao quebravam e empurravam a pagina para o
   lado em ecra pequeno. Quebra onde for preciso, so nos titulos da ficha
   — resto do layout intacto. */
.ficha h1,
.ficha-passos__marca { overflow-wrap: anywhere; }

/* Arranjo (c) 30-Jul: ancora nao colada ao topo ao saltar */
[id^="seccao-"] { scroll-margin-top: 1.2rem; }

/* ── Página de confirmação pós-submissão (redesenho 30-Jul, Alexandra) ──
   Mesmo vocabulário visual da ficha: variáveis de paleta, serif nos
   títulos, cartão sobre o fundo suave. Usada com .ficha--agua. */
.ficha-obrigado {
    min-height: 70vh;
    display: grid;
    place-items: center;
    background: var(--ficha-fundo);
    padding: 3rem 1rem;
}
.ficha-obrigado__cartao {
    max-width: 460px;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ficha-suave);
    border-radius: 14px;
    padding: 2.6rem 2.2rem 2.2rem;
    box-shadow: 0 10px 34px rgba(60, 40, 30, .07);
}
.ficha-obrigado__selo {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 1.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ficha-accent);
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 0 0 8px var(--ficha-suave);
}
.ficha-obrigado__titulo {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.9rem;
    color: var(--ficha-accent-escuro);
    margin: 0 0 .4rem;
}
.ficha-obrigado__mensagem {
    font-size: 1.02rem;
    color: #4c463c;
    margin: 0 0 1rem;
}
.ficha-obrigado__numero {
    display: inline-block;
    background: var(--ficha-suave);
    color: var(--ficha-accent-escuro);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-size: .92rem;
    margin: 0 0 1.4rem;
}
.ficha-obrigado__casting {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .92rem;
    line-height: 1.3;
    color: #8a8078;
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ficha-suave);
}
.ficha-obrigado__casting strong { color: var(--ficha-accent-escuro); }

/* Pacote sexta 07-Ago (Alexandra, 5d): tabelas largas ganham scroll proprio
   no telemovel — a pagina nunca transborda na horizontal. */
@media (max-width: 700px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}