/* ===============================
   TOKENS CORPORATIVOS
=============================== */
:root {
  --nutri-primary: #0b3557;
  --nutri-secondary: #007b9e;
  --nutri-star: #f5b301;
  --nutri-border: #e5e9f2;
}
/* ===============================
   TÍTULO DE VALORACIONES
=============================== */
.nutri-reviews__title {
  font-size: 2rem;
  color: var(--nutri-primary);
  font-weight: 800;
  text-align: center;
  margin: 32px 0 18px;
  position: relative;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.nutri-reviews__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--nutri-secondary);
  margin: 10px auto 0;
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.nutri-reviews__title:hover::after { width: 90px; }
@media (max-width: 768px) {
  .nutri-reviews__title { font-size: 1.7rem; margin: 26px 0 14px; }
  .nutri-reviews__title::after { width: 45px; height: 2.5px; }
}

/* ===============================
   BLOQUE PRINCIPAL
=============================== */
.nutri-stars-inline--title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nutri-stars-inline--title .stars { color: var(--nutri-star); font-size: 1.2rem; line-height: 1; }
.nutri-stars-inline--title .count { color: var(--nutri-primary); font-weight: 600; font-size: 0.95rem; }
.nutri-reviews-link { color: var(--nutri-secondary); text-decoration: none; font-weight: 600; }
.nutri-reviews-link:hover { text-decoration: underline; }

