/* =============================================================================
   ESCOLA DE SURF — tema próprio.

   Não herda nada do site do Onda nem do backoffice, de propósito: é outro
   negócio. Quem chega aqui vem de um link do WhatsApp, no telemóvel, muitas
   vezes na rua — por isso é uma coluna só e botões que se acertam com o polegar.

   ── TAMANHOS ──────────────────────────────────────────────────────────────
   Apertado. A primeira versão tinha letra de 17px, títulos de 26 e botões de
   18: num telemóvel ocupava três ecrãs para dizer a hora de uma aula, e o
   Pedro disse-o em duas palavras — "está maior que grande".
   Texto a 15px, títulos a 21.

   A ÚNICA coisa que não encolhe são os CAMPOS: 16px é o mínimo abaixo do qual
   o Safari do iPhone dá zoom ao tocar no campo e atira o formulário para fora
   do ecrã. Não é escolha de gosto, é o que o browser faz.
   ========================================================================== */

:root {
    --sf-mar:     #0E5C73;
    --sf-mar-2:   #2E91AE;
    --sf-areia:   #F7B55C;
    --sf-laranja: #F58634;
    --sf-fundo:   #EEF6F8;
    --sf-papel:   #FFFFFF;
    --sf-texto:   #16303C;
    --sf-texto-2: #5C7C87;
    --sf-linha:   #D7E7EC;
    --sf-bom:     #1E7A4F;
    --sf-mau:     #B3321E;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sf-fundo);
    color: var(--sf-texto);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* ── Topo ─────────────────────────────────────────────────────────────── */
.sf-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 14px;
    background: var(--sf-mar);
    color: #fff;
}
.sf-marca { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
            font-weight: 700; font-size: 15px; }
.sf-marca img { height: 26px; width: auto; display: block; }
.sf-eu { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #CFE6EE; }

.sf-link {
    background: none; border: 0; padding: 0;
    color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}
.sf-em-linha { display: inline; }

/* ── A folha ──────────────────────────────────────────────────────────── */
.sf-folha { max-width: 620px; margin: 0 auto; padding: 12px 12px 28px; }

.sf-cartao, .sf-aula, .sf-proximas {
    background: var(--sf-papel);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(14, 92, 115, .07);
    margin-bottom: 12px;
    overflow: hidden;
}
.sf-cartao { padding: 16px; }
.sf-corpo  { padding: 16px; }
.sf-proximas { padding: 14px 16px 6px; }

h1 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; color: var(--sf-mar); }
h2 { font-size: 16px; margin: 0 0 9px; color: var(--sf-mar); }

/* A imagem do cartão, a mesma que o WhatsApp mostrou: quem clica no link
   reconhece a página pela imagem, e isso vale o espaço que ocupa. */
.sf-imagem { display: block; width: 100%; height: auto; background: var(--sf-mar); }

/* ── Os factos da aula ────────────────────────────────────────────────── */
.sf-factos { list-style: none; margin: 0 0 12px; padding: 0; }
.sf-factos li {
    display: flex; gap: 10px; align-items: baseline;
    padding: 6px 0; border-bottom: 1px solid var(--sf-linha);
}
.sf-factos li:last-child { border-bottom: 0; }
.sf-factos span {
    flex: 0 0 78px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--sf-texto-2);
}
.sf-factos strong { font-weight: 600; }

.sf-texto p { margin: 0 0 9px; }
.sf-nota { color: var(--sf-texto-2); font-size: 13px; margin: 8px 0; }

