/* Versión de prueba: franja de aviso y botón «Danos tu opinión». Mismos tokens que la portada
   (marino, amarillo, hueso, Teko + Work Sans); se cargan con respaldo por si una página no los define. */
.op-franja, .op-flotante, .op-panel {
  --op-marino: var(--marino, #0D1537);
  --op-amarillo: var(--amarillo, #FFE800);
  --op-hueso: var(--hueso, #F7F4EE);
  --op-hueso-2: var(--hueso-2, #EFEADF);
  --op-gris: var(--gris, #555B72);
  --op-linea: var(--linea, rgba(13,21,55,.12));
  --op-azul: var(--azul, #1C66B3);
  --op-display: var(--display, "Teko", "Arial Narrow", sans-serif);
  --op-texto: var(--texto, "Work Sans", "Segoe UI", system-ui, sans-serif);
  font-family: var(--op-texto);
}

/* ---- Franja ---------------------------------------------------------------------------- */
.op-franja { background: var(--op-hueso-2); color: var(--op-marino); border-bottom: 1px solid var(--op-linea); font-size: .84rem; line-height: 1.35; }
.op-franja-fila { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 6px 14px; flex-wrap: wrap; text-align: center; }
.op-franja-sello { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.op-franja-sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--op-amarillo); box-shadow: 0 0 0 1px rgba(13,21,55,.35); }
.op-franja-texto { color: var(--op-gris); }
.op-franja-boton { border: 0; background: none; padding: 0; color: var(--op-marino); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--op-amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.op-franja-boton:hover { text-decoration-color: var(--op-marino); }
@media (max-width: 520px) {
  .op-franja { font-size: .78rem; }
  .op-franja-extra { display: none; }
}

/* ---- Botón flotante -------------------------------------------------------------------- */
.op-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; background: #fff; color: var(--op-marino); padding: 10px 16px 10px 13px; font-size: .88rem; font-weight: 600;
  box-shadow: 0 0 0 1px var(--op-linea), 0 12px 28px rgba(13,21,55,.16); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.op-flotante:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--op-marino), 0 16px 32px rgba(13,21,55,.2); }
.op-flotante svg { width: 18px; height: 18px; fill: var(--op-amarillo); stroke: var(--op-marino); stroke-width: 1.6; stroke-linejoin: round; flex: none; }
@media (max-width: 760px) {
  /* En celular hay botones fijos abajo (portada, adelanto): el nuestro va arriba de ellos y más chico. */
  .op-flotante { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding: 9px 13px 9px 11px; font-size: .8rem; }
}
@media print { .op-flotante, .op-franja { display: none; } }

/* ---- Panel ----------------------------------------------------------------------------- */
.op-panel { border: 0; padding: 0; margin: auto 24px 24px auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  border-radius: 24px; background: #fff; color: var(--op-marino); box-shadow: 0 30px 70px rgba(13,21,55,.28); overflow: auto; }
.op-panel::backdrop { background: rgba(13,21,55,.38); backdrop-filter: blur(2px); }
.op-panel[open] { animation: op-entra .22s ease-out; }
@keyframes op-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .op-panel[open] { animation: none; } .op-flotante { transition: none; } }
@media (max-width: 560px) {
  .op-panel { margin: auto 0 0 0; width: 100vw; max-width: 100vw; border-radius: 24px 24px 0 0; max-height: 92vh; }
}
.op-form { position: relative; padding: 26px 24px 22px; display: block; }
.op-paso { display: grid; gap: 14px; }
.op-paso[hidden] { display: none; }
.op-cerrar { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--op-hueso); display: grid; place-items: center; cursor: pointer; }
.op-cerrar svg { width: 16px; height: 16px; stroke: var(--op-marino); stroke-width: 2; stroke-linecap: round; fill: none; }
.op-eti { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--op-azul); }
.op-titulo { margin: 0; font-family: var(--op-display); font-weight: 500; font-size: 2.6rem; line-height: .9; }
.op-sub { margin: 0; color: var(--op-gris); font-size: .93rem; line-height: 1.45; }

.op-estrellas { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.op-estrellas legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.op-estrellas legend span, .op-campo em { font-weight: 400; font-style: normal; color: var(--op-gris); }
.op-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.op-escala label { position: relative; cursor: pointer; }
.op-escala input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.op-escala span { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--op-hueso); box-shadow: inset 0 0 0 1px var(--op-linea);
  font-family: var(--op-display); font-size: 1.6rem; line-height: 1; padding-top: 4px; transition: background .15s, box-shadow .15s; }
.op-escala label:hover span { box-shadow: inset 0 0 0 1px var(--op-marino); }
.op-escala input:checked + span { background: var(--op-marino); color: #fff; box-shadow: inset 0 -4px 0 var(--op-amarillo); }
.op-escala input:focus-visible + span { outline: 2px solid var(--op-azul); outline-offset: 2px; }
.op-escala-pie { display: flex; justify-content: space-between; font-size: .75rem; color: var(--op-gris); }

.op-campo { display: grid; gap: 6px; font-size: .9rem; }
.op-campo > span { font-weight: 600; }
.op-campo textarea, .op-campo input { width: 100%; box-sizing: border-box; border: 1px solid var(--op-linea); background: var(--op-hueso); border-radius: 12px; padding: 11px 13px;
  font: inherit; font-size: 1rem; color: var(--op-marino); resize: vertical; }
.op-campo textarea:focus, .op-campo input:focus { outline: 2px solid var(--op-azul); outline-offset: 1px; background: #fff; }
.op-error { margin: 0; min-height: 0; font-size: .88rem; }
.op-error:not(:empty) { background: #FFF6BF; border-left: 5px solid var(--op-amarillo); border-radius: 10px; padding: 8px 12px; }
.op-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.op-enviar { border: 0; border-radius: 999px; background: var(--op-marino); color: #fff; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; }
.op-enviar[disabled] { opacity: .55; cursor: wait; }
.op-cancelar { border: 0; background: none; padding: 0; font: inherit; color: var(--op-gris); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--op-linea); }

.op-gracias { justify-items: start; padding-block: 6px 2px; }
.op-sello { width: 52px; height: 52px; border-radius: 50%; background: var(--op-amarillo); display: grid; place-items: center; }
.op-sello svg { width: 26px; height: 26px; fill: none; stroke: var(--op-marino); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }