/* Dieta Reversa Inteligente – v0.4.2 */
/* Mobile-first: fontes maiores, nova paleta, alto contraste e dark mode */

:root{
  --dri-bg:#ffffff;
  --dri-fg:#0f172a;           /* slate-900 */
  --dri-muted:#475569;        /* slate-600 */
  --dri-card:#ffffff;
  --dri-border:#e2e8f0;       /* slate-200 */
  --dri-accent:#2563eb;       /* blue-600 */
  --dri-accent-fg:#ffffff;
  --dri-chip-bg:#dbeafe;      /* blue-100 */
  --dri-chip-fg:#1e3a8a;      /* blue-900 */
  --dri-alert-bg:#fef2f2;
  --dri-alert-fg:#7f1d1d;
  --dri-alert-border:#ef4444;
  --dri-ok-bg:#ecfdf5;
  --dri-ok-fg:#065f46;
  --dri-ok-border:#10b981;
}

@media (prefers-color-scheme: dark){
  :root{
    --dri-bg:#0b0f16;
    --dri-fg:#e5e7eb;
    --dri-muted:#94a3b8;
    --dri-card:#121826;
    --dri-border:#273044;
    --dri-accent:#60a5fa;   /* blue-400 */
    --dri-accent-fg:#0b0f16;
    --dri-chip-bg:#1e293b;
    --dri-chip-fg:#93c5fd;
    --dri-alert-bg:#2b0f12;
    --dri-alert-fg:#fecaca;
    --dri-alert-border:#f87171;
    --dri-ok-bg:#0f231a;
    --dri-ok-fg:#a7f3d0;
    --dri-ok-border:#34d399;
  }
}

/* MOBILE FIRST */
.nfc-dieta-reversa-form{
  max-width:1100px;
  line-height:1.7;
  margin:1.25rem auto;
  padding:1.25rem;
  border:1px solid var(--dri-border);
  border-radius:16px;
  background:var(--dri-card);
  box-shadow:0 6px 28px rgba(0,0,0,.06);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--dri-fg);
  font-size:1.18rem; /* maior no mobile */
}

.nfc-dieta-reversa-form h2{
  margin:.25rem 0 1rem 0;
  font-size:2rem;
  letter-spacing:.2px;
}

.nfc-dieta-reversa-form .grid{
  display:grid;
  grid-template-columns:1fr; /* mobile: 1 coluna */
  gap:1rem;
}

.nfc-dieta-reversa-form label{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.nfc-dieta-reversa-form input,
.nfc-dieta-reversa-form select,
.nfc-dieta-reversa-form button{
  padding:1rem 1.1rem;
  border-radius:14px;
  border:1px solid var(--dri-border);
  background:var(--dri-bg);
  color:var(--dri-fg);
  font-size:1.12rem;
}

.nfc-dieta-reversa-form button{
  cursor:pointer;
  border:1px solid var(--dri-accent);
  background:var(--dri-accent);
  color:var(--dri-accent-fg);
  font-weight:700;
}

#nfc-meta,#nfc-summary{
  margin-top:1rem;
  padding:1rem;
  background:color-mix(in srgb, var(--dri-card) 92%, var(--dri-bg));
  border-radius:12px;
  border:1px dashed var(--dri-border);
}

.nfc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:1rem;
  font-size:1.08rem;
}

.nfc-table th,
.nfc-table td{
  border:1px solid var(--dri-border);
  padding:.9rem .7rem;
  text-align:center;
}

.nfc-badge{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  background:var(--dri-chip-bg);
  color:var(--dri-chip-fg);
  font-size:1rem;
  font-weight:700;
}

.nfc-small{font-size:1rem;color:var(--dri-muted)}

.nfc-search{display:flex;gap:.7rem;align-items:center}
.nfc-search input{flex:1}

.nfc-list{
  max-height:320px;
  overflow:auto;
  border:1px solid var(--dri-border);
  border-radius:12px;
  margin-top:.6rem;
  background:var(--dri-bg);
}

.nfc-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--dri-border);
  font-size:1.06rem;
}

.nfc-list-item button{
  padding:.5rem .8rem;border-radius:12px;border:1px solid var(--dri-border);background:var(--dri-card);
}

.nfc-chip{
  display:inline-block;
  padding:.3rem .6rem;
  border-radius:999px;
  background:var(--dri-chip-bg);
  color:var(--dri-chip-fg);
  font-size:.98rem;
  margin-left:.45rem;
}

.nfc-alert{
  margin-top:1rem;
  padding:1rem;
  border-left:6px solid var(--dri-alert-border);
  background:var(--dri-alert-bg);
  color:var(--dri-alert-fg);
  border-radius:12px;
}

.nfc-ok{
  margin-top:1rem;
  padding:1rem;
  border-left:6px solid var(--dri-ok-border);
  background:var(--dri-ok-bg);
  color:var(--dri-ok-fg);
  border-radius:12px;
}

/* Breakpoints para telas maiores */
@media(min-width:720px){
  .nfc-dieta-reversa-form{font-size:1.12rem}
  .nfc-dieta-reversa-form .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nfc-table{font-size:1.02rem}
}
@media(min-width:980px){
  .nfc-dieta-reversa-form .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nfc-dieta-reversa-form h2{font-size:2.1rem}
}