/* «Tu opinión» (2026-10-15): la carita del 1 al 5, en las dos marcas. Dos lugares, el mismo formulario:
   la tarjeta que se abre sola en una esquina (.op-pulso) y la que está siempre al final de Soporte
   (.op-inline). Lógica en opinion-ui.js.
   El acento (botón Enviar, temas marcados, chispas) sale de var(--accent): naranja en Epicodes, oro en
   Geek Zone. Geek Zone es siempre oscuro y NUNCA lleva el naranja de Epicodes: por eso su "Mal" va en
   ámbar y no en naranja. Selector de Geek: solo html.geekzone-theme (body.geek-zone-theme también queda
   puesto en el oscuro de Epicodes). */
.op-root {
  --op-c1:#dc2626; --op-c2:#ea580c; --op-c3:#64748b; --op-c4:#0d9488; --op-c5:#16a34a;
  --op-card:color-mix(in srgb,var(--panel) 94%,var(--text));
  --op-muted:color-mix(in srgb,var(--text) 22%,var(--muted));
  --op-ease:cubic-bezier(.2,.8,.2,1);
  color:var(--text);font-family:inherit;
}
:is(html.epicodes-dark-theme,body.epicodes-dark-theme) .op-root {
  --op-c1:#f87171; --op-c2:#fb923c; --op-c3:#a1a1aa; --op-c4:#2dd4bf; --op-c5:#4ade80;
}
html.geekzone-theme .op-root {
  --op-c1:#f87171; --op-c2:#f59e0b; --op-c3:#a1a1aa; --op-c4:#2dd4bf; --op-c5:#4ade80;
}
.op-root *,.op-root *::before,.op-root *::after { box-sizing:border-box; }
.op-root [hidden] { display:none!important; }

/* ── la tarjeta que se abre sola ───────────────────────────────────────────── */
.op-pulso {
  /* Encima de las cabeceras pegajosas del catálogo (.header, z-index 1000); con un modal abierto se
     esconde (.op-tapada, lo pone opinion-ui.js). */
  position:fixed;right:22px;bottom:22px;z-index:1010;width:min(372px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  box-shadow:0 24px 60px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.06);
  padding:18px 18px 16px;opacity:0;transform:translateY(18px) scale(.97);transform-origin:100% 100%;
  transition:opacity .32s var(--op-ease),transform .42s var(--op-ease);
}
:is(html.epicodes-dark-theme,body.epicodes-dark-theme,html.geekzone-theme) .op-pulso { box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02); }
.op-pulso.op-in { opacity:1;transform:none; }
.op-pulso.op-tapada { opacity:0!important;visibility:hidden;pointer-events:none; }
.op-pulso.op-out { opacity:0;transform:translateY(14px) scale(.98);transition-duration:.22s; }
.op-pulso::before {
  content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);opacity:.75;
}
.op-cerrar {
  position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;
  border:0;border-radius:10px;background:transparent;color:var(--op-muted);cursor:pointer;
  transition:background .18s,color .18s;
}
.op-cerrar:hover { background:var(--op-card);color:var(--text); }
.op-cerrar svg { width:16px;height:16px; }

/* ── la de Soporte ─────────────────────────────────────────────────────────── */
.op-inline {
  margin-top:18px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 55%);
}
.op-inline .op-cabeza { padding-right:0; }
/* En la compu, las caritas a la derecha del título y no repartidas a lo ancho de toda la pestaña. */
@media (min-width:821px) {
  .op-inline { display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);column-gap:28px;align-items:center; }
  .op-inline > .op-cabeza { grid-column:1;grid-row:1 / span 2; }
  .op-inline > .op-caras { grid-column:2;grid-row:1;margin-top:0; }
  .op-inline > .op-etiqueta { grid-column:2;grid-row:2;margin-top:4px; }
  .op-inline > .op-detalle,.op-inline > .op-gracias { grid-column:1 / -1; }
  .op-inline .op-detalle-in { max-width:860px; }
}

/* ── contenido común ───────────────────────────────────────────────────────── */
.op-cabeza { display:flex;align-items:flex-start;gap:12px;padding-right:30px; }
.op-sello {
  flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent);
}
.op-sello svg { width:20px;height:20px; }
.op-titulo { margin:0;font-size:16px;line-height:1.3;font-weight:800;letter-spacing:-.2px;color:var(--text); }
.op-sub { margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--op-muted); }

