/* ── BITÁCORA ──
   [v2026.10.05-1] opiniones-panel.css
   2026-10-05 | + el filtro «Invitaciones» (opiniones-panel.js [v2026.10.05-1]; vista previa v2
     aprobada por Alberto el 05-10): .opn-inv-intro, .opn-inv-est (lo que pasó con cada una, con la
     ⭐ dorada o gris del Calendario), .opn-inv-ok / -pend / -no / -det / -link, y el ícono del chip.
   [v2026.10.02-1] opiniones-panel.css (NUEVO)
   2026-10-02 | Las opiniones en el panel (opiniones-panel.js [v2026.10.02-1]): las pestañas de
     Mi página («Vista de mi página» / «Opiniones»), los números de arriba, los filtros, cada
     opinión con sus acciones (responder, ver la conversación, reportar), la respuesta en línea,
     la ventana de reporte y la revisión de Heavensy en Empresas. Como el preview aprobado.
*/
/* Pestañas de Mi página */
.mipagina-tabs{display:flex;gap:4px;background:#fff;border:1px solid #E4E6F0;border-radius:12px;padding:4px;margin:10px 14px 10px;width:fit-content;flex-shrink:0}
.mipagina-tabs button{font:500 13px 'Poppins',sans-serif;color:#6B7194;padding:7px 14px;border-radius:9px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mipagina-tabs button.on{background:#355BB6;color:#fff}
.opn-badge{display:inline-block;background:#F59E0B;color:#fff;border-radius:20px;font-size:10.5px;padding:1px 7px;font-weight:600;line-height:1.5}
.opn-badge[hidden]{display:none}
.mipagina-opiniones{flex:1;overflow:auto;background:#F4F6FB}
.mipagina-opiniones[hidden],.mipagina-frame-wrap[hidden]{display:none}

/* La lista */
.opn{padding:1rem 1.6rem 3rem;font-family:'DM Sans',sans-serif;color:#1E2140;max-width:980px}
.opn h2{font:600 1.2rem 'Poppins',sans-serif;margin:0 0 .2rem;color:#1E2140}
.opn-intro{font-size:13px;color:#6B7194;margin:0 0 1rem;line-height:1.5}
.opn-res{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.opn-kpi{background:#fff;border:1px solid #E4E6F0;border-radius:14px;padding:.8rem 1.1rem;min-width:150px}
.opn-kpi .v{font:700 1.4rem 'Poppins',sans-serif;color:#1E2140;display:flex;align-items:center;gap:8px}
.opn-kpi .l{font-size:12px;color:#6B7194}
.opn-filtro{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .9rem}
.opn-chip{padding:5px 12px;border-radius:20px;font:12px 'Poppins',sans-serif;border:1.5px solid rgba(96,82,203,.18);background:#fff;color:#6B7194;cursor:pointer}
.opn-chip.on,.opn-chip:hover{background:#E1DEFF;border-color:#9961FF;color:#7B4FE0}
.opn-est{position:relative;display:inline-block;line-height:1;letter-spacing:1px;color:#DADDE8;font-size:13px;vertical-align:-1px;white-space:nowrap}
.opn-est i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f5a623;font-style:normal}
.opn-op{background:#fff;border:1px solid #E4E6F0;border-radius:14px;padding:1rem 1.2rem;margin-bottom:.7rem}
.opn-op.pend{border-left:4px solid #F59E0B}
.opn-op.oculta{opacity:.7}
.opn-quien{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opn-av{width:32px;height:32px;border-radius:50%;background:#EFF6FF;color:#355BB6;display:flex;align-items:center;justify-content:center;font:700 13px 'Poppins',sans-serif;flex-shrink:0}
.opn-av.anon{background:#EEF0F6;color:#8A93B2}
.opn-nom{font:600 .85rem 'Poppins',sans-serif;color:#1d1b3a}
.opn-real{font-size:11.5px;color:#8A93B2}
.opn-fecha{font-size:.75rem;color:#8A93B2}
.opn-marca{display:inline-flex;align-items:center;gap:5px;font:500 11px 'Poppins',sans-serif;border-radius:20px;padding:2px 9px}
.opn-marca.rep{color:#B45309;background:#FEF3C7}
.opn-marca.ocu{color:#6B7194;background:#EEF0F6}
.opn-marca.emp{color:#355BB6;background:#EFF6FF}
.opn-con{font-size:.76rem;color:#6B7194;margin:4px 0 0 40px}
.opn-con b{color:#1d1b3a;font-weight:600}
.opn-txt{font-size:.85rem;color:#3b3b4a;line-height:1.6;margin:4px 0 0 40px;white-space:pre-line;overflow-wrap:anywhere}
.opn-txt.sin{color:#8A93B2;font-style:italic}
.opn-resp{margin:8px 0 0 40px;background:rgba(239,246,255,.85);border-left:3px solid #9FB4E6;border-radius:0 10px 10px 0;padding:7px 11px;font-size:.8rem;color:#4A5072;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.opn-resp b{display:block;font:600 .72rem 'Poppins',sans-serif;color:#355BB6;margin-bottom:2px;white-space:normal}
.opn-motivo{margin:8px 0 0 40px;font-size:.78rem;color:#92400E;background:#FFFBEB;border-radius:10px;padding:6px 10px}
.opn-acc{display:flex;gap:8px;margin:10px 0 0 40px;flex-wrap:wrap}
.opn-b{font:600 12px 'Poppins',sans-serif;border-radius:9px;padding:6px 12px;cursor:pointer;border:1.5px solid #C9D4F0;background:#fff;color:#355BB6;display:inline-flex;align-items:center;gap:6px;position:relative}
.opn-b:hover{background:#EFF6FF}
.opn-b.pri{background:#355BB6;border-color:#355BB6;color:#fff}
.opn-b.pri:hover{background:#2c4c99}
.opn-b.gris{color:#8A93B2;border-color:#E4E6F0}
.opn-b.peligro{color:#B42318;border-color:#F4C7C3}
.opn-b:disabled{opacity:.5;cursor:default}
/* El globo del candado se abre hacia la derecha: los botones van pegados al borde izquierdo. */
.opn-acc .hvy-candado-globo{right:auto;left:0}
.opn-acc .hvy-candado-globo::before{right:auto;left:16px}
.opn-resp-form{margin:10px 0 0 40px}
.opn-resp-form textarea{width:100%;box-sizing:border-box;min-height:80px;border:1.5px solid #E4E6F0;border-radius:10px;padding:.55rem .7rem;font:13px 'DM Sans',sans-serif;outline:none;resize:vertical;color:#1E2140}
.opn-resp-form textarea:focus{border-color:#355BB6}
.opn-resp-pie{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:6px;flex-wrap:wrap}
.opn-resp-pie small{margin-right:auto;color:#8A93B2;font-size:11.5px}
.opn-vacio{background:#fff;border:1px dashed #D5DAEA;border-radius:14px;padding:1.4rem;text-align:center;color:#6B7194;font-size:13.5px}
.opn-mas{display:block;margin:.6rem auto 0;background:#fff;border:1.5px solid rgba(96,82,203,.3);color:#5b4fc4;border-radius:22px;padding:7px 18px;font:600 12.5px 'Poppins',sans-serif;cursor:pointer}
.opn-cargando{color:#6B7194;font-size:13px;padding:.8rem 0}

/* [05-10-2026] Las invitaciones */
.opn-chip i{margin-right:3px}
.opn-inv-intro{font-size:12.5px;color:#6B7194;margin:0 0 .7rem;line-height:1.5}
.opn-inv-est{font-size:.8rem;color:#374151;margin:6px 0 0 40px;line-height:1.5}
.opn-inv-oro{color:#F5A623;font-size:13px;margin-right:2px}
.opn-inv-gris{color:#A3A9BE;font-size:13px;margin-right:2px}
.opn-inv-ok{color:#92400E;font-weight:600}
.opn-inv-pend{color:#9CA3AF}
.opn-inv-no{color:#B91C1C;font-weight:600}
.opn-inv-det{color:#6B7194}
.opn-inv-link{color:#9961FF}

/* Ventana (reportar, ocultar) */
.opn-fondo{position:fixed;inset:0;z-index:30000;background:rgba(30,33,64,.45);display:none;align-items:center;justify-content:center;padding:16px}
.opn-fondo.on{display:flex}
.opn-md{background:#fff;border-radius:18px;width:100%;max-width:440px;padding:1.3rem 1.4rem;box-shadow:0 24px 60px rgba(10,20,70,.35);font-family:'DM Sans',sans-serif;color:#1E2140}
.opn-md h3{font:600 1.05rem 'Poppins',sans-serif;margin:0 0 .3rem}
.opn-md p{font-size:13px;color:#6B7194;margin:0 0 1rem;line-height:1.5}
.opn-opc{display:flex;align-items:center;gap:10px;border:1.5px solid #E4E6F0;border-radius:12px;padding:.6rem .8rem;cursor:pointer;font-size:13.5px;margin-bottom:6px;background:#fff;width:100%;text-align:left;color:#1E2140}
.opn-opc.on{border-color:#9961FF;background:#FAF8FF}
.opn-opc i{width:16px;height:16px;border-radius:50%;border:2px solid #C9D4F0;flex-shrink:0;font-style:normal}
.opn-opc.on i{border:5px solid #9961FF}
.opn-md-acc{display:flex;justify-content:flex-end;gap:8px;margin-top:1rem}

@media (max-width:760px){
  .opn{padding:.9rem .8rem 2rem}
  .opn-con,.opn-txt,.opn-resp,.opn-acc,.opn-resp-form,.opn-motivo,.opn-inv-est{margin-left:0}
  .mipagina-tabs{margin:8px 8px}
}