/* =====================================================================
   CRIOULISTA — Sistema de Design (campo & premiação)
   Implementa o Guia de Design. Tokens, componentes, metais do Freio,
   gráficos e movimento. Fonte única de verdade para o CSS de marca.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600;1,9..144,700&display=swap');

/* ------------------------------------------------------------------ */
/* 1. TOKENS                                                           */
/* ------------------------------------------------------------------ */
:root{
  /* fundo e superfícies */
  --bg:#f7f9f7; --card:#ffffff; --card-2:#f0f4f1; --card-3:#e8efe9;
  --linen:#efe7d8; --paper:#f6f0e4;

  /* verde — identidade */
  --green:#0d7a3e; --green-hi:#10b557; --green-pale:#e6f5ec; --green-mid:#d1edd9;

  /* escuro / quase-preto */
  --accent:#0a100d; --accent-2:#0e1712;
  --text:#0a100d; --text-2:#2d3d31; --muted:#566e5d;

  /* bordas */
  --border:#daeade; --border-2:#c8daca;

  /* sexo */
  --blue:#2563eb; --blue-lo:#93c5fd; --blue-dark:#1e3a5f;

  /* semânticas */
  --red:#dc2626; --red-bg:#fee2e2; --red-text:#991b1b;
  --amber-bg:#fef3c7; --amber-text:#92400e;

  /* extensão campo — madeira nogueira */
  --wood-1:#231710; --wood-2:#382415; --wood-3:#4b3120; --wood-hi:#6d4827;
  /* couro cognac */
  --leather:#8a4b25; --leather-2:#6f3a1c; --leather-hi:#b06d3d; --thread:#ecdcb8;
  /* latão / brass */
  --brass:#c6a35a; --brass-hi:#efd89b; --brass-deep:#8a6d2f;
  --cream:#f3ead6; --cream-2:#d9c8a8; --cream-mut:#b7a681;

  /* metais do Freio — cor sólida (dados/gráficos/badges) */
  --ouro:#c6a35a; --prata:#c3ccd3; --bronze:#a9643a; --alpaca:#9aa1a0;

  /* raios */
  --radius:12px; --radius-lg:16px; --radius-xl:20px;

  /* sombras */
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px -38px rgba(10,16,13,.7);

  /* tipografia */
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces','Cormorant',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* texturas */
  --grain-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.12' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 2. BASE                                                            */
/* ------------------------------------------------------------------ */
*{box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;margin:0}
.mono{font-family:var(--mono);letter-spacing:.5px}
.serif{font-family:var(--serif)}

/* tipografia utilitária */
.cr-h1{font-family:var(--serif);font-weight:700;font-size:clamp(38px,7vw,72px);line-height:1.02;letter-spacing:0}
.cr-h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.06;letter-spacing:0}
.cr-lead{font-size:clamp(16.5px,2vw,18px);line-height:1.6;color:var(--text-2)}
.cr-body{font-size:16px;line-height:1.6;color:var(--text-2)}
.cr-cap{font-size:13.5px;line-height:1.55;color:var(--muted)}
.cr-num{font-family:var(--sans);font-weight:700;letter-spacing:-1.5px}

/* wordmark */
.cr-mark{font-family:var(--sans);font-weight:700;letter-spacing:-1.5px;line-height:1}
.cr-mark .p{color:var(--green-hi)}

/* rótulo com hairline (latão) */
.cr-label{font-size:13.5px;font-weight:500;color:var(--brass-deep);display:inline-flex;align-items:center;gap:12px;letter-spacing:.3px}
.cr-label::before{content:"";width:26px;height:1px;background:var(--brass)}

