/* ═══════════════════════════════════════════════════════════════════
   ION eQMS Help — Global Stylesheet
   Paleta: Navy ION + Teal + Warm White
   Tipografía: IBM Plex Sans (body) + IBM Plex Mono (código/IDs)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─── Variables ──────────────────────────────────────────────────── */
:root {
  --navy:        #1a2744;
  --navy-mid:    #243356;
  --navy-light:  #2e4068;
  --teal:        #2eb8a0;
  --teal-light:  #3dd6bc;
  --teal-dim:    #1a9080;
  --warm-white:  #f8f7f4;
  --warm-50:     #f0ede8;
  --ink:         #1a1a2e;
  --sub:         #5a6a8a;
  --line:        #dde2ec;
  --line-light:  #eef1f7;
  --warn-bg:     #fff8e6;
  --warn-border: #e8a020;
  --warn-text:   #7a4a00;
  --info-bg:     #e8f4ff;
  --info-border: #3a8fd4;
  --info-text:   #1a4a7a;
  --danger-bg:   #fff0f0;
  --danger-border:#d44;
  --tip-bg:      #e8faf6;
  --tip-border:  #2eb8a0;
  --tip-text:    #0a5048;

  --sidebar-w:   280px;
  --content-max: 760px;
  --radius:      8px;
  --radius-sm:   4px;

  --font-body:   'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:   'IBM Plex Mono', 'Fira Code', monospace;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
}
a { color: var(--teal-dim); text-decoration: none; }
a:hover { color: var(--teal); text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ─── Layout principal ───────────────────────────────────────────── */
.help-root {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height: 100vh;
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--teal-dim);
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-logo-badge {
  background: var(--teal);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
}
.topbar-divider { width: 1px; height: 24px; background: var(--navy-light); }
.topbar-module-label {
  color: var(--teal-light);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.9;
}
.topbar-search-wrap {
  margin-left: auto;
  position: relative;
}
.topbar-search {
  background: var(--navy-mid);
  border: 1px solid var(--navy-light);
  border-radius: 20px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 6px 14px 6px 36px;
  width: 240px;
  outline: none;
  transition: border-color 0.15s, width 0.2s;
}
.topbar-search::placeholder { color: #8899bb; }
.topbar-search:focus {
  border-color: var(--teal);
  width: 300px;
}
.topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(26,39,68,0.18);
  z-index: 200;
  max-height: 400px;
  overflow-y: auto;
  display: none;
}
.search-results-dropdown.open { display: block; }
.search-result-item {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-light);
  cursor: pointer;
  transition: background 0.1s;
}
.search-result-item:hover { background: var(--line-light); }
.search-result-item:last-child { border-bottom: none; }
.search-result-title { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.search-result-path { font-size: 0.75rem; color: var(--sub); margin-top: 2px; }
.search-result-empty { padding: 16px; color: var(--sub); font-size: 0.88rem; text-align: center; }

/* ─── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: #fff;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 20px 0 40px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.sidebar-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  padding: 16px 20px 6px;
}
.sidebar-section-label:first-child { padding-top: 4px; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  font-size: 0.875rem;
  color: var(--sub);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  line-height: 1.3;
}
.sidebar-link:hover {
  color: var(--navy);
  background: var(--line-light);
  text-decoration: none;
}
.sidebar-link.active {
  color: var(--navy);
  font-weight: 600;
  border-left-color: var(--teal);
  background: var(--tip-bg);
}
.sidebar-link.indent { padding-left: 36px; font-size: 0.82rem; }
.sidebar-link.indent-2 { padding-left: 50px; font-size: 0.80rem; }

.sidebar-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.sidebar-module-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Content area ───────────────────────────────────────────────── */
.content {
  grid-area: content;
  padding: 40px 48px 80px;
  max-width: calc(var(--content-max) + 96px);
}
@media (max-width: 900px) {
  .content { padding: 24px 20px 60px; }
}

.content-inner {
  max-width: var(--content-max);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--sub);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--sub); }
.breadcrumb a:hover { color: var(--teal-dim); text-decoration: none; }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--navy); font-weight: 500; }

/* ─── Headings ───────────────────────────────────────────────────── */
.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 8px;
}
.page-subtitle {
  font-size: 1rem;
  color: var(--sub);
  margin-bottom: 32px;
  line-height: 1.5;
}
.section-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sub);
  background: var(--line-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
h2:first-of-type { margin-top: 0; }
h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-mid);
  margin: 24px 0 8px;
}
h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-mid);
  margin: 16px 0 6px;
}
p { margin-bottom: 12px; color: var(--ink); font-size: 0.95rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 20px; margin-bottom: 12px; }
li { margin-bottom: 4px; font-size: 0.95rem; }
strong { font-weight: 600; color: var(--navy); }
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--line-light);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--navy-mid);
}

/* ─── Callouts ───────────────────────────────────────────────────── */
.callout {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 0.9rem;
  border-left: 4px solid;
  display: flex;
  gap: 12px;
}
.callout-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.callout-body { flex: 1; }
.callout-body p { margin-bottom: 6px; }
.callout-body p:last-child { margin-bottom: 0; }
.callout-body strong { font-size: inherit; }

