/* Opiniones de usuarios de Atlas en la ficha (src/templates/opiniones.mjs + assets/js/opiniones.js).
   Bloque discreto: sin opiniones es una sola línea. Tokens de site.css (claro/oscuro). */
.op [hidden] { display: none !important; }
.op { min-inline-size: 0; }
.op-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 0; padding-block: .9rem; border-block: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.op-cta { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 44px; padding-inline: .1rem; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.op-cta::after { content: "→"; text-decoration: none; transition: translate .2s var(--ease); }
.op-cta:hover::after { translate: 3px 0; }
.op--open .op-line { border-block-end-color: transparent; }

.op-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; }
.op-head h2 { margin: 0; }
.op-sum { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .95rem; color: var(--muted); }
.op-avg { font: 400 1.9rem/1 var(--ff-display); color: var(--ink); }
.op-note { margin: .45rem 0 0; font-size: .85rem; color: var(--muted); max-inline-size: 62ch; }
.op-stars { display: inline-flex; gap: 1px; font-size: .95rem; line-height: 1; letter-spacing: 0; }
.op-stars i { font-style: normal; color: color-mix(in srgb, var(--ink) 18%, transparent); }
.op-stars i.on { color: var(--ochre); }
:root[data-theme="dark"] .op-stars i.on { color: var(--sand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-stars i.on { color: var(--sand); } }

.op-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; }
.op-item { padding-block: 1rem; border-block-start: 1px solid var(--line); min-inline-size: 0; }
.op-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.op-who { font-weight: 600; }
.op-when { color: var(--muted); font: 400 .78rem/1.3 var(--ff-mono); letter-spacing: .02em; }
.op-text { margin: .45rem 0 0; white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 70ch; }
.op-in { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }
.op-more { border-block-start: 1px solid var(--line); }
.op-more > summary { display: flex; align-items: center; min-block-size: 44px; cursor: pointer; color: var(--accent-ink); font-weight: 600; list-style: none; }
.op-more > summary::-webkit-details-marker { display: none; }
.op-more > summary::after { content: "+"; margin-inline-start: .5rem; font: 500 1.1rem/1 var(--ff-mono); }
.op-more[open] > summary::after { content: "−"; }
.op-more .op-list { margin: 0; }
.op-actions { margin: .8rem 0 0; }
.op--gone .op-actions { margin-block-start: 0; }

/* panel desplegable: invitación, tu opinión y formulario */
.op-panel { margin-block-start: .9rem; }
.op-card { display: grid; gap: .7rem; padding: clamp(1rem, 2.6vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); min-inline-size: 0; animation: op-in .35s var(--ease) both; }
.op-card > * { margin: 0; }
.op-card h3 { font-size: 1.15rem; }
.op-card h3:focus-visible { outline: none; }
.op-login { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 560px) { .op-login { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.op-wait { color: var(--muted); margin: 0; }
.op-mine-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.op-state { padding: .25rem .6rem; border-radius: 999px; font: 700 .72rem/1 var(--ff-mono); letter-spacing: .05em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); }
.op-state--aprobada { background: color-mix(in srgb, var(--verd) 16%, var(--surface)); color: color-mix(in srgb, var(--verd) 70%, var(--ink)); }
.op-state--rechazada { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.op-form label, .op-lbl, .op-rate legend { display: block; font-weight: 600; font-size: .95rem; margin-block-end: .35rem; padding: 0; }
.op-rate { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.op-rate-in { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.op-rate input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.op-rate label { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin: 0; border-radius: var(--r); cursor: pointer; font-size: 1.7rem; line-height: 1; color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .15s, transform .15s var(--ease); }
.op-rate label i { font-style: normal; }
.op-rate input:checked ~ label, .op-rate label:hover, .op-rate label:hover ~ label { color: var(--ochre); }
.op-rate input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
.op-rate label:active { transform: scale(.92); }
.op-form textarea, .op-form select { inline-size: 100%; max-inline-size: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 25%, var(--line)); border-radius: var(--r); padding: .65rem .8rem; }
.op-form select { min-block-size: 44px; padding-block: .4rem; }
.op-form textarea { min-block-size: 8.5rem; resize: vertical; line-height: 1.5; }
.op-form textarea:focus-visible, .op-form select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.op-hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .82rem; color: var(--muted); margin-block-start: -.3rem !important; }
.op-count { font-family: var(--ff-mono); }
.op-count.bad { color: var(--bad); }
.op-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .8rem 1rem; }
.op-when-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem; }
@media (max-width: 560px) { .op-two { grid-template-columns: minmax(0, 1fr); } }
.op-as, .op-rules { font-size: .86rem; color: var(--muted); }
.op-as a, .op-rules a { color: var(--accent-ink); }
.op-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.op-link { min-block-size: 44px; padding: 0 .2rem; border: 0; background: none; color: var(--muted); font: 600 .9rem/1 var(--ff); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.op-link:hover { color: var(--ink); }
.op-link.bad { color: var(--bad); }
.op-msg { font-size: .9rem; min-block-size: 0; }
.op-msg:empty { display: none; }
.op-msg.ok { color: color-mix(in srgb, var(--verd) 75%, var(--ink)); font-weight: 600; }
.op-msg.bad { color: var(--bad); font-weight: 600; }
@keyframes op-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .op-card { animation: none; } .op-cta::after, .op-rate label { transition: none; } }