/* ------------------------------------------------------------------ */
/* 3. SUPERFÍCIES                                                     */
/* ------------------------------------------------------------------ */
.cr-dark{background:linear-gradient(155deg,var(--accent-2),var(--accent));color:#fff;position:relative;overflow:hidden}
.cr-wood{position:relative;overflow:hidden;color:var(--cream);
  background:linear-gradient(105deg,rgba(0,0,0,.4),rgba(0,0,0,0) 38%,rgba(255,220,170,.07) 66%,rgba(0,0,0,.36)),
             linear-gradient(180deg,var(--wood-3),var(--wood-2) 45%,var(--wood-1))}
.cr-wood::before{content:"";position:absolute;inset:0;background-image:var(--grain-wood);background-size:900px 460px;opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.cr-grain::after{content:"";position:absolute;inset:0;background-image:var(--grain-fine);background-size:160px;opacity:.06;mix-blend-mode:soft-light;pointer-events:none}

/* ------------------------------------------------------------------ */
/* 4. CARDS DE KPI                                                    */
/* ------------------------------------------------------------------ */
.cr-kpi{border-radius:var(--radius-lg);padding:26px;min-height:156px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.cr-kpi .tag{font-size:11.5px;font-weight:500;letter-spacing:.3px}
.cr-kpi .num{font-size:42px;font-weight:700;letter-spacing:-1.6px;line-height:1}
.cr-kpi .cap{font-size:13px;font-weight:500}

.cr-kpi--std{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.cr-kpi--std .tag{color:var(--muted)} .cr-kpi--std .num{color:var(--green)} .cr-kpi--std .cap{color:var(--text-2)}

.cr-kpi--dark{background:linear-gradient(155deg,var(--accent-2),var(--accent));color:#fff}
.cr-kpi--dark .tag{color:var(--green-hi)} .cr-kpi--dark .num .u{color:var(--green-hi)} .cr-kpi--dark .cap{color:#c5d2c8}

.cr-kpi--green{background:var(--green);color:#fff}
.cr-kpi--green .tag{color:rgba(255,255,255,.78)} .cr-kpi--green .cap{color:rgba(255,255,255,.9)}

.cr-kpi--merit{background:linear-gradient(155deg,var(--accent-2),var(--accent));color:#fff;border:1px solid rgba(198,163,90,.32)}
.cr-kpi--merit .tag{color:var(--brass-hi)} .cr-kpi--merit .num .u{color:var(--brass)} .cr-kpi--merit .cap{color:#c5d2c8}

/* ------------------------------------------------------------------ */
/* 5. BOTÕES                                                          */
/* ------------------------------------------------------------------ */
.cr-btn{font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 20px;border-radius:11px;border:none;cursor:pointer;transition:all .15s;letter-spacing:-.1px;display:inline-flex;align-items:center;gap:8px}
.cr-btn--primary{background:var(--green);color:#fff}
.cr-btn--primary:hover{background:var(--green-hi)}
.cr-btn--outline{background:transparent;border:1px solid var(--border-2);color:var(--text-2)}
.cr-btn--outline:hover{background:var(--card-2)}
.cr-btn--brass{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px rgba(198,163,90,.32)}
.cr-btn--brass:hover{box-shadow:inset 0 0 0 1px var(--brass)}
.cr-btn--brass .p{color:var(--brass-hi)}

/* ------------------------------------------------------------------ */
/* 6. BADGES                                                          */
/* ------------------------------------------------------------------ */
.cr-badge{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;letter-spacing:.1px;display:inline-block}
.cr-badge--m{background:var(--accent);color:var(--green-hi)}
.cr-badge--f{background:var(--green-pale);color:var(--green)}
.cr-badge--ok{background:var(--green-pale);color:var(--green)}
.cr-badge--warn{background:var(--amber-bg);color:var(--amber-text)}
/* badge de colocação: usa cor sólida do metal via --m */
.cr-badge--metal{background:color-mix(in srgb,var(--m) 16%,transparent);color:var(--m);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m) 55%,transparent)}
.cr-badge--metal.is-ouro{--m:var(--ouro)}
.cr-badge--metal.is-prata{--m:#7f8a91}
.cr-badge--metal.is-bronze{--m:var(--bronze)}
.cr-badge--metal.is-alpaca{--m:#7d8483}

/* ------------------------------------------------------------------ */
/* 7. PREMIAÇÃO — MEDALHÃO + METAIS                                   */
/* ------------------------------------------------------------------ */
.cr-medal{position:relative;width:112px;height:112px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--metal);
  box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.35)}
.cr-medal .rim{position:absolute;inset:7px;border-radius:50%;background:var(--metal-in);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.4)}
.cr-medal .mark{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--serif);font-weight:700;font-size:26px;color:rgba(60,45,15,.5);text-shadow:0 1px 0 rgba(255,245,220,.5)}
.cr-medal .shine{position:absolute;top:-60%;left:-70%;width:55%;height:220%;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gleam),transparent);
  transform:rotate(22deg);animation:cr-sweep 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.cr-medal--sm{width:56px;height:56px}
.cr-medal--sm .rim{inset:4px}
.cr-medal--sm .mark{font-size:15px}

@keyframes cr-sweep{0%{left:-70%}18%{left:150%}100%{left:150%}}

/* metais */
.metal-ouro{
  --metal:linear-gradient(145deg,#8a6d2f,#e6cd93 42%,#f6ead0 52%,#c6a35a 70%,#7d611f);
  --metal-in:linear-gradient(145deg,#b98f3d,#f4e2b0,#c6a35a,#8a6d2f);
  --gleam:rgba(255,250,235,.85); --d:0s;}
.metal-prata{
  --metal:linear-gradient(145deg,#7d858e,#dfe4e8 42%,#ffffff 52%,#c3ccd3 70%,#767e87);
  --metal-in:linear-gradient(145deg,#aab2ba,#ffffff,#c3ccd3,#828a92);
  --gleam:rgba(255,255,255,.85); --d:.6s;}
.metal-bronze{
  --metal:linear-gradient(145deg,#6b3f22,#c9895a 42%,#e8b489 52%,#a9643a 70%,#5f3620);
  --metal-in:linear-gradient(145deg,#9c5e37,#e8b489,#a9643a,#6b3f22);
  --gleam:rgba(255,236,215,.7); --d:1.2s;}
.metal-alpaca{
  --metal:linear-gradient(145deg,#727a7c,#b6bdbc 45%,#ccd1cf 53%,#9aa1a0 70%,#6b7273);
  --metal-in:linear-gradient(145deg,#969d9c,#ccd1cf,#9aa1a0,#767d7c);
  --gleam:rgba(240,243,242,.5); --d:1.8s;}

/* placa de troféu (medalhão + nameplate de latão sobre madeira) */
.cr-plaque{border-radius:var(--radius-lg);padding:34px;display:flex;gap:26px;align-items:center;box-shadow:var(--shadow-lg)}
.cr-plaque .medal-wrap,.cr-plaque .brassplate{position:relative;z-index:2}
.cr-brassplate{flex:1;min-width:0;border-radius:10px;padding:18px 20px;
  background:linear-gradient(145deg,#b98f3d,#f0dca0 46%,#c6a35a 60%,#8a6d2f);
  box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.7),inset 0 -3px 6px rgba(0,0,0,.3)}
.cr-brassplate .eng{font-family:var(--serif);font-weight:700;font-size:27px;line-height:1;color:#4a3a12;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.cr-brassplate .eng2{font-size:13px;font-weight:600;letter-spacing:.4px;color:#6b551e;margin-top:8px}
.cr-brassplate .sbb{font-size:13px;color:#7a6427;margin-top:10px}

/* ------------------------------------------------------------------ */
/* 8. CARTÃO DE COURO                                                 */
/* ------------------------------------------------------------------ */
.cr-leather{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:34px;color:var(--cream);
  background:linear-gradient(150deg,var(--leather-hi),var(--leather) 45%,var(--leather-2));box-shadow:var(--shadow-lg)}
.cr-leather::after{content:"";position:absolute;inset:0;background-image:var(--grain-fine);background-size:150px;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.cr-leather .stitch{position:absolute;inset:14px;border:2px dashed rgba(236,220,184,.65);border-radius:11px;pointer-events:none}
.cr-leather .in{position:relative;z-index:2}
.cr-leather .q{font-family:var(--serif);font-style:italic;font-size:29px;font-weight:600;line-height:1.22;color:#fbf3e2}
.cr-leather .n{font-size:52px;font-weight:700;letter-spacing:-2px;margin-top:10px;color:#fff}
.cr-leather .n .u{color:var(--brass-hi)}
.cr-leather .c{font-size:15px;color:#f0d9bf;font-weight:500;margin-top:6px}

/* ------------------------------------------------------------------ */
/* 9. GRÁFICOS (tokens + demo CSS)                                    */
/* ------------------------------------------------------------------ */
:root{
  --chart-grid:var(--card-3);
  --chart-axis:var(--border);
  --chart-label:var(--muted);
  /* paleta categórica (ordem) */
  --series-1:var(--green); --series-2:var(--accent); --series-3:var(--brass);
  --series-4:var(--muted);  --series-5:var(--green-hi);
}
.cr-chart{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}
.cr-chart__title{font-size:14px;font-weight:600;color:var(--text);margin:0 0 16px}
.cr-bars{display:flex;align-items:flex-end;gap:14px;height:180px;padding-top:10px}
.cr-bars .bar{flex:1;background:var(--c,var(--green));border-radius:6px 6px 0 0;position:relative;min-width:0}
.cr-bars .bar>.v{position:absolute;top:-20px;left:0;right:0;text-align:center;font-size:12.5px;font-weight:600;color:var(--text-2)}
.cr-bars .bar>.x{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--chart-label)}
.cr-xaxis{height:1px;background:var(--chart-axis);margin-top:22px}
.cr-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;font-size:12.5px;color:var(--text-2);font-weight:500}
.cr-legend span{display:inline-flex;align-items:center;gap:7px}
.cr-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
/* cores semânticas de dado */
.is-femea{--c:var(--green)} .is-macho{--c:var(--blue)}
.is-ouro{--c:var(--ouro)} .is-prata{--c:var(--prata)} .is-bronze{--c:var(--bronze)} .is-alpaca{--c:var(--alpaca)}

/* tooltip */
.cr-tooltip{background:var(--accent);color:#fff;border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-md);font-size:12.5px;display:inline-block}
.cr-tooltip .val{color:var(--green-hi);font-weight:700}

/* variante escura de gráfico */
.cr-chart--dark{background:linear-gradient(155deg,var(--accent-2),var(--accent));border-color:rgba(255,255,255,.08)}
.cr-chart--dark .cr-chart__title{color:#fff}
.cr-chart--dark .cr-bars .bar>.v{color:#c5d2c8}
.cr-chart--dark .cr-bars .bar>.x{color:#8fb39c}
.cr-chart--dark .cr-xaxis{background:rgba(255,255,255,.12)}
.cr-chart--dark .is-femea{--c:var(--green-hi)}

/* ------------------------------------------------------------------ */
/* 10. ESTADOS (loading / vazio)                                      */
/* ------------------------------------------------------------------ */
.cr-state{border-radius:var(--radius-lg);padding:34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cr-state--loading{background:var(--card);border:1px solid var(--border)}
.cr-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--card-3);border-top-color:var(--green);animation:cr-spin .8s linear infinite}
.cr-state--empty{background:var(--bg);border:1.5px dashed var(--border-2)}
.cr-state--empty .ico{font-size:32px;color:var(--muted)}
.cr-state .t{font-size:15px;font-weight:600;color:var(--text-2)}
.cr-state .d{font-size:13.5px;color:var(--muted);max-width:38ch}
@keyframes cr-spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ */
/* 11. PONTO PULSANTE                                                 */
/* ------------------------------------------------------------------ */
.cr-dot{width:8px;height:8px;border-radius:50%;background:var(--green-hi);position:relative;display:inline-block}
.cr-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-hi);animation:cr-pulse 2.6s ease-out infinite}
@keyframes cr-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3.6);opacity:0}}

/* ------------------------------------------------------------------ */
/* 12. ACESSIBILIDADE — reduz movimento                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cr-medal .shine,.cr-dot::after,.cr-spinner{animation:none}
  .cr-dot::after{opacity:0}
}