/* styles.css — Estilos específicos del módulo Alimentos */
/* Hereda todo de ../css/styles-global.css               */

:root {
  --entity-color:    #27ae60;
  --entity-bg:       #e8f8ef;
  --macro-p-color:   #3b82f6;   /* Proteínas  — azul   */
  --macro-c-color:   #f59e0b;   /* Carbohidratos — ámbar */
  --macro-g-color:   #ef4444;   /* Grasas     — rojo   */
  --semaforo-verde:  #16a34a;
  --semaforo-amar:   #d97706;
  --semaforo-rojo:   #dc2626;
}

/* ── Color de módulo en botón primario ──────────────────── */
.ni-btn--primary {
  background:   var(--entity-color);
  border-color: var(--entity-color);
}
.ni-btn--primary:hover,
.ni-btn--primary:focus-visible {
  background:   #219150;
  border-color: #219150;
}

/* ── Filas inactivas ────────────────────────────────────── */
.ni-table tbody tr:has(td .ni-badge--inactivo) {
  opacity: .72;
}

/* ── Columnas numéricas ─────────────────────────────────── */
.ni-table th,
.ni-table td {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   BADGE SEMÁFORO NUTRICIONAL
   ══════════════════════════════════════════════════════════ */
.ni-semaforo {
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  padding:         .2rem .55rem;
  border-radius:   99px;
  font-size:       .75rem;
  font-weight:     700;
  letter-spacing:  .02em;
  text-transform:  capitalize;
}

.ni-semaforo .fas {
  font-size: .55rem;
}

.ni-semaforo--verde {
  background: #dcfce7;
  color:      var(--semaforo-verde);
}

.ni-semaforo--amarillo {
  background: #fef3c7;
  color:      var(--semaforo-amar);
}

.ni-semaforo--rojo {
  background: #fee2e2;
  color:      var(--semaforo-rojo);
}

/* ══════════════════════════════════════════════════════════
   MINI-CARD DE MACROS (vista detalle)
   ══════════════════════════════════════════════════════════ */
.ni-macros-card {
  background:    var(--ni-surface, #fff);
  border:        1px solid var(--ni-border, #e2e8f0);
  border-radius: .75rem;
  padding:       1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow:    0 1px 4px rgba(0,0,0,.06);
}

.ni-macros-header {
  display:        flex;
  align-items:    center;
  gap:            .75rem;
  flex-wrap:      wrap;
  margin-bottom:  .75rem;
}

.ni-macros-title {
  font-weight: 700;
  font-size:   1rem;
  flex:        1;
  color:       var(--ni-text, #1e293b);
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}

.ni-macros-kcal {
  font-size:  .85rem;
  color:      var(--ni-text-muted, #64748b);
  white-space: nowrap;
}

.ni-macros-kcal strong {
  font-size:   1.1rem;
  color:       var(--ni-text, #1e293b);
}

/* Barra apilada de macronutrientes */
.ni-macros-bar {
  display:       flex;
  height:        10px;
  border-radius: 99px;
  overflow:      hidden;
  background:    var(--ni-border, #e2e8f0);
  margin-bottom: .6rem;
}

.ni-macros-bar__segment {
  height:     100%;
  transition: width .4s ease;
  min-width:  0;
}

.ni-macros-bar__p { background: var(--macro-p-color); }
.ni-macros-bar__c { background: var(--macro-c-color); }
.ni-macros-bar__g { background: var(--macro-g-color); }

/* Leyenda de macros */
.ni-macros-legend {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color:     var(--ni-text-muted, #64748b);
}

.ni-macros-legend span {
  display:     flex;
  align-items: center;
  gap:         .3rem;
}

.ni-macros-legend strong {
  color: var(--ni-text, #1e293b);
}

.ni-macros-dot {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

.ni-macros-dot--p { background: var(--macro-p-color); }
.ni-macros-dot--c { background: var(--macro-c-color); }
.ni-macros-dot--g { background: var(--macro-g-color); }