/* Walon – Opiniones del PDP. Todo cuelga de .wop (y .wop-modal, que vive en el body) para no chocar con el CSS del tema. */
/* Variables en .wop, en el modal y en .wop-head-rate: las estrellas de la cabecera viven fuera de la sección y sin esto quedaban invisibles. */
.wop,.wop-modal,.wop-head-rate{--o-ink:var(--walon-ink,#0f0f10);--o-line:var(--walon-border,#e4e5e7);--o-mist:var(--walon-surface-muted,#f6f7f8);--o-muted:#6b7280;--o-ok:#1b7f4b;--o-head:var(--w-font-head,Arial,sans-serif);--o-body:var(--w-font-body,"Neusa Next Pro",Arial,sans-serif);--o-heavy:var(--w-wt-heavy,900);--o-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg id='s'%3E%3Cpath d='M10 1.2l2.6 6.2 6.7.5-5.1 4.4 1.6 6.5L10 15.3l-5.8 3.5 1.6-6.5L.7 7.9l6.7-.5z'/%3E%3C/g%3E%3Cuse href='%23s' x='20'/%3E%3Cuse href='%23s' x='40'/%3E%3Cuse href='%23s' x='60'/%3E%3Cuse href='%23s' x='80'/%3E%3C/svg%3E")}
.wop{clear:both;margin:56px auto;max-width:1440px;width:calc(100% - 40px);color:var(--o-ink);font-family:var(--o-body)}
:is(.wop,.wop-modal) [hidden]{display:none!important}
:is(.wop,.wop-modal) *{box-sizing:border-box}
:is(.wop,.wop-modal) h2,:is(.wop,.wop-modal) h3,:is(.wop,.wop-modal) h4{font-family:var(--o-head);margin:0;color:var(--o-ink)}
.wop-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.wop-top h2{font-weight:var(--o-heavy);font-size:clamp(20px,2.2vw,28px);line-height:1.1;text-transform:uppercase;letter-spacing:.01em}
.wop-top p{margin:6px 0 0;color:var(--o-muted);font-size:14px;line-height:1.45}
.wop-preview{margin:0 0 16px;padding:8px 12px;background:var(--o-mist);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--o-muted)}
.wop-btn{display:inline-flex;align-items:center;justify-content:center;font:700 13px/1 var(--o-head);letter-spacing:.06em;text-transform:uppercase;background:var(--o-ink);color:#fff;border:2px solid var(--o-ink);padding:13px 20px;cursor:pointer;text-decoration:none;border-radius:0;transition:opacity .15s}
.wop-btn:hover{opacity:.85;color:#fff}
.wop-btn:disabled{opacity:.5;cursor:default}
/* El tema (Astra) le quita el borde a todo <button>; se refuerza para que el botón conserve su forma. */
:is(.wop,.wop-modal) .wop-btn{border-width:2px!important;border-style:solid!important;border-radius:0!important;box-shadow:none}
.wop-btn.wop-ghost{background:#fff;color:var(--o-ink)}
.wop-btn.wop-ghost:hover{background:var(--o-ink);color:#fff;opacity:1}
.wop-btn:focus-visible,.wop-chip:focus-visible,.wop-bar:focus-visible,:is(.wop,.wop-modal) select:focus-visible,:is(.wop,.wop-modal) input:focus-visible,:is(.wop,.wop-modal) textarea:focus-visible,.wop-vote:focus-visible{outline:3px solid var(--o-ink);outline-offset:2px}
.wop-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.wop-sum{display:flex;flex-direction:column;gap:20px;position:sticky;top:90px}
.wop-avg{display:flex;align-items:flex-end;gap:12px}
.wop-avg b{font:var(--o-heavy) 56px/.9 var(--o-head)}
.wop-avg span{display:block;font-size:13px;color:var(--o-muted);margin-top:4px}
/* Estrellas con máscara SVG: no dependen de la tipografía, se ven nítidas a cualquier tamaño y admiten fracciones (4,6). */
.wop-stars{--p:0%;display:inline-block;flex:none;width:5em;height:1em;font-size:16px;vertical-align:-.12em;background:linear-gradient(90deg,var(--o-ink,#0f0f10) var(--p),#d3d6da var(--p));-webkit-mask:var(--o-star) center/100% 100% no-repeat;mask:var(--o-star) center/100% 100% no-repeat}
.wop-stars.is-lg{font-size:22px}
.wop-head-rate{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--o-ink);text-decoration:none;flex-wrap:wrap}
.wop-head-rate b{font-weight:700}
.wop-head-rate .wop-hr-n{text-decoration:underline;text-underline-offset:3px;color:var(--o-ink)}
.wop-bars{display:flex;flex-direction:column;gap:2px}
.wop-bar{display:grid;grid-template-columns:34px 1fr 38px;gap:8px;align-items:center;width:100%;background:none;border:0;padding:4px 0;font-size:13px;color:var(--o-ink);cursor:pointer;text-align:left}
.wop-bar i{display:block;height:8px;background:var(--o-mist);position:relative}
.wop-bar i::after{content:'';position:absolute;inset:0;width:var(--w);background:var(--o-ink)}
.wop-bar[aria-pressed=true]{font-weight:700}
.wop-bar:hover i::after{opacity:.75}
.wop-fit b{font:700 13px var(--o-head);text-transform:uppercase;letter-spacing:.04em}
.wop-fit p{margin:4px 0 12px;font-size:13px;color:var(--o-muted)}
.wop-rail{position:relative;height:6px;background:var(--o-mist)}
.wop-rail span{position:absolute;top:-5px;left:var(--x);width:16px;height:16px;background:var(--o-ink);transform:translateX(-50%)}
.wop-rail-l{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--o-muted);gap:6px}
.wop-empty,.wop-none{color:var(--o-muted);font-size:14px;margin:0}
.wop-filters{border:1px solid var(--o-line);margin-bottom:12px}
.wop-filters>summary{cursor:pointer;list-style:none;padding:12px 14px;font:700 13px var(--o-head);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between}
.wop-filters>summary::-webkit-details-marker{display:none}
.wop-filters>summary::after{content:'+';font-size:18px;line-height:1}
.wop-filters[open]>summary::after{content:'–'}
.wop-fbar{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px;align-items:center}
:is(.wop,.wop-modal) select,:is(.wop,.wop-modal) input[type=search],:is(.wop,.wop-modal) input[type=text],:is(.wop,.wop-modal) input[type=number],:is(.wop,.wop-modal) textarea{font:400 14px var(--o-body);padding:10px 12px;border:1px solid var(--o-line);background:#fff;color:var(--o-ink);border-radius:0;max-width:100%;width:auto;margin:0}
:is(.wop,.wop-modal) input[type=search]{flex:1 1 200px;min-width:0}
.wop-chip{font:600 13px var(--o-body);padding:10px 14px;background:var(--o-mist);border:2px solid transparent;cursor:pointer;color:var(--o-ink);border-radius:0}
.wop-chip[aria-pressed=true]{background:#fff;border-color:var(--o-ink)}
.wop-count{margin:0 0 4px;font-size:13px;color:var(--o-muted);min-height:18px}
.wop-r{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--o-line)}
.wop-who{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14px}
.wop-who-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.wop-av{display:block;width:56px;height:56px;border-radius:50%;flex:none;background:#f2d83b;box-shadow:0 2px 6px rgba(11,11,12,.18)}
.wop-av-i{display:grid;place-items:center;background:#0f0f10;color:#f2d83b;font:800 22px/1 var(--o-head);letter-spacing:0;text-transform:uppercase;box-shadow:none}
.wop-city,.wop-date{color:var(--o-muted);font-size:13px}
.wop-vb{color:var(--o-ok);font:700 11px var(--o-body);letter-spacing:.06em;text-transform:uppercase}
.wop-body h4{font-size:16px;margin:8px 0 4px;text-transform:none;font-weight:700}
.wop-body p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--o-ink)}
.wop-attr{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wop-attr span{background:var(--o-mist);padding:3px 9px;font-size:12px}
.wop-help{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:13px;color:var(--o-muted);flex-wrap:wrap}
.wop-help-q{margin-right:2px}
.wop-vote,.wop-rep{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--o-body);cursor:pointer;border-radius:0;transition:background-color .15s,border-color .15s,color .15s,transform .05s}
.wop-vote{padding:9px 14px;background:#fff;color:var(--o-ink);border:1px solid #c5c8cd}
.wop-vote i{font-style:normal;font-weight:700}
.wop-rep{margin-left:auto;padding:6px 2px;background:none;border:0;color:var(--o-muted);font-size:12px}
.wop-rep-box{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:var(--o-mist);border-left:3px solid var(--o-ink)}
.wop-rep-q{flex-basis:100%;font:700 13px var(--o-body);color:var(--o-ink)}
.wop-rep-opt{font:600 12px/1 var(--o-body);padding:8px 12px;background:#fff;color:var(--o-ink);border:1px solid #c5c8cd;border-radius:0;cursor:pointer}
.wop-rep-ok{font-size:13px;color:var(--o-ink)}
.wop-reply{margin-top:12px;background:var(--o-mist);padding:10px 12px;font-size:14px}
/* "Ver más": solo existe cuando hay más opiniones que las mostradas; se carga por AJAX sin mover la página. */
.wop-more-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 0 4px;border-top:1px solid var(--o-line)}
.wop-shown{margin:0;font-size:13px;color:var(--o-muted)}
.wop-more{min-width:260px;gap:10px;padding:14px 28px}
.wop-more::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.wop-more:disabled{opacity:1;cursor:progress}
.wop-more.is-loading::after{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;transform:none;animation:wop-spin .7s linear infinite}
@keyframes wop-spin{to{transform:rotate(360deg)}}
.wop-r.is-new{animation:wop-in .35s ease-out both}
@keyframes wop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wop-r:focus{outline:none}
.wop-r:focus-visible{outline:3px solid var(--o-ink);outline-offset:4px}
@media(max-width:768px){.wop-more{width:100%}}
@media(prefers-reduced-motion:reduce){.wop-r.is-new{animation:none}.wop-more.is-loading::after{animation-duration:2s}}
.wop-verif{font-size:13px;color:var(--o-muted)}
.wop-verif b{color:var(--o-ok);font-weight:700}
/* formulario */
.wop-modal{position:fixed;inset:0;z-index:2147483000;background:rgba(15,15,16,.55);display:flex;align-items:flex-end;justify-content:center;overflow-y:auto}
.wop-modal[hidden]{display:none}
.wop-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wop-err{margin:0 0 12px;padding:10px 12px;background:#fde8e8;color:#9b1c1c;font-size:14px}
.wop-invited{margin:0 0 14px;padding:10px 12px;background:var(--o-mist);border-left:3px solid #f2d83b;font-size:14px;line-height:1.45}
.wop-test-note{margin:0 0 14px;padding:10px 12px;background:#fdf0dc;color:#b45309;font-size:13px}
.wop-msg{font-size:15px;line-height:1.5;margin-bottom:16px}
html.wop-lock{overflow:hidden}
@media(max-width:900px){.wop-grid{grid-template-columns:1fr;gap:24px}.wop-sum{position:static}}
@media(max-width:768px){
.wop{margin:28px 0;width:100%}
.wop-top{align-items:stretch}
.wop-top .wop-btn{width:100%}
.wop-r{grid-template-columns:1fr;gap:6px;padding:16px 0}
.wop-who{flex-direction:row;align-items:center;gap:12px}
.wop-who-t{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px}
.wop-av{width:44px;height:44px}
.wop-fbar select,.wop-fbar .wop-chip{flex:1 1 calc(50% - 8px)}
}
@media(prefers-reduced-motion:reduce){.wop-btn{transition:none}}

/* ===== ESTADOS DE LOS BOTONES (reposo / hover / active / foco / desactivado) =====
   Astra pinta de oscuro y con texto claro todo <button>:hover, y eso le gana a las clases simples del módulo.
   Por eso cada botón declara aquí TODOS sus estados con mayor especificidad. Paleta única: negro Walon, blanco y grises. */
:is(.wop,.wop-modal) button{box-shadow:none;text-shadow:none}
/* El tema deja los botones con borde de 0 px: se fuerza el grosor de los que lo necesitan y se quita en los demás. */
:is(.wop,.wop-modal) .wop-vote,:is(.wop,.wop-modal) .wop-rep-opt{border-width:1px!important;border-style:solid!important}
:is(.wop,.wop-modal) .wop-chip{border-width:2px!important;border-style:solid!important}
:is(.wop,.wop-modal) .wop-rep,:is(.wop,.wop-modal) .wop-x,:is(.wop,.wop-modal) .wop-bar{border-width:0!important}
:is(.wop,.wop-modal) .wop-btn{border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-btn:hover{border-color:#2e2e32!important}
:is(.wop,.wop-modal) .wop-btn:active{border-color:#000!important}
:is(.wop,.wop-modal) .wop-btn.wop-ghost:hover{border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-btn.wop-ghost:active{border-color:#2e2e32!important}
:is(.wop,.wop-modal) .wop-chip,:is(.wop,.wop-modal) .wop-chip:hover,:is(.wop,.wop-modal) .wop-chip:active{border-color:transparent!important}
:is(.wop,.wop-modal) .wop-chip[aria-pressed=true],:is(.wop,.wop-modal) .wop-chip[aria-pressed=true]:hover{border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-vote,:is(.wop,.wop-modal) .wop-rep-opt{border-color:#c5c8cd!important}
:is(.wop,.wop-modal) .wop-vote:hover,:is(.wop,.wop-modal) .wop-vote:active,:is(.wop,.wop-modal) .wop-rep-opt:hover,:is(.wop,.wop-modal) .wop-rep-opt:active{border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-vote.is-done,:is(.wop,.wop-modal) .wop-vote.is-done:hover,:is(.wop,.wop-modal) .wop-vote:disabled{border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-rep-cancel,:is(.wop,.wop-modal) .wop-rep-cancel:hover,:is(.wop,.wop-modal) .wop-rep-cancel:active{border-color:transparent!important}
/* Primario */
:is(.wop,.wop-modal) .wop-btn{background:var(--o-ink);color:#fff;border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-btn:hover{background:#2e2e32;color:#fff;border-color:#2e2e32;opacity:1}
:is(.wop,.wop-modal) .wop-btn:active{background:#000;color:#fff;border-color:#000;transform:translateY(1px)}
/* Secundario */
:is(.wop,.wop-modal) .wop-btn.wop-ghost{background:#fff;color:var(--o-ink);border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-btn.wop-ghost:hover{background:var(--o-ink);color:#fff;border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-btn.wop-ghost:active{background:#2e2e32;color:#fff;border-color:#2e2e32;transform:translateY(1px)}
:is(.wop,.wop-modal) .wop-btn:disabled{opacity:.55;cursor:default;transform:none}
:is(.wop,.wop-modal) .wop-btn.is-loading:disabled{opacity:1}
/* Chips (filtros) */
:is(.wop,.wop-modal) .wop-chip{background:var(--o-mist);color:var(--o-ink);border-color:transparent}
:is(.wop,.wop-modal) .wop-chip:hover{background:#e6e7ea;color:var(--o-ink);border-color:transparent}
:is(.wop,.wop-modal) .wop-chip:active{background:#d9dbdf}
:is(.wop,.wop-modal) .wop-chip[aria-pressed=true],:is(.wop,.wop-modal) .wop-chip[aria-pressed=true]:hover{background:#fff;color:var(--o-ink);border-color:var(--o-ink)}
/* Barras de estrellas */
:is(.wop,.wop-modal) .wop-bar{background:none;color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-bar:hover{background:var(--o-mist);color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-bar:active{background:#eceef0}
:is(.wop,.wop-modal) .wop-bar[aria-pressed=true]{background:var(--o-mist);color:var(--o-ink);font-weight:700}
/* "¿Te ayudó?" */
:is(.wop,.wop-modal) .wop-vote{background:#fff;color:var(--o-ink);border-color:#c5c8cd}
:is(.wop,.wop-modal) .wop-vote:hover{background:var(--o-mist);color:var(--o-ink);border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-vote:active{background:#e6e7ea;color:var(--o-ink);border-color:var(--o-ink);transform:translateY(1px)}
:is(.wop,.wop-modal) .wop-vote.is-done,:is(.wop,.wop-modal) .wop-vote.is-done:hover,:is(.wop,.wop-modal) .wop-vote:disabled{background:var(--o-ink);color:#fff;border-color:var(--o-ink);cursor:default;transform:none}
/* Reportar (enlace discreto) y sus motivos */
:is(.wop,.wop-modal) .wop-rep{background:none;color:var(--o-muted);border:0}
:is(.wop,.wop-modal) .wop-rep:hover{background:none;color:var(--o-ink);text-decoration:underline;text-underline-offset:3px}
:is(.wop,.wop-modal) .wop-rep:active{background:none;color:#000}
:is(.wop,.wop-modal) .wop-rep:disabled{background:none;color:var(--o-muted);text-decoration:none;cursor:default;opacity:.7}
:is(.wop,.wop-modal) .wop-rep-opt{background:#fff;color:var(--o-ink);border:1px solid #c5c8cd}
:is(.wop,.wop-modal) .wop-rep-opt:hover{background:#fff;color:var(--o-ink);border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-rep-opt:active{background:#e6e7ea;color:var(--o-ink);border-color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-rep-cancel{background:none;border-color:transparent;color:var(--o-muted);text-decoration:underline;text-underline-offset:3px}
:is(.wop,.wop-modal) .wop-rep-cancel:hover{background:none;border-color:transparent;color:var(--o-ink)}
/* Cerrar, estrellas del formulario y miniaturas */


/* ===== FORMULARIO EN DOS PASOS (modal en el body) ===== */
.wop-modal-box{position:relative;background:#fff;width:100%;max-width:460px;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;padding:0;color:var(--o-ink);font-family:var(--o-body)}
.wop-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--o-ink);z-index:2}
.wop-sheet{display:flex;flex-direction:column;min-height:0;flex:1}
.wop-sh-h{padding:22px 24px 10px}
.wop-sh-h h3{font-size:20px;text-transform:uppercase;font-weight:var(--o-heavy);padding-right:36px}
.wop-prog{padding:0 24px 12px;display:flex;flex-direction:column;gap:6px}
.wop-prog-bar{display:flex;gap:6px}
.wop-prog-bar i{flex:1;height:4px;background:var(--o-line)}
.wop-prog-bar i.on{background:#f2d83b;box-shadow:inset 0 -1px 0 var(--o-ink)}
.wop-prog span{font:600 12px var(--o-body);color:var(--o-muted)}
.wop-prod{display:flex;gap:12px;align-items:center;padding:10px 24px;background:var(--o-mist);border-block:1px solid var(--o-line)}
.wop-prod img{width:44px;height:44px;object-fit:cover;display:block;flex:none}
.wop-prod b{display:block;font:700 13px/1.25 var(--o-body)}
.wop-prod small{font:700 11px var(--o-body);letter-spacing:.05em;text-transform:uppercase;color:var(--o-ok)}
.wop-sh-b{padding:18px 24px;display:flex;flex-direction:column;gap:18px;overflow-y:auto;flex:1;min-height:0}
.wop-q{display:flex;flex-direction:column;gap:8px;margin:0}
.wop-q>b,.wop-q>label{font:700 14px var(--o-body);color:var(--o-ink)}
.wop-q small{font:400 12px var(--o-body);color:var(--o-muted)}
.wop-q textarea,.wop-q input[type=text],.wop-q input[type=number]{width:100%;font:400 15px/1.45 var(--o-body);padding:12px;border:1px solid #c5c8cd;background:#fff;color:var(--o-ink);border-radius:0}
.wop-q textarea{resize:none}
.wop-pick{display:flex;gap:2px}
.wop-pick button{padding:2px;line-height:0;cursor:pointer;color:#cfd2d6}
.wop-pick button svg{width:40px;height:40px;display:block}
.wop-pick-l{font:700 13px var(--o-body);min-height:18px}
.wop-row{display:flex;flex-wrap:wrap;gap:8px}
.wop-ch{font:600 14px var(--o-body);padding:11px 15px;cursor:pointer;line-height:1.1}
.wop-extra{border:1px solid var(--o-line)}
.wop-extra>summary{cursor:pointer;list-style:none;padding:13px 14px;font:700 14px var(--o-body);display:flex;justify-content:space-between}
.wop-extra>summary::-webkit-details-marker{display:none}
.wop-extra>summary::after{content:'+';font-size:18px;line-height:1}
.wop-extra[open]>summary::after{content:'–'}
.wop-extra-b{padding:0 14px 16px;display:flex;flex-direction:column;gap:16px}
.wop-avs{display:flex;gap:10px}
.wop-av-o{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 14px;cursor:pointer;font:600 12px var(--o-body);min-width:84px}
.wop-av-o img{display:block;width:48px;height:48px;border-radius:50%}
.wop-photo-note{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--o-mist);font:400 13px/1.4 var(--o-body)}
.wop-photo-note img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.wop-sh-f{display:flex;gap:10px;padding:14px 24px 22px;border-top:1px solid var(--o-line);background:#fff}
.wop-sh-f .wop-btn{flex:1}
.wop-sh-f .wop-ghost{flex:0 0 auto}
.wop-pad{padding:26px 24px 24px}
.wop-pad .wop-ghost{margin-top:4px}
.wop-err{margin:0}
@media(max-width:768px){
  .wop-modal-box{border-radius:16px 16px 0 0;max-height:94dvh}
  .wop-modal-box::before{content:'';display:block;width:42px;height:4px;background:#c5c8cd;border-radius:2px;margin:10px auto 0;flex:none}
  .wop-sh-h{padding-top:12px}
  .wop-pick button svg{width:44px;height:44px}
  .wop-sh-f{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:769px){.wop-modal-box{max-height:90vh}}
@media(prefers-reduced-motion:no-preference){.wop-ch,.wop-av-o{transition:background-color .15s,border-color .15s,color .15s}}

/* estados (el tema pinta oscuro todo button:hover; aquí cada control declara los suyos) */
:is(.wop,.wop-modal) .wop-ch{background:var(--o-mist);color:var(--o-ink);border-width:2px!important;border-style:solid!important;border-color:transparent!important;border-radius:0!important}
:is(.wop,.wop-modal) .wop-ch:hover{background:#e6e7ea;color:var(--o-ink);border-color:transparent!important}
:is(.wop,.wop-modal) .wop-ch:active{background:#d9dbdf}
:is(.wop,.wop-modal) .wop-ch[aria-pressed=true],:is(.wop,.wop-modal) .wop-ch[aria-pressed=true]:hover{background:var(--o-ink);color:#fff;border-color:var(--o-ink)!important}
:is(.wop,.wop-modal) .wop-av-o{background:#fff;color:var(--o-ink);border-width:2px!important;border-style:solid!important;border-color:var(--o-line)!important;border-radius:0!important}
:is(.wop,.wop-modal) .wop-av-o:hover{background:var(--o-mist);color:var(--o-ink);border-color:#8a8d93!important}
:is(.wop,.wop-modal) .wop-av-o[aria-pressed=true],:is(.wop,.wop-modal) .wop-av-o[aria-pressed=true]:hover{background:#fff;border-color:var(--o-ink)!important;box-shadow:inset 0 0 0 1px var(--o-ink)}
:is(.wop,.wop-modal) .wop-pick button{background:none;color:#cfd2d6;border:0!important}
:is(.wop,.wop-modal) .wop-pick button:hover{background:none;color:#8a8d93}
:is(.wop,.wop-modal) .wop-pick button.on,:is(.wop,.wop-modal) .wop-pick button.on:hover{background:none;color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-ch:focus-visible,:is(.wop,.wop-modal) .wop-av-o:focus-visible,:is(.wop,.wop-modal) .wop-pick button:focus-visible,:is(.wop,.wop-modal) .wop-extra>summary:focus-visible{outline:3px solid var(--o-ink);outline-offset:2px}

@media(min-width:769px){.wop-modal{align-items:center}}
:is(.wop,.wop-modal) .wop-x{background:none;color:var(--o-ink);border:0!important}
:is(.wop,.wop-modal) .wop-x:hover{background:var(--o-mist);color:var(--o-ink)}
:is(.wop,.wop-modal) .wop-x:active{background:#e6e7ea}
.wop-pad h3{font-size:20px;text-transform:uppercase;font-weight:var(--o-heavy);padding-right:32px;margin:0 0 10px}
.wop-pad p{margin:0 0 14px;font-size:15px;line-height:1.5}

/* ===== Movil: menos scroll, controles en cuadricula, objetivos tactiles >=44px ===== */
@media(max-width:768px){
  .wop-sh-h{padding:10px 20px 8px}.wop-sh-h h3{font-size:18px}
  .wop-prog{padding:0 20px 10px}
  .wop-prod{padding:8px 20px}.wop-prod img{width:36px;height:36px}.wop-prod b{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .wop-sh-b{padding:14px 20px;gap:14px}
  .wop-sh-f{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))}
  .wop-q>b,.wop-q>label{font-size:13px}
  .wop-q textarea{font-size:16px;min-height:120px}
  .wop-q input[type=text],.wop-q input[type=number]{font-size:16px}
  .wop-pick{justify-content:space-between;max-width:300px}
  .wop-pick button svg{width:46px;height:46px}
  .wop-row[data-chips]{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
  .wop-row[data-chips="s"]{grid-template-columns:repeat(5,1fr)}
  .wop-row[data-chips="f"]{grid-template-columns:repeat(3,1fr)}
  .wop-row[data-chips] .wop-ch{min-height:44px;padding:8px 4px;font-size:12px;letter-spacing:0;text-align:center;display:flex;align-items:center;justify-content:center}
  .wop-row[data-chips="s"] .wop-ch{font-size:13px}
  .wop-sh-f .wop-btn,.wop-sh-f .wop-ghost{min-height:48px}
  .wop-av-o{min-width:0;flex:1}
}

/* ===== Movil: tarjetas de opinion y resumen compacto ===== */
@media(max-width:768px){
  .wop-grid{gap:16px}
  .wop-sum{gap:14px;padding:16px;border:1px solid var(--o-line);background:#fff}
  .wop-avg{align-items:center;gap:12px}
  .wop-avg b{font-size:44px}
  .wop-avg>div,.wop-avg span{margin:0}
  .wop-bar{padding:2px 0;font-size:12px;grid-template-columns:30px 1fr 36px}
  .wop-bar i{height:6px}
  .wop-fit p{margin:2px 0 8px}
  .wop-list{display:flex;flex-direction:column;gap:12px}
  .wop-r{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--o-line);border-top:1px solid var(--o-line);background:#fff}
  .wop-who{gap:10px}
  .wop-av{width:40px;height:40px}
  .wop-av-i{font-size:17px}
  .wop-who-t{display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center;flex:1;min-width:0}
  .wop-who-t b{font-size:14px;grid-column:1}
  .wop-who-t .wop-date{grid-column:2;grid-row:1;font-size:12px}
  .wop-who-t .wop-city{grid-column:1;font-size:12px}
  .wop-who-t .wop-vb{grid-column:2;grid-row:2;justify-self:end;font-size:10px}
  .wop-body h4{font-size:15px;margin:4px 0 2px}
  .wop-body p{font-size:14px;line-height:1.5;margin-top:4px}
  .wop-attr{gap:5px;margin-top:8px}
  .wop-attr span{font-size:11.5px;padding:3px 8px}
  .wop-help{margin-top:10px;padding-top:10px;border-top:1px solid var(--o-line)}
  .wop-vote{min-height:40px}
  .wop-reply{margin:6px 0 0}
  .wop-more-wrap{margin-top:14px}
  .wop-more{width:100%;min-height:48px}
}

.wop-q-sm input[type=number]{max-width:170px}
.wop-q label small{font:400 12px var(--o-body);color:var(--o-muted)}
@media(max-width:768px){.wop-av-o{flex-direction:row!important;justify-content:center;gap:10px!important;padding:8px 10px!important;min-height:52px}.wop-av-o img{width:36px;height:36px}.wop-q-sm input[type=number]{max-width:none}}

.wop-av-o img{object-fit:cover}
@media(max-width:768px){.wop-avs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.wop-av-o{padding:8px 6px!important;gap:8px!important}}

:is(.wop,.wop-modal) .wop-x{display:flex!important;align-items:center;justify-content:center;padding:0!important;width:40px;height:40px;top:10px;right:12px;background:transparent!important;color:var(--o-ink)!important;border:0!important;border-radius:50%!important;line-height:0;box-shadow:none}
:is(.wop,.wop-modal) .wop-x:hover,:is(.wop,.wop-modal) .wop-x:active{background:var(--o-mist)!important}
:is(.wop,.wop-modal) .wop-x:focus-visible{outline:3px solid var(--o-ink);outline-offset:1px}
.wop-x svg{display:block}

/* ===== Sin opiniones: invitar en lugar de mostrar ceros ===== */
.wop--empty .wop-grid,.wop--empty .wop-top .wop-write{display:none}
.wop-empty-card{display:flex;align-items:center;gap:20px;padding:24px;border:1px solid var(--o-line);background:#fff;flex-wrap:wrap}
.wop-ec-ico{flex:none;width:52px;height:52px;display:grid;place-items:center;background:#f2d83b;color:var(--o-ink)}
.wop-ec-t{flex:1 1 260px;min-width:0}
.wop-ec-t h3{font:var(--o-heavy) 18px/1.2 var(--o-head);text-transform:uppercase;margin:0 0 4px}
.wop-ec-t p{margin:0;font-size:14px;line-height:1.5;color:var(--o-muted)}
.wop-empty-card .wop-write{flex:none}
.wop-ec-fact{flex:1 0 100%;margin:0;padding-top:14px;border-top:1px solid var(--o-line);font-size:13px;color:var(--o-muted)}
.wop-ec-fact b{color:var(--o-ink)}
.wop-head-first{font-size:13px;color:var(--o-muted)!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:768px){.wop-empty-card{padding:18px;gap:14px}.wop-empty-card .wop-write{width:100%}}
.wop--empty .wop-top p{display:none}