styles.css

/* ── Variáveis compartilhadas do projeto ───────────────────── */
:root {
  --bg:          #fdfbf7;
  --text:        #2c2c2c;
  --muted:       #7a7a7a;
  --accent:      #264653;
  --crh:         #2a9d8f;
  --nmr:         #e9c46a;
  --crnh:        #e76f51;
  --info:        #577590;
  --info-bg:     #57759014;
  --grid:        #e8e4dd;
  --card-border: #ddd8d0;
  --soft:        #f5f3ef;

  --font-serif: Georgia, 'Source Serif 4', serif;
  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Importante:
   NÃO usamos reset global com margin:0/padding:0,
   porque isso quebra componentes internos do Gradio.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Base Gradio ───────────────────────────────────────────── */
.gradio-container {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.55;
}

.gradio-container h1,
.gradio-container h2,
.gradio-container h3 {
  color: var(--accent);
  letter-spacing: -0.02em;
}

.gradio-container h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2vw, 2.35rem);
  margin-bottom: 0.45rem;
}

.gradio-container p {
  margin-bottom: 0.65rem;
}

.gradio-container ul,
.gradio-container ol {
  margin: 0.35rem 0 0.9rem 1.25rem;
  padding-left: 1rem;
}

.gradio-container li {
  margin: 0.15rem 0;
}

/* ── Abas: corrige PreverExplicarSobre colado ─────────────── */
.gradio-container [role="tablist"] {
  gap: 0.35rem !important;
  border-bottom: 1px solid var(--grid) !important;
  margin-top: 0.9rem !important;
  margin-bottom: 1rem !important;
}

.gradio-container button[role="tab"] {
  padding: 0.55rem 0.85rem !important;
  margin-right: 0.15rem !important;
  border-radius: 10px 10px 0 0 !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.gradio-container button[role="tab"][aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ── Campos, painéis e botões ─────────────────────────────── */
.gradio-container textarea,
.gradio-container input {
  font-family: var(--font-sans) !important;
}

.gradio-container .block,
.gradio-container .panel,
.gradio-container .form {
  border-radius: 16px !important;
}

.gradio-container button.primary,
.gradio-container .primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.gradio-container button.primary:hover,
.gradio-container .primary:hover {
  filter: brightness(1.08);
}

/* ── Cards próprios do endpoint ───────────────────────────── */
.notinhas-card {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(38, 70, 83, 0.06);
  font-family: var(--font-sans);
}

.notinhas-soft-card {
  background: var(--soft);
  border: 1px solid var(--grid);
  border-radius: 14px;
  padding: 14px;
  font-family: var(--font-sans);
}

.notinhas-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.notinhas-badge-util {
  background: #d8f3dc;
  color: #1b4332;
}

.notinhas-badge-nao-util {
  background: #fde2e4;
  color: #9d0208;
}

.notinhas-badge-media {
  background: #fff3bf;
  color: #7c5c00;
}

.notinhas-badge-baixa {
  background: #e9ecef;
  color: #495057;
}

.notinhas-score-label {
  font-size: 12px;
  color: var(--muted);
}

.notinhas-score-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* JSON e exemplos */
.gradio-container label,
.gradio-container .label-wrap {
  color: var(--muted) !important;
}

.gradio-container .examples {
  margin-top: 0.85rem !important;
}