/* UH14.16 — Ayuda: el manual del Cotizador dentro de la app.
   Prefijos: `pfa-` el armazón de la vista (índice, buscador, portada, pie) y `pf-ay-` el contenido del manual
   (lo genera el convertidor a partir del .docx). Solo tokens del design system (pricefarma-tokens.css).
   Contrastes medidos contra la superficie que cada texto tiene DETRÁS de verdad (regla del 26-ago). */

.pfa { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--pf-s-6); align-items: start; }

/* ── Índice y buscador (columna izquierda, pegada al desplazarse) ── */
.pfa-lado {
  position: sticky; top: var(--pf-s-4);
  background: var(--pf-card); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md);
  padding: var(--pf-s-4); max-height: calc(100vh - var(--pf-topbar-h) - var(--pf-s-8)); overflow-y: auto;
}
.pfa-buscar .ci-input { width: 100%; }
.pfa-res { margin-top: var(--pf-s-3); display: flex; flex-direction: column; gap: var(--pf-s-1); }
.pfa-res__vacio { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pfa-hit {
  text-align: left; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-card);
  padding: var(--pf-s-2) var(--pf-s-3); cursor: pointer; font-family: var(--pf-font-ui); color: var(--pf-foreground);
  transition: background var(--pf-t-fast);
}
.pfa-hit:hover { background: var(--pf-sup-50); }
.pfa-hit:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 1px; }
.pfa-hit b { display: block; font-size: var(--pf-fs-sm); font-weight: 600; }
.pfa-hit small { display: block; font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); margin-top: 2px; }

.pfa-det > summary {
  display: none; cursor: pointer; list-style: none; padding: var(--pf-s-3); margin-top: var(--pf-s-3);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); font: 600 var(--pf-fs-base) var(--pf-font-ui); color: var(--pf-foreground);
}
.pfa-det > summary::-webkit-details-marker { display: none; }
.pfa-det > summary::after { content: "▾"; float: right; }
.pfa-det[open] > summary::after { content: "▴"; }
.pfa-det > summary:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pfa-toc { margin-top: var(--pf-s-4); display: flex; flex-direction: column; gap: var(--pf-s-1); }
.pfa-toc button {
  text-align: left; border: 0; background: transparent; cursor: pointer; font-family: var(--pf-font-ui);
  color: var(--pf-foreground); border-radius: var(--pf-r-sm); transition: background var(--pf-t-fast);
}
.pfa-toc button:hover { background: var(--pf-sup-100); }
.pfa-toc button:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 1px; }
.pfa-toc__cap { width: 100%; padding: var(--pf-s-2) var(--pf-s-3); font-size: var(--pf-fs-base); font-weight: 600; }
/* El capítulo abierto no depende solo del color: lleva fondo, negrita y filete a la izquierda */
.pfa-toc__cap.activo { background: var(--pf-sup-100); box-shadow: inset 3px 0 0 var(--pf-sup-700); }
.pfa-toc__secs { list-style: none; margin: var(--pf-s-1) 0 var(--pf-s-2) var(--pf-s-3); padding: 0 0 0 var(--pf-s-4); border-left: 1px solid var(--pf-border); }
.pfa-toc__secs button { width: 100%; padding: var(--pf-s-1) var(--pf-s-2); font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pfa-toc__secs button:hover { color: var(--pf-foreground); }

/* ── Documento ── */
.pfa-doc {
  background: var(--pf-card); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md);
  padding: var(--pf-s-8); min-width: 0;
}
.pfa-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pf-s-3); margin-bottom: var(--pf-s-6); }
.pfa-tit { margin: 0; font: 700 var(--pf-fs-xl) var(--pf-font-display); color: var(--pf-foreground); }
.pfa-sub { flex-basis: 100%; margin: 0; font-size: var(--pf-fs-md); color: var(--pf-muted-foreground); max-width: 62ch; }
.pfa-ver { flex-basis: 100%; margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); }

