/* =====================================================================================
   EFICÁCIA CRM — mod-ferias-calendario.css
   Porte do ecrã de férias do `eficacia-tau` (origin/master: style.css §"Mapa de
   Férias"), com prefixo fc- e os tokens novos (--ink-*, --sp-*, --r-*, --txt-*).

   EQUIVALÊNCIAS COM O ORIGINAL
       .ferias-top-bar        → .fc-topo
       .ferias-legend(-item)  → .fc-legenda(-item)
       .ferias-counters       → .fc-contadores / .fc-cont
       .ferias-year-nav       → .fc-ano-nav / .fc-ano-rot
       .ferias-calendar-grid  → .fc-meses
       .ferias-month(-grid)   → .fc-mes / .fc-grelha-*
       .ferias-day.*          → .fc-d / .fc-d--*
       .ferias-actions-grid   → .fc-paineis / .fc-painel
       .ferias-user-dropdown  → .fc-seletor-lista
       (mini-calendários dos pedidos) → .fc-minicals / .fc-minical

   MOBILE-FIRST. Grelha dos 12 mini-calendários (instrução do briefing, que
   substitui as 6 colunas do original — a 6 colunas a célula não chega ao alvo
   de toque em nenhum ecrã abaixo de 1600px):
       390px  → 1 por linha
       820px  → 2 por linha
       1440px → 3 por linha   ·   ≥1500px → 4 por linha
   Nada aqui usa !important.
   ===================================================================================== */

/* ---------- Paleta dos 7 estados -----------------------------------------------
   Os valores vêm do original. Onde o sistema de tokens tem um equivalente fiel,
   usa-se o token; onde não tem (o verde e o laranja do tau não existem na rampa
   da marca, que é vermelha), fica o hexadecimal do original, aqui centralizado.
   Única correção deliberada: no original o número do dia aprovado era BRANCO
   sobre #4ade80 (1,8:1, ilegível) — passou a verde-escuro sobre o mesmo fundo.
   ------------------------------------------------------------------------------ */
.fc-corpo,
.fc-legenda {
    --fc-fds-bg: var(--ink-200);
    /* orig #e2e8f0 */
    --fc-fds-fg: var(--ink-500);
    /* orig #94a3b8 (2,6:1) → --ink-500 (5,6:1) */
    --fc-fds-bd: var(--ink-300);

    --fc-feriado-bg: #FED7AA;
    --fc-feriado-fg: #9A3412;
    --fc-feriado-bd: #F97316;

    --fc-empresa-bg: var(--brand-100);
    /* orig #fecaca */
    --fc-empresa-fg: var(--brand-700);
    /* orig #9B1010 */
    --fc-empresa-bd: var(--brand-500);
    /* orig #DA0A0D — já era a cor da marca */

    --fc-sel-bg: #86EFAC;
    --fc-sel-fg: #14532D;
    --fc-sel-bd: #22C55E;

    --fc-aprov-bg: #4ADE80;
    --fc-aprov-fg: #14532D;
    --fc-aprov-bd: #16A34A;

    --fc-pend-bg: #FDE68A;
    --fc-pend-fg: #92400E;
    --fc-pend-bd: #F59E0B;

    --fc-canc-bg: var(--danger-300);
    /* orig #fca5a5 */
    --fc-canc-fg: var(--danger-800);
    /* orig #991b1b */
    --fc-canc-bd: var(--danger-500);
    /* orig #ef4444 */
}

/* ---------- Cartão ------------------------------------------------------------
   O cartão perdeu o cabeçalho («Mapa de Férias» + subtítulo) na compactação de
   2026-08-17 — ver render() no .js. Tudo neste ficheiro serve o mesmo objetivo:
   os 12 meses à vista num ecrã de 1920×945, como no Shoperfil. */

.fc-corpo {
    min-width: 0;
}

/* ---------- Seletor de colaborador ("Ver mapa de:") ---------------------------
   Era um banner vermelho de ~75px (borda + fundo brand-50 + padding); no Shoperfil
   o seletor é uma linha discreta. O banner chamava a atenção para um controlo que
   só os administradores veem — e roubava altura ao calendário, que é de todos. */

