/* Shared styles for calculator-type tools (IMC, água, proteína, perda de peso, RCA, açúcar). */

.fi-main { max-width: 780px; margin: 40px auto; padding: 0 20px; }

.fi-card {
  background: var(--fer-surface);
  border: 1px solid var(--fer-border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(23,38,33,0.04);
}

.fi-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 500;
  margin: 0 0 20px;
  color: var(--fer-text);
  display: flex; align-items: center; gap: 12px;
}

.fi-card h2 .fi-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--fer-green); color: #fff; border-radius: 50%;
  font-size: 0.85rem; font-weight: 600;
}

.fi-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.fi-grid-2 { grid-template-columns: 1fr 1fr; }
.fi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fi-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .fi-grid-2, .fi-grid-3, .fi-grid-4 { grid-template-columns: 1fr 1fr; } }

.fi-field label {
  display: block;
  font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fer-muted);
  margin-bottom: 6px; font-weight: 500;
}

.fi-field input, .fi-field select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--fer-border);
  border-radius: 8px;
  font-family: inherit; font-size: 0.95rem;
  color: var(--fer-text);
  background: #F4F8F5;
  transition: border-color 0.15s, background 0.15s;
}

.fi-field input:focus, .fi-field select:focus {
  outline: none;
  border-color: var(--fer-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47,116,91,0.10);
}

.fi-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.fi-res-card {
  background: linear-gradient(135deg, rgba(47,116,91,0.10), rgba(58,175,126,0.04));
  border: 1px solid rgba(47,116,91,0.30);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}

.fi-res-val {
  font-family: 'Inter', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: var(--fer-green);
  margin: 0; line-height: 1;
}

.fi-res-lbl {
  font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fer-muted);
  margin: 8px 0 4px; font-weight: 500;
}

.fi-res-sub {
  font-size: 0.78rem; color: var(--fer-text-2);
  margin: 0;
}

.fi-cenarios {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 14px;
}
@media (max-width: 640px) { .fi-cenarios { grid-template-columns: 1fr; } }

.fi-cen {
  background: #F4F8F5;
  border: 1px solid var(--fer-border);
  border-radius: 10px;
  padding: 14px; text-align: center;
}

.fi-cen-lbl {
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fer-muted);
  margin: 0 0 6px; font-weight: 500;
}

.fi-cen-val {
  font-size: 1.05rem; font-weight: 700; color: var(--fer-text);
  margin: 0;
}

.fi-classif {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(47,116,91,0.10);
  color: var(--fer-green);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
  margin-top: 8px;
}
.fi-classif.warn { background: rgba(184,134,11,0.14); color: #8a6608; }
.fi-classif.danger { background: rgba(160,64,48,0.10); color: #8b2f24; }

/* Sugar/food picker specific */
.fi-food-list {
  display: grid; gap: 10px;
}
.fi-food-row {
  display: grid; grid-template-columns: 1fr 90px;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--fer-border);
  border-radius: 8px;
  background: #fafcf9;
}
.fi-food-row .fi-food-lbl {
  font-size: 0.9rem; color: var(--fer-text);
}
.fi-food-row .fi-food-sub {
  display: block;
  font-size: 0.72rem; color: var(--fer-muted);
  margin-top: 2px;
}
.fi-food-row input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--fer-border);
  border-radius: 6px;
  font-family: inherit; font-size: 0.9rem;
  text-align: center;
  background: #fff;
}