/* ---------------------------------------------------------------------------
   Lane by Athletica - tokens de design
   Extraidos de design-reference/Lane Mobile.dc.html.

   --brand e --brand-hi sao substituidos em runtime pelas definicoes do clube
   (ver app/partials/head.php). A Lane e white-label: nenhuma cor de clube
   aparece fixa noutro sitio.
   --------------------------------------------------------------------------- */

:root {
    /* Marca */
    --brand: #1B6FB8;
    --brand-hi: #3A93D8;
    --brand-soft: #EEF1F6;
    --brand-ink: #1D3E68;
    --brand-contrast: #FFFFFF;

    /* Superficies */
    --bg: #F3F2F8;
    --surface: #FFFFFF;
    --surface-active: #F6F6FA;
    --surface-sunken: #EFEFF3;

    /* Texto */
    --text: #111114;
    --text-2: #4B4B52;
    --text-3: #8A8A93;
    --text-4: #B6B6BF;
    --label: #6E6E76;
    --nav-idle: #3C3C43;

    /* Linhas */
    --line: #EDEDF1;
    --line-soft: #F1F1F5;
    --line-faint: #F7F7FA;
    --line-strong: #E4E4EA;

    /* Campos */
    --field: #F3F2F8;
    --field-border: #E6E6EC;
    --ring-idle: #D2D2DA;
    --dot-idle: #C9C9D2;

    /* Estado */
    --ok: #34C759;
    --ok-ink: #1E7F38;
    --ok-soft: #E7F6EA;
    --ok-strong: #1E9E45;

    --warn: #FC9300;
    --warn-ink: #A25E00;
    --warn-soft: #FFF1DC;
    --note-soft: #FFF6E8;
    --note-ink: #7A4E06;

    --danger: #FF3B30;
    --danger-soft: #FFECEB;

    --neutral-soft: #F0F0F4;
    --neutral-ink: #5A5A63;

    /* Categorias de comunicado */
    --cat-informacao: #14345C;
    --cat-aviso: #FC9300;
    --cat-urgente: #FF3B30;

    /* Raios */
    --r-sm: 6px;
    --r-md: 11px;
    --r-lg: 13px;
    --r-xl: 15px;
    --r-sheet: 32px;
    --r-full: 999px;

    /* Tipografia */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        Inter, "Helvetica Neue", Arial, sans-serif;

    /* Estrutura */
    --nav-h: 58px;
    --content-max: 560px;

    /* Movimento */
    --ease: cubic-bezier(.22, .9, .3, 1);
}

/* Faixa de ambiente: só aparece fora de produção. Discreta mas impossível de
   confundir com a Lane oficial. */
/* O z-index fica acima da navegação lateral da PWA (45) e abaixo da gaveta
   da Lane Club (70) e das folhas (80): a faixa está no topo do fluxo e não
   precisa de passar por cima do que se abre. Com 200 cobria o cimo da gaveta
   da Lane Club no telemóvel — logótipo incluído. */
