/*
 * LA REPUTACIÓN DE LOS ALIADOS EN EL APP (9-oct-2026) — invitación, hoja de calificar y gracias.
 * Prefijo `.rep-`. Solo se carga con RK_REPUTACION (app/config/head.php). La hoja «La puntuación
 * de…» ya no existe (Miguel, 9-oct 18:00): la reputación en el app es solo «★ 5.0» (simulador.css).
 * ============================================================================
 * Estrellas en el naranja de marca var(--rk-marca): el amarillo es SOLO del Status Plus. «En
 * revisión» en gris azulado (no ámbar). Texto chico sobre naranja: #BB3E03. Mínimo 12 px.
 * La hoja bloquea el fondo (rkFondo) y es el único contenedor que se desplaza mientras está abierta.
 *
 * POR QUÉ .rep-inv-escala Y .rep-confirma (11-oct-2026). Miguel vio en el panel calificaciones de 1★ con
 * comentarios buenos («Son muy bien» en LABORATORIO LCK): las cinco estrellas de la tarjeta no decían
 * nada y la primera se tocaba «para empezar». Ahora la escala «Muy mala … ¡Excelente!» va bajo las
 * estrellas de la tarjeta (Inicio y «compra finalizada»), en 12 px y sin cambiar su ancho; y con 1–2
 * estrellas la hoja pregunta antes de enviar (.rep-confirma, en lugar de «Enviar»). Ver rk-reputacion.js.
 * La revisión de esa tarde: la escala en peso 500 y «Ahora no» 8 px más abajo (se leían como dos opciones
 * de texto apiladas), los rótulos tocan su estrella, y las estrellitas de la pregunta son botones de 40 px.
 */
.rep {
  --rep-marca: var(--rk-marca, #E74922);
  --rep-marca-osc: #BB3E03;
  --rep-marca-suave: #FDEEE8;
  --rep-marca-borde: #F5C9B9;
  --rep-tinta: #1A1A1A;
  --rep-tinta-2: #3A3A3C;
  --rep-gris: #646A73;
  --rep-gris-2: #8A9099;
  --rep-linea: #E9EAED;
  --rep-gris-claro: #F0F1F3;
  --rep-fondo: #F9F9F9;
  --rep-ok: #12A150;
  color: var(--rep-tinta);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.rep *, .rep *::before, .rep *::after { box-sizing: border-box; }
/* El reseteo de los botones va con :where() (especificidad 0): cada componente lo pisa sin !important. */
.rep :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rep :where(h2, h3, p) { margin: 0; }
.rep [hidden] { display: none !important; }
.rep :focus-visible { outline: 2px solid var(--rep-marca); outline-offset: 2px; border-radius: 10px; }
.rep-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Estrellas ─────────────────────────────────────────────────────── */
.rep-est path { fill: none; stroke: #C9CBD1; stroke-width: 1.6; stroke-linejoin: round; }
.rep-est.is-llena path { fill: var(--rk-marca, #E74922); stroke: var(--rk-marca, #E74922); }
.rep-5 { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.rep-5-fondo, .rep-5-llenas { display: inline-flex; gap: 1px; white-space: nowrap; }
.rep-5-fondo .rep-est path { fill: #DADCE0; stroke: none; }
.rep-5-llenas { position: absolute; left: 0; top: 0; overflow: hidden; }
.rep-5-llenas .rep-est { flex: 0 0 auto; }

/* ── Logo ──────────────────────────────────────────────────────────── */
.rep-logo { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--rep-linea, #E9EAED); background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rep-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-logo.rep-mono { background: #F0F1F3; border-color: transparent; font: 600 16px/1 'Poppins', sans-serif; color: #3A3A3C; }
.rep-logo-p { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }

/* ── La tarjeta del Inicio ─────────────────────────────────────────── */
#rk-rep-invitacion { margin: 0 0 12px; transition: opacity .25s, transform .25s; }
#rk-rep-invitacion.rep-saliendo, #rk-rep-gracias.rep-saliendo { opacity: 0; transform: scale(.98); }
.rep-inv {
  position: relative; padding: 14px 14px 10px; border-radius: 20px;
  background: linear-gradient(135deg, #FFF5F1, #FFFFFF 60%);
  border: 1px solid var(--rep-marca-borde); box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
}
/* «Ahora no»: discreto, a la derecha y bajo las estrellas; cierra la invitación de ESA compra (no vuelve). */
.rep-inv-x { display: block; margin: 8px 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--rep-gris); font: 600 13px/1 'Montserrat', sans-serif; }
.rep-inv-x:active { background: rgba(16, 24, 40, .05); }
.rep-inv-cab { display: flex; gap: 10px; align-items: center; }
.rep-inv-cab h2 { font: 600 14.5px/1.3 'Poppins', sans-serif; }
.rep-inv-cab p { font-size: 12.5px; color: var(--rep-gris); margin-top: 1px; }
.rep-inv-est { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; padding: 0 2px; }
.rep-inv-est button { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; transition: transform .12s; }
.rep-inv-est button:active { transform: scale(.9); }
.rep-inv-est .rep-est path { stroke: var(--rk-marca, #E74922); stroke-width: 1.7; }
/* La escala (11-oct-2026): «Muy mala» empieza bajo la punta izquierda de la primera estrella y «¡Excelente!»
   termina bajo la punta derecha de la última. Es una fila de cinco huecos con el MISMO reparto que la de los botones
   (mismo hueco, mismo espacio, misma base de 48 px que se encoge igual): el texto se ancla al centro de su hueco
   menos media estrella (16 px), aunque el botón se encoja. */
.rep-inv-escala { display: flex; justify-content: space-between; gap: 4px; margin-top: 1px; padding: 0 2px; min-height: 16px; font: 500 12px/16px 'Montserrat', sans-serif; color: var(--rep-gris); }
.rep-inv-escala > span { position: relative; flex: 0 1 48px; min-width: 0; }
/* z-index: «Muy mala» se sale de su hueco y pisa el de la 2.ª estrella (que va después y quedaba encima): el dedo sobre
   «mala» caía en el hueco vacío y no tocaba nada. */
.rep-inv-escala-t { position: absolute; top: 0; z-index: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rep-inv-escala > span:first-child .rep-inv-escala-t { left: calc(50% - 16px); }
.rep-inv-escala > span:last-child .rep-inv-escala-t { right: calc(50% - 16px); }

/* ── «¡Tu compra ha sido finalizada!» ──────────────────────────────── */
#rk-rep-gracias { width: 100%; max-width: 440px; margin: 22px auto 0; transition: opacity .25s, transform .25s; }
.rep-gracias-c { padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--rep-linea); box-shadow: 0 10px 30px rgba(16, 24, 40, .12); text-align: center; }
.rep-gracias-c h2 { font: 600 16px/1.3 'Poppins', sans-serif; }
.rep-gracias-c p { margin-top: 4px; font-size: 13px; color: var(--rep-gris); }
.rep-gracias-c .rep-inv-est, .rep-gracias-c .rep-inv-escala { justify-content: center; gap: 6px; }
.rep-gracias-c .rep-inv-x { margin: 8px auto 0; }
@media (max-height: 700px) { #rk-rep-gracias { margin-top: 14px; } }

/* ── La hoja ───────────────────────────────────────────────────────── */
.rep-velo { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 17, 20, .48); opacity: 0; transition: opacity .25s; }
.rep-velo.is-open { opacity: 1; }
.rep-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  max-width: 560px; margin: 0 auto; max-height: 92vh; max-height: 92dvh;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(16, 24, 40, .18);
  padding: 8px 18px calc(18px + var(--rk-safe-bottom, 0px));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
.rep-hoja.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rep-hoja, .rep-velo { transition: none; } }
.rep-tirador { width: 44px; height: 5px; border-radius: 999px; background: #D9DADF; margin: 4px auto 12px; }
.rep-h-cab { display: flex; gap: 12px; align-items: center; }
.rep-h-cab h2 { font: 600 17px/1.25 'Poppins', sans-serif; }
.rep-h-cab p { margin-top: 2px; font-size: 12.5px; color: var(--rep-gris); }
.rep-previa { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #F4F6FB; font-size: 12.5px; color: var(--rep-tinta-2); }
.rep-estrellas { display: flex; justify-content: center; gap: 4px; margin: 18px 0 2px; }
.rep-estrellas button { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: transform .12s; }
.rep-estrellas button:active { transform: scale(.9); }
.rep-e-et { text-align: center; font: 600 14px/22px 'Poppins', sans-serif; min-height: 22px; color: var(--rep-tinta); }
.rep-e-et.is-vacio { color: var(--rep-gris); font: 500 13px/22px 'Montserrat', sans-serif; }
.rep-sec { margin-top: 16px; }
.rep-sec h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--rep-tinta-2); }
.rep-opc { font-weight: 500; color: var(--rep-gris); }
.rep-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-tag { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rep-linea); background: #fff; font-size: 13px; font-weight: 600; color: var(--rep-tinta-2); display: inline-flex; align-items: center; gap: 6px; }
.rep-tag.is-on { background: var(--rep-tinta); border-color: var(--rep-tinta); color: #fff; }
.rep-area { position: relative; }
.rep-area textarea {
  display: block; width: 100%; min-height: 96px; resize: none; border-radius: 16px; border: 1px solid var(--rep-linea); background: var(--rep-fondo);
  padding: 12px 14px 26px; font: 400 16px/1.4 'Montserrat', sans-serif; color: var(--rep-tinta); outline: 0;   /* 16 px: iPhone no acerca */
}
.rep-area textarea:focus { border-color: var(--rep-marca); background: #fff; box-shadow: 0 0 0 4px rgba(231, 73, 34, .10); }
.rep-area textarea::placeholder { color: var(--rep-gris-2); }
.rep-cont { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--rep-gris); }
.rep-cont.is-lleno { color: var(--rep-marca-osc); font-weight: 700; }
.rep-priv { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--rep-gris); }
.rep-priv svg { flex: 0 0 auto; margin-top: 1px; }
.rep-ayuda { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 14px; background: #F4F6FB; font-size: 13px; color: var(--rep-tinta-2); text-align: left; }
.rep-ayuda svg { flex: 0 0 auto; }
.rep-ayuda a { margin-left: auto; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rep-linea); display: inline-flex; align-items: center; font-weight: 700; font-size: 13px; color: var(--rep-tinta); text-decoration: none; }
.rep-error { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #FDEEE8; color: #8F2F02; font-size: 13px; font-weight: 600; }
/* «Elegiste 1 estrella: «Muy mala». ¿Es lo que quieres decir?» (11-oct-2026): va en lugar de «Enviar» («Ahora no»
   sigue debajo). Los dos botones pesan lo mismo, uno al lado del otro: la persona tiene que leer la pregunta para
   contestarla. Las cinco estrellitas son botones (la 5.ª elige 5), con el mismo dibujo que las grandes. */
.rep-confirma { margin-top: 18px; padding: 16px 14px 14px; border-radius: 18px; background: var(--rep-marca-suave); border: 1px solid var(--rep-marca-borde); text-align: center; }
/* Recibe el foco para que el lector de pantalla la lea, pero no es un control: sin el anillo (sus botones sí lo tienen). */
.rep .rep-confirma:focus { outline: none; border-radius: 18px; }
/* Aparte (23-oct-2026): en iOS 15.0–15.3 un :focus-visible dentro de una lista anula la regla entera. */
.rep .rep-confirma:focus-visible { outline: none; border-radius: 18px; }
.rep-confirma-q { display: flex; justify-content: center; gap: 2px; margin: -6px 0 4px; }
.rep-confirma-q button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: transform .12s; }
.rep-confirma-q button:active { transform: scale(.9); }
.rep-confirma-t { font: 600 15px/1.35 'Poppins', sans-serif; color: var(--rep-tinta); }
.rep-confirma-d { margin-top: 2px; font-size: 14px; color: var(--rep-tinta-2); }
.rep-confirma-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rep-confirma .rep-btn { min-height: 48px; padding: 0 10px; font-weight: 700; }
.rep-h-pie { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.rep-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: 16px; font: 600 15px/1.2 'Montserrat', sans-serif; text-align: center; padding: 0 16px; }
.rep .rep-btn-1 { background: var(--rep-marca); color: #fff; box-shadow: 0 8px 20px rgba(231, 73, 34, .25); }
.rep .rep-btn-1[disabled] { background: #F3B7A5; box-shadow: none; cursor: default; }
.rep .rep-btn-2 { background: #fff; border: 1px solid var(--rep-linea); color: var(--rep-tinta); }
.rep-lnk { display: block; width: 100%; min-height: 44px; text-align: center; font-size: 14px; font-weight: 600; color: var(--rep-gris); }

/* gracias */
.rep-listo { text-align: center; padding: 14px 4px 0; }
.rep-ok { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; background: #E8F7EE; display: flex; align-items: center; justify-content: center; animation: rep-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rep-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rep-ok { animation: none; } }
.rep-listo h2 { margin: 14px 0 6px; font: 600 19px/1.3 'Poppins', sans-serif; }
.rep-listo > p { margin: 0 auto; color: var(--rep-gris); font-size: 13.5px; max-width: 300px; }
.rep-mi-op { margin: 16px 0 4px; padding: 12px; border-radius: 14px; background: var(--rep-fondo); text-align: left; }
.rep-mi-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rep-mi-op p { margin-top: 6px; font-size: 13px; color: var(--rep-tinta-2); }
.rep-est-rev { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #34495E; background: #EAF0F6; border-radius: 999px; padding: 3px 9px; }