/* =============================================
   COTAÇÕES AGRÍCOLAS — cotacoes.css
   Estilos exclusivos da seção #cotacoes
   ============================================= */

.cotacoes {
  padding: 110px 64px;
  background: var(--cream);
  border-top: 1px solid var(--cream-dark);
  border-bottom: 1px solid var(--cream-dark);
}

/* Cabeçalho */
.cotacoes-header { text-align: center; margin-bottom: 52px; }
.cotacoes-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.4rem); color: var(--green-dark); font-weight: 700; margin: 8px 0 14px; }
.cotacoes-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.4px; margin: 0; }

/* Grid 4 colunas */
.cotacoes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Card */
.cotacao-card { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 10px; padding: 30px 22px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; transition: box-shadow 0.3s, transform 0.3s; }
.cotacao-card:hover { box-shadow: 0 8px 28px var(--shadow); transform: translateY(-3px); }

/* Ícone */
.cotacao-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(29,158,117,0.07); border: 1px solid rgba(29,158,117,0.18); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; flex-shrink: 0; }
.cotacao-icon svg { width: 22px; height: 22px; stroke: var(--green-main); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Nome */
.cotacao-nome { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--green-dark); }

/* Valor */
.cotacao-valor { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--green-dark); line-height: 1.1; margin-top: 8px; }

/* Unidade */
.cotacao-unidade { font-size: 11px; color: var(--text-muted); letter-spacing: 0.2px; }

/* Variação */
.cotacao-var { font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px; margin-top: 6px; }
.cotacao-var.positivo { color: #1a7a4a; background: rgba(26,122,74,0.10); }
.cotacao-var.negativo { color: #c0392b; background: rgba(192,57,43,0.10); }
.cotacao-var.neutro   { color: var(--text-muted); background: rgba(0,0,0,0.05); }

/* Sem dado */
.cotacao-nd { font-size: 1.6rem; color: var(--cream-dark); margin: 10px 0 4px; }

/* Data */
.cotacao-data { font-size: 10px; color: var(--text-muted); margin-top: 10px; letter-spacing: 0.2px; padding-top: 10px; border-top: 1px solid var(--cream-dark); width: 100%; }

/* Skeleton loading */
.cotacao-skel { width: 65%; height: 14px; background: linear-gradient(90deg, var(--cream-dark) 25%, rgba(0,0,0,0.05) 50%, var(--cream-dark) 75%); background-size: 200% 100%; animation: cotacao-shimmer 1.5s infinite; border-radius: 4px; margin: 5px 0; }
.cotacao-skel-sm { width: 42%; height: 10px; }
@keyframes cotacao-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Erro global */
.cotacoes-error { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 28px; font-style: italic; display: none; }

/* Responsivo */
@media (max-width: 960px) { .cotacoes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:540px)  { .cotacoes { padding: 80px 24px; } .cotacoes-grid { grid-template-columns: 1fr; } .cot-soja-inds { grid-template-columns:repeat(2,1fr); } }

/* ── Painel Soja ─────────────────────────────────────── */
.cot-soja { background:var(--white); border:1px solid var(--cream-dark); border-radius:10px; padding:28px; margin-bottom:24px; }
.cot-soja-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--cream-dark); }
.cot-soja-nome { font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--green-dark); }
.cot-soja-unid { font-size:11px; color:var(--text-muted); margin-left:2px; }
.cot-soja-body { display:flex; flex-direction:column; gap:16px; }
.cot-soja-inds { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }

/* Indicador card (CEPEA/ESALQ e B3) */
.cot-soja-ind { display:flex; flex-direction:column; gap:12px; }
.cot-ind-card { background:var(--cream); border-radius:8px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.cot-ind-label { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.cot-ind-valor { font-family:'Playfair Display',serif; font-size:1.65rem; font-weight:700; color:var(--green-dark); line-height:1.1; }
.cot-ind-unidade { font-size:11px; color:var(--text-muted); }
.cot-ind-data { font-size:10px; color:var(--text-muted); padding-top:8px; margin-top:6px; border-top:1px solid rgba(0,0,0,0.07); }

/* Tabela Mercado Físico */
.cot-fis-table { width:100%; border-collapse:collapse; font-size:13px; }
.cot-fis-table th { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); padding:0 10px 10px; text-align:left; border-bottom:1px solid var(--cream-dark); }
.cot-fis-table th.th-r { text-align:right; }
.cot-fis-table td { padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); color:var(--text); vertical-align:middle; }
.cot-fis-table tbody tr:last-child td { border-bottom:none; }
.cot-fis-table tbody tr:hover td { background:var(--cream); }
.cot-td-val { font-weight:600; white-space:nowrap; text-align:right; }
.cot-td-var { text-align:right; white-space:nowrap; }
.cot-fis-data { font-size:10px; color:var(--text-muted); text-align:right; margin-top:10px; padding-top:8px; border-top:1px solid var(--cream-dark); }
.cot-fis-nd { font-style:italic; color:var(--text-muted); font-size:13px; padding:12px 0; }