.callout.warn  { background: var(--warn-bg);   border-color: var(--warn-border);   color: var(--warn-text); }
.callout.info  { background: var(--info-bg);   border-color: var(--info-border);   color: var(--info-text); }
.callout.tip   { background: var(--tip-bg);    border-color: var(--tip-border);    color: var(--tip-text); }
.callout.danger{ background: var(--danger-bg); border-color: var(--danger-border); color: #7a1a1a; }
.callout.regl  { background: #ede8fa;          border-color: #7c55d4;              color: #3a1a7a; }

/* ─── Role pills ─────────────────────────────────────────────────── */
.roles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 16px;
}
.role-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  border: 1.5px solid;
}
.role-pill.tecnico  { background: #e8f4ff; color: #1a4a7a; border-color: #3a8fd4; }
.role-pill.qa       { background: #fde8ff; color: #5a1a7a; border-color: #b44fd4; }
.role-pill.aprobador{ background: #fff3e0; color: #7a3a00; border-color: #d47a20; }
.role-pill.admin    { background: #e8faf6; color: #0a5048; border-color: #2eb8a0; }
.role-pill.todos    { background: var(--line-light); color: var(--navy); border-color: var(--sub); }

/* ─── Steps / flujo de pasos ─────────────────────────────────────── */
.steps { margin: 16px 0; counter-reset: step-counter; }
.step {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  position: relative;
}
.step::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.step-body { flex: 1; padding-top: 2px; }
.step-body strong { display: block; font-size: 0.92rem; margin-bottom: 3px; color: var(--navy); }
.step-body p { font-size: 0.88rem; color: var(--sub); margin-bottom: 0; }

/* ─── Tabla de referencia ────────────────────────────────────────── */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.875rem;
}
.ref-table th {
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.ref-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:nth-child(even) td { background: var(--warm-50); }
.ref-table code { font-size: 0.8em; }

/* ─── Diagrama de flujo SVG wrapper ─────────────────────────────── */
.flow-diagram {
  margin: 24px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  overflow-x: auto;
}
.flow-diagram svg { display: block; margin: 0 auto; max-width: 100%; }
.flow-caption {
  font-size: 0.78rem;
  color: var(--sub);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* ─── Estado pills para el diagrama ─────────────────────────────── */
.state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.state-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid;
}
.state-pill.draft       { background: #f5f5f5;  color: #555; border-color: #bbb; }
.state-pill.in_review   { background: #e8f4ff;  color: #1a4a7a; border-color: #3a8fd4; }
.state-pill.reviewed    { background: #f0e8ff;  color: #4a1a7a; border-color: #7c55d4; }
.state-pill.approved    { background: #fff8e0;  color: #7a4a00; border-color: #d4a020; }
.state-pill.in_training { background: #fff0e0;  color: #7a3000; border-color: #d47020; }
.state-pill.effective   { background: #e8faf6;  color: #0a5048; border-color: #2eb8a0; }
.state-pill.obsolete    { background: #f5f5f5;  color: #777; border-color: #aaa; }

/* ─── FAQ ────────────────────────────────────────────────────────── */
.faq { margin: 8px 0; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  background: #fff;
  user-select: none;
  gap: 8px;
  transition: background 0.1s;
}
.faq-q:hover { background: var(--line-light); }
.faq-q .faq-arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-item.open .faq-arrow { transform: rotate(90deg); }
.faq-a {
  display: none;
  padding: 0 16px 14px;
  font-size: 0.88rem;
  color: var(--sub);
  background: #fff;
  border-top: 1px solid var(--line-light);
  padding-top: 12px;
}
.faq-item.open .faq-a { display: block; }

/* ─── On-this-page (tabla de contenidos) ────────────────────────── */
.otp {
  float: right;
  width: 200px;
  margin: 0 0 24px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 0.78rem;
}
.otp-title {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 8px;
}
.otp a {
  display: block;
  color: var(--sub);
  padding: 3px 0;
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color 0.1s, border-color 0.1s;
}
.otp a:hover, .otp a.active-anchor {
  color: var(--teal-dim);
  border-left-color: var(--teal);
  text-decoration: none;
}
@media (max-width: 1000px) { .otp { display: none; } }

/* ─── Cards de módulo (index.html) ──────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.module-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 20px rgba(46,184,160,0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.module-card-icon { font-size: 1.8rem; }
.module-card-title { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.module-card-desc  { font-size: 0.8rem; color: var(--sub); line-height: 1.4; }
.module-card-count { font-size: 0.72rem; color: var(--teal-dim); font-weight: 600; margin-top: auto; }

/* ─── Footer ─────────────────────────────────────────────────────── */
.help-footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--sub);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.help-footer a { color: var(--sub); }
.help-footer a:hover { color: var(--teal-dim); }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .help-root {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .sidebar { display: none; }
  .otp { display: none; }
  .content { padding: 20px 16px 60px; }
  .topbar-search { width: 180px; }
  .topbar-search:focus { width: 200px; }
}

/* ─── Anchor highlight (cuando llega desde un `?` del eQMS) ──────── */
:target {
  scroll-margin-top: 80px;
}
.anchor-highlight {
  animation: highlight-fade 2.5s ease forwards;
}
@keyframes highlight-fade {
  0%   { background: rgba(46,184,160,0.18); border-radius: 6px; }
  60%  { background: rgba(46,184,160,0.10); }
  100% { background: transparent; }
}

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .otp { display: none; }
  .help-root { display: block; }
  .content { padding: 0; max-width: 100%; }
}