/* reviews.css — Reseñas con criterios (Profesionalidad, Rapidez, Precio, Trato). Las estrellas usan el
   logo (ver listings.css). Aquí se ordena el formulario por criterios y el bloque de criterios de la ficha. */

/* ---- Formulario de valoración ----
   OJO con los selectores: el contenedor de las estrellas lleva la MISMA clase `hp-field--rating`
   que el campo que lo envuelve. Aplicarles la misma regla convertía también la fila de estrellas en
   flex `space-between`, que las separaba hasta sacar la quinta fuera de la caja (de ahí el scroll
   horizontal del modal y que "Profesionalidad" pareciera tener solo cuatro).
   El CAMPO es `.hp-form__field--rating`; las ESTRELLAS son `.hp-rating-stars`. */
.hp-form--review-submit .hp-form__field--rating,
.ctop-rev-crit{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:12px 0;border-bottom:1px solid #F1F5F9;min-width:0;}
.hp-form--review-submit .hp-field__label,
.ctop-rev-crit > label{font:700 14.5px Inter,sans-serif;color:#0F172A;margin:0;}

/* Que el modal no genere scroll horizontal por culpa de las estrellas */
#review_submit_modal,#review_submit_modal .hp-form{max-width:100%;overflow-x:hidden;}
#review_submit_modal .hp-form__fields{min-width:0;}

/* ---- Estrellas más visibles y más fáciles de pulsar ----
   En gris muy claro apenas se distinguían del fondo blanco. */
/* Las cinco estrellas SIEMPRE en una fila, pegadas y sin repartirse el ancho. */
.hp-form--review-submit .hp-rating-stars,
.ctop-rev-stars{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap;
  justify-content:flex-start!important;align-items:center;gap:6px;font-size:0;width:auto!important;
  padding:0!important;border:0!important;}
/* La estrella es el ISOTIPO DE LA MARCA recortado con `mask` (igual que en las fichas y el
   listado, ver listings.css). Las de esta página son de una clase propia, así que hay que repetir
   el enmascarado aquí o saldrían como simples cuadrados de color.
   `--uv-logo` la define el tema en :root al encolar base.css. */
.hp-form--review-submit .hp-rating-stars i,
.ctop-rev-stars i{width:26px;height:26px;background:#9AA8BC;cursor:pointer;
  display:inline-block;
  -webkit-mask:var(--uv-logo) center/contain no-repeat;
          mask:var(--uv-logo) center/contain no-repeat;
  transition:background .12s,transform .12s;}
.ctop-rev-stars i::before{content:none!important;}
.hp-form--review-submit .hp-rating-stars i:hover,
.ctop-rev-stars i:hover{background:#FBBF24;transform:scale(1.12);}
.hp-form--review-submit .hp-rating-stars i.active,
.ctop-rev-stars i.active{background:#F59E0B;}

/* Bloque de criterios en la ficha/reseña */
.hp-review__criteria,.hp-review-criteria{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px;}
.hp-review__criteria .hp-review__criterion,
.hp-review-criteria > *{display:flex;align-items:center;gap:8px;font:600 13px Inter,sans-serif;color:#475569;}

/* Tarjeta de reseña un poco más aireada */
.hp-review{background:#fff;border:1px solid #E9EEF5;border-radius:14px;padding:16px 18px;box-shadow:0 3px 14px rgba(15,23,42,.04);}
.hp-review + .hp-review{margin-top:12px;}
.hp-review__author-name,.hp-review__author{font:800 14.5px Montserrat,sans-serif;color:#0F172A;}
.hp-review__date{color:#94A3B8;font:600 12.5px Inter,sans-serif;}
.hp-review__text{color:#334155;font:500 15px/1.6 Inter,sans-serif;margin-top:6px;}

/* ---- "Mis reseñas" (área de cuenta) ---- */
.ctop-rev-card{background:#fff;border:1px solid #E9EEF5;border-radius:16px;padding:20px 22px;
  box-shadow:0 4px 18px rgba(15,23,42,.05);margin-bottom:16px;}
.ctop-rev-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.ctop-rev-head a{font:800 16px Montserrat,sans-serif;color:#0F172A;text-decoration:none;}
.ctop-rev-head a:hover{color:#2563EB;}
.ctop-rev-meta{color:#94A3B8;font:600 12.5px Inter,sans-serif;}
.ctop-rev-media{display:inline-flex;align-items:center;gap:8px;background:#FFFBEB;border:1px solid #FDE68A;
  color:#92400E;border-radius:999px;padding:4px 12px;font:800 12.5px Inter,sans-serif;}
.ctop-rev-crits{margin:12px 0 4px;}
.ctop-rev-text{width:100%;border:1.5px solid #CBD5E1;border-radius:12px;padding:12px 14px;
  font:500 15px/1.6 Inter,sans-serif;color:#0F172A;min-height:110px;resize:vertical;box-sizing:border-box;}
.ctop-rev-text:focus{outline:0;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.14);}
/* Previsualización: la reseña tal cual, sin controles de formulario */
.ctop-rev-stars--ro i{cursor:default;pointer-events:none;}
.ctop-rev-crit--ro{border-bottom:0;padding:6px 0;}
.ctop-rev-crits{display:flex;flex-wrap:wrap;gap:2px 28px;}
.ctop-rev-view .ctop-rev-crits{margin-bottom:6px;}
.ctop-rev-body{color:#334155;font:500 15px/1.65 Inter,sans-serif;margin:8px 0 0;
  white-space:pre-wrap;overflow-wrap:anywhere;}

.ctop-rev-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
.ctop-rev-actions button{display:inline-flex;align-items:center;gap:8px;}
.ctop-rev-save,.ctop-rev-edit-btn{background:#2563EB;color:#fff;border:0;border-radius:999px;
  padding:11px 24px;font:800 14px Montserrat,sans-serif;cursor:pointer;}
.ctop-rev-save:hover,.ctop-rev-edit-btn:hover{background:#1E3A8A;}
.ctop-rev-save:disabled,.ctop-rev-edit-btn:disabled{opacity:.6;cursor:default;}
.ctop-rev-cancel{background:#fff;color:#475569;border:1.5px solid #CBD5E1;border-radius:999px;
  padding:10px 20px;font:800 14px Montserrat,sans-serif;cursor:pointer;}
.ctop-rev-cancel:hover{background:#F1F5F9;color:#0F172A;}
.ctop-rev-del{background:#fff;color:#B91C1C;border:1.5px solid #FECACA;border-radius:999px;
  padding:10px 20px;font:800 14px Montserrat,sans-serif;cursor:pointer;}
.ctop-rev-del:hover{background:#B91C1C;color:#fff;border-color:#B91C1C;}
.ctop-rev-msg{font:600 13.5px Inter,sans-serif;}
.ctop-rev-msg.is-ok{color:#15803D;} .ctop-rev-msg.is-err{color:#DC2626;}
.ctop-rev-empty{color:#64748B;font:500 15px/1.6 Inter,sans-serif;}

/* Respuesta del profesional a una reseña.
   El add-on envuelve la respuesta en .hp-review__reply y la coloca justo detrás de su reseña, pero
   sin estilo se lee como una reseña más: hay que verse que es la voz del negocio, no de otro cliente. */
.hp-review__reply{margin:-6px 0 18px 0;padding:16px 18px 16px 20px;
  background:#F8FAFC;border-left:3px solid #2563EB;border-radius:0 12px 12px 0;}
.hp-review__reply::before{content:"\f3e5  Respuesta del profesional";font-family:"Font Awesome 5 Free",Montserrat,sans-serif;
  font-weight:900;display:block;margin-bottom:8px;font-size:12.5px;color:#2563EB;letter-spacing:.2px;}
/* La respuesta no puntúa: las estrellas del bloque sobran y confundirían la media. */
.hp-review__reply .hp-rating,
.hp-review__reply .hp-rating-stars{display:none!important;}

@media (max-width:767px){
  .ctop-rev-card{padding:16px;}
  .ctop-rev-actions{flex-direction:column;align-items:stretch;}
  .ctop-rev-actions button{width:100%;}
  .hp-review__reply{margin-left:0;padding:14px 14px 14px 16px;}
}

/* Sección de valoraciones cuando todavía no hay ninguna 
includes/reviews/review-rating.php).
   Existe para que la sección se renderice: sin contenido, HivePress la descarta entera y el enlace
   «Valoraciones» de la ficha se quedaba sin destino, llevando a «Profesionales relacionados». */
.ctop-sin-resenas{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 22px; border:1px dashed #CBD5E1; border-radius:14px; background:#F8FAFC;
}
.ctop-sin-resenas > i{ color:#F59E0B; font-size:20px; margin-top:2px; flex:0 0 auto; }
.ctop-sin-resenas p{ margin:0; font:500 14.5px/1.6 Inter,sans-serif; color:#475569; }
.ctop-sin-resenas strong{ color:#0F172A; }