.pulgares{display:flex;flex-direction:column;gap:8px}
.pulgares-fila{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.pulgares-pregunta{margin-right:4px;font-size:14px;font-weight:800;color:var(--color-tinta-2)}
.pulgar{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  border-radius:var(--radius-pill);background:transparent;box-shadow:none;color:var(--color-tinta-2);
  cursor:pointer}
.pulgar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pulgar-abajo svg{transform:rotate(180deg)}
.pulgar:focus-visible{outline:3px solid var(--color-azul);outline-offset:2px}
.pulgar[aria-pressed="true"]{background:var(--color-azul-hondo);color:var(--color-lima)}
.pulgares[data-mandando] .pulgar{cursor:progress}
.pulgares-estado{font-size:14px;font-weight:800;color:var(--color-tinta-2)}
.pulgares-estado.es-error,.falto-estado.es-error,.opinar-estado.es-error{color:var(--color-mal)}

.falto{display:grid;gap:6px;max-width:520px;padding:12px 14px;border-radius:22px;
  background:var(--color-papel);box-shadow:var(--shadow-suave)}
.falto[hidden]{display:none}
.falto-etiqueta,.opinar-etiqueta{font-size:15px;font-weight:900;color:var(--color-azul-hondo)}
.falto-texto,.opinar-texto{width:100%;box-sizing:border-box;padding:10px 14px;border:2px solid var(--color-linea);
  border-radius:16px;background:var(--color-niebla);font:inherit;font-size:16px;color:var(--color-tinta);
  resize:none}
.falto-texto:focus-visible,.opinar-texto:focus-visible{outline:none;border-color:var(--color-azul)}
.falto-texto::placeholder,.opinar-texto::placeholder{color:var(--color-sugerencia);opacity:1}
.opinar-aviso{margin:0;font-size:13px;font-weight:700;color:var(--color-tinta-2)}
.falto-enviar,.opinar-enviar{justify-self:start;display:inline-flex;align-items:center;min-height:44px;
  padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--color-azul);
  color:var(--color-sobre-azul);font:inherit;font-size:15px;font-weight:900;cursor:pointer}
.falto-enviar:focus-visible,.opinar-enviar:focus-visible{outline:3px solid var(--color-azul-hondo);outline-offset:2px}
.falto-enviar:disabled,.opinar-enviar:disabled{opacity:.6;cursor:progress}
.falto-estado,.opinar-estado{margin:0;font-size:14px;font-weight:800;color:var(--color-tinta-2)}
.falto-estado:empty,.opinar-estado:empty{display:none}
.falto-gracias{margin:0;font-size:14px;font-weight:800;color:var(--color-tinta-2)}

.opinar{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;
  border-radius:30px;background:var(--color-papel);color:var(--color-tinta);font-family:var(--font-sans);
  box-shadow:var(--shadow-alta)}
.opinar::backdrop{background:rgb(14 26 107 / .45)}
.opinar-caja{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px}
.opinar-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opinar-titulo{margin:0;font-family:var(--font-titulo);font-size:28px;font-weight:700;line-height:1.05;
  color:var(--color-azul-hondo)}
.opinar-cerrar{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-8px;
  padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-azul-hondo);
  cursor:pointer}
.opinar-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.opinar-cerrar:focus-visible{outline:3px solid var(--color-azul);outline-offset:2px}
.opinar-forma{display:grid;gap:8px}
.opinar-forma[hidden],.opinar-gracias[hidden]{display:none}
.opinar-enviar{margin-top:4px}
.opinar-gracias{display:grid;gap:12px}
.opinar-gracias p{margin:0;font-size:17px;font-weight:800;color:var(--color-azul-hondo)}

@media (hover:hover) and (pointer:fine){
  .pulgar:hover{background:var(--color-bruma);color:var(--color-azul-hondo)}
  .pulgar[aria-pressed="true"]:hover{background:var(--color-azul-hondo);color:var(--color-lima)}
  .falto-enviar:hover,.opinar-enviar:hover{background:var(--color-azul-hondo)}
  .opinar-cerrar:hover{background:var(--color-niebla)}
}

@media (prefers-reduced-motion: no-preference){
  .opinar[open]{animation:opinar-entra 200ms cubic-bezier(0.23, 1, 0.32, 1)}
  .opinar[open]::backdrop{animation:opinar-fondo 200ms ease}
}
@keyframes opinar-entra{from{opacity:0;scale:.96}}
@keyframes opinar-fondo{from{opacity:0}}