/* Opiniones: estilos propios de opiniones.html. Colores y tipografia vienen de marca.css (claro y oscuro). */

.op-hero{padding-block:var(--space-10) var(--space-6)}
.op-hero .lead{max-width:var(--reading)}
.op-section{padding-block:var(--space-10)}
.op-section--tint{background:var(--paper-2)}
.op-wrap{max-width:760px;min-width:0}
.op-wrap>h2{margin-bottom:var(--space-2)}
.op-wrap>p.muted{margin-bottom:var(--space-6)}

/* Lista de opiniones */
.op-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.op-card{background:var(--card);border:1px solid var(--gold);border-radius:var(--radius-group);box-shadow:var(--shadow-group);padding:var(--space-5);display:grid;gap:var(--space-3);min-width:0;overflow-wrap:anywhere}
.op-card__head{display:grid;gap:var(--space-1)}
.op-card__name{font-family:var(--serif-d,Georgia,serif);font-size:1.35rem;font-weight:600;line-height:1.25;color:var(--ink);margin:0}
.op-card__meta{margin:0;font-size:var(--text-subhead);color:var(--muted)}
.op-stars{margin:0;color:var(--gold-text);font-size:1.1rem;letter-spacing:.14em;line-height:1}
.op-card__texto{margin:0;color:var(--ink-2);white-space:pre-line}
.op-card__reply{display:grid;gap:var(--space-1);background:var(--paper-2);border-left:3px solid var(--gold);border-radius:var(--radius-control);padding:var(--space-3) var(--space-4)}
.op-card__reply p{margin:0}
.op-card__reply-label{font-size:var(--text-footnote);font-weight:600;color:var(--sage)}
.op-card__reply p:last-child{color:var(--ink-2)}

/* Formulario */
.op-form{min-width:0;gap:var(--space-5);margin-top:var(--space-6)}
.op-form .form-group{background:var(--card);border-color:var(--gold)}
.op-form .field{border-bottom-color:var(--line);min-width:0}
.op-form .field input:not([type="checkbox"]),
.op-form .field select,
.op-form .field textarea{background:var(--paper);color:var(--ink);border-color:var(--muted)}
.op-form .field input:focus,
.op-form .field select:focus,
.op-form .field textarea:focus{outline-color:var(--color-focus)}
.op-form .field--check input{accent-color:var(--sage)}
.op-form .field--check a{color:var(--sage)}
.op-resumen{margin-top:var(--space-5)}
.op-contador{margin:0;text-align:right;font-size:var(--text-footnote);color:var(--muted)}

/* Estrellas: radios nativos (teclado con flechas) con aspecto de estrella */
.op-estrellas-field{border:0;margin:0;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);min-width:0}
.op-estrellas-field legend{padding:0;margin-bottom:var(--space-1);font-size:var(--text-callout);font-weight:600}
.op-estrellas{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)}
.op-estrella{position:relative;display:inline-grid;place-items:center;min-width:var(--touch);min-height:var(--touch);font-size:2rem;line-height:1;color:var(--muted);opacity:.4;cursor:pointer;border-radius:10px}
.op-estrella.is-on{color:var(--gold);opacity:1}
.op-estrella input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.op-estrella:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}
.op-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Campo trampa (anti spam): fuera de pantalla, sin foco */
.op-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.op-form>.btn--primary{margin-top:var(--space-1)}
@media (min-width:640px){
  .op-form>.btn--primary{width:auto;min-width:240px;align-self:start}
}
@media (min-width:900px){
  .op-section{padding-block:5rem}
  .op-hero{padding-block:var(--space-12) var(--space-8)}
}

:root[data-theme="dark"] .op-form select{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .op-form select option{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .op-card{box-shadow:none}
:root[data-theme="dark"] .op-estrella.is-on{color:var(--gold)}