.pfa-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pf-s-4); }
.pfa-tarjeta {
  text-align: left; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: var(--pf-card);
  padding: var(--pf-s-4); cursor: pointer; font-family: var(--pf-font-ui); color: var(--pf-foreground);
  display: flex; flex-direction: column; gap: var(--pf-s-2); box-shadow: var(--pf-sh-xs);
  transition: background var(--pf-t-fast), box-shadow var(--pf-t-fast);
}
.pfa-tarjeta:hover { background: var(--pf-sup-50); box-shadow: var(--pf-sh-sm); }
.pfa-tarjeta:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pfa-tarjeta b { font: 700 var(--pf-fs-md) var(--pf-font-display); }
.pfa-tarjeta span { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }

.pfa-pie { display: flex; justify-content: space-between; gap: var(--pf-s-4); margin-top: var(--pf-s-10); padding-top: var(--pf-s-5); border-top: 1px solid var(--pf-border); }
.pfa-pie__btn {
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: var(--pf-card); cursor: pointer;
  padding: var(--pf-s-3) var(--pf-s-4); font: 600 var(--pf-fs-base) var(--pf-font-ui); color: var(--pf-foreground); text-align: left; max-width: 48%;
  transition: background var(--pf-t-fast);
}
.pfa-pie__btn:hover { background: var(--pf-sup-50); }
.pfa-pie__btn:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pfa-pie__btn small { display: block; font-weight: 500; font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); }
.pfa-pie__btn--sig { margin-left: auto; text-align: right; }

/* ── Contenido del manual ── */
.pf-ay { max-width: 760px; font-size: var(--pf-fs-md); line-height: 1.65; color: var(--pf-foreground); }
.pf-ay p { margin: 0 0 var(--pf-s-4); }
.pf-ay h2 { font: 700 var(--pf-fs-lg) var(--pf-font-display); margin: var(--pf-s-10) 0 var(--pf-s-4); scroll-margin-top: var(--pf-s-4); }
.pf-ay h2:first-child { margin-top: 0; }
.pf-ay h3 { font: 700 var(--pf-fs-md) var(--pf-font-display); margin: var(--pf-s-6) 0 var(--pf-s-3); scroll-margin-top: var(--pf-s-4); }
.pf-ay strong { font-weight: 700; }
.pf-ay a { color: var(--pf-teal-700); font-weight: 600; text-decoration: underline; }
.pf-ay ul { margin: 0 0 var(--pf-s-4); padding-left: var(--pf-s-6); }
.pf-ay li { margin-bottom: var(--pf-s-2); }

/* Pasos numerados: el número va en un círculo oscuro (blanco sobre sup-700 = 8.20) */
.pf-ay-paso { display: flex; gap: var(--pf-s-3); align-items: flex-start; margin: 0 0 var(--pf-s-4); }
.pf-ay-n {
  flex: none; width: 28px; height: 28px; border-radius: var(--pf-r-pill); background: var(--pf-sup-700); color: #fff;
  display: grid; place-items: center; font: 700 var(--pf-fs-sm) var(--pf-font-display); font-variant-numeric: tabular-nums; margin-top: 1px;
}
.pf-ay-paso > div { min-width: 0; }

.pf-ay-fig { margin: var(--pf-s-4) 0 var(--pf-s-6); text-align: center; }
.pf-ay-fig img {
  max-width: 100%; height: auto; min-height: 60px; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-xs); cursor: zoom-in; background: var(--pf-sup-50);
}
.pf-ay-fig figcaption { margin-top: var(--pf-s-2); font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); }
.pfa-img-falla { cursor: default !important; }

/* Tablas: se desplazan de lado dentro de su caja en pantalla estrecha, la página no */
.pf-ay-tabla { overflow-x: auto; margin: 0 0 var(--pf-s-5); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); }
.pf-ay-tabla table { width: 100%; border-collapse: collapse; font-size: var(--pf-fs-base); line-height: 1.5; }
.pf-ay-tabla th { background: var(--pf-sup-100); text-align: left; font-weight: 700; }
.pf-ay-tabla th, .pf-ay-tabla td { padding: var(--pf-s-2) var(--pf-s-3); border-bottom: 1px solid var(--pf-border); vertical-align: top; }
.pf-ay-tabla tbody tr:last-child td { border-bottom: 0; }
.pf-ay-tabla td p { margin: 0 0 var(--pf-s-2); }
.pf-ay-tabla td:first-child { font-weight: 600; }