.fc-seletores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-6);
    min-width: 0;
}

.fc-seletor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-3);
    min-width: 0;
}

.fc-seletor>svg {
    flex-shrink: 0;
    color: var(--brand-600);
}

.fc-seletor-rot {
    font-size: var(--txt-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-700);
    white-space: nowrap;
}

.fc-seletor-campo {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 320px;
}

.fc-seletor-input {
    width: 100%;
    min-height: 44px;
    padding-right: var(--sp-8);
}

.fc-seletor-campo>svg {
    position: absolute;
    top: 50%;
    right: var(--sp-3);
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
}

.fc-seletor-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-3);
}

.fc-seletor-lista[hidden] {
    display: none;
}

.fc-seletor-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--txt-sm);
    text-align: left;
    color: var(--text-2);
    cursor: pointer;
}

.fc-seletor-item em {
    font-style: normal;
    font-size: var(--txt-xs);
    color: var(--brand-600);
}

.fc-seletor-item:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

.fc-seletor-item.is-ativo {
    background: var(--brand-100);
    color: var(--brand-700);
    font-weight: var(--fw-semibold);
}

.fc-seletor-vazio {
    margin: 0;
    padding: var(--sp-3);
    font-size: var(--txt-xs);
    color: var(--text-3);
}

/* ---------- Barra de topo: legenda + ‹ano› + contadores ------------------------
   A navegação de ano mora AQUI desde a compactação de 2026-08-17 (era uma fila
   própria centrada — ver htmlConteudo no .js). No telemóvel empilham-se as três
   partes; a partir de 700px é uma barra só, e a legenda/contadores embrulham se
   for preciso. */

.fc-topo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    min-width: 0;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    background: var(--surface-alt);
}

.fc-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    min-width: 0;
}

.fc-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--txt-xs);
    color: var(--text-2);
}

.fc-legenda-cor {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid transparent;
}

.fc-contadores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
    min-width: 0;
}

.fc-cont {
    font-size: var(--txt-sm);
    color: var(--text-2);
    white-space: nowrap;
}

.fc-cont strong {
    font-size: var(--txt-lg);
    font-weight: var(--fw-bold);
    color: var(--text-1);
    font-variant-numeric: var(--num-tabular);
}

.fc-cont strong.is-pend {
    color: var(--warning-700);
}

.fc-cont strong.is-disp {
    color: var(--brand-600);
}

.fc-cont strong.is-sel {
    color: var(--success-700);
}

.fc-cont strong.is-canc {
    color: var(--danger-600);
}

.fc-cont small {
    font-size: var(--txt-xs);
    color: var(--text-3);
}

/* ---------- Navegação de ano  ‹ 2026 › (dentro da barra de topo) --------------- */

.fc-ano-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
}

/* O original usava `btn-sm`; aqui as setas têm de cumprir o alvo de toque de
   44px do gate responsivo — é a única diferença de dimensão. */
.fc-ano-nav .ds-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
}

.fc-ano-rot {
    min-width: 4ch;
    text-align: center;
    font-size: var(--txt-xl);
    font-weight: var(--fw-bold);
    color: var(--text-1);
    font-variant-numeric: var(--num-tabular);
}

/* ---------- Grelha dos 12 meses ------------------------------------------------ */

.fc-meses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    margin: 0 0 var(--sp-6);
    min-width: 0;
}

.fc-mes {
    min-width: 0;
    padding: var(--sp-3);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    background: var(--surface);
}

.fc-mes-tit {
    margin: 0 0 var(--sp-2);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink-100);
    text-align: center;
    font-size: var(--txt-sm);
    font-weight: var(--fw-bold);
    color: var(--text-1);
}

.fc-grelha-cab,
.fc-grelha-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    min-width: 0;
}

.fc-grelha-cab {
    margin-bottom: 4px;
}

