/* Centro de ayuda de VALION -- portal generico para cualquier producto de
   VALION (Insights es el primero, no el unico). Sitio estatico
   independiente, sin relacion con el codigo del producto real -- mismos
   tokens de marca (theme.css) para que se sienta parte de lo mismo. */

/* --- Navbar global (todas las paginas) -- SOLO logo VALION + buscador,
   nunca el logo de un producto puntual, porque el portal es de VALION,
   no de Insights. --- */
.help-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--nav-surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nav-border);
}
.help-navbar__brand { display: flex; align-items: center; text-decoration: none; }
.help-navbar__brand img { height: 24px; width: auto; display: block; }
.help-navbar__brand img.dark { display: none; }
@media (prefers-color-scheme: dark) {
  .help-navbar__brand img.light { display: none; }
  .help-navbar__brand img.dark { display: block; }
}

/* Buscador -- 100% en el navegador (js/search.js), sin backend. El panel
   de resultados se posiciona debajo del input, mismo patron que el combo
   del producto real (buscar + lista de coincidencias). */
.help-search { position: relative; width: 100%; max-width: 320px; }
.help-search input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
.help-search input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.help-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  overflow: hidden;
  z-index: 30;
}
.help-search__results:empty { display: none; }
.help-search__result { display: block; padding: 10px 14px; text-decoration: none; }
.help-search__result:hover { background: var(--gridline); }
.help-search__result .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.help-search__result .section { font-size: 11px; color: var(--text-muted); }

/* --- Home generico de VALION (index.html, sin sidebar -- es el selector
   de "que producto"): mismo hero + grilla de tarjetas de antes. --- */
.help-hero { text-align: center; padding: 64px 24px 48px; max-width: 640px; margin: 0 auto; }
.help-hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 12px; text-wrap: balance; }
.help-hero p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 720px; margin: 0 auto 80px; padding: 0 24px; }
.help-card { display: block; text-decoration: none; color: inherit; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.help-card:hover { border-color: var(--brand-primary); }
.help-card__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 16%, var(--surface-1)); color: var(--brand-accent-hover); margin-bottom: 14px; }
.help-card__icon svg { width: 20px; height: 20px; }
.help-card h2 { font-size: 16px; margin: 0 0 6px; }
.help-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* --- Layout con sidebar (todas las paginas dentro de /insights, o de
   cualquier otra seccion de producto que se agregue despues). --- */
.help-layout { display: flex; align-items: flex-start; max-width: 1160px; margin: 0 auto; }

.help-sidebar {
  flex: none;
  width: 240px;
  position: sticky;
  top: 61px; /* alto del navbar */
  align-self: flex-start;
  max-height: calc(100vh - 61px);
  overflow-y: auto;
  padding: 28px 16px 40px 24px;
}
.help-sidebar__root {
  display: block;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.help-sidebar__root:hover { color: var(--text-secondary); }
.help-sidebar__title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0 0 16px; }
.help-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.help-sidebar a.tree-link {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}
.help-sidebar a.tree-link:hover { color: var(--text-primary); background: var(--gridline); }
.help-sidebar a.tree-link.active { color: var(--text-primary); font-weight: 700; background: var(--gridline); border-left-color: var(--brand-accent); }
.help-sidebar__divider { height: 1px; background: var(--border); margin: 12px 10px; }
.help-sidebar__group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 0 10px; margin: 4px 0 4px; }

@media (max-width: 860px) {
  .help-layout { flex-direction: column; }
  .help-sidebar { position: static; width: 100%; max-height: none; padding: 16px 24px 8px; border-bottom: 1px solid var(--border); }
  .help-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .help-sidebar__divider { display: none; }
  .help-sidebar__group-label { display: none; }
}

