/* ============================================================================
   MAPTAINER — Manuales de usuario (/es/recursos/manuales/)
   La portada reutiliza las tarjetas de hub; cada manual, la maquetación de la
   documentación funcional (p-doc.css) y la prosa (prose.css). Aquí solo va lo
   propio del manual: avisos, capturas, esquemas y paginación.
   ============================================================================ */

/* ---------------------------------------------------------------- Portada */
.manuals-hero h1 { max-width: 22ch; }
.manuals-hero .lead { max-width: 64ch; }

.manuals-search {
  position: relative; max-width: 560px; margin-top: var(--sp-6);
}
.manuals-search svg {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
}
.manuals-search input {
  width: 100%; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) * 2 + 18px);
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--r-2);
}
.manuals-search input::placeholder { color: var(--ink-3); }
.manuals-search input:focus { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.manuals-start { margin-top: var(--sp-4); font-size: var(--fs-cap); color: var(--ink-2); }
.manuals-start a { margin-left: var(--sp-3); color: var(--accent); }

.manuals-figures { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin: var(--sp-7) 0 0; }
.manuals-figures div { border-left: 1px solid var(--rule-2); padding-left: var(--sp-4); }
.manuals-figures dt {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-2);
}
.manuals-figures dd { margin: var(--sp-1) 0 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--ink); }

.manuals-cat .section-head { margin-bottom: var(--sp-6); }
.manuals-cat .section-head p { color: var(--ink-2); }
.manuals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 1000px) { .manuals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .manuals-grid { grid-template-columns: 1fr; } }

.manual-card .ico { width: 28px; height: 28px; color: var(--accent-hi); margin-bottom: var(--sp-4); }
.manual-card .d { flex: 1; }
.manual-card__meta {
  display: flex; gap: var(--sp-4); margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3);
}
.manuals-empty { padding-block: var(--sp-7); color: var(--ink-2); text-align: center; }

/* ----------------------------------------------------------------- Manual */
.manual-hero h1 { max-width: 24ch; }
.manual-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; }
.manual-facts span {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--ink-2);
}
.manual-back {
  display: inline-block; margin-top: var(--sp-5); font-size: var(--fs-cap); color: var(--ink-2); text-decoration: none;
}
.manual-back:hover { color: var(--accent); }

/* Los esquemas SVG del manual se dibujaron con estas variables sobre fondo
   claro: se traducen a la paleta navy del sitio. */
.manual-body {
  --bg: var(--paper-2); --tint: var(--navy-700); --edge: var(--rule-2);
  --quiet: var(--ink-2); --warn: var(--amber); --warn-tint: rgba(255, 180, 84, .12);
}
.manual-body figure > svg {
  display: block; width: 100%; height: auto; padding: var(--sp-5);
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: var(--r-2);
}
.manual-body figure > svg text { font-family: var(--font-display); }
/* Las capturas van a su tamaño natural, centradas en un marco: prose.css las
   estira al 100 % y las pequeñas (un menú, un diálogo) se pixelan. */
.manual-body figure > a {
  display: block; padding: var(--sp-4); background: var(--paper-3);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--ease);
}
.manual-body figure > a:hover { border-color: var(--accent-hi); }
.manual-body figure img {
  display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
  border: 0; box-shadow: none; cursor: zoom-in;
}

/* Las tablas llegan envueltas en .tabla, que hace de contenedor con scroll */
.manual-body .tabla { overflow-x: auto; margin: var(--sp-6) 0; }
.manual-body .tabla table { display: table; margin: 0; }

/* ---- Avisos: nota, consejo, limitación, aviso ---- */
.manual-body .admonition {
  --tone: var(--accent); --tone-wash: var(--accent-wash);
  position: relative; margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 28px);
  background: var(--tone-wash); border: 1px solid var(--rule); border-left: 2px solid var(--tone);
  border-radius: var(--r-2); font-size: var(--fs-cap); line-height: 1.6;
}
.manual-body .admonition::before {
  content: "i"; position: absolute; left: var(--sp-4); top: calc(var(--sp-4) + 2px);
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  font: 600 12px/1 var(--font-mono); color: var(--navy-900); background: var(--tone);
}
.manual-body .admonition p { margin: 0 0 var(--sp-2); }
.manual-body .admonition p:last-child { margin-bottom: 0; }
.manual-body .admonition .admonition-title {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tone);
}
.manual-body .admonition.consejo    { --tone: var(--ok);    --tone-wash: rgba(92, 214, 168, .08); }
.manual-body .admonition.consejo::before { content: "✓"; }
.manual-body .admonition.limitacion { --tone: var(--amber); --tone-wash: rgba(255, 180, 84, .08); }
.manual-body .admonition.limitacion::before { content: "!"; }
.manual-body .admonition.aviso      { --tone: var(--alert); --tone-wash: var(--alert-wash); }
.manual-body .admonition.aviso::before { content: "!"; }

/* ---- Paginación entre manuales ---- */
.manual-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--rule);
  font-family: var(--font-display);
}
.manual-pager a {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-3);
  text-decoration: none; color: var(--ink);
}
.manual-pager a:hover { border-color: var(--accent-hi); }
.manual-pager a:hover b { color: var(--accent); }
.manual-pager .next { text-align: right; grid-column: 2; }
.manual-pager small { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); }
.manual-pager b { font-weight: 600; }
@media (max-width: 640px) {
  .manual-pager { grid-template-columns: 1fr; }
  .manual-pager .next { grid-column: 1; }
}

.manual-card[hidden], .manuals-cat[hidden] { display: none; }

.manuals-note { max-width: 64ch; margin-top: calc(-1 * var(--sp-2)); font-size: var(--fs-cap); color: var(--ink-2); }