.fc-grelha-cab span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    font-size: 12px;
    /* piso de legibilidade do gate responsivo (check 8) */
    font-weight: var(--fw-semibold);
    color: var(--ink-500);
}

/* ---------- Célula de dia ------------------------------------------------------
   `width: 100%` é obrigatório: sem ele, `aspect-ratio` + `min-height` fazia a
   célula ficar MAIS LARGA do que a coluna da grelha e os dias sobrepunham-se uns
   aos outros a 320px. Com a largura presa à coluna, a altura mínima só estica a
   célula na vertical.
   ------------------------------------------------------------------------------ */
.fc-d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--txt-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: var(--num-tabular);
    line-height: 1;
}

button.fc-d {
    cursor: pointer;
    transition: background var(--transition-fast, .15s) ease, transform .08s ease;
}

button.fc-d:hover {
    background: var(--brand-50);
}

button.fc-d:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 1px;
    z-index: 1;
}

button.fc-d:active {
    transform: scale(0.94);
}

span.fc-d {
    cursor: default;
}

.fc-d--vazio {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* O "½" dos meios-dias — o original não tinha meios-dias (ver .js). */
.fc-d-meio {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 10px;
    font-style: normal;
    font-weight: var(--fw-extra);
    line-height: 1;
}

/* ---------- As 7 cores da legenda ---------------------------------------------- */

.fc-d--fds,
.fc-legenda-cor.fc-d--fds {
    background: var(--fc-fds-bg);
    color: var(--fc-fds-fg);
}

.fc-d--feriado,
.fc-legenda-cor.fc-d--feriado {
    background: var(--fc-feriado-bg);
    border-color: var(--fc-feriado-bd);
    color: var(--fc-feriado-fg);
    font-weight: var(--fw-semibold);
}

.fc-d--empresa,
.fc-legenda-cor.fc-d--empresa {
    background: var(--fc-empresa-bg);
    border-color: var(--fc-empresa-bd);
    color: var(--fc-empresa-fg);
    font-weight: var(--fw-semibold);
}

.fc-d--sel,
.fc-legenda-cor.fc-d--sel {
    background: var(--fc-sel-bg);
    border-color: var(--fc-sel-bd);
    color: var(--fc-sel-fg);
    font-weight: var(--fw-bold);
}

.fc-d--aprov,
.fc-legenda-cor.fc-d--aprov {
    background: var(--fc-aprov-bg);
    border-color: var(--fc-aprov-bd);
    color: var(--fc-aprov-fg);
    font-weight: var(--fw-bold);
}

.fc-d--pend,
.fc-legenda-cor.fc-d--pend {
    background: var(--fc-pend-bg);
    border-color: var(--fc-pend-bd);
    color: var(--fc-pend-fg);
    font-weight: var(--fw-semibold);
}

.fc-d--canc,
.fc-legenda-cor.fc-d--canc {
    background: var(--fc-canc-bg);
    border-color: var(--fc-canc-bd);
    color: var(--fc-canc-fg);
    font-weight: var(--fw-bold);
    box-shadow: inset 0 0 0 1px var(--fc-canc-bd);
}

/* ---------- Manhã / Tarde — a célula pinta-se só até meio ----------------------
   Modelo do Shoperfil atual (2026-08-17): meio-dia com período declara QUAL metade
   — manhã pinta a metade de CIMA, tarde a de BAIXO. O número fica legível porque
   está centrado verticalmente, sempre em cima da fronteira das duas metades.
   Os meios-dias ANTIGOS (meio=1 sem período) continuam de célula inteira + "½". */

.fc-d--sel.is-manha {
    background: linear-gradient(180deg, var(--fc-sel-bg) 0%, var(--fc-sel-bg) 50%, var(--surface) 50%, var(--surface) 100%);
}

.fc-d--sel.is-tarde {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 50%, var(--fc-sel-bg) 50%, var(--fc-sel-bg) 100%);
}

.fc-d--aprov.is-manha {
    background: linear-gradient(180deg, var(--fc-aprov-bg) 0%, var(--fc-aprov-bg) 50%, var(--surface) 50%, var(--surface) 100%);
}