/* --- Contenido tipo articulo --- */
.help-article { flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; }
.help-article__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-accent-hover); margin-bottom: 8px; }
.help-article h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; text-wrap: balance; }
.help-article > p.lead { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 36px; }
.help-article h2 { font-size: 17px; font-weight: 700; margin: 36px 0 10px; }
.help-article h2:first-of-type { margin-top: 0; }
.help-article h3 { font-size: 14px; font-weight: 700; margin: 20px 0 6px; }
.help-article p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; }
.help-article p strong { color: var(--text-primary); }
.help-article ul, .help-article ol { font-size: 14px; line-height: 1.7; color: var(--text-secondary); padding-left: 20px; margin: 0 0 14px; }
.help-article li { margin-bottom: 4px; }
.help-article a { color: var(--brand-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

.help-note { display: flex; gap: 12px; background: var(--gridline); border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.help-note strong { color: var(--text-primary); }

/* Fila de cifras grandes (pagina de Metricas) -- vender de un vistazo el
   volumen de trabajo que hace la plataforma, sin depender de una tabla. */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 28px; }
.stat-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 14px; text-align: center; }
.stat-item__value { font-size: 26px; font-weight: 800; color: var(--brand-accent-hover); line-height: 1.1; margin-bottom: 4px; }
.stat-item__label { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* CTA discreta hacia el producto real -- vive DENTRO de la seccion de
   Insights (sidebar), no en el navbar global (ese es generico de VALION,
   no deberia empujar a un producto puntual). */
.help-sidebar__cta {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-on-primary);
  background: var(--brand-primary);
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  margin: 16px 10px 4px;
}
.help-sidebar__cta:hover { background: var(--brand-primary-hover); }

/* Preguntas frecuentes: acordeon nativo con <details> -- cero JS. */
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item summary { font-size: 14.5px; font-weight: 700; color: var(--text-primary); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--text-muted); flex: none; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 10px 0 0; }

/* Tabla dentro de un articulo (ej. calificacion de hallazgos de seguridad)
   -- .table-wrap con scroll horizontal propio para que una tabla ancha
   nunca desborde el articulo en mobile. */
.table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table-wrap th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); background: var(--gridline); white-space: nowrap; }
.table-wrap td { color: var(--text-secondary); line-height: 1.5; }
.table-wrap td:last-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: none; }

/* --- Footer --- */
.help-footer { border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; font-size: 12px; color: var(--text-muted); }
.help-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.help-footer a:hover { color: var(--text-primary); }
.help-footer__links { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }

/* --- Pagina de error (404.html) -- la sirve CloudFront via
   CustomErrorResponses, tanto para el 404 de S3 como para el 403 que
   devuelve el bucket (con OAC, una key inexistente da AccessDenied, no
   NoSuchKey). Se entrega BAJO LA URL QUE EL VISITANTE PIDIO -- ej.
   /insights/loquesea -- asi que en esa pagina todas las rutas son
   absolutas desde la raiz del sitio, y no carga search.js (su
   resolveHelpUrl() asume rutas relativas y se rompe en cualquier
   profundidad inesperada). --- */
.help-error { text-align: center; padding: 72px 24px 44px; max-width: 620px; margin: 0 auto; }
.help-error__code { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent-hover); margin-bottom: 12px; }
.help-error h1 { font-size: 30px; font-weight: 800; margin: 0 0 12px; text-wrap: balance; }
.help-error p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 26px; }
.help-error__cta {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.help-error__cta:hover { background: var(--brand-primary-hover); }
.help-error__label { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 12px 0 14px; }

/* ---------------------------------------------------- desplegable de idioma
   Es un <details>, no un <select>: el desplegable se abre y se cierra sin
   una linea de JavaScript, y lo de adentro son tres enlaces normales. Con
   un <select> el idioma dejaria de ser una direccion -- no se podria
   compartir, ni marcar, ni indexar, ni abrir con el script caido -- y eso
   en documentos legales que se citan por URL no es un detalle.

   El nombre de cada idioma va escrito EN ESE idioma: quien habla
   portugues busca "Portugues" en la lista, no su traduccion al espanol. */
.idioma { position: relative; flex: none; }
.idioma > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color .15s ease, border-color .15s ease;
}
/* El triangulito por defecto sobra: el rotulo ya dice que es un desplegable. */
.idioma > summary::-webkit-details-marker { display: none; }
.idioma > summary::marker { content: ""; }
.idioma > summary:hover,
.idioma[open] > summary { color: var(--text-primary); border-color: var(--text-muted); }
.idioma > summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.idioma > summary svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.idioma__rotulo { color: var(--text-muted); }
.idioma__actual { color: var(--text-primary); font-weight: 700; }
.idioma__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  padding: 6px;
  background: var(--surface-1);
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.idioma__menu a {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-secondary);
}
.idioma__menu a:hover { background: var(--gridline); color: var(--text-primary); }
.idioma__menu a[aria-current="true"] { color: var(--text-primary); font-weight: 700; }
/* En pantalla angosta el buscador cede espacio antes que el idioma, y el
   rotulo "Idioma" se va: el globo y el nombre del idioma ya lo dicen. */
@media (max-width: 620px) {
  .help-navbar { gap: 10px; padding: 12px 16px; }
  .help-search { min-width: 0; }
  .idioma__rotulo { display: none; }
}