/* HC Valoraciones — página pública, formulario de valorar y sello.
   Hereda la paleta del theme vía variables CSS de HCTheme (--hc-*) con
   valores de reserva para el theme default / otros themes. */

.hc-val {
  --hcv-primary: var(--hc-primary, #1b5fd9);
  --hcv-text: var(--hc-text, #222);
  --hcv-text-soft: var(--hc-text-soft, #444);
  --hcv-text-faint: var(--hc-text-faint, #999);
  --hcv-border: var(--hc-border, #eee);
  --hcv-surface: var(--hc-surface, #fff);
  --hcv-surface-2: var(--hc-surface-2, #f7f9fc);
  --hcv-radius: var(--hc-radius-card, var(--hc-radius, 12px));
  --hcv-radius-btn: var(--hc-radius-btn, 6px);
  --hcv-star: #f5a623;
  --hcv-star-soft: #fbc65f;
  --hcv-ok: #1b9e57;
  --hcv-warn: #d9822b;
  color: var(--hcv-text);
}

/* Bootstrap 3 fija .container a 750/970/1170px; HCTheme solo pone
   max-width, así que sin esto la página queda más estrecha que el theme. */
.container.hc-val { width: 100%; max-width: var(--hc-maxw, 1170px); }

/* ===== Cabecera ===== */
.hc-val-hero { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; background: var(--hcv-surface); border: 1px solid var(--hcv-border); border-radius: var(--hcv-radius); padding: 32px; margin-bottom: 24px; }
.hc-val-hero-left { flex: 1 1 320px; }
.hc-val-hero-right { flex: 1 1 280px; }
.hc-val-store { font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: var(--hcv-text-faint); }
.hc-val-verified { display: inline-block; margin: 6px 0 10px; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--hcv-ok); }
.hc-val-heading { margin: 0 0 12px; font-size: 26px; }
.hc-val-score { display: flex; align-items: center; gap: 14px; }
.hc-val-avg { font-size: 44px; font-weight: bold; line-height: 1; }
.hc-val-stars { position: relative; display: inline-block; font-size: 26px; line-height: 1; color: var(--hcv-border); white-space: nowrap; }
.hc-val-stars-bg { color: #e0e0e0; }
.hc-val-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--hcv-star); white-space: nowrap; }
.hc-val-how { margin-top: 10px; font-size: 12px; color: var(--hcv-text-faint); text-decoration: underline dotted; cursor: help; display: inline-block; }

/* Barras de distribución */
.hc-val-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; text-decoration: none; color: inherit; }
.hc-val-bar-row:hover .hc-val-bar-fill, .hc-val-bar-row[data-active="1"] .hc-val-bar-fill { background: var(--hcv-star); }
.hc-val-bar-row[data-active="1"] { font-weight: bold; }
.hc-val-bar-stars { width: 44px; font-size: 13px; color: var(--hcv-text-soft); white-space: nowrap; }
.hc-val-bar { flex: 1; height: 10px; background: var(--hcv-surface-2); border-radius: 5px; overflow: hidden; }
.hc-val-bar-fill { display: block; height: 100%; background: var(--hcv-star-soft); border-radius: 5px; transition: background .15s; }
.hc-val-bar-pct { width: 40px; font-size: 13px; color: var(--hcv-text-soft); text-align: right; }

/* ===== Destacadas ===== */
.hc-val-featured { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.hc-val-featured-card { flex: 1 1 300px; background: var(--hcv-surface); border: 1px solid var(--hcv-border); border-radius: var(--hcv-radius); padding: 20px; }
.hc-val-featured-best { border-top: 3px solid var(--hcv-ok); }
.hc-val-featured-worst { border-top: 3px solid var(--hcv-warn); }
.hc-val-featured-label { font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--hcv-text-faint); margin-bottom: 10px; }

/* ===== Tarjetas de valoración ===== */
.hc-val-list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.hc-val-list-head h2 { font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--hcv-text-soft); margin: 0; }
.hc-val-clear-filter { font-size: 13px; color: var(--hcv-primary); }
.hc-val-card { background: var(--hcv-surface); border: 1px solid var(--hcv-border); border-radius: var(--hcv-radius); padding: 20px; margin-bottom: 14px; }
.hc-val-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.hc-val-review-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; color: #e0e0e0; white-space: nowrap; }
.hc-val-review-stars > span { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--hcv-star); white-space: nowrap; width: var(--rating, 0%); }
.hc-val-review-stars::before { content: "\2605\2605\2605\2605\2605"; }
.hc-val-review-meta { font-size: 13px; color: var(--hcv-text-faint); }
.hc-val-check { color: var(--hcv-ok); font-weight: bold; }
.hc-val-review-title { font-weight: bold; margin-bottom: 4px; }
.hc-val-review-text { font-size: 14px; color: var(--hcv-text-soft); line-height: 1.55; }
.hc-val-reply { margin-top: 12px; padding: 12px 14px; background: var(--hcv-surface-2); border-left: 3px solid var(--hcv-primary); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--hcv-text-soft); }
.hc-val-reply-from { font-weight: bold; color: var(--hcv-primary); margin-bottom: 4px; }
.hc-val-empty { color: var(--hcv-text-faint); padding: 24px 0; }
.hc-val-pagination { margin: 18px 0; }

/* ===== Formulario de valorar ===== */
.hc-val-rate-box { max-width: 640px; margin: 24px auto 48px; background: var(--hcv-surface); border: 1px solid var(--hcv-border); border-radius: var(--hcv-radius); padding: 32px; }
.hc-val-rate-box h1 { margin-top: 0; font-size: 24px; }
.hc-val-rate-intro { color: var(--hcv-text-soft); }
.hc-val-rate-order { color: var(--hcv-text-faint); font-size: 13px; }
.hc-val-form-group { margin-bottom: 16px; }
.hc-val-form-group > label { display: block; font-weight: bold; margin-bottom: 6px; }
.hc-val-req { color: #d9534f; }
.hc-val .hc-val-btn { display: inline-block; padding: 12px 32px; background: var(--hcv-primary); border: 1px solid var(--hcv-primary); color: #fff; font-weight: bold; border-radius: var(--hcv-radius-btn); text-decoration: none; cursor: pointer; }
.hc-val .hc-val-btn:hover { filter: brightness(1.08); color: #fff; }

/* Estrellas clicables (DOM 5→1 + row-reverse: el hover rellena desde la izquierda) */
.hc-val-star-input { display: inline-flex; flex-direction: row-reverse; font-size: 36px; line-height: 1; }
.hc-val-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.hc-val-star-input label { color: #e0e0e0; cursor: pointer; padding: 0 3px; transition: color .1s; }
.hc-val-star-input label:hover,
.hc-val-star-input label:hover ~ label,
.hc-val-star-input input:checked ~ label { color: var(--hcv-star); }
.hc-val-star-hint { min-height: 20px; font-size: 13px; color: var(--hcv-text-faint); margin-top: 4px; }

/* Fase 2: valoraciones por producto */
.hc-val-products { margin: 24px 0 20px; border-top: 1px solid var(--hcv-border); padding-top: 18px; }
.hc-val-products-head { margin-bottom: 12px; }
.hc-val-products-head strong { display: block; font-size: 15px; }
.hc-val-products-head span { font-size: 13px; color: var(--hcv-text-faint); }
.hc-val-product { padding: 10px 0; border-bottom: 1px dashed var(--hcv-border); }
.hc-val-product:last-child { border-bottom: 0; }
.hc-val-product-top { display: flex; align-items: center; gap: 10px; }
.hc-val-product-top img { border-radius: 6px; flex: 0 0 auto; }
.hc-val-product-name { flex: 1; font-size: 14px; }
.hc-val-star-input--sm { font-size: 24px; }
.hc-val-star-input--sm label { padding: 0 1px; }
.hc-val-product-comment { display: none; margin-top: 8px; }
.hc-val-product-comment--open { display: block; }

/* Pantalla de gracias */
.hc-val-rate-done { text-align: center; }
.hc-val-rate-check { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--hcv-ok); color: #fff; font-size: 34px; line-height: 64px; }

/* ===== Sello para el theme (snippet) ===== */
.hc-val-badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.hc-val-badge:hover { text-decoration: none; }
.hc-val-badge .hc-val-stars { font-size: 18px; }
.hc-val-badge-text { font-size: 13px; line-height: 1.3; }
.hc-val-badge-text strong { display: block; font-size: 14px; }

@media (max-width: 640px) {
  .hc-val-hero { padding: 20px; gap: 20px; }
  .hc-val-avg { font-size: 34px; }
  .hc-val-heading { font-size: 20px; }
}