.fc-d--aprov.is-tarde {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 50%, var(--fc-aprov-bg) 50%, var(--fc-aprov-bg) 100%);
}

.fc-d--pend.is-manha {
    background: linear-gradient(180deg, var(--fc-pend-bg) 0%, var(--fc-pend-bg) 50%, var(--surface) 50%, var(--surface) 100%);
}

.fc-d--pend.is-tarde {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 50%, var(--fc-pend-bg) 50%, var(--fc-pend-bg) 100%);
}

/* Pontos da legenda: a mesma linguagem, em ponto pequeno (verde de seleção,
   como no Shoperfil — a legenda explica a METADE, não o estado). */
.fc-legenda-cor.fc-d--manha {
    background: linear-gradient(180deg, var(--fc-sel-bg) 0%, var(--fc-sel-bg) 50%, var(--surface) 50%, var(--surface) 100%);
    border-color: var(--fc-sel-bd);
}

.fc-legenda-cor.fc-d--tarde {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 50%, var(--fc-sel-bg) 50%, var(--fc-sel-bg) 100%);
    border-color: var(--fc-sel-bd);
}

/* Passar o rato por cima de um dia aprovado anuncia o cancelamento (original). */
button.fc-d--aprov:hover {
    background: var(--fc-sel-bg);
    box-shadow: inset 0 0 0 2px var(--fc-canc-bd);
}

button.fc-d--sel:hover {
    background: var(--fc-sel-bg);
}

button.fc-d--canc:hover {
    background: var(--fc-canc-bg);
}

/* Hoje: anel interior na cor da marca (original: --primary-500). */
.fc-d.is-hoje {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}

.fc-d--canc.is-hoje {
    box-shadow: inset 0 0 0 2px var(--brand-500), inset 0 0 0 3px var(--fc-canc-bd);
}

/* ---------- Painel de ação (um só — ver §5b do .js) ----------------------------
   A TODA A LARGURA (pedido do utilizador, 2026-08-17): a versão anterior travava o
   painel a 560px centrados, e no meio de um calendário de 1600px parecia um postal
   perdido — sem simetria com a grelha em cima. Agora alinha com o calendário; o que
   evita a «faixa com um botão dentro» é o rodapé interno: textarea a crescer e botão
   à direita (empilhados no telemóvel). */
.fc-paineis {
    margin: var(--sp-5) 0 0;
    min-width: 0;
}

.fc-painel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.fc-painel-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}

.fc-painel-tit {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--txt-md);
    font-weight: var(--fw-bold);
    color: var(--text-1);
}

.fc-painel-tit svg {
    color: var(--brand-600);
    flex-shrink: 0;
}

.fc-painel-pilula {
    padding: 3px 10px;
    border: 1px solid var(--brand-200);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--txt-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-600);
    white-space: nowrap;
}

.fc-painel-corpo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
}

.fc-painel-rot {
    font-size: var(--txt-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-3);
}

.fc-painel-rot span {
    font-weight: var(--fw-normal);
    text-transform: none;
    letter-spacing: 0;
}

.fc-painel textarea.ds-textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
}

/* O botão troca de tom (primário ↔ vermelho) conforme a alteração em curso; a
   transição evita que a mudança apareça como um salto ao clicar num dia. */
.fc-painel .ds-btn {
    min-height: 44px;
    transition: background-color .18s ease, border-color .18s ease;
}

/* Em ecrã largo o botão deixa de ser uma barra a toda a largura: alinha à direita
   com um mínimo confortável. No telemóvel continua ao alto (alvo de toque cheio). */
@media (min-width: 700px) {
    .fc-painel .ds-btn--block,
    .fc-painel .ds-btn {
        width: auto;
        min-width: 280px;
        align-self: flex-end;
    }
}

.fc-painel-ajuda {
    margin: 0;
    font-size: var(--txt-sm);
    line-height: 1.5;
    color: var(--text-3);
}