/* ===============================
   DISTRIBUCIÓN Y ESTADÍSTICAS
=============================== */
.nutri-reviews__score { display: grid; gap: 6px; align-items: center; }
.nutri-reviews__avg { font-size: 3rem; line-height: 1; color: var(--nutri-primary); font-weight: 700; }
.nutri-reviews__stars .star { width: 22px; height: 22px; margin-right: 2px; color: var(--nutri-star); }
.nutri-reviews__based { color: var(--nutri-primary); }
.nutri-reviews__dist { display: grid; gap: 10px; }
.nutri-reviews__dist-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--nutri-primary); }
.nutri-reviews__dist-row .label .small { width: 14px; height: 14px; color: var(--nutri-star); }
.nutri-reviews__dist-row .bar { display: block; height: 8px; background: #eef3f7; border-radius: 9999px; overflow: hidden; }
.nutri-reviews__dist-row .bar > span { display: block; height: 100%; background: var(--nutri-primary); border-radius: 9999px; }

/* ===============================
   FILTROS Y SELECTORES QA
=============================== */
.nutri-filters-wrap { display: none; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.filter-chip { background: rgba(11, 53, 87, 0.06); border: 1px solid rgba(11, 53, 87, 0.15); color: var(--nutri-primary); font-size: 0.85rem; font-weight: 600; border-radius: 9999px; padding: 3px 8px 3px 10px; display: inline-flex; align-items: center; gap: 6px; }
.filter-chip .close { background: none; border: none; color: #0b3557; cursor: pointer; font-size: 0.9rem; font-weight: bold; line-height: 1; padding: 0; }
.filter-chip .close:hover { opacity: 0.7; transform: scale(1.1); }
.nutri-qa-filters { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 24px; width: 100%; box-sizing: border-box; }
.qa-filter { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; min-width: 140px; max-width: 100%; }
.qa-filter label { font-size: 0.9rem; font-weight: 600; color: var(--nutri-primary); margin-bottom: 2px; }
.qa-filter select { border: 1px solid var(--nutri-border); border-radius: 9999px; background: #fff; color: var(--nutri-primary); padding: 8px 12px; font-size: 0.9rem; cursor: pointer; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.qa-filter select:focus { outline: none; border-color: var(--nutri-secondary); box-shadow: 0 0 0 2px rgba(0,123,158,0.15); }
.nutri-qa-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 20px; width: 100%; }
@media (max-width: 800px) {
  .nutri-qa-filters { flex-direction: column; gap: 10px; }
  .qa-filter { flex: 1 1 100%; min-width: auto; }
}

/* ===============================
   TARJETAS DE RESEÑAS
=============================== */
.nutri-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin: 28px 0 16px; }
.nutri-review-card { background: #fff; border: 1px solid var(--nutri-border); border-radius: 14px; box-shadow: 0 6px 16px rgba(11, 53, 87, 0.08); padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.nutri-review-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 53, 87, 0.15); }
.nutri-review-card__head { margin-bottom: 10px; }
.nutri-review-card__head .title { font-size: 1.15rem; color: var(--nutri-primary); font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.nutri-review-card__head .stars { display: flex; gap: 2px; margin-bottom: 8px; }
.nutri-review-card__head .stars .star { width: 18px; height: 18px; color: var(--nutri-star); }
.nutri-review-card__head .meta { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 500; color: #506073; margin-top: 2px; }
.nutri-review-card__head .meta .sep { width: 4px; height: 4px; background-color: #a1b1c0; border-radius: 50%; display: inline-block; opacity: 0.7; }
.nutri-review-card__head .author { color: var(--nutri-primary); font-weight: 600; }
.nutri-review-card__head time { color: #6b7a8a; font-size: 0.88rem; }

/* ===== Cuerpo ===== */
.nutri-review-card__body .comment { margin: 10px 0 6px; color: var(--nutri-primary); font-size: 0.95rem; line-height: 1.55; }
.nutri-review-card__body .qa { margin: 10px 0 0 16px; color: var(--nutri-primary); font-size: 0.9rem; }
.nutri-review-card__body .qa li { margin: 3px 0; }
.nutri-review-card__body .qa strong { font-weight: 600; color: var(--nutri-primary); }

/* ===============================
   FORMULARIO DE RESEÑA
=============================== */
.nutri-review-form { margin-top: 32px; border-top: 1px solid var(--nutri-border); padding-top: 28px; display: flex; flex-direction: column; }
.nutri-review-form__title { font-size: 1.4rem; font-weight: 700; color: var(--nutri-primary); margin-bottom: 10px; }
.nutri-review-form label { display: block; color: var(--nutri-primary); font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.nutri-review-form input[type="text"], .nutri-review-form select, .nutri-review-form textarea { width: 100%; border: 1px solid #d9e2ec; border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; color: var(--nutri-primary); background: #f9fbfc; transition: all 0.25s ease; }
.nutri-review-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill='%230b3557' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'%3E<path d='M7 10l5 5 5-5z'/%3E</svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.nutri-review-form input:focus, .nutri-review-form select:focus, .nutri-review-form textarea:focus { outline: none; border-color: var(--nutri-secondary); background: #fff; box-shadow: 0 0 0 2px rgba(0, 123, 158, 0.15); }
.nutri-review-form textarea { min-height: 120px; resize: vertical; }
.nutri-rating-field { margin-bottom: 8px; }
.nutri-stars-input { display: inline-flex; gap: 10px; font-size: 2.2rem; color: #d9e2ec; cursor: pointer; margin-top: 6px; }
.nutri-star { transition: transform 0.2s ease, color 0.25s ease; transform-origin: center; }
.nutri-star:hover, .nutri-star:hover ~ .nutri-star { color: #d9e2ec !important; }
.nutri-stars-input:hover .nutri-star { color: var(--nutri-star); }
.nutri-stars-input .nutri-star.active { color: var(--nutri-star) !important; transform: scale(1.15); }

/* Botón */
.nutri-btn { background: var(--nutri-primary); color: #fff; border: none; border-radius: 9999px; padding: 12px 26px; font-weight: 600; font-size: 1rem; cursor: pointer; align-self: flex-start; box-shadow: 0 8px 18px rgba(11, 53, 87, 0.18); transition: transform 0.1s ease, filter 0.25s ease; }
.nutri-btn:hover { transform: translateY(-1px); filter: brightness(0.96); }
.nutri-terms label { display: flex; align-items: center; gap: 8px; color: var(--nutri-primary); font-size: 0.9rem; font-weight: 500; }
.nutri-terms a { color: var(--nutri-secondary); text-decoration: underline; font-weight: 600; }

/* ===============================
   RESPONSIVE
=============================== */
@media (min-width: 1400px) { .nutri-reviews__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) and (max-width: 1399px) { .nutri-reviews__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .nutri-stars-input { font-size: 2rem; gap: 8px; } .nutri-review-form { gap: 18px; } }

.nutri-form-message { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; display: inline-block; animation: fadeIn .3s ease; }
.nutri-form-message.success { background: rgba(0,123,158,0.08); color: var(--nutri-primary); border: 1px solid rgba(0,123,158,0.25); }
.nutri-form-message.error { background: rgba(255,0,0,0.08); color: #a40000; border: 1px solid rgba(255,0,0,0.15); }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* ===============================
   PAGINACIÓN DE RESEÑAS
=============================== */
.nutri-reviews-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 28px 0 0; }
.nutri-reviews-page-btn { background: #0b3557; color: #fff; border: none; border-radius: 9999px; padding: 8px 18px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.25s ease, transform 0.15s ease; }
.nutri-reviews-page-btn:hover:not(:disabled) { background: #154a7c; transform: translateY(-1px); }
.nutri-reviews-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nutri-reviews-page-indicator { color: #0b3557; font-weight: 600; font-size: 0.95rem; }

/* ====== Ver más / Ver menos ====== */
.nutri-reviews .nutri-review-card .comment { position: relative; color: #0b3557; font-size: 0.95rem; line-height: 1.55; }
.nutri-reviews .nutri-review-card .nutri-comment-toggle { background: transparent; border: 1px solid #0b3557; color: #0b3557; border-radius: 9999px; padding: 4px 10px; font-weight: 700; font-size: 0.85rem; margin-left: 8px; cursor: pointer; transition: all .2s ease; }
.nutri-reviews .nutri-review-card .nutri-comment-toggle:hover, .nutri-reviews .nutri-review-card .nutri-comment-toggle:focus { background: #0b3557; color: #fff; outline: none; box-shadow: 0 4px 10px rgba(11,53,87,0.15); }
.nutri-review-form .nutri-form-message { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; display: inline-block; animation: nutri-fadeIn .3s ease; }
.nutri-review-form .nutri-form-message.success { background: rgba(0,123,158,0.08); color: #0b3557; border: 1px solid rgba(0,123,158,0.25); }
.nutri-review-form .nutri-form-message.error { background: rgba(255,0,0,0.08); color: #a40000; border: 1px solid rgba(255,0,0,0.15); }
@keyframes nutri-fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* ==========================================================
   Estrellas + fecha en la misma línea (si la usas)
========================================================== */
.nutri-reviews .nutri-review-card__head .row-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 8px; }
.nutri-reviews .nutri-review-card__head .row-top .stars{ display:flex; gap:2px; margin:0; color:var(--nutri-star); }
.nutri-reviews .nutri-review-card__head .row-top .stars .star{ width:18px; height:18px; }
.nutri-reviews .nutri-review-card__head .row-top .date{ margin-left:auto; color:#6b7a8a; font-size:.9rem; white-space:nowrap; }

/* ===============================
   CTA/Toggle (Opción C)
=============================== */
.nutri-thankyou-toggle{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:rgba(11,53,87,0.05); border:1px solid rgba(11,53,87,0.12); border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); margin:16px 0; }
.nutri-thankyou-text{ color:#0b3557; font-weight:600; }
.nutri-review-edit-toggle{}
.nutri-toggle-btn{ appearance:none; border:0; background:#0b3557; color:#fff; padding:10px 16px; font-weight:700; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:transform .06s ease, box-shadow .2s ease, background .2s ease; }
.nutri-toggle-btn:hover{ background:#007b9e; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.nutri-toggle-btn:active{ transform:translateY(1px); }
.nutri-toggle-btn:focus{ outline:2px solid #007b9e; outline-offset:2px; }
.nutri-toggle-btn .arrow{ display:inline-block; transition:transform .2s ease; }
.nutri-toggle-btn[aria-expanded="true"] .arrow{ transform:rotate(180deg); }
.nutri-review-form-wrap .nutri-form-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nutri-review-form-wrap .nutri-btn--ghost{ background:transparent; border:1px solid rgba(11,53,87,0.25); color:#0b3557; border-radius:999px; padding:8px 12px; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.nutri-review-form-wrap .nutri-btn--ghost:hover{ background:rgba(11,53,87,0.06); border-color:#0b3557; }
.nutri-review-form-wrap .nutri-form-message.success{ color:#0b3557; }
.nutri-review-form-wrap .nutri-form-message.error{ color:#b00020; }
.nutri-review-form-wrap .nutri-form-message.info{ color:#0b3557; opacity:.9; }

/* ===============================
   Paginación (manteniendo tu estilo)
=============================== */
.nutri-reviews-pagination{ display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 8px; }
.nutri-reviews-page-btn{ appearance:none; border:0; border-radius:999px; padding:10px 16px; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; color:#fff; background:#0b3557; }
.nutri-reviews-page-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,0.12); }
.nutri-reviews-page-btn:active{ transform:translateY(1px); }
.nutri-reviews-page-btn:focus{ outline:2px solid #007b9e; outline-offset:2px; }
.nutri-reviews-page-btn.is-prev::before{ content:"\2190\00A0"; font-weight:700; }
.nutri-reviews-page-btn.is-next::after{ content:"\00A0\2192"; font-weight:700; }
.nutri-reviews-page-btn:disabled{ background:#b8c4cf; color:#ffffff; cursor:not-allowed; box-shadow:none; opacity:1; }
.nutri-reviews-page-indicator{ font-weight:700; color:#0b3557; }

/* ===============================
   Loader inline y mensaje global
=============================== */
.nutri-inline-loader{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:#ffffff; border:1px solid var(--nutri-border); border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); color:var(--nutri-primary); font-weight:700; }
.nutri-inline-loader .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(11,53,87,0.25); border-top-color: var(--nutri-secondary); display:inline-block; animation: nutri-spin .8s linear infinite; }
.nutri-inline-loader .txt{ font-size:.95rem; }
@keyframes nutri-spin{ to { transform: rotate(360deg); } }

.nutri-global-msg{ margin:14px 0; }