.op-caras { display:flex;justify-content:space-between;gap:6px;margin:16px 0 0;padding:0;border:0; }
.op-cara {
  --op-c:var(--op-c3);
  flex:1;min-width:0;height:60px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:14px;background:transparent;color:var(--op-muted);
  transition:transform .28s var(--op-ease),color .18s,background .18s,border-color .18s,opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
.op-cara[data-p="1"] { --op-c:var(--op-c1); }
.op-cara[data-p="2"] { --op-c:var(--op-c2); }
.op-cara[data-p="3"] { --op-c:var(--op-c3); }
.op-cara[data-p="4"] { --op-c:var(--op-c4); }
.op-cara[data-p="5"] { --op-c:var(--op-c5); }
.op-cara svg { width:40px;height:40px;transition:transform .32s var(--op-ease); }
.op-cara .op-fondo { fill:var(--op-c);fill-opacity:0;transition:fill-opacity .18s; }
.op-cara .op-ojo { fill:currentColor;stroke:none; }
.op-cara .op-llena { fill:currentColor;fill-opacity:.9; }
@media (hover:hover) {
  .op-caras:hover .op-cara:not(:hover):not([aria-checked="true"]) { opacity:.55; }
  .op-cara:hover { color:var(--op-c);background:color-mix(in srgb,var(--op-c) 8%,transparent); }
  .op-cara:hover svg { transform:translateY(-3px) scale(1.14); }
  .op-cara:hover .op-fondo { fill-opacity:.14; }
}
.op-cara:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.op-cara[aria-checked="true"] {
  color:var(--op-c);background:color-mix(in srgb,var(--op-c) 11%,transparent);
  border-color:color-mix(in srgb,var(--op-c) 45%,transparent);
}
.op-cara[aria-checked="true"] .op-fondo { fill-opacity:.16; }
.op-cara.op-pop svg { animation:op-pop .5s var(--op-ease); }
@keyframes op-pop { 0%{transform:scale(1)} 35%{transform:scale(1.32) rotate(-6deg)} 70%{transform:scale(.94)} 100%{transform:scale(1)} }
.op-root.op-con-puntaje .op-caras:not(:hover) .op-cara:not([aria-checked="true"]) { opacity:.5; }
.op-root.op-con-puntaje .op-cara { height:50px; }
.op-root.op-con-puntaje .op-cara svg { width:32px;height:32px; }

.op-etiqueta { min-height:18px;margin:8px 0 0;text-align:center;font-size:12.5px;font-weight:700;color:var(--op-muted);transition:color .18s; }
.op-etiqueta[data-p] { color:var(--op-c); }
.op-etiqueta[data-p="1"] { --op-c:var(--op-c1); } .op-etiqueta[data-p="2"] { --op-c:var(--op-c2); }
.op-etiqueta[data-p="3"] { --op-c:var(--op-c3); } .op-etiqueta[data-p="4"] { --op-c:var(--op-c4); }
.op-etiqueta[data-p="5"] { --op-c:var(--op-c5); }

/* El detalle se despliega (0fr → 1fr) en vez de aparecer de golpe. */
.op-detalle { display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--op-ease); }
.op-detalle > div { overflow:hidden;min-height:0; }
.op-root.op-con-puntaje .op-detalle { grid-template-rows:1fr; }
.op-detalle-in { padding-top:14px;opacity:0;transform:translateY(-4px);transition:opacity .3s .08s,transform .36s .08s var(--op-ease); }
.op-root.op-con-puntaje .op-detalle-in { opacity:1;transform:none; }

.op-pregunta { margin:0 0 10px;font-size:13.5px;font-weight:800;color:var(--text); }
.op-pregunta small { font-weight:600;color:var(--op-muted);font-size:12px;margin-left:4px; }
.op-temas { display:flex;flex-wrap:wrap;gap:7px; }
.op-tema {
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;
  transition:background .18s,border-color .18s,color .18s,transform .14s;
  -webkit-tap-highlight-color:transparent;
}
.op-tema:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.op-tema:active { transform:scale(.96); }
.op-tema:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.op-tema .op-tilde { width:0;height:14px;overflow:hidden;display:inline-grid;place-items:center;transition:width .2s var(--op-ease); }
.op-tema .op-tilde svg { width:14px;height:14px;flex-shrink:0; }
.op-tema[aria-pressed="true"] {
  background:color-mix(in srgb,var(--accent) 13%,var(--panel));border-color:var(--accent);color:var(--text);
}
.op-tema[aria-pressed="true"] .op-tilde { width:14px;color:var(--accent); }

