/* =========================================================================
   Tabela de Cotações Agro — estilo responsivo
   -------------------------------------------------------------------------
   Identidade: verde Agrolink (#2e7d32) como cor de marca.
   Desktop: tabela tradicional, zebrada.
   Mobile (<= 640px): cada linha vira um cartão; o cabeçalho da coluna
   reaparece como rótulo via ::before { content: attr(data-label) }.
   O preço (cotacoes-valor) é o elemento de destaque, com numerais
   tabulares para alinhar as casas decimais.
   ========================================================================= */

:root {
    --cot-verde: #2e7d32;
    --cot-verde-escuro: #1b5e20;
    --cot-verde-claro: #eef7ee;
    --cot-borda: #e0e0e0;
    --cot-zebra: #f7f9f7;
    --cot-texto: #1f2a24;
    --cot-texto-suave: #5a6b60;
}

.cotacoes-periodo {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--cot-texto-suave);
}

.cotacoes-periodo strong {
    color: var(--cot-texto);
}

.cotacoes-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
}

.cotacoes-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: var(--cot-texto);
    background: #fff;
    border: 1px solid var(--cot-borda);
}

.cotacoes-tabela thead th {
    background: var(--cot-verde);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    border-bottom: 2px solid var(--cot-verde-escuro);
}

.cotacoes-tabela tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cot-borda);
    vertical-align: middle;
}

.cotacoes-tabela tbody tr:nth-child(even) {
    background: var(--cot-zebra);
}

.cotacoes-tabela tbody tr:hover {
    background: var(--cot-verde-claro);
}

/* Produto: o nome longo pode quebrar; ocupa o máximo de espaço */
.cotacoes-produto {
    font-weight: 500;
}

/* Valor: o destaque da tabela */
.cotacoes-valor {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 700;
    color: var(--cot-verde-escuro);
    white-space: nowrap;
    text-align: right;
}

.cotacoes-tabela thead th:last-child {
    text-align: right;
}

/* -------------------------------------------------------------------------
   Tabela AGRUPADA POR DIA (tabela histórica):
   a DATA é uma LINHA separada (cabeçalho de grupo que abrange as colunas) e
   agrupa os produtos daquele dia logo abaixo. Produtos "faltando" ficam
   esmaecidos, com "faltando" no lugar do valor.
   ------------------------------------------------------------------------- */

/* Linha separada da data: destaque de grupo, largura total. */
.cotacoes-tabela-agrupada .cotacoes-dia-linha th {
    background: var(--cot-verde-claro);
    color: var(--cot-verde-escuro);
    font-weight: 700;
    text-align: left;
    padding: 10px 14px;
    border-top: 2px solid var(--cot-verde);
    border-bottom: 1px solid var(--cot-borda);
}

/* A tabela agrupada não zebra as linhas (o agrupamento já é a estrutura). */
.cotacoes-tabela-agrupada tbody tr:nth-child(even) {
    background: transparent;
}

/* Produto ausente no dia: esmaecido; "faltando" no lugar do valor. */
.cotacoes-faltando .cotacoes-produto {
    color: var(--cot-texto-suave);
    font-weight: 400;
    font-style: italic;
}

.cotacoes-faltando-tag {
    font-variant-numeric: normal;
    font-weight: 400;
    font-style: italic;
    color: var(--cot-texto-suave);
    white-space: nowrap;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   Mobile: cada linha vira um cartão
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .cotacoes-wrapper {
        overflow-x: visible;
    }

    .cotacoes-tabela {
        border: 0;
        font-size: 14px;
    }

    /* Esconde o cabeçalho de forma acessível (continua lido por leitores de tela) */
    .cotacoes-tabela thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .cotacoes-tabela tbody tr {
        display: block;
        margin: 0 0 14px;
        border: 1px solid var(--cot-borda);
        border-left: 4px solid var(--cot-verde);
        border-radius: 8px;
        padding: 6px 0;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .cotacoes-tabela tbody tr:nth-child(even) {
        background: #fff;
    }

    .cotacoes-tabela tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 7px 14px;
        border: 0;
        text-align: right;
    }

    /* Rótulo da coluna à esquerda de cada célula */
    .cotacoes-tabela tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cot-texto-suave);
        text-align: left;
        flex: 0 0 auto;
    }

    /* Produto ganha uma faixa de leve destaque no topo do cartão */
    .cotacoes-produto {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        background: var(--cot-verde-claro);
        margin-bottom: 2px;
    }

    .cotacoes-produto::before {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* O valor segue em destaque dentro do cartão */
    .cotacoes-valor {
        font-size: 16px;
    }

    /* A linha da data NÃO vira cartão: fica como faixa de grupo. */
    .cotacoes-tabela tbody tr.cotacoes-dia-linha {
        margin: 16px 0 6px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }

    .cotacoes-dia-linha th {
        display: block;
        background: var(--cot-verde-claro);
        border-radius: 6px;
        padding: 8px 12px;
    }
}

/* -------------------------------------------------------------------------
   Acessibilidade: respeita quem prefere menos movimento
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cotacoes-tabela tbody tr {
        transition: none;
    }
}

/* =========================================================================
   Crédito de autoria (rodapé das duas tabelas)
   ========================================================================= */
.cotacoes-credito {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--cot-borda);
    font-style: italic;
    font-size: 13.5px;
    color: var(--cot-texto-suave);
    text-align: center;
}

.cotacoes-credito a {
    color: var(--cot-verde);
    font-weight: 700;
    text-decoration: underline;
}

.cotacoes-credito a:hover {
    color: var(--cot-verde-escuro);
    text-decoration: none;
}

/* No card escuro, o crédito precisa de contraste claro */
.cotacao-card .cotacoes-credito {
    border-top-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.cotacao-card .cotacoes-credito a {
    color: #a5d6a7;
}

.cotacao-card .cotacoes-credito a:hover {
    color: #fff;
}

/* =========================================================================
   Card de cotação diária — [cotacao_diaria cidade=""]
   Formato "cartão" (como o mobile da tabela), tema verde do plugin.
   ========================================================================= */
.cotacao-diaria-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0;
}

.cotacao-card {
    flex: 1 1 280px;
    max-width: 360px;
    background: var(--cot-verde-escuro);
    color: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.cotacao-card-titulo {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.cotacao-card-linha {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
}

.cotacao-card-rotulo {
    font-weight: 600;
    opacity: 0.95;
}

.cotacao-card-valor {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 700;
}

@media (max-width: 640px) {
    .cotacao-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}