/* Reseñas de los autos de la comunidad — PROTOTIPO APARTE (2026-10-19). Lo cargan la búsqueda (plan-b.html),
   la ficha (viaje.html) y el panel (mis-viajes.html). Estrellas sobrias: arena apagada, nada de amarillo chillón. */

:root {
  --rep-e: #cdb892;
  --rep-vacia: rgba(255, 255, 255, .2);
}
:root[data-tema="claro"] {
  --rep-e: #8f7236;
  --rep-vacia: rgba(0, 0, 0, .18);
}

/* "★ 4,8 · 12 viajeros" / "Nuevo" */
.rep { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep b { font-weight: 640; color: var(--texto); }
.rep i { font-style: normal; opacity: .6; margin: 0 1px; }
.rep-e { width: 12px; height: 12px; flex: none; color: var(--rep-vacia); fill: currentColor; stroke: none; }
.rep > .rep-e { color: var(--rep-e); }
.rep.nuevo { font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 20px; background: var(--hover, rgba(255, 255, 255, .06)); color: var(--texto-2); letter-spacing: .01em; }

.rep-fijas { display: inline-flex; gap: 1px; vertical-align: middle; }
.rep-fijas .rep-e.on { color: var(--rep-e); }

/* En la fila de la búsqueda (a la derecha del nombre "TodaRuta") */
.v-quien .fila .rep { margin-left: 2px; }
.v-quien .fila .rep.nuevo { line-height: 18px; }

/* Comentarios en la ficha */
.resenas { display: grid; gap: 0; margin-top: 4px; }
.resenas h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.resenas h2 .rep { font-size: 14px; }
.resena { padding: 13px 0; border-top: 1px solid var(--linea); display: grid; gap: 5px; }
.resena:first-of-type { border-top: none; padding-top: 2px; }
.resena-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.resena-cab .quien { color: var(--texto-2); font-weight: 560; }
.resena blockquote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.resena-den { justify-self: start; padding: 4px 0; min-height: 30px; font: inherit; font-size: 12.5px; color: var(--texto-3); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.resena-den:hover { color: var(--texto-2); }
.den-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.den-opciones button { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 20px; border: 1px solid var(--linea); background: none; color: var(--texto); cursor: pointer; }
.den-opciones button.x { border: none; color: var(--texto-3); }
.den-gracias { font-size: 13px; color: var(--texto-2); }
.resenas-aviso { font-size: 12.5px; color: var(--texto-3); margin: 10px 0 0; text-wrap: pretty; }

/* Formulario de puntuar */
.resena-form { display: grid; gap: 12px; }
.resena-t { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.01em; color: var(--texto); }
.estrellas-in { display: flex; gap: 2px; margin-left: -6px; }
.estrellas-in button { width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none; cursor: pointer; border-radius: 10px; color: var(--rep-vacia); -webkit-tap-highlight-color: transparent; }
.estrellas-in button .rep-e { width: 28px; height: 28px; color: inherit; }
.estrellas-in button.on { color: var(--rep-e); }
.estrellas-in button:focus-visible { outline: 2px solid var(--celeste, #9db9cf); outline-offset: -2px; }
.resena-form textarea { width: 100%; min-height: 76px; padding: 11px 12px; border-radius: 11px; font: inherit; font-size: 15.5px; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); resize: vertical; box-sizing: border-box; }
.resena-form textarea:focus { outline: none; border-color: var(--celeste, #9db9cf); box-shadow: 0 0 0 3px rgba(157, 185, 207, .18); }
.resena-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resena-pie .cuenta { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.resena-form .aviso { margin: 0; }
.resena-hecha { display: grid; gap: 6px; }
.resena-hecha .t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--texto); }
.resena-hecha .e { font-size: 13px; color: var(--texto-2); margin: 0; }
.resena-hecha .coment { margin: 0; font-size: 14px; color: var(--texto-2); }
.resena-borrar { justify-self: start; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--texto-3); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .estrellas-in button .rep-e { transition: transform .12s ease-out; }
  .estrellas-in button:active .rep-e { transform: scale(.88); }
}

/* Panel (mis-viajes): títulos de sección y el estado de un pedido que hice */
.pg h2.seccion { margin: 26px 2px 12px; font-size: 15px; font-weight: 600; color: var(--texto-2); letter-spacing: -.005em; }
.pg h2.seccion:first-child { margin-top: 4px; }
.viaje-top > .estado { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.pedido .quien { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
a.btn { text-decoration: none; }