/* =========================================================
   QueComo - Tabla Información Nutricional
   Estilo “Manual / Etiqueta” (líneas grises, banda título)
   ========================================================= */

.qc-nutrition {
  margin-top: 14px;

  --qc-nutrition-base-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --qc-nutrition-base-font-size: 12px;
  --qc-nutrition-base-color: #222;

  --qc-nutrition-title-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-title-font-size: 13px;
  --qc-nutrition-title-color: #222;

  --qc-nutrition-meta-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-meta-font-size: 12px;
  --qc-nutrition-meta-color: #555;

  --qc-nutrition-header-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-header-font-size: 12px;
  --qc-nutrition-header-color: #222;

  --qc-nutrition-row-label-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-row-label-font-size: 12px;
  --qc-nutrition-row-label-color: #222;

  --qc-nutrition-row-label-sub-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-row-label-sub-font-size: 12px;
  --qc-nutrition-row-label-sub-color: #333;

  --qc-nutrition-value-font-family: var(--qc-nutrition-base-font-family);
  --qc-nutrition-value-font-size: 12px;
  --qc-nutrition-value-color: #6d6d6d;
}

/* Caja general */
.qc-nutrition__box{
  border: 2px solid #8d8d8d;     /* gris etiqueta */
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  color: var(--qc-nutrition-base-color);
  font-family: var(--qc-nutrition-base-font-family);
  font-size: var(--qc-nutrition-base-font-size);
}

/* Bloque superior */
.qc-nutrition__top{
  border-bottom: 2px solid #8d8d8d;
}

/* Título: banda gris suave, mayúsculas */
.qc-nutrition__title{
  padding: 8px 10px;
  font-family: var(--qc-nutrition-title-font-family);
  font-size: var(--qc-nutrition-title-font-size);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: #efefef;           /* banda superior */
  line-height: 1.1;
  color: var(--qc-nutrition-title-color);
}

/* Meta: Porción / Porciones */
.qc-nutrition__meta{
  padding: 8px 10px 10px;
  font-family: var(--qc-nutrition-meta-font-family);
  font-size: var(--qc-nutrition-meta-font-size);
  color: var(--qc-nutrition-meta-color);
}
.qc-nutrition__metaRow{
  line-height: 1.35;
}

/* Tabla wrapper */
.qc-nutrition__tableWrap{
  overflow: visible;             /* ya no scroll */
}

/* Tabla */
.qc-nutrition__table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;           /* evita overflow */
}

/* Celdas */
.qc-nutrition__table th,
.qc-nutrition__table td{
  padding: 9px 10px;             /* altura tipo etiqueta */
  font-family: var(--qc-nutrition-base-font-family);
  font-size: var(--qc-nutrition-base-font-size);
  line-height: 1.2;
  border-bottom: 1px solid #b9b9b9;
  border-right: 1px solid #b9b9b9;
  vertical-align: middle;
}

/* Última columna sin borde derecho */
.qc-nutrition__table tr > *:last-child{ border-right: none; }

/* Última fila sin borde inferior */
.qc-nutrition__table tbody tr:last-child > *{ border-bottom: none; }

/* Cabecera columnas */
.qc-nutrition__table thead th{
  background: #f4f4f4;
  font-weight: 700;
  font-family: var(--qc-nutrition-header-font-family);
  font-size: var(--qc-nutrition-header-font-size);
  color: var(--qc-nutrition-header-color);
  text-align: center;
  padding: 10px 10px;
}

/* Primera celda de thead “vacía” igual con fondo */
.qc-nutrition__thNutriente{
  width: 64%;
  background: #f4f4f4;
}

/* Columnas de valores */
.qc-nutrition__thVal{
  width: 18%;
  text-align: center;
}

/* Etiqueta del nutriente */
.qc-nutrition__rowLabel{
  font-weight: 700;              /* manual: label más fuerte */
  font-family: var(--qc-nutrition-row-label-font-family);
  font-size: var(--qc-nutrition-row-label-font-size);
  color: var(--qc-nutrition-row-label-color);
  text-align: left;
}

/* Subfilas (desglose grasas / azúcares) */
.qc-nutrition__rowLabel--sub{
  font-weight: 600;
  padding-left: 18px;
  font-family: var(--qc-nutrition-row-label-sub-font-family);
  font-size: var(--qc-nutrition-row-label-sub-font-size);
  color: var(--qc-nutrition-row-label-sub-color);
}

/* Valores numéricos */
.qc-nutrition__cellVal{
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--qc-nutrition-value-font-family);
  font-size: var(--qc-nutrition-value-font-size);
  color: var(--qc-nutrition-value-color);                /* gris números como etiqueta */
}

/* Ajustes: evitar que “(4 G)” parta feo */
.qc-nutrition__table thead th{
  word-break: keep-all;
}
.qc-nutrition__table thead th br{ display: none; }

/* Responsive suave (desktop/tablet) */
@media (max-width: 980px){
  .qc-nutrition__thNutriente{ width: 60%; }
  .qc-nutrition__thVal{ width: 20%; }
}

/* Mobile: un poco más compacto */
@media (max-width: 768px){
  .qc-nutrition__title{ font-size: var(--qc-nutrition-title-font-size); padding: 8px 10px; }
  .qc-nutrition__meta{ font-size: var(--qc-nutrition-meta-font-size); }
  .qc-nutrition__table th,
  .qc-nutrition__table td{ padding: 8px 9px; font-size: var(--qc-nutrition-base-font-size); }
}