/* ── Estado ───────────────────────────────────────────────────────────── */
.sf-estado {
    border-radius: 9px; padding: 10px 12px; margin: 2px 0 12px;
    background: #F2F8FA; border-left: 3px solid var(--sf-mar-2);
}
.sf-estado p { margin: 4px 0 0; font-size: 13px; color: var(--sf-texto-2); }
.sf-estado-bom { background: #EFF8F2; border-left-color: var(--sf-bom); }
.sf-estado-mau { background: #FCF0ED; border-left-color: var(--sf-mau); }

.sf-aviso {
    border-radius: 9px; padding: 10px 12px; margin-bottom: 12px;
    background: #FFF6E6; border-left: 3px solid var(--sf-areia);
}
.sf-aviso-bem { background: #EFF8F2; border-left-color: var(--sf-bom); }
.sf-aviso-mau { background: #FCF0ED; border-left-color: var(--sf-mau); }
.sf-aviso-ensaio { background: #F3F0FA; border-left-color: #7B61A8; font-size: 13px; }

/* ── Formulários ──────────────────────────────────────────────────────── */
.sf-form label { display: block; margin-bottom: 11px; font-weight: 600; font-size: 14px; }
.sf-form small {
    display: block; margin-top: 3px;
    font-weight: 400; font-size: 12.5px; color: var(--sf-texto-2);
}
.sf-opcional { font-weight: 400; color: var(--sf-texto-2); }

.sf-form input[type=text], .sf-form input[type=email],
.sf-form input[type=date], .sf-form select {
    display: block; width: 100%; margin-top: 4px;
    padding: 10px 11px;
    border: 1px solid var(--sf-linha); border-radius: 8px;
    background: #fff; color: var(--sf-texto);
    font: inherit; font-weight: 400;
    font-size: 16px;      /* não baixar: abaixo de 16 o iPhone dá zoom no campo */
}
.sf-form input:disabled { background: #F4F8FA; color: var(--sf-texto-2); }
.sf-form input:focus, .sf-form select:focus {
    outline: 2px solid rgba(46, 145, 174, .4); outline-offset: 1px;
    border-color: var(--sf-mar-2);
}

.sf-codigo {
    letter-spacing: 8px; font-size: 22px !important; text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.sf-grupo {
    border: 1px solid var(--sf-linha); border-radius: 9px;
    padding: 12px 12px 2px; margin: 0 0 12px;
}
.sf-grupo legend { padding: 0 6px; font-weight: 600; color: var(--sf-mar); font-size: 13px; }

.sf-check {
    display: flex; gap: 9px; align-items: flex-start;
    font-weight: 400; font-size: 13px; line-height: 1.45;
}
.sf-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
.sf-check a { color: var(--sf-mar); }

/* A armadilha: fora do ecrã, não escondida com display:none — um robô que leia
   o CSS sabe ignorar o que está escondido, mas preenche o que "existe". */
.sf-armadilha {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.sf-botao {
    display: block; width: 100%;
    padding: 11px 18px; margin-top: 2px;
    border: 0; border-radius: 999px;
    background: var(--sf-laranja); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700;
    text-align: center; text-decoration: none;
    cursor: pointer;
}
.sf-botao:hover { background: #E0761F; }
.sf-botao-fraco { background: none; color: var(--sf-texto-2); border: 1px solid var(--sf-linha); }
.sf-botao-fraco:hover { background: #F2F8FA; color: var(--sf-texto); }

/* ── Listas de aulas ──────────────────────────────────────────────────── */
.sf-proxima {
    display: block; padding: 10px 0; border-bottom: 1px solid var(--sf-linha);
    color: inherit; text-decoration: none;
}
.sf-proxima:last-child { border-bottom: 0; }
.sf-proxima:hover .sf-proxima-nome { color: var(--sf-laranja); }
.sf-proxima-quando { display: block; font-size: 12.5px; color: var(--sf-texto-2); }
.sf-proxima-nome   { display: block; font-weight: 700; font-size: 15px; color: var(--sf-mar); }
.sf-proxima-fim    { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                     margin-top: 3px; font-size: 12.5px; color: var(--sf-texto-2); }

.sf-pastilha {
    padding: 2px 8px; border-radius: 999px;
    background: #E8F4F7; color: var(--sf-mar); font-size: 12px; font-weight: 600;
}
.sf-pastilha-cheia { background: #FFF1E2; color: #9A5A12; }

/* As minhas aulas, no portal */
.sf-minha { border-bottom: 1px solid var(--sf-linha); padding-bottom: 6px; }
.sf-minha:last-child { border-bottom: 0; }
.sf-minha .sf-proxima { border-bottom: 0; padding-bottom: 2px; }
.sf-desmarcar { font-size: 13px; color: var(--sf-texto-2); }

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.sf-rodape {
    padding: 16px 14px 28px; text-align: center;
    color: var(--sf-texto-2); font-size: 12.5px; line-height: 1.7;
}
.sf-rodape a { color: var(--sf-texto-2); }

/* ── Ecrãs grandes ────────────────────────────────────────────────────── */
@media (min-width: 560px) {
    h1 { font-size: 23px; }
    .sf-folha { padding: 18px 16px 36px; }
    .sf-cartao, .sf-corpo { padding: 20px; }
    .sf-botao { width: auto; min-width: 220px; }
}

/* ── Dobras ───────────────────────────────────────────────────────────── */
/* O que não é o motivo da visita fica fechado. No portal, o motivo da visita
   são as AULAS — os dados abrem-se quando houver alguma coisa para corrigir. */
.sf-dobra > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    color: var(--sf-mar); font-size: 16px;
}
.sf-dobra > summary::-webkit-details-marker { display: none; }
.sf-dobra > summary::after {
    content: '▾'; margin-left: auto; color: var(--sf-texto-2); font-size: 13px;
}
.sf-dobra[open] > summary::after { content: '▴'; }
.sf-dobra > summary span { font-weight: 400; font-size: 12.5px; color: var(--sf-texto-2); }
.sf-dobra[open] > summary { margin-bottom: 10px; }
.sf-apagar { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sf-linha); }

/* =============================================================================
   A BARRA DE BAIXO — o que faz isto parecer uma aplicação.

   Instalada no telemóvel, a página abre sem barra de endereço: não há «voltar»
   nem separadores. Sem uma barra destas, quem entrasse no espaço de cliente
   ficava lá preso.

   Em baixo e não em cima porque é onde o polegar chega sem trocar a mão de
   posição — é onde todas as aplicações a põem.
   ========================================================================== */

.sf-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--sf-linha);
    /* O recorte do iPhone: sem isto, a barra ficava por baixo da risca de
       casa e o terceiro botão não se conseguia tocar. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: saturate(180%) blur(8px);
}
.sf-barra-item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    /* 52px de altura útil: é a medida a partir da qual um dedo acerta sem
       pensar. Abaixo disso falha-se e carrega-se no botão do lado. */
    min-height: 52px; padding: 7px 4px 6px;
    color: var(--sf-texto-2); text-decoration: none;
    font-size: 11px; font-weight: 600;
}
.sf-barra-item svg { width: 22px; height: 22px; }
.sf-barra-on { color: var(--sf-mar); }
.sf-barra-on svg { stroke-width: 2.2; }
.sf-barra-item:active { background: #F2F8FA; }

/* O conteúdo não pode acabar debaixo da barra. */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
.sf-rodape { padding-bottom: 18px; }

/* ── Instalada ────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
    /* Sem barra de endereço, o topo encosta ao relógio e à bateria. */
    .sf-topo { padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
    /* O rodapé com os contactos faz sentido numa página; numa aplicação é
       ruído por baixo de cada ecrã. Fica só a linha da privacidade. */
    .sf-rodape strong { display: none; }
}

/* Em ecrãs grandes a barra passa a uma faixa centrada: numa janela larga,
   três botões esticados de ponta a ponta não são uma barra, são uma régua. */
@media (min-width: 720px) {
    .sf-barra {
        left: 50%; right: auto; transform: translateX(-50%);
        bottom: 14px; width: 420px;
        border: 1px solid var(--sf-linha); border-radius: 999px;
        box-shadow: 0 4px 18px rgba(14, 92, 115, .14);
        overflow: hidden;
    }
    body { padding-bottom: 92px; }
}