/**
 * AgriFlow — O Google Calendar dentro da Agenda: selo, faixa e convite.
 * (ADR 0019 decisão 11, ADR 0036.)
 *
 * Arquivo próprio porque `agenda.css` está no teto de 200 linhas do projeto —
 * o mesmo motivo pelo qual `agenda-form.css` já existe separado. Usa as
 * variáveis `--ag-*` declaradas em `agenda.css`, que carrega antes.
 *
 * As três peças moram juntas porque são a MESMA preocupação numa tela só, e
 * porque um quarto `<link>` não cabe: `agenda.html` também tem teto de 200
 * linhas, e ele é contado pelo smoke test do contrato da Agenda.
 *
 * Contorno em vez de preenchimento, de propósito: o badge de status é a
 * informação do cartão e a sincronização é um detalhe de infraestrutura. Dois
 * pills sólidos lado a lado disputariam a mesma atenção, e o vendedor leria
 * "Google" antes de "Confirmado".
 *
 * `nao_conectado` não tem estilo aqui porque não desenha selo nenhum: quem não
 * usa a integração — todo o plano Autônomo — não pode ver um selo cinza
 * permanente num cartão que está perfeitamente certo.
 */
.ag-gcal {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 999px;
    padding: 1px 8px;
    border: 1px solid currentColor;
    background: transparent;
    color: var(--ag-ink-sub);
    white-space: nowrap;
}

.ag-gcal[data-tom="ok"]         { color: var(--ag-ok); }
.ag-gcal[data-tom="aguardando"] { color: var(--ag-alerta); }
/* Vermelho literal e não variável: `erro` aqui é "reconecte sua conta", uma
   ação do usuário — e nenhuma das cores da agenda carrega esse peso. */
.ag-gcal[data-tom="erro"]       { color: #DC2626; }

/**
 * Faixa no topo da Agenda (ADR 0019, decisão 11).
 *
 * Nasceu como convite para conectar. O convite virou o pop-up do ADR 0036 —
 * uma faixa permanente, do mesmo tamanho, todo dia, é o formato que o olho
 * aprende a pular. Sobrou aqui o único caso que NÃO é oferta: o servidor sem
 * as quatro `GOOGLE_*`. Esse não pode sumir calado — some calado era o que
 * fazia parecer que o botão de conectar não existia.
 */
.ag-gcal-faixa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.ag-gcal-faixa-icone { color: #1D4ED8; flex-shrink: 0; display: flex; }

.ag-gcal-faixa-txt {
    flex: 1 1 220px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #1E3A8A;
    margin: 0;
}

.ag-gcal-faixa-txt strong { font-weight: 700; }

/* Dispensar é por sessão (ver google-integracao.js): o vendedor que ainda não
   quer conectar não pode ficar preso à faixa, mas ela precisa voltar — senão
   um toque acidental esconde a integração para sempre. */
.ag-gcal-faixa-fechar {
    background: none;
    border: 0;
    color: #1E3A8A;
    opacity: .55;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.ag-gcal-faixa-fechar:hover { opacity: 1; }

/**
 * Convite para vincular a conta (ADR 0036) — o pop-up que substituiu a
 * oferta da faixa.
 *
 * Herda `.af-modal-overlay` / `.af-modal` de `agriflow.css`: é o que dá a
 * animação, a folha de baixo para cima no celular e — o que importa — a
 * trava de rolagem do ADR 0030, que observa `.af-modal-overlay.open`. Casca
 * própria deixaria o fundo rolando por baixo do modal outra vez.
 *
 * Tom: convite, não alerta. Verde da casa no topo, nenhuma cor de erro em
 * lugar nenhum — quem vê isto não errou nada.
 */
.gc-overlay { z-index: 4600; }              /* acima do formulário da Agenda */
.gc-modal { max-width: 420px; padding: 0 0 20px; overflow: hidden; }

.gc-topo { background: linear-gradient(160deg, #163832 0%, #235347 100%); color: #fff; padding: 26px 24px 22px; text-align: center; }
.gc-icone { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #DAF1DE; margin-bottom: 12px; }
.gc-tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8EB69B; margin: 0 0 6px; }
.gc-titulo { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.gc-sub { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; }

.gc-lista { list-style: none; margin: 0; padding: 18px 24px 4px; display: flex; flex-direction: column; gap: 14px; }
.gc-item { display: flex; align-items: flex-start; gap: 10px; }
.gc-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7; color: #166534; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.gc-item-txt { display: flex; flex-direction: column; gap: 2px; }
.gc-item-txt strong { font-size: 13px; font-weight: 700; color: var(--c-text); }
.gc-item-txt span { font-size: 12px; line-height: 1.45; color: var(--c-text-sub); }

/* Cinza e miúdo de propósito: o aviso de mão única é ressalva honesta, não
   advertência. Em caixa amarela pareceria que algo pode dar errado ao ligar. */
.gc-nota { margin: 16px 24px 0; padding: 10px 12px; border-radius: 10px; background: var(--c-bg); font-size: 11px; line-height: 1.45; color: var(--c-text-sub); }

/* Empilhados: no celular, dois botões lado a lado ficam com 150px cada e o
   polegar erra o alvo. "Vincular agora" em cima, onde o polegar descansa. */
.gc-acoes { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 0; }
.gc-btn { width: 100%; justify-content: center; }

/* "Nunca mais" existe, é achável e não compete: quem quer, encontra em dois
   segundos; quem não está procurando, não tropeça. */
.gc-nunca { display: block; margin: 12px auto 0; background: none; border: 0; padding: 6px 10px; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gc-nunca:hover { color: var(--c-text-sub); }

@media (max-width: 768px) {
    /* `.af-modal` vira folha de baixo para cima abaixo de 768px: o topo
       arredondado tem que acompanhar, senão o verde vaza no canto. */
    .gc-modal { max-width: 100%; }
    .gc-topo { border-radius: 20px 20px 0 0; padding: 22px 20px 18px; }
    .gc-titulo { font-size: 23px; }
    .gc-lista, .gc-acoes { padding-left: 20px; padding-right: 20px; }
    .gc-nota { margin-left: 20px; margin-right: 20px; }
}