.env-banner {
    position: relative;
    z-index: 50;
    padding: calc(4px + env(safe-area-inset-top)) 12px 4px;
    background: repeating-linear-gradient(135deg, #FD4E05 0 12px, #E64604 12px 24px);
    color: #fff;
    font: 700 11.5px/1.3 var(--font);
    letter-spacing: .02em;
    text-align: center;
}

.env-banner + .shell .hdr,
.env-banner + .admin-layout .admin-topbar { top: 0; }

/* Logótipos das experiências (Lane Coach, Lane Club): a palavra LANE da marca
   e o sufixo em minúsculas, fino, com o ponto laranja. */
.product-logo { display: inline-flex; align-items: baseline; gap: .16em; line-height: 1; white-space: nowrap; }
.product-logo .lane-logo { height: 1em; width: auto; display: block; align-self: center; }
.product-logo__suffix {
    display: inline-flex; align-items: baseline;
    font: 300 1.02em/1 var(--font); letter-spacing: .01em; color: currentColor;
}
.product-logo__suffix i {
    display: inline-block; width: .24em; height: .24em; margin: 0 .08em 0 .02em;
    border-radius: 50%; background: #FD4E05;
}
.product-logo--file { height: 1.2em; width: auto; display: block; }

/* ---------------------------------------------------------------------------
   Utilitários

   Substituem estilos inline que se repetiam dezenas de vezes pelas páginas
   (margin-top:14px apareceu 40 vezes). São poucos de propósito: espaçamento,
   peso, cor de texto. Layout e componentes continuam nas folhas de cada
   experiência — isto não é um sistema de utilitários, é arrumação.

   Levam !important porque substituem style="", que ganhava a qualquer regra:
   o aspeto de cada página fica exatamente como estava.
   --------------------------------------------------------------------------- */

.u-m-0     { margin: 0 !important; }
.u-mt-4    { margin-top: 4px !important; }
.u-mt-6    { margin-top: 6px !important; }
.u-mt-8    { margin-top: 8px !important; }
.u-mt-10   { margin-top: 10px !important; }
.u-mt-12   { margin-top: 12px !important; }
.u-mt-14   { margin-top: 14px !important; }
.u-mt-16   { margin-top: 16px !important; }
.u-mt-18   { margin-top: 18px !important; }
.u-mt-20   { margin-top: 20px !important; }
.u-mb-12   { margin-bottom: 12px !important; }
.u-mb-20   { margin-bottom: 20px !important; }

.u-fw-600  { font-weight: 600 !important; }
.u-fw-650  { font-weight: 650 !important; }
.u-fw-700  { font-weight: 700 !important; }
.u-fw-750  { font-weight: 750 !important; }

.u-fs-14-5 { font-size: 14.5px !important; }
.u-fs-15   { font-size: 15px !important; }
.u-fs-16   { font-size: 16px !important; }
.u-fs-17   { font-size: 17px !important; }

.u-text    { color: var(--text) !important; }
.u-text-3  { color: var(--text-3, var(--text-subtle)) !important; }
.u-danger  { color: var(--danger) !important; }
.u-warn    { color: var(--warn-ink, var(--warning)) !important; }

.u-block   { display: block !important; }
.u-row-10  { display: flex !important; align-items: center; gap: 10px; }
.u-pointer { cursor: pointer !important; }
.u-nowrap  { white-space: nowrap !important; }
.u-tnum    { font-variant-numeric: tabular-nums !important; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------------------------------------------------------------------
   Aviso de versão nova

   Partilhado pelas três aplicações, porque o problema é o mesmo nas três: uma
   aplicação instalada pode ficar semanas sem arranque a frio, e sem um aviso
   a pessoa continuaria numa versão antiga sem saber.

   Fica acima da navegação inferior (45) e abaixo das folhas (80): tem de ser
   visível sem tapar o que a pessoa acabou de abrir. A margem de baixo conta
   com a barra de navegação e com a área segura do telemóvel — nunca por cima
   do indicador de início.
   --------------------------------------------------------------------------- */

.app-update {
    position: fixed;
    z-index: 60;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--nav-h, 0px) + 12px + env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 520px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px 13px 16px;
    border-radius: 16px;
    background: #17171C;
    color: #fff;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
    animation: appUpdateIn .28s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes appUpdateIn {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.app-update__texto { flex: 1; min-width: 0; }
.app-update__texto strong { display: block; font: 750 14.5px/1.3 var(--font); }
.app-update__texto span { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--font); color: #A6A6AF; }

.app-update__cta {
    flex: none;
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 11px;
    background: #FD4E05;
    color: #fff;
    font: 750 13.5px/1 var(--font);
    cursor: pointer;
}
.app-update__cta:disabled { opacity: .6; cursor: default; }

.app-update__fechar {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: transparent;
    color: #8A8A93;
    font-size: 20px; line-height: 1;
    cursor: pointer;
}

/* Numa página sem navegação inferior (entrada, login, onboarding) não há
   barra nenhuma a descontar. */
.entrada-body .app-update,
.admin-body .app-update,
.is-onboarding .app-update { bottom: calc(16px + env(safe-area-inset-bottom)); }

/* No computador a navegação está na lateral: o aviso encosta ao canto. */
@media (min-width: 64rem) {
    .app-update { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

@media (max-width: 24rem) {
    .app-update { flex-wrap: wrap; }
    .app-update__texto { flex-basis: 100%; }
    .app-update__cta { flex: 1; }
}

/* ---------------------------------------------------------------------------
   Separador de método de entrada (Lane Coach e Lane Club)

   Duas maneiras de entrar na mesma conta: número de staff + PIN, ou e-mail +
   palavra-passe. São ligações, e não botões com JavaScript — o separador tem
   de funcionar num browser em que o script falhou, com teclado e com leitor
   de ecrã. É uma página de entrada: não pode depender de nada.
   --------------------------------------------------------------------------- */

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 16px 0 18px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-sunken, #EFEFF3);
}

.auth-tab {
    min-height: 38px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border-radius: 9px;
    font: 700 13.5px/1.2 var(--font);
    color: var(--text-2, #4B4B52);
    text-decoration: none;
    text-align: center;
}

.auth-tab[aria-current="page"] {
    background: var(--surface, #fff);
    color: var(--text, #111114);
    box-shadow: 0 1px 2px rgba(17, 17, 24, .12);
}

.auth__sub { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2, #4B4B52); }

.auth__ajuda {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3, #8A8A93);
}