/* @overa/ui-kit 0.24.0 · el «?» de cada pantalla y su panel de ayuda (js/help.js). Prefijo `ov-hp-`. Los colores, con los tokens
   de app.css; nada de `style=`. */

.ov-hp-slot { display: inline-flex; align-items: center; margin-right: 6px; }
/* el color, el de la barra donde va: blanco en la negra del armazón, el del texto en una barra clara */
.ov-hp-button { font: inherit; font-size: 14px; font-weight: 700; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid currentColor;
  background: transparent; color: inherit; cursor: pointer; opacity: .9; line-height: 1; }
.ov-hp-button:hover, .ov-hp-button:focus-visible { background: rgba(127, 127, 127, .18); outline: none; opacity: 1; }
.ov-hp-button:focus-visible { box-shadow: 0 0 0 2px var(--color-primary, #1f6feb); }
.ov-sh-bar .ov-hp-button { color: #fff; }
.ov-hp-button[aria-expanded="true"] { background: rgba(127, 127, 127, .28); opacity: 1; }
/* en pantallas táctiles, la zona de toque de 44 px */
@media (pointer: coarse) { .ov-hp-button { min-height: 44px; min-width: 44px; } }
.ov-hp-button[hidden] { display: none; }
/* sin barra: flotante, encima del de Reportar (que va a 16 px del borde) */
.ov-hp-button.ov-hp-floating { position: fixed; right: 16px; bottom: 64px; z-index: 2147483000; width: 40px; height: 40px; background: #282828;
  border-color: #282828; color: #fff; opacity: 1; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.ov-hp-button.ov-hp-floating.ov-hp-alone { bottom: 16px; }

.ov-hp-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 2147483001; overflow-y: auto;
  background: var(--color-surface, #fff); color: var(--color-text, #1f2328); box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
  padding: 0 18px 18px; box-sizing: border-box; font-size: 14px; line-height: 1.45; }
.ov-hp-panel[hidden], .ov-hp-panel [hidden] { display: none !important; }
.ov-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; background: inherit; padding: 14px 0 8px; z-index: 1; }
.ov-hp-title { font-size: 17px; margin: 0; }
.ov-hp-search { display: grid; gap: 4px; margin-bottom: 4px; }
.ov-hp-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted, #57606a); }
.ov-hp-input { font: inherit; width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--color-border, #d0d7de); border-radius: 6px;
  background: transparent; color: inherit; }
.ov-hp-input:focus-visible { outline: 2px solid var(--color-primary, #1f6feb); outline-offset: 1px; }
/* en el móvil, 16 px: con menos, iOS amplía la página al escribir */
@media (pointer: coarse) { .ov-hp-input { font-size: 16px; } }
.ov-hp-status { min-height: 1.2em; font-size: 12px; margin: 4px 0; color: var(--color-text-muted, #57606a); }
.ov-hp-section { border-top: 1px solid var(--color-border, #e4e8ec); padding: 10px 0; }
.ov-hp-h { font-size: 13px; margin: 0 0 8px; color: var(--color-text-muted, #57606a); font-weight: 600; }
.ov-hp-article-head { margin-bottom: 6px; }
.ov-hp-article-title { font-size: 15px; margin: 0 0 4px; }
.ov-hp-badge { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #fff4d6; color: #6b4b00; }
.ov-hp-blocks { display: grid; gap: 8px; }
.ov-hp-text { margin: 0; white-space: pre-line; }
.ov-hp-steps-title { margin: 0; font-weight: 600; }
.ov-hp-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.ov-hp-callout { padding: 8px 10px; border-radius: 6px; border-left: 3px solid var(--color-primary, #1f6feb); background: rgba(31, 111, 235, .07); white-space: pre-line; }
.ov-hp-callout.is-warning { border-left-color: #b26b00; background: rgba(178, 107, 0, .09); }
.ov-hp-callout.is-danger { border-left-color: #c62828; background: rgba(198, 40, 40, .08); }
.ov-hp-code { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--color-surface-2, #f6f8fa); overflow-x: auto; font-size: 12.5px; }
.ov-hp-image, .ov-hp-asset, .ov-hp-action { margin: 0; font-size: 13px; color: var(--color-text-muted, #57606a); }
.ov-hp-goto { margin: 0; }
.ov-hp-link { color: var(--color-primary, #1f6feb); font-weight: 600; }
.ov-hp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-hp-item { font: inherit; padding: 0; border: 0; background: transparent; color: var(--color-primary, #1f6feb); cursor: pointer; text-align: left; }
.ov-hp-item:hover, .ov-hp-item:focus-visible { text-decoration: underline; outline: none; }
.ov-hp-results { padding-bottom: 8px; }
.ov-hp-hit { padding: 6px 0; border-bottom: 1px solid var(--color-border, #e4e8ec); }
.ov-hp-snippet { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted, #57606a); }
.ov-hp-snippet mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.ov-hp-muted { font-size: 12px; color: var(--color-text-muted, #57606a); }
.ov-hp-feedback { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border, #e4e8ec); }
.ov-hp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ov-hp-ask { font-size: 13px; margin-right: 4px; }
.ov-hp-after { margin-top: 6px; display: grid; gap: 4px; }
.ov-hp-btn { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--color-border, #d0d7de); background: transparent;
  cursor: pointer; color: inherit; }
.ov-hp-btn:focus-visible { outline: 2px solid var(--color-primary, #1f6feb); outline-offset: 1px; }
.ov-hp-btn:disabled { opacity: .55; cursor: default; }
.ov-hp-primary { background: var(--color-primary, #1f6feb); border-color: var(--color-primary, #1f6feb); color: #fff; }
.ov-hp-close { border-color: transparent; font-size: 18px; line-height: 1; padding: 4px 8px; }
.ov-hp-back { border-color: transparent; padding-left: 0; margin: 4px 0 6px; color: var(--color-primary, #1f6feb); }
@media (pointer: coarse) { .ov-hp-btn { min-height: 44px; } }

/* el punto del «?»: hay respuestas nuevas a lo que preguntaste */
.ov-hp-button { position: relative; }
.ov-hp-button.has-unread::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px #282828; }
.ov-hp-search-line { margin-top: 0; flex-wrap: nowrap; }
.ov-hp-search-line .ov-hp-input { flex: 1; min-width: 0; }
.ov-hp-ask-ai { white-space: nowrap; }
.ov-hp-notices { background: rgba(31, 111, 235, .05); padding: 10px; border-radius: 6px; margin-bottom: 6px; }
.ov-hp-notice { padding: 2px 0; }
/* la respuesta con IA: el aviso, siempre visible (AI Act, PRI-3) */
.ov-hp-ai-notice { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: #efe9ff; color: #3b2a7a; }
.ov-hp-ai-text { margin-bottom: 6px; }