/* ==========================================================================
   Reseñas de pacientes: estrellas, resumen de la puntuación, opiniones, la
   página del paciente (/resena/{token}), el panel del consultorio y el
   back-office. Se carga solo en las vistas que las muestran (layout.php).
   ========================================================================== */

:root {
  --estrella: #e8a317;
  --estrella-vacia: #e4e2df;
}

/* ---------- Estrellas (Services/Resenas/Estrellas.php) ---------- */
.estrellas { position: relative; display: inline-flex; flex: none; vertical-align: -.2em; line-height: 0; }
.estrellas__base, .estrellas__llenas { display: inline-flex; gap: .0625rem; white-space: nowrap; }
.estrellas__base { color: var(--estrella-vacia); }
.estrellas__llenas { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--estrella); }
.estrellas svg { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.estrellas--mini svg { width: .875rem; height: .875rem; }
.estrellas--grande svg { width: 1.5rem; height: 1.5rem; }
.estrella-sola { flex: none; width: .8125rem; height: .8125rem; fill: var(--estrella); vertical-align: -.1em; }

/* ---------- Resumen: promedio y barras por estrellas ---------- */
.opiniones-resumen { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; align-items: center; margin-bottom: 1.25rem; }
.opiniones-resumen__nota { display: grid; justify-items: start; gap: .375rem; }
.opiniones-resumen__nota > strong { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--texto); }
.opiniones-resumen__nota > span:last-child { font-size: .8125rem; color: var(--texto-suave); }
.opiniones-barras { display: grid; gap: .3125rem; margin: 0; max-width: 26rem; }
.opiniones-barras__fila { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: .5rem; }
.opiniones-barras dt { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--texto-suave); }
.opiniones-barras dd { display: grid; grid-template-columns: 1fr 2rem; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--texto-suave); text-align: right; }
.opiniones-barras__barra { position: relative; display: block; height: .5rem; overflow: hidden; border-radius: 999px; background: var(--borde-suave); }
.opiniones-barras__barra > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--estrella); }
@media (max-width: 560px) {
  .opiniones-resumen { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Una opinión ---------- */
.opiniones-lista { list-style: none; display: grid; gap: 0; margin: 0 0 1rem; padding: 0; }
.opinion { padding: 1rem 0; border-top: 1px solid var(--borde-suave); }
.opiniones-lista > .opinion:first-child { border-top: 0; padding-top: .25rem; }
.opinion__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.opinion__etiqueta { font-size: .8125rem; font-weight: 600; color: var(--texto-medio); }
.opinion__fecha { margin-left: auto; font-size: .8125rem; }
.opinion__texto { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--texto); overflow-wrap: anywhere; }
.opinion__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: .625rem 0 0; font-size: .8125rem; color: var(--texto-suave); }
.opinion__pie strong { color: var(--texto-medio); }
.opinion__pie a { display: inline-flex; align-items: center; gap: .25rem; }
.opinion__pie .icono { width: .875rem; height: .875rem; }
.opinion__verificada { display: inline-flex; align-items: center; gap: .25rem; color: var(--confirmado); font-weight: 600; }
.opinion__verificada .icono { width: .875rem; height: .875rem; }
.opinion__moderacion { margin: .75rem 0 0; padding: .625rem .75rem; border-radius: var(--radius); background: color-mix(in srgb, var(--peligro) 6%, var(--superficie)); color: var(--peligro); font-size: .8125rem; }
.opinion__eliminar { margin-top: .75rem; }
.opinion__eliminar summary { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--peligro); cursor: pointer; }
.opinion__eliminar summary .icono { width: .9375rem; height: .9375rem; }
.opinion__eliminar form { margin-top: .625rem; max-width: 36rem; }
.opinion--eliminada .opinion__texto { color: var(--texto-suave); }

/* En el panel y el back-office cada opinión es una tarjeta. */
.opiniones-lista--panel { gap: .75rem; }
.opiniones-lista--panel > .opinion,
.opiniones-lista--panel > .opinion:first-child { padding: 1rem 1.25rem; border: 1px solid var(--borde-suave); border-radius: var(--radius-lg); background: var(--superficie); }