/* Avisos: la etiqueta dice qué clase de aviso es, así que el color nunca va solo */
.pf-ay-aviso { border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); margin: 0 0 var(--pf-s-5); border: 1px solid var(--pf-border); border-left-width: 4px; font-size: var(--pf-fs-base); line-height: 1.6; }
.pf-ay-aviso p { margin: 0 0 var(--pf-s-2); }
.pf-ay-aviso p:last-child, .pf-ay-aviso ul:last-child { margin-bottom: 0; }
.pf-ay-aviso-t { display: block; font: 700 var(--pf-fs-xs) var(--pf-font-ui); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--pf-s-1); }
.pf-ay-aviso--consejo { background: var(--pf-teal-50); border-color: var(--pf-teal-600); }
.pf-ay-aviso--consejo .pf-ay-aviso-t { color: var(--pf-teal-700); }
.pf-ay-aviso--dato, .pf-ay-aviso--recuerda { background: var(--pf-sup-50); border-color: var(--pf-sup-600); }
.pf-ay-aviso--dato .pf-ay-aviso-t, .pf-ay-aviso--recuerda .pf-ay-aviso-t { color: var(--pf-sup-700); }
.pf-ay-aviso--admin { background: var(--pf-sup-100); border-color: var(--pf-sup-700); }
.pf-ay-aviso--admin .pf-ay-aviso-t { color: var(--pf-sup-700); }
.pf-ay-aviso--ojo { background: var(--pf-warning-subtle); border-color: var(--pf-amber-700); }
.pf-ay-aviso--ojo .pf-ay-aviso-t { color: var(--pf-warning-on-subtle); }
.pf-ay-aviso--mal { background: var(--pf-destructive-subtle); border-color: var(--pf-red-600); }
.pf-ay-aviso--mal .pf-ay-aviso-t { color: var(--pf-destructive-on-subtle); }

/* Al llegar desde el buscador o un enlace interno, lo encontrado parpadea una vez */
.pfa-flash { animation: pfa-flash 2s ease-out 1; }
@keyframes pfa-flash { 0%, 40% { background: var(--pf-warning-subtle); } 100% { background: transparent; } }

/* Captura ampliada */
.pfa-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(35, 39, 54, .88); display: grid; place-items: center; padding: var(--pf-s-6); cursor: zoom-out; }
.pfa-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--pf-r-md); background: #fff; }
.pfa-zoom__x { position: absolute; top: var(--pf-s-4); right: var(--pf-s-4); width: 44px; height: 44px; border-radius: var(--pf-r-pill); border: 0; background: #fff; color: var(--pf-foreground); font-size: 18px; cursor: pointer; }

/* ── Pantalla estrecha: el índice se pone arriba y deja de pegarse ── */
@media (max-width: 1000px) {
  .pfa { grid-template-columns: minmax(0, 1fr); }
  .pfa-lado { position: static; max-height: none; }
  .pfa-det > summary { display: block; }
  .pfa-doc { padding: var(--pf-s-5); }
  .pfa-pie { flex-direction: column; }
  .pfa-pie__btn { max-width: none; }
  .pfa-pie__btn--sig { margin-left: 0; text-align: left; }
}

/* ── Imprimir: solo el capítulo, sin armazón ── */
@media print {
  .pf-sidebar, .ci-topbar, .pfa-lado, .pfa-acc, .pfa-pie, .pfa-zoom { display: none !important; }
  body.pf-app, body.pf-app.pf-sb-abierta { padding-left: 0 !important; background: #fff !important; }
  body.pf-app .ci-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .pfa { display: block; }
  .pfa-doc { border: 0; padding: 0; }
  .pf-ay { max-width: none; font-size: 11pt; }
  .pf-ay-fig, .pf-ay-aviso, .pf-ay-paso, .pf-ay-tabla tr { break-inside: avoid; }
  .pf-ay-fig img { max-height: 11cm; width: auto; box-shadow: none; }
  .pf-ay h2, .pf-ay h3 { break-after: avoid; }
}