.fc-painel-ajuda strong {
    color: var(--text-2);
    font-weight: var(--fw-semibold);
}

/* ---------- Modo de consulta (a ver o mapa de outro colaborador) --------------- */

.fc-consulta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    font-size: var(--txt-sm);
    color: var(--text-3);
    text-align: center;
}

.fc-consulta svg {
    flex-shrink: 0;
}

/* ---------- Pedidos pendentes -------------------------------------------------- */

.fc-pendentes {
    margin-top: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.fc-pendentes-cab {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--warning-50);
}

.fc-pendentes-cab h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--txt-base);
    font-weight: var(--fw-bold);
    color: var(--text-1);
}

.fc-pendentes-cab svg {
    color: var(--warning-600);
    flex-shrink: 0;
}

.fc-pendentes-corpo {
    padding: var(--sp-3) var(--sp-5);
}

.fc-pendente.is-cancelamento {
    padding-left: var(--sp-3);
    border-left: 3px solid var(--danger-400);
}

.fc-pendente-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
}

.fc-pendente-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    font-size: var(--txt-sm);
    color: var(--text-3);
}

.fc-pendente-meta strong {
    font-size: var(--txt-base);
    color: var(--text-1);
}

.fc-pendente-tag {
    padding: 2px 8px;
    border: 1px solid var(--danger-200);
    border-radius: var(--r-full);
    background: var(--danger-50);
    font-size: var(--txt-xs);
    font-weight: var(--fw-semibold);
    color: var(--danger-600);
}

.fc-pendente-nota {
    margin: 0 0 var(--sp-3);
    font-size: var(--txt-xs);
    color: var(--text-3);
}

.fc-pendente .ds-btn {
    flex-shrink: 0;
}

/* ---------- Mini-calendários dos pedidos --------------------------------------- */

.fc-minicals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    min-width: 0;
}

.fc-minical {
    flex: 0 1 220px;
    min-width: 0;
    padding: var(--sp-2);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    background: var(--surface);
}

.fc-minical-tit {
    margin-bottom: var(--sp-2);
    text-align: center;
    font-size: var(--txt-sm);
    font-weight: var(--fw-bold);
    color: var(--text-2);
}

.fc-minical-grelha {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
    font-size: 12px;
    /* piso de legibilidade do gate responsivo (check 8) */
}

.fc-minical-grelha span {
    padding: 3px 0;
    border-radius: 4px;
    color: var(--text-2);
}

.fc-minical-cab {
    font-weight: var(--fw-semibold);
    color: var(--ink-500);
}

.fc-minical-grelha .is-fds {
    color: var(--ink-400);
}

.fc-minical-grelha .is-add {
    background: var(--fc-pend-bg);
    color: var(--fc-pend-fg);
    font-weight: var(--fw-bold);
}

.fc-minical-grelha .is-del {
    background: var(--fc-canc-bg);
    color: var(--fc-canc-fg);
    font-weight: var(--fw-bold);
}

/* =====================================================================================
   PONTOS DE QUEBRA
   ===================================================================================== */

/* 2 mini-calendários por linha. */
@media (min-width: 700px) {
    .fc-meses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fc-topo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-4);
    }

    /* A legenda estica e empurra o ‹ano› e os contadores para a direita; quando a
       barra não chega para os três, embrulham por esta ordem. */
    .fc-topo .fc-legenda {
        flex: 1 1 auto;
    }
}

/* 3 colunas. Fica nos 1100px de propósito, e para QUALQUER ponteiro: baixar este
   degrau encolhia a célula abaixo dos 44px num tablet de toque a 1024px. */
@media (min-width: 1100px) {
    .fc-meses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-5);
    }
}

