/* =====================================================================
   INTEGRAMERCADO — tokens e componentes de identidade visual
   Paleta extraída da logo: verde-lavoura #00763A, azul-horizonte #0B6FC6,
   verde-folha #4FAE2F. O verde é a marca; o azul é o acento de dado/mercado.
   ===================================================================== */
:root{
  --im-green:#00763A;
  --im-green-deep:#05532A;
  --im-green-leaf:#4FAE2F;
  --im-green-light:#7DC242;
  --im-blue:#0B6FC6;
  --im-blue-deep:#08528F;
  --im-blue-light:#3B95E8;
  --im-ink:#0F2417;
  --im-ink-soft:#41564A;
  --im-muted:#7C8F82;
  --im-line:#E1EBE3;
  --im-surface:#FFFFFF;
  --im-bg:#F4F7F3;
  --im-mint:#EAF5E9;
  --im-sky:#E8F1FB;

  --im-up:#12864A;        /* alta */
  --im-down:#C62828;      /* baixa */
  --im-flat:#7C8F82;      /* estável */
  --im-warn:#B26A00;

  --im-grad:linear-gradient(135deg,#00763A 0%,#0B6FC6 100%);
  --im-grad-green:linear-gradient(135deg,#4FAE2F 0%,#00763A 100%);
  --im-shadow:0 1px 2px rgba(15,36,23,.04), 0 8px 24px -12px rgba(15,36,23,.14);
}

.im-gradient{background:var(--im-grad)}
.im-gradient-green{background:var(--im-grad-green)}
.im-gradient-text{background:var(--im-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------------------------------------ formulário */
.im-field{width:100%;border:1px solid #D5E3D8;border-radius:.75rem;background:#fff;padding:.75rem 1rem;
  color:var(--im-ink);outline:none;transition:.15s;font-size:.925rem}
.im-field::placeholder{color:#9BAF9F}
.im-field:focus{border-color:var(--im-green);box-shadow:0 0 0 3px rgba(0,118,58,.14)}
.im-field:disabled{background:#F6F8F6;color:var(--im-muted)}

/* --------------------------------------------------------------- botões */
.im-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;
  padding:.8rem 1.2rem;font-size:.9rem;font-weight:700;color:#fff;background:var(--im-grad);
  box-shadow:0 10px 22px -10px rgba(0,118,58,.55);transition:.15s;border:0;cursor:pointer}
.im-btn:hover{filter:brightness(1.06)}
.im-btn:active{transform:translateY(1px)}
.im-btn[disabled]{opacity:.75;cursor:progress}
.im-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;
  padding:.68rem 1.05rem;font-size:.875rem;font-weight:600;color:var(--im-ink-soft);background:#fff;
  border:1px solid var(--im-line);transition:.15s;cursor:pointer}
.im-btn-ghost:hover{background:#F3F8F3;border-color:#CFE0D3}
.im-btn-sm{padding:.45rem .8rem;font-size:.8rem;border-radius:.6rem}

/* ---------------------------------------------------------------- cards */
.im-card{background:var(--im-surface);border:1px solid var(--im-line);border-radius:1rem;box-shadow:var(--im-shadow)}
.im-card-pad{padding:1.15rem 1.25rem}

/* ------------------------------------------------- variação de preço */
.trend-up{color:var(--im-up)}
.trend-down{color:var(--im-down)}
.trend-flat{color:var(--im-flat)}
.im-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;padding:.15rem .5rem;
  font-size:.72rem;font-weight:700;line-height:1.4}
.im-badge.trend-up{background:rgba(18,134,74,.1)}
.im-badge.trend-down{background:rgba(198,40,40,.1)}
.im-badge.trend-flat{background:rgba(124,143,130,.12)}

/* ---------------------------------------- frescor do dado (§57) */
.im-fresh{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600}
.im-fresh::before{content:"";width:.4rem;height:.4rem;border-radius:9999px;background:currentColor}
.im-fresh-fresh{color:var(--im-up)}
.im-fresh-stale{color:var(--im-warn)}
.im-fresh-old,.im-fresh-unknown{color:var(--im-down)}

/* --------------------------------------------- estado dos providers */
.im-status{display:inline-flex;align-items:center;gap:.35rem;border-radius:9999px;padding:.2rem .6rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.im-status::before{content:"";width:.45rem;height:.45rem;border-radius:9999px;background:currentColor}
.im-status-online{color:#12864A;background:rgba(18,134,74,.1)}
.im-status-degradado{color:#B26A00;background:rgba(178,106,0,.12)}
.im-status-offline{color:#C62828;background:rgba(198,40,40,.1)}
.im-status-bloqueado{color:#6B21A8;background:rgba(107,33,168,.1)}
.im-status-licenca_pendente{color:#0B6FC6;background:rgba(11,111,198,.1)}
.im-status-desativado{color:#7C8F82;background:rgba(124,143,130,.12)}

/* ------------------------------------------------------------- tabelas */
.im-table{width:100%;border-collapse:collapse;font-size:.875rem}
.im-table thead th{text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--im-muted);padding:.7rem .85rem;border-bottom:1px solid var(--im-line);white-space:nowrap}
.im-table tbody td{padding:.72rem .85rem;border-bottom:1px solid #F0F5F1;color:var(--im-ink)}
.im-table tbody tr:last-child td{border-bottom:0}
.im-table tbody tr:hover{background:#FAFCFA}
.im-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ----------------------------------------- navegação (layout do app) */
.nav-link{display:flex;align-items:center;gap:.6rem;border-radius:.6rem;padding:.55rem .75rem;
  font-size:.875rem;color:var(--im-ink-soft);transition:.12s}
.nav-link:hover{background:var(--im-mint)}
.nav-link.is-active{background:#DCEFDC;color:var(--im-green-deep);font-weight:600}
.nav-group>summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;border-radius:.6rem;
  padding:.55rem .75rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--im-muted);transition:.12s;user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:var(--im-mint);color:var(--im-ink-soft)}
.nav-group .chev{margin-left:auto;transition:transform .15s}
.nav-group[open]>summary .chev{transform:rotate(90deg)}
.nav-group .nav-sub{margin:.1rem 0 .35rem .35rem;padding-left:.55rem;border-left:1px solid var(--im-line)}

/* ------------------------------------------------ cenário da tela de login
   Um horizonte: céu azul da logo em cima, faixa de luz na linha do horizonte,
   lavoura em perspectiva embaixo com as fileiras convergindo para o ponto de
   fuga. Puro CSS — nenhuma imagem, nenhuma requisição extra. */
.field-scene{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,
    #E4EFFB 0%,      /* céu alto */
    #EFF6FC 30%,
    #F8FBF3 58%,     /* luz do horizonte */
    #EDF6E5 66%,     /* começo da lavoura */
    #DEEED2 100%)}   /* lavoura próxima */

/* Clareira sob o conteúdo: garante leitura do texto sobre a lavoura. */
.field-scene::after{content:"";position:absolute;left:50%;top:42%;width:46rem;height:42rem;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.80) 0%,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 78%)}

/* Brilho suave sobre a linha do horizonte, no lugar do sol. */
.field-sky{position:absolute;left:50%;top:60%;width:46rem;height:22rem;transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.9) 0%,rgba(255,255,255,.45) 45%,transparent 78%)}

/* Fileiras plantadas: nascem no horizonte e abrem em direção ao observador. */
.field-rows{position:absolute;left:-45%;right:-45%;top:65%;bottom:-6%;
  background:repeating-linear-gradient(90deg,
    rgba(0,118,58,.17) 0 5px, rgba(0,118,58,0) 5px 26px);
  transform:perspective(200px) rotateX(76deg);
  transform-origin:top center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.65) 58%,transparent 94%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.65) 58%,transparent 94%);
  animation:rows-drift 40s linear infinite}
@keyframes rows-drift{to{background-position:31px 0}}

/* Faixas de talhão cruzando a lavoura — dá profundidade sem virar textura. */
.field-bands{position:absolute;left:0;right:0;top:65%;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(79,174,47,.07) 0 16px, rgba(79,174,47,0) 16px 74px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)}

/* Névoa que amarra céu e lavoura, matando qualquer emenda dura. */
.field-haze{position:absolute;left:0;right:0;top:54%;height:20%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 46%,rgba(255,255,255,0) 100%)}

.field-glow{position:absolute;left:50%;top:36%;width:32rem;height:32rem;transform:translate(-50%,-50%);
  pointer-events:none;border-radius:9999px;
  background:radial-gradient(circle,rgba(79,174,47,.16) 0%,rgba(11,111,198,.09) 46%,transparent 70%);
  animation:glow-pulse 9s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}
                      50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}

/* Chips do login */
.im-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(0,118,58,.2);
  background:rgba(255,255,255,.78);backdrop-filter:blur(6px);border-radius:9999px;padding:.4rem .8rem;
  font-size:.78rem;font-weight:600;color:var(--im-green-deep)}

/* Campo com ícone à esquerda */
.field-wrap{position:relative}
.field-wrap .fi{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:#9BAF9F;pointer-events:none}
.field-wrap input{padding-left:2.7rem}
.code-input{letter-spacing:.5em;text-align:center;font-weight:800;font-size:1.45rem;padding-left:1rem !important}

.spin{display:inline-block;width:1em;height:1em;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* O login sempre cabe na tela: conforme a altura diminui, o opcional some. */
@media (min-width:1024px){
  @media (max-height:860px){ .login-stats{display:none !important} }
  @media (max-height:720px){ .login-chips{display:none !important} .login-logo{width:16rem} }
  @media (max-height:620px){ .login-pergunta{display:none !important} }
  @media (max-height:540px){ .login-tag{display:none !important} .login-logo{width:12rem} }
}

@media (prefers-reduced-motion: reduce){
  .field-rows,.field-glow,.spin{animation:none}
}

/* Corta em duas linhas com reticências. O Tailwind via CDN não traz o plugin
   line-clamp, e a origem da cotação ("Indicador CEPEA/ESALQ — Campinas")
   precisa caber sem desalinhar os cards vizinhos. */
.line-clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* =====================================================================
   Popover de proveniência (§39)
   
   O painel "Ver fonte" aparece dentro de um card com `overflow-hidden` e
   dentro de tabelas com `overflow-x-auto`. Qualquer ancestral que corte
   overflow RECORTA um filho posicionado — não adianta subir o z-index, o
   elemento nem chega a ser desenhado inteiro. Era por isso que ele parecia
   "ficar por trás" do bloco de baixo.
   
   A saída é a top layer: `[popover]` sai do fluxo de empilhamento da página,
   ignora recorte de ancestral, fecha ao clicar fora e no Esc, e só deixa um
   aberto por vez — tudo nativo. A posição é calculada em JS porque o
   ancoramento por CSS ainda não é portátil.
   ===================================================================== */
.im-prov-pop{
  position:fixed; inset:auto; margin:0; padding:.875rem;
  width:18rem; max-width:calc(100vw - 1.5rem);
  border:1px solid var(--im-line); border-radius:.85rem;
  background:var(--im-surface); color:var(--im-ink);
  box-shadow:0 4px 6px -2px rgba(15,36,23,.06), 0 20px 40px -12px rgba(15,36,23,.28);
}
.im-prov-pop::backdrop{background:transparent}

/* Navegador sem Popover API: o atributo é ignorado e o painel ficaria SEMPRE
   visível dentro do card. Escondemos e deixamos o JS abrir pela classe. */
@supports not selector(:popover-open){
  .im-prov-pop{display:none}
  .im-prov-pop.is-open{display:block}
}