.opiniones-nota { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--texto-suave); }
.opiniones-nota .icono { flex: none; width: 1rem; height: 1rem; margin-top: .125rem; color: var(--confirmado); }

/* ---------- Directorio: tarjeta, cabecera del perfil y página de opiniones ---------- */
.dir-tarjeta__opiniones { display: flex; flex-wrap: wrap; align-items: center; gap: .3125rem; margin: .25rem 0 0; font-size: .8125rem; color: var(--texto-suave); }
.dir-tarjeta__opiniones strong { color: var(--texto); }
.perfil-pub__puntuacion { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .125rem 0 .625rem; color: var(--texto-suave); font-size: .875rem; text-decoration: none; }
.perfil-pub__puntuacion strong { color: var(--texto); font-size: 1rem; }
.perfil-pub__puntuacion:hover span:last-child { text-decoration: underline; }
.opiniones-pagina { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.opiniones-pagina__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.opiniones-pagina__cabecera > div { flex: 1; min-width: 12rem; }
.opiniones-pagina__cabecera .perfil-pub__nombre { font-size: 1.375rem; }
.opiniones-pagina__cabecera .perfil-pub__especialidad { margin: 0; }

/* ---------- La página del paciente ---------- */
.resena-publica .publico__titulo { font-size: 1.375rem; }
.resena-publica textarea.form-input { min-height: 7.5rem; resize: vertical; }
.resena-publica__grupo { margin: 0 0 1.125rem; padding: 0; }
.resena-publica__grupo legend { margin-bottom: .5rem; padding: 0; }
.resena-publica__grupo .form-check { margin-bottom: .375rem; }
.resena-publica__vista { margin: 0 0 1rem; padding: .875rem 1rem; border: 1px solid var(--borde-suave); border-radius: var(--radius-lg); background: var(--papel); }
.resena-publica__vista .estrellas svg { width: 1.375rem; height: 1.375rem; }

/* Elegir de 1 a 5 estrellas sin JavaScript: radios en orden 1…5, pintados con :has(). */
.elegir-estrellas { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; }
.elegir-estrellas input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.elegir-estrellas label { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .625rem; color: var(--estrella-vacia); cursor: pointer; transition: transform var(--transicion), color var(--transicion); }
.elegir-estrellas label svg { width: 2.25rem; height: 2.25rem; fill: currentColor; }
.elegir-estrellas label:hover { transform: scale(1.08); }
.elegir-estrellas input:focus-visible + label { box-shadow: var(--anillo); }
.elegir-estrellas:has(input[value="1"]:checked) label:nth-of-type(-n+1),
.elegir-estrellas:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.elegir-estrellas:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.elegir-estrellas:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.elegir-estrellas:has(input[value="5"]:checked) label:nth-of-type(-n+5) { color: var(--estrella); }
/* Al pasar el mouse, la vista previa manda sobre lo elegido. */
.elegir-estrellas:has(label:hover) label { color: var(--estrella-vacia); }
.elegir-estrellas:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
.elegir-estrellas:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
.elegir-estrellas:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
.elegir-estrellas:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
.elegir-estrellas:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) { color: var(--estrella); }
.elegir-estrellas__texto { margin-left: .5rem; font-size: .9375rem; font-weight: 600; color: var(--texto-medio); }
.elegir-estrellas__texto [data-puntos] { display: none; }
.elegir-estrellas__ninguna { font-weight: 400; color: var(--texto-suave); }
.elegir-estrellas:has(input:checked) .elegir-estrellas__ninguna { display: none; }
.elegir-estrellas:has(input[value="1"]:checked) [data-puntos="1"],
.elegir-estrellas:has(input[value="2"]:checked) [data-puntos="2"],
.elegir-estrellas:has(input[value="3"]:checked) [data-puntos="3"],
.elegir-estrellas:has(input[value="4"]:checked) [data-puntos="4"],
.elegir-estrellas:has(input[value="5"]:checked) [data-puntos="5"] { display: inline; }