/* Responsivo Soja */
@media (max-width:960px) { .cot-soja-inds { grid-template-columns:repeat(3,1fr); } }

/* ── Painel Milho ─────────────────────────────────────── */
.cot-milho { background:var(--white); border:1px solid var(--cream-dark); border-radius:10px; padding:28px; margin-bottom:24px; }
.cot-milho-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--cream-dark); }
.cot-milho-nome { font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--green-dark); }
.cot-milho-unid { font-size:11px; color:var(--text-muted); margin-left:2px; }
.cot-milho-body { display:flex; flex-direction:column; gap:16px; }
.cot-milho-inds { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cot-tab-label { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--green-dark); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--cream-dark); }
/* Responsivo Milho */
@media (max-width:960px) { .cot-milho-inds { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .cot-milho-inds { grid-template-columns:1fr; } }

/* -- Painel Trigo ------------------------------------------------- */
.cot-trigo { background:var(--white); border:1px solid var(--cream-dark); border-radius:10px; padding:28px; margin-bottom:24px; }
.cot-trigo-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--cream-dark); }
.cot-trigo-nome { font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--green-dark); }
.cot-trigo-unid { font-size:11px; color:var(--text-muted); margin-left:2px; }
.cot-trigo-body { display:flex; flex-direction:column; gap:16px; }
.cot-trigo-inds { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
/* Responsivo Trigo */
@media (max-width:960px) { .cot-trigo-inds { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .cot-trigo-inds { grid-template-columns:1fr; } }

/* -- Painel Arroz ------------------------------------------------- */
.cot-arroz { background:var(--white); border:1px solid var(--cream-dark); border-radius:10px; padding:28px; margin-bottom:24px; }
.cot-arroz-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--cream-dark); }
.cot-arroz-nome { font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--green-dark); }
.cot-arroz-unid { font-size:11px; color:var(--text-muted); margin-left:2px; }
.cot-arroz-body { display:flex; flex-direction:column; gap:16px; }
.cot-arroz-inds { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cot-arroz-tabs { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
/* Responsivo Arroz */
@media (max-width:960px) { .cot-arroz-inds { grid-template-columns:repeat(2,1fr); } .cot-arroz-tabs { grid-template-columns:1fr; } }
@media (max-width:540px) { .cot-arroz-inds { grid-template-columns:1fr; } }

/* === COTACOES — MOBILE (<= 768px) === */
@media (max-width: 768px) {

  /* 1. Secao: padding lateral 64px → 24px */
  .cotacoes { padding: 80px 24px; }

  /* 2. Grid de indicadores gerais: 1 coluna */
  .cotacoes-grid { grid-template-columns: 1fr; }

  /* 3. Paineis de cultura: padding compacto, 100% largura */
  .cot-soja,
  .cot-milho,
  .cot-trigo,
  .cot-arroz {
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 4. Soja: 5 colunas → 2 (milho/trigo/arroz ja estao em repeat(2,1fr) pelo 960px) */
  .cot-soja-inds { grid-template-columns: repeat(2, 1fr); }

  /* 5. Cards de indicadores: largura total dentro da coluna */
  .cot-ind-card {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px;
  }

  /* 6. Tabela mercado fisico: layout fixo, 3 colunas proporcionais, sem overflow */
  .cot-fis-table {
    table-layout: fixed;
    width: 100%;
  }
  .cot-fis-table th:nth-child(1),
  .cot-fis-table td:nth-child(1) { width: 48%; }
  .cot-fis-table th:nth-child(2),
  .cot-fis-table td:nth-child(2) { width: 28%; }
  .cot-fis-table th:nth-child(3),
  .cot-fis-table td:nth-child(3) { width: 24%; }

  /* 7. Celulas de valor/variacao: permitir quebra de linha */
  .cot-td-val,
  .cot-td-var { white-space: normal; }

  /* 8. Padding da tabela: reduzido para mobile */
  .cot-fis-table th,
  .cot-fis-table td { padding: 7px 6px; }
}