/* ---------- O ano todo no ecrã (o modelo do Shoperfil) -------------------------
   O Shoperfil põe `repeat(6, 1fr)` a partir de 1025px: 6 meses × 2 linhas = os 12
   à vista, sem rolar. Aqui isso só é possível com a célula compacta — com o alvo
   de toque de 44px, 6 colunas precisariam de ~1850px só para os dias.
   Daí o par de condições:
     · `pointer: fine`  — quem tem rato não precisa do alvo de 44px (e um tablet
       de 1366px em modo toque continua com as células grandes);
     · a largura        — 4 colunas a 1280px, 6 a partir de 1400px, que é onde a
       célula ainda fica com ~20px (a mesma que o Shoperfil tem a 1440px).
   Os checks 4 (alvo <44px) e 8 (fonte <12px) do gate só correm abaixo do ponto de
   quebra móvel, por isso esta faixa não os viola.
   ------------------------------------------------------------------------------ */
@media (min-width: 1280px) and (pointer: fine) {

    /* 6 colunas JÁ AQUI (era 4 até 1400px): o Shoperfil põe as 6 a partir de
       1025px e é isso que faz os 12 meses caberem num portátil de 1280×800 — a
       célula fica com ~18px, a mesma que o Shoperfil tem nessa largura. O degrau
       intermédio de 4 colunas dava 3 filas de meses, e 3 filas nunca cabem. */
    .fc-meses {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--sp-3) var(--sp-4);
    }

    .fc-mes {
        padding: var(--sp-2);
    }

    .fc-mes-tit {
        margin-bottom: 2px;
        padding-bottom: 3px;
        font-size: 13px;
    }

    .fc-grelha-cab {
        margin-bottom: 2px;
    }

    .fc-grelha-cab span {
        padding: 1px 0;
    }

    .fc-grelha-cab,
    .fc-grelha-dias {
        gap: 1px;
    }

    /* line-height 1.35 (era 1.5): a célula desce de 26px para ~23px — vezes 6
       semanas vezes 2 filas são ~36px, os que faltavam para o ano caber também
       num portátil de 1280×800. O Shoperfil usa 11px/1.6 (~24px): equivalente. */
    .fc-d {
        aspect-ratio: auto;
        min-height: 0;
        padding: 3px 0;
        font-size: 12px;
        line-height: 1.35;
        border-radius: 3px;
    }

    /* O corpo do cartão também aperta o cinto — só neste ecrã. */
    .fc-corpo {
        padding: var(--sp-3) var(--sp-4);
    }

    .fc-topo {
        margin-bottom: var(--sp-3);
        padding: var(--sp-1) var(--sp-3);
        gap: var(--sp-1) var(--sp-4);
    }

    .fc-meses {
        row-gap: var(--sp-2);
    }

    .fc-ano-nav .ds-btn {
        height: 30px;
    }

    .fc-d-meio {
        font-size: 9px;
    }

    /* Com rato não há alvo de toque a cumprir: as setas do ano descem de 44px
       para 34px e a barra de topo fica com a altura de uma linha de texto. */
    .fc-ano-nav .ds-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .fc-ano-rot {
        font-size: var(--txt-lg);
    }

    .fc-seletor-input {
        min-height: 38px;
    }
}

/* Telemóveis estreitos: recuperar largura para o dia, cortando as margens
   internas. A 320px isto sobe a célula de 31px (abaixo do mínimo do gate) para
   ~35px; a 390px chega aos 44px de alvo de toque completo. */
@media (max-width: 420px) {
    .fc-corpo {
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }

    .fc-mes {
        padding: 5px 5px 6px;
    }

    .fc-topo,
    .fc-pendentes-corpo {
        padding: var(--sp-2);
    }

    .fc-minical {
        flex: 1 1 100%;
    }
}

/* Ecrã curto e deitado (telemóvel na horizontal): células mais baixas para caber. */
@media (max-height: 460px) and (orientation: landscape) {
    .fc-d {
        min-height: 32px;
    }
}

/* =====================================================================================
   IMPRESSÃO — o calendário sai; seletores e painéis não.
   ===================================================================================== */
@media print {

    .fc-seletor,
    .fc-paineis,
    .fc-ano-nav {
        display: none;
    }

    .fc-meses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fc-mes {
        break-inside: avoid;
    }

    .fc-d {
        min-height: 0;
    }
}