/* ---------- Panel del consultorio ---------- */
.resenas-medicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .875rem; margin-bottom: 1.25rem; }
.resena-medico .card__content { padding: 1rem 1.125rem; }
.resena-medico__nombre { margin: 0 0 .375rem; font-weight: 700; color: var(--texto); }
.resena-medico__vacio { margin: 0; font-size: .875rem; }
.resena-medico__nota { display: flex; align-items: center; gap: .5rem; margin: 0; }
.resena-medico__nota strong { font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; }
.resena-medico__total { margin: .25rem 0 .625rem; font-size: .8125rem; }
.resena-medico__barras { list-style: none; display: grid; gap: .1875rem; margin: 0; padding: 0; }
.resena-medico__barras li { display: grid; grid-template-columns: .75rem .875rem 1fr 1.75rem; align-items: center; gap: .375rem; font-size: .75rem; color: var(--texto-suave); text-align: right; }
.resena-medico__barras .opiniones-barras__barra { height: .375rem; }

.resena-pedir { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.resena-pedir__fila { display: flex; gap: .5rem; align-items: center; }
.resena-pedir__fila .form-input { flex: 1; min-width: 0; }
.resena-pedir__fila .btn { flex: none; }
.resena-pedir .card__title .icono, .resena-pedir__copiar .card__title .icono { width: 1.125rem; height: 1.125rem; vertical-align: -.2em; margin-right: .25rem; }
.resena-pedir__whatsapp .card__title .icono { color: #1b7f4b; }
.resena-pedir__whatsapp .card__subtitulo strong { color: var(--texto); }
.resena-pedir__whatsapp form { margin: 0; }
.resena-pedir__vista { margin-top: 1rem; }
.resena-pedir__mensaje { margin: .625rem 0 0; padding: .75rem .875rem; border-radius: .75rem .75rem .75rem .25rem; background: #e7f6ec; color: var(--texto); font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.resena-pedir__copiar { margin-top: 1rem; }
.resena-pedir__copiar .resena-pedir__fila { flex-wrap: wrap; }
.resena-pedir__copiar .resena-pedir__fila .form-input { min-width: 16rem; }

/* Cuánto le queda al enlace (dura 12 horas; cada envío le da 12 más). */
.resena-vigencia { display: flex; gap: .625rem; align-items: flex-start; margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--tinta-100, #d8e3f3); border-radius: var(--radius-lg); background: var(--tinta-50, #f1f5fb); color: var(--texto-medio); font-size: .875rem; line-height: 1.5; }
.resena-vigencia p { margin: 0; }
.resena-vigencia strong { color: var(--texto); }
.resena-vigencia .icono { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--tinta); }
.resena-vigencia--vencida { border-color: color-mix(in srgb, var(--precaucion) 30%, var(--superficie)); background: color-mix(in srgb, var(--precaucion) 8%, var(--superficie)); }
.resena-vigencia--vencida .icono { color: var(--precaucion); }
@media (max-width: 480px) {
  .resena-pedir__fila { flex-wrap: wrap; }
  .resena-pedir__fila .btn { width: 100%; }
}

/* Agenda: la puntuación en el botón de la cita atendida. */
.btn--resena { gap: .25rem; }

/* ---------- Back-office ---------- */
.kpis--resenas { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.resena-puntuacion-celda { white-space: nowrap; }
.resena-puntuacion-celda strong { margin-right: .375rem; }
.resena-distribucion { display: inline-flex; align-items: flex-end; gap: .1875rem; height: 1.75rem; }
.resena-distribucion__barra { display: block; width: .5rem; border-radius: .125rem .125rem 0 0; background: var(--estrella); }
.resena-distribucion__barra--2, .resena-distribucion__barra--1 { background: color-mix(in srgb, var(--peligro) 55%, var(--estrella)); }