.op-comentario {
  display:block;width:100%;margin:12px 0 0;min-height:76px;max-height:200px;resize:vertical;
  padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);
  font:inherit;font-size:14px;line-height:1.45;transition:border-color .18s,box-shadow .18s;
}
.op-comentario::placeholder { color:var(--op-muted);opacity:.85; }
.op-comentario:focus { outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }

.op-contacto { position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent; }
.op-contacto span { min-width:0; }
.op-contacto strong { display:block;font-size:13px;color:var(--text); }
.op-contacto small { display:block;font-size:12px;color:var(--op-muted);margin-top:1px; }
.op-contacto input { position:absolute;opacity:0;pointer-events:none; }
.op-switch { position:relative;flex-shrink:0;width:42px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--text) 18%,var(--panel));transition:background .2s; }
.op-switch::after { content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .26s var(--op-ease); }
.op-contacto input:checked + .op-switch { background:var(--accent); }
.op-contacto input:checked + .op-switch::after { transform:translateX(18px); }
.op-contacto input:focus-visible + .op-switch { outline:2px solid var(--accent);outline-offset:2px; }

.op-acciones { display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px; }
.op-boton {
  appearance:none;min-height:42px;padding:10px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:filter .18s,background .18s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.op-boton:hover { background:var(--op-card); }
.op-boton:active { transform:scale(.97); }
.op-boton-principal { background:var(--accent);border-color:var(--accent);color:#171717; }
.op-boton-principal:hover { background:var(--accent);filter:brightness(1.06); }
.op-boton[disabled] { opacity:.6;cursor:default;transform:none; }
.op-boton svg { width:16px;height:16px; }
.op-giro { width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:op-giro .7s linear infinite; }
@keyframes op-giro { to{transform:rotate(360deg)} }
.op-error { margin:10px 0 0;font-size:12.5px;color:var(--op-c1);font-weight:600; }
.op-pie { margin:12px 0 0;font-size:11.5px;color:var(--op-muted);text-align:center; }

/* ── gracias ───────────────────────────────────────────────────────────────── */
.op-gracias { display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px 4px;animation:op-subir .4s var(--op-ease); }
@keyframes op-subir { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.op-check { position:relative;width:64px;height:64px;margin-bottom:12px; }
.op-check svg { width:64px;height:64px;color:var(--op-c5); }
.op-check circle { fill:color-mix(in srgb,var(--op-c5) 14%,transparent);stroke:currentColor;stroke-width:2.4;stroke-dasharray:164;stroke-dashoffset:164;animation:op-trazo .6s .05s var(--op-ease) forwards; }
.op-check path { fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:op-trazo .38s .5s var(--op-ease) forwards; }
@keyframes op-trazo { to{stroke-dashoffset:0} }
.op-chispa { position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--accent);opacity:0;animation:op-chispa .7s .55s var(--op-ease) forwards; }
.op-chispa:nth-child(even) { background:var(--op-c5);width:5px;height:5px; }
@keyframes op-chispa { 0%{opacity:1;transform:rotate(var(--a)) translateY(0)} 100%{opacity:0;transform:rotate(var(--a)) translateY(-44px)} }
.op-gracias h3 { margin:0;font-size:17px;font-weight:800;color:var(--text); }
.op-gracias p { margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--op-muted);max-width:300px; }
.op-otra { margin-top:12px;border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:6px; }
.op-otra:hover { text-decoration:underline; }

/* ── celular: la tarjeta pasa a hoja de abajo ──────────────────────────────── */
@media (max-width:600px) {
  .op-pulso {
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;
    border-radius:20px;padding:16px 14px 14px;transform:translateY(40px);transform-origin:50% 100%;
    max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
  }
  .op-cara { height:56px; }
  .op-cara svg { width:38px;height:38px; }
  .op-comentario { font-size:16px; } /* iOS no hace zoom con 16px */
  .op-inline { padding:16px 14px; }
  .op-acciones .op-boton { flex:1;justify-content:center; }
}