/* El formulario de opinión y su «Gracias» (diseño «Escribir Opinion» de Claude
   Design, tmp/badges/diseno/Escribir Opinion.dc.html). Cabecera y pie, los del
   sitio. Sin JS se ve y funciona: los radios y casillas van ocultos a la vista
   pero no al teclado, y las etiquetas cambian con :checked. */

.op { background: #F7F5F1; color: #16202E; font-family: var(--lt-font-body, Manrope, sans-serif); }
.op a { color: #C54343; text-decoration: none; }
.op a:hover { color: #B23F3F; }
.op-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Cabecera oscura ── */
.op-hero { position: relative; overflow: hidden; background: #16202E; color: #FFFFFF; }
.op-hero__rombo { position: absolute; transform: rotate(45deg); }
.op-hero__rombo--g { right: -90px; top: -120px; width: 300px; height: 300px; border-radius: 56px; background: #1D2A3B; }
.op-hero__rombo--p { right: 150px; top: 54px; width: 14px; height: 14px; border-radius: 4px; background: #C94F4F; }
.op-hero__in { position: relative; max-width: 1136px; margin: 0 auto; padding: 44px 32px 120px;
  display: flex; flex-direction: column; gap: 22px; }
.op-hero--corta .op-hero__in { padding-bottom: 110px; }
.op-hero__despacho { display: flex; align-items: center; gap: 16px; }
.op-hero__logo { width: 60px; height: 60px; flex: none; border-radius: 14px; overflow: hidden; background: #FFFFFF;
  display: grid; place-items: center; color: #16202E; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 600; font-size: 20px; }
.op-hero__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-hero__datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-hero__nombre { font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 17px; }
.op-hero__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #B4BDCA; }
.op-hero__nota strong { color: #FFFFFF; }
.op-hero__sep { width: 1px; height: 12px; background: #3A4D66; }
.op-hero__h { margin: 0; max-width: 760px; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600;
  font-size: 48px; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; color: #FFFFFF; }
.op-hero__h span { color: #E07A6B; }
.op-hero__p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: #B4BDCA; }

/* ── Tejas (las de Tejas.dc.html) ── */
.op-tj { display: inline-flex; gap: calc(var(--l) / 12); --l: 20px; }
.op-tj i { position: relative; width: var(--l); height: var(--l); border-radius: 3px; background: #E7E2DA; }
.op-tj i.on { background: #C54343; }
.op-tj svg { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; fill: #FFFFFF; }
.op-tj--14 { --l: 14px; }
.op-tj--20 { --l: 20px; }
.op-tj--28 { --l: 28px; }
.op-tj--dark i { background: #2A3A4E; }
.op-tj--dark i.on { background: #C54343; }
.op-tj--dark i:not(.on) svg { fill: #4A5C73; }

/* ── El cuerpo: tarjeta y lateral ── */
.op-cuerpo { position: relative; max-width: 1136px; margin: -84px auto 80px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.op-form { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; border-radius: 20px;
  background: #FFFFFF; border: 1px solid #E7E2DA; box-shadow: 0 24px 60px rgba(22, 32, 46, .10); overflow: hidden; }
.op-errores { padding: 14px 32px; background: #FBEDEA; color: #8C2F2F; font-size: 14px; font-weight: 600; }
.op-errores p { margin: 0; }
.op-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #5B6472; }

.op-nota { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 36px 32px 32px;
  text-align: center; border: 0; border-bottom: 1px solid #EFEBE5; }
.op-nota legend { float: left; width: 100%; padding: 0; margin: 0; }
.op-tejas { display: flex; gap: 8px; }
.op-teja { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 6px; background: #E7E2DA;
  cursor: pointer; transition: background .15s ease, transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.op-teja svg { fill: #FFFFFF; }
/* Sin JS: la marcada y las de su izquierda en rojo (las tejas van 1..5; :has). */
:not(.op-js) > .op-tejas:has(#op-n1:checked) .op-teja[data-n="1"],
:not(.op-js) > .op-tejas:has(#op-n2:checked) .op-teja:is([data-n="1"], [data-n="2"]),
:not(.op-js) > .op-tejas:has(#op-n3:checked) .op-teja:is([data-n="1"], [data-n="2"], [data-n="3"]),
:not(.op-js) > .op-tejas:has(#op-n4:checked) .op-teja:not([data-n="5"]),
:not(.op-js) > .op-tejas:has(#op-n5:checked) .op-teja { background: #C54343; }
.op-tejas input:focus-visible + .op-teja { outline: 2px solid #16202E; outline-offset: 3px; }
.op-tejas input:checked + .op-teja { transform: scale(1.04); }
/* Con JS: lo pinta opinar.js (hover incluido). */
.op-js .op-tejas .op-teja { background: #E7E2DA; }
.op-js .op-tejas .op-teja.is-on { background: #C54343; }
.op-js .op-tejas .op-teja.is-hover { transform: scale(1.1); }
.op-palabra { display: flex; flex-direction: column; gap: 4px; min-height: 48px; }
.op-palabra__w { font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 24px;
  letter-spacing: -0.02em; color: #16202E; }
.op-palabra__w.is-vacia { color: #666D7A; }
.op-palabra__p { font-size: 13px; color: #5B6472; }

.op-campos { display: flex; flex-direction: column; gap: 26px; padding: 32px; transition: opacity .25s ease; }
.op-js .op-campos.is-apagado { opacity: .55; }
.op-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #F7F5F1;
  font-size: 13.5px; line-height: 1.5; color: #3A4452; }
.op-aviso svg { flex: none; margin-top: 1px; }

.op-grupo { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.op-grupo legend { padding: 0; margin-bottom: 10px; }
.op-label { font-size: 14px; font-weight: 800; color: #16202E; }
.op-opcional { font-weight: 600; color: #5B6472; }
.op-ayuda { font-size: 12.5px; color: #5B6472; }
.op-input { height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #E7E2DA; background: #FFFFFF;
  font-family: inherit; font-size: 15px; color: #16202E; outline: none; width: 100%; box-sizing: border-box; }
.op-input::placeholder { color: #A3A9B2; }
.op-input:focus { border-color: #16202E; box-shadow: 0 0 0 4px rgba(22, 32, 46, .08); }
.op-textarea { height: auto; min-height: 150px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.op-select { height: 44px; max-width: 280px; }
.is-error .op-input, .op-input.is-error { border-color: #C54343; }
.op-error { margin: 0; font-size: 13px; font-weight: 700; color: #C54343; }

.op-barra { display: flex; align-items: center; gap: 12px; }
.op-barra__pista { flex: 1; height: 4px; border-radius: 2px; background: #EFEBE5; overflow: hidden; }
.op-barra__lleno { display: block; height: 4px; width: 0; background: #A3A9B2; transition: width .2s ease, background .2s ease; }
.op-barra__txt { font-size: 12.5px; font-weight: 700; color: #666D7A; white-space: nowrap; }
.op-barra.is-corto .op-barra__lleno { background: #C54343; }
.op-barra.is-corto .op-barra__txt { color: #C54343; }
.op-barra.is-ok .op-barra__lleno { background: #2F6B45; }
.op-barra.is-ok .op-barra__txt { color: #2F6B45; }

.op-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.op-pill { position: relative; cursor: pointer; }
.op-pill span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid #E7E2DA; background: #FFFFFF; color: #16202E; font-size: 13.5px; font-weight: 700; }
.op-chip span { height: 38px; border-radius: 999px; }
.op-chip i { width: 7px; height: 7px; border-radius: 2px; background: #D6CFC4; transform: rotate(45deg); }
.op-pill input:checked + span { background: #16202E; border-color: #16202E; color: #FFFFFF; }
.op-chip input:checked + span i { background: #E07A6B; }
.op-pill input:focus-visible + span { outline: 2px solid #16202E; outline-offset: 2px; }
.op-pill input:disabled + span { opacity: .45; cursor: not-allowed; }
.op-antes { margin-top: 10px; }
.op-js .op-antes.is-oculto { display: none; }

/* La edad y las condiciones van juntas, más pegadas que el resto de campos. */
.op-casillas { display: flex; flex-direction: column; gap: 14px; }
.op-casilla { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: #3A4452; cursor: pointer; }
.op-casilla__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid #C9C2B7; background: #FFFFFF; }
.op-casilla__box svg { opacity: 0; }
.op-casilla input:checked + .op-casilla__box { background: #16202E; border-color: #16202E; }
.op-casilla input:checked + .op-casilla__box svg { opacity: 1; }
.op-casilla input:focus-visible + .op-casilla__box { outline: 2px solid #16202E; outline-offset: 2px; }
.op-casilla.is-error .op-casilla__box { border-color: #C54343; }

.op-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; }
.op-boton { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border: none;
  border-radius: 12px; background: #C54343; color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 800;
  cursor: pointer; transition: background .15s ease; }
.op-boton:hover { background: #B23F3F; color: #FFFFFF; }
.op-js .op-boton.is-incompleto { background: #E7E2DA; color: #4A5260; }
.op-falta { font-size: 13px; font-weight: 600; color: #5B6472; }

/* ── Lateral ── */
.op-lado { flex: 1 1 300px; max-width: 380px; min-width: 0; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.op-previa { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: #FFFFFF;
  border: 1px solid #E7E2DA; box-shadow: 0 24px 60px rgba(22, 32, 46, .08); }
.op-previa__quien { display: flex; align-items: center; gap: 12px; }
.op-previa__ini { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: #16202E; color: #FFFFFF; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 15px; }
.op-previa__nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: #5B6472; }
.op-previa__nom strong { font-size: 14px; font-weight: 800; color: #16202E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-previa__tit { font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 17px; line-height: 1.25;
  color: #16202E; overflow-wrap: anywhere; }
.op-previa__txt { font-size: 14px; line-height: 1.55; color: #3A4452; display: -webkit-box; -webkit-line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.op-previa__tit.is-vacio, .op-previa__txt.is-vacio { color: #666D7A; }
.op-previa__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-previa__chips:empty { display: none; }
.op-previa__chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: #F1EDE7; font-size: 12px; font-weight: 700; }
.op-previa__sello { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #EFEBE5;
  font-size: 12px; font-weight: 600; color: #5B6472; }
.op-reglas { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: #EFEBE5; }
.op-reglas__h { font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 15px; }
.op-regla { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: #3A4452; }
.op-regla i { flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 2px; background: #C54343; transform: rotate(45deg); }
.op-reglas__mas { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; font-weight: 700; }
.op .op-reglas__mas { color: #A83A3A; }  /* el rojo de marca no llega a 4,5:1 sobre #EFEBE5 */

/* ── Gracias ── */
.op-gracias { position: relative; max-width: 640px; margin: -80px auto 80px; padding: 0 24px; }
.op-gracias__card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 48px 36px; border-radius: 20px;
  background: #FFFFFF; border: 1px solid #E7E2DA; box-shadow: 0 24px 60px rgba(22, 32, 46, .12); text-align: center; }
.op-gracias__card h2 { margin: 0; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 30px; letter-spacing: -0.025em; }
.op-gracias__card p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.55; color: #5B6472; }
.op-gracias__rombo { display: grid; place-items: center; width: 64px; height: 64px; }
.op-gracias__rombo > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #C54343; transform: rotate(45deg); }
.op-gracias__rombo svg { transform: rotate(-45deg); }
.op-gracias__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.op-boton--oscuro, .op .op-boton--oscuro { height: 46px; padding: 0 20px; border-radius: 10px; background: #16202E; color: #FFFFFF; font-size: 14px; }
.op .op-boton--oscuro:hover { background: #0E1622; color: #FFFFFF; }
.op .op-boton--claro { height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid #E7E2DA; background: #FFFFFF; color: #16202E; font-size: 14px; }

/* ── Gestionar (gestionar*.html): las mismas piezas, en tarjetas por opinión ── */
.op-eyebrow--hero { color: #E07A6B; }
/* La cabecera, alineada con las tarjetas de debajo (760 la lista, 640 pedir y abrir). */
.op-hero--gest .op-hero__in { max-width: 760px; padding-left: 24px; padding-right: 24px; }
.op-hero--estrecha .op-hero__in { max-width: 640px; }
.op .op-boton--claro:hover { background: #F7F5F1; color: #16202E; }
.op-boton--peligro, .op .op-boton--peligro { color: #A83A3A; }
.op .op-boton--rojo { height: 46px; padding: 0 20px; border-radius: 10px; font-size: 14px; }
.op-boton svg { margin-right: 8px; flex: none; }
.op-gest { position: relative; max-width: 760px; margin: -84px auto 80px; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
.op-gest__msg { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: #EAF4EE;
  border: 1px solid #CFE5D7; color: #1F4D30; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(22, 32, 46, .08); }
.op-gest__card { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 20px; background: #FFFFFF;
  border: 1px solid #E7E2DA; box-shadow: 0 24px 60px rgba(22, 32, 46, .10); scroll-margin-top: 96px; }
.op-gest__cab { display: flex; align-items: center; gap: 14px; }
.op-gest__logo { width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden; background: #16202E; color: #FFFFFF;
  display: grid; place-items: center; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 16px; }
.op-gest__logo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #FFFFFF; }
.op-gest__despacho { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.op-gest__despacho strong { font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 17px; color: #16202E; }
.op-gest__despacho span { font-size: 13px; color: #5B6472; }
.op-estado { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.op-estado::before { content: ''; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: currentColor; }
.op-estado--pendiente { background: #FBF3E4; color: #7A5A1F; }
.op-estado--devuelta { background: #FBEDEA; color: #A83A3A; }
.op-estado--publicada { background: #EAF4EE; color: #2F6B45; }
.op-estado--apagada { background: #F1EDE7; color: #5B6472; }
.op-aviso--rojo { background: #FBEDEA; color: #6E2626; }
.op-gest__vista { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 14px; background: #F7F5F1; }
.op-gest__card:has(.op-gest__editar[open]) .op-gest__vista { display: none; }
.op-gest__nota { display: flex; align-items: center; gap: 10px; }
.op-gest__palabra { font-size: 13px; font-weight: 800; color: #16202E; }
.op-gest__tit { margin: 0; font-family: var(--lt-font-head, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 19px;
  line-height: 1.25; letter-spacing: -0.01em; color: #16202E; overflow-wrap: anywhere; }
.op-gest__txt { margin: 0; font-size: 15px; line-height: 1.6; color: #3A4452; white-space: pre-line; overflow-wrap: anywhere; }
.op-gest__meta { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: #5B6472; }
.op-gest__acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.op-gest__acciones summary { list-style: none; }
.op-gest__acciones summary::-webkit-details-marker { display: none; }
.op-gest__editar[open] { flex: 1 1 100%; order: -1; }
.op-gest__editar[open] > summary { display: none; }
.op-gest__form { display: flex; flex-direction: column; border: 1px solid #EFEBE5; border-radius: 16px; overflow: hidden; }
.op-errores--caja { padding: 14px 20px; }
.op-nota--gest { padding: 28px 20px 24px; }
.op-campos--gest { padding: 24px 20px; gap: 22px; }
.op-gest__borrar[open] { flex: 1 1 100%; }
.op-gest__borrar[open] > summary { display: none; }
.op-gest__confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: #FBEDEA; }
.op-gest__confirmar p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.5; color: #6E2626; }
.op-gest__confirmar strong { color: #6E2626; }
.op-gest__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.op-gest__vacia { align-items: flex-start; }
.op-gest__alta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 14px; line-height: 1.5; color: #3A4452; }
.op-gest__alta strong { color: #16202E; }
.op-gest__pedir { align-items: stretch; text-align: left; gap: 20px; }
.op-gest__pedir .op-boton { align-self: flex-start; }
.op-gracias__card .op-gest__nota-pie { margin: 0; max-width: none; font-size: 12.5px; color: #5B6472; }
.op-gest__ayuda { display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 420px; }
/* Sin JS, las tejas del editor (con id propios por opinión) se pintan por valor. */
:not(.op-js) > .op-tejas:has(input[value="1"]:checked) .op-teja[data-n="1"],
:not(.op-js) > .op-tejas:has(input[value="2"]:checked) .op-teja:is([data-n="1"], [data-n="2"]),
:not(.op-js) > .op-tejas:has(input[value="3"]:checked) .op-teja:is([data-n="1"], [data-n="2"], [data-n="3"]),
:not(.op-js) > .op-tejas:has(input[value="4"]:checked) .op-teja:not([data-n="5"]),
:not(.op-js) > .op-tejas:has(input[value="5"]:checked) .op-teja { background: #C54343; }

/* ── Móvil ── */
@media (max-width: 760px) {
  .op-hero__in { padding: 28px 16px 104px; gap: 16px; }
  .op-hero__h { font-size: 32px; }
  .op-hero__p { font-size: 15px; }
  .op-hero__rombo--g { right: -150px; top: -170px; }
  .op-hero__rombo--p { right: 40px; top: 30px; }
  .op-cuerpo { padding: 0 16px; margin-top: -84px; }
  .op-form { flex-basis: 100%; }
  .op-lado { position: static; max-width: none; flex-basis: 100%; }
  .op-nota { padding: 28px 16px 24px; }
  .op-campos { padding: 24px 16px; }
  .op-errores { padding: 14px 16px; }
  .op-tejas { gap: 6px; }
  .op-teja { width: 52px; height: 52px; }
  .op-teja svg { width: 34px; height: 34px; }
  .op-gracias { padding: 0 16px; }
  .op-gracias__card { padding: 36px 20px; }
  .op-hero--gest .op-hero__in { padding-left: 16px; padding-right: 16px; }
  .op-gest { padding: 0 16px; }
  .op-gest__card { padding: 20px 16px; }
  .op-gest__cab { flex-wrap: wrap; }
  .op-nota--gest { padding: 24px 12px 20px; }
  .op-campos--gest { padding: 20px 14px; }
}

/* Reducir movimiento (WCAG 2.3.3): sin el rebote de la estrella ni las
   transiciones de los campos y de la barra. */
@media (prefers-reduced-motion: reduce) {
  .op-teja, .op-campos, .op-barra__lleno, .op-boton { transition: none; }
}