/* ===================================================================== OpoReal · Opiniones --------------------------------------------------------------------- Prefijo `opr-rs-`. Comprobado el 25 de septiembre de 2026 que ningún otro plugin lo usa. OJO CON LOS COMENTARIOS: aquí dentro no puede haber una llave suelta. `anidar()` busca bloques por llaves y no distingue los comentarios. LAS ESTRELLAS SON DE TINTA, NO AMARILLAS. El sistema es monocromo y el color solo aparece cuando significa algo. Una estrella amarilla no significa nada que no diga ya la cifra de al lado: sería decoración. El único color de este fichero es el punto del estado de TU opinión —ámbar pendiente, verde publicada, rojo no publicada—, que aparece después de que el usuario haya hecho algo y dice qué ha pasado con ello. ===================================================================== */ /* --- lo que solo oye un lector de pantalla --- */ .opr-rs .opr-rs-oculto{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important} /* --- estrellas de lectura --- */ .opr-rs .opr-rs-estrellas{display:inline-flex !important; gap:2px !important; align-items:center !important; color:var(--p200) !important} .opr-rs .opr-rs-e{display:block !important; line-height:0 !important} .opr-rs .opr-rs-e svg{width:16px !important; height:16px !important; fill:currentColor !important} .opr-rs .opr-rs-e.es-llena{color:var(--tinta) !important} /* ===================================================================== El cajón de /contacto/ ===================================================================== */ .opr-rs.opr-rs-cajon{scroll-margin-top:calc(var(--opr-cabecera, 0px) + 12px) !important} /* LA BANDA, DE LADO A LADO. La sección vive dentro del `
` del contacto, y Astra lo encajona: el fondo gris se quedaba en una caja con dos franjas blancas a los lados. Se vio en el sitio el 25 de septiembre, no en la prueba, que llevaba otro tema. El fondo lo pinta una sombra enorme y el `clip-path` la recorta arriba y abajo, como las bandas de Mi progreso: `100vw` incluiría la barra de desplazamiento. */ .opr-rs.opr-rs-cajon{box-shadow:0 0 0 100vmax var(--fondo) !important; clip-path:inset(0 -100vmax) !important} .opr-rs .opr-rs-cabeza{margin-bottom:clamp(26px,3.2vw,40px) !important} /* Dos columnas: a la izquierda la nota y tu opinión, a la derecha lo que dicen los demás. La lista ocupa las dos filas de la derecha. */ .opr-rs .opr-rs-cuerpo{ display:grid !important; grid-template-columns:minmax(0,360px) minmax(0,1fr) !important; grid-template-areas:"arriba lista" "lado lista" !important; grid-template-rows:auto 1fr !important; gap:14px clamp(24px,3.4vw,56px) !important; align-items:start !important; } .opr-rs .opr-rs-arriba{grid-area:arriba !important} .opr-rs .opr-rs-lado{grid-area:lado !important} .opr-rs .opr-rs-lista{grid-area:lista !important; display:grid !important; gap:14px !important; align-content:start !important} /* --- la nota media y el reparto --- */ .opr-rs .opr-rs-cifras{ padding:18px 20px !important; border-radius:var(--radio) !important; background:var(--p950) !important; color:var(--p100) !important; display:grid !important; gap:16px !important; } .opr-rs .opr-rs-cifras .opr-rs-estrellas{color:var(--p700) !important} .opr-rs .opr-rs-cifras .opr-rs-e.es-llena{color:#fff !important} .opr-rs .opr-rs-media{display:grid !important; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important; column-gap:14px !important; align-items:center !important} .opr-rs .opr-rs-media b{grid-row:1 / 3 !important; font-size:3rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important; color:#fff !important} .opr-rs .opr-rs-media .opr-rs-e svg{width:18px !important; height:18px !important} .opr-rs .opr-rs-media span.opr-cifra{font-size:.875rem !important; color:var(--p400) !important} .opr-rs .opr-rs-reparto{display:grid !important; gap:6px !important} .opr-rs .opr-rs-reparto li{display:grid !important; grid-template-columns:12px minmax(0,1fr) 28px !important; gap:10px !important; align-items:center !important; font-size:.8125rem !important; color:var(--p400) !important} .opr-rs .opr-rs-barra-num{text-align:right !important; font-variant-numeric:tabular-nums !important} .opr-rs .opr-rs-barra{display:block !important; height:6px !important; border-radius:999px !important; background:var(--p800) !important; overflow:hidden !important} .opr-rs .opr-rs-barra i{display:block !important; height:100% !important; border-radius:999px !important; background:var(--p100) !important} .opr-rs .opr-rs-barra-cuenta{text-align:right !important} .opr-rs .opr-rs-cifras b{display:block !important} .opr-rs .opr-rs-cifras.es-vacia b, .opr-rs .opr-rs-cifras.es-pocas b{font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:-.018em !important; color:#fff !important} .opr-rs .opr-rs-cifras.es-vacia span, .opr-rs .opr-rs-cifras.es-pocas span{display:block !important; margin-top:-10px !important; font-size:.875rem !important; color:var(--p400) !important; line-height:1.5 !important} /* --- una opinión --- */ .opr-rs .opr-rs-op{ padding:18px 20px !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important; display:grid !important; gap:10px !important; align-content:start !important; } .opr-rs .opr-rs-op-cabeza{display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important} .opr-rs .opr-rs-op-cabeza time{font-size:.8125rem !important; color:var(--tenue) !important} .opr-rs .opr-rs-op-texto{font-size:1rem !important; line-height:1.6 !important; color:var(--tinta) !important; white-space:pre-line !important; overflow-wrap:anywhere !important; max-width:68ch !important} /* La firma, en todas partes igual (v1.0.9): tres renglones fijos —nombre, lo que prepara y «Usuario con cuenta»— con el avatar a la izquierda de los dos primeros. En la franja esos tres renglones además se comparten entre las tarjetas (más abajo). Sin «Prepara…», su renglón queda vacío. */ .opr-rs .opr-rs-op-firma{display:grid !important; grid-template-columns:44px minmax(0,1fr) !important; column-gap:12px !important; align-items:start !important; justify-items:start !important; font-size:.875rem !important; color:var(--suave) !important} .opr-rs .opr-rs-op-firma > .opr-rs-avatar{grid-column:1 !important; grid-row:1 / span 2 !important; align-self:center !important} .opr-rs .opr-rs-op-firma > b{grid-column:2 !important; grid-row:1 !important; font-weight:700 !important; color:var(--tinta) !important} .opr-rs .opr-rs-op-firma > .opr-rs-prepara{grid-column:2 !important; grid-row:2 !important; margin-top:2px !important} /* «Usuario con cuenta» va debajo de todo y de lado a lado, también bajo el avatar: en la columna del texto, a 1024 px, se partía en dos renglones. */ .opr-rs .opr-rs-op-firma > .opr-rs-verificado{grid-column:1 / -1 !important; grid-row:3 !important; margin-top:10px !important; white-space:nowrap !important} /* Los avatares vienen compuestos sobre --p900 y cuadrados: el círculo lo pone esto. La silueta, para quien firma con nombre y no ha elegido avatar, es la del botón «Mi perfil» de la cabecera. */ .opr-rs .opr-rs-avatar{display:block !important; width:44px !important; height:44px !important; border-radius:50% !important; object-fit:cover !important; background:var(--p900) !important} .opr-rs .opr-rs-avatar.es-silueta{display:grid !important; place-items:center !important; background:var(--p100) !important; color:var(--p500) !important; box-shadow:inset 0 0 0 1px var(--borde) !important} .opr-rs .opr-rs-avatar.es-silueta svg{width:24px !important; height:24px !important} .opr-rs .opr-rs-verificado{display:inline-flex !important; align-items:center !important; gap:5px !important; color:var(--suave) !important} .opr-rs .opr-rs-verificado svg{width:15px !important; height:15px !important; fill:none !important; stroke:currentColor !important; stroke-width:2.2 !important; stroke-linecap:round !important; stroke-linejoin:round !important} /* La respuesta va dentro de la opinión, con una raya a la izquierda: se lee como contestación a esa y no como una opinión más. */ .opr-rs .opr-rs-respuesta{margin-top:4px !important; padding:12px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 3px 0 0 var(--p950) !important} .opr-rs .opr-rs-respuesta b{display:block !important; font-size:.8125rem !important; font-weight:700 !important; color:var(--tinta) !important; margin-bottom:4px !important} .opr-rs .opr-rs-respuesta p{font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important; white-space:pre-line !important; overflow-wrap:anywhere !important} .opr-rs .opr-rs-mas{justify-self:start !important; margin-top:4px !important} /* EL PESO DE LOS BOTONES. El núcleo pone `font:inherit` a todo `button` con (0,1,1), y eso le gana a `.opr-btn` (0,1,0): el `