/* La guía, con la paleta y las formas del portal munincloud.com (Tailwind: slate para texto y fondos, emerald para
   acentos y enlaces, tarjetas rounded-2xl con borde slate-200). Sin fuentes ni nada de fuera: las del sistema (la
   pila font-sans de Tailwind). Sin modo oscuro: el portal no lo tiene. POR1·2, 2026-10-04.
   slate  50 #f8fafc · 100 #f1f5f9 · 200 #e2e8f0 · 400 #94a3b8 · 500 #64748b · 600 #475569 · 700 #334155 · 900 #0f172a
   emerald 50 #ecfdf5 · 300 #6ee7b7 · 400 #34d399 · 500 #10b981 · 600 #059669 · 700 #047857 */

/* La barra de arriba: la comparten la guía y la referencia (body.guia / body.referencia) */
.barra { position: sticky; top: 0; z-index: 50; background: rgba(248, 250, 252, .92); border-bottom: 1px solid #e2e8f0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.barra .ancho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 4rem; }
.barra a { text-decoration: none; }
.barra .marca { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.25rem; font-weight: 900;
  letter-spacing: -.025em; color: #0f172a; }
.barra .logo { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: .75rem; background: #0f172a; color: #fff; font-weight: 800; font-size: 1.25rem;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .2); }
.barra .vuelta { font-size: .875rem; font-weight: 600; color: #475569; white-space: nowrap; }
.barra .vuelta:hover { color: #059669; }
.ancho { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* La guía */
body.guia { margin: 0; background: #f8fafc; color: #0f172a; line-height: 1.6;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.guia a { color: #059669; font-weight: 600; text-decoration: none; }
.guia a:hover { text-decoration: underline; }
.guia .portada { padding: 2.5rem 0 1.5rem; }
.guia .portada h1 { margin: 0 0 .5rem; font-size: 2rem; line-height: 1.15; font-weight: 900; letter-spacing: -.025em; }
.guia .resumen { color: #475569; font-size: 1.05rem; }
.guia .resumen p { margin: 0 0 1rem; }
.guia .portada nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.guia .portada nav a { display: inline-block; padding: .35rem .8rem; border-radius: 9999px; background: #fff;
  border: 1px solid #e2e8f0; color: #475569; font-size: .875rem; }
.guia .portada nav a:hover { border-color: #6ee7b7; color: #047857; text-decoration: none; }
.guia main { max-width: 72rem; margin: 0 auto; padding: 0 1rem 3rem; }
.guia section { margin-top: 1.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.guia h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em; }
.guia h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; font-weight: 800; }
.guia h4 { margin: 1.2rem 0 .3rem; font-size: 1rem; font-weight: 700; color: #334155; }
.guia p, .guia li { color: #475569; }
.guia strong { color: #0f172a; }
.guia pre { background: #0f172a; color: #f1f5f9; padding: .9rem 1rem; overflow-x: auto; border-radius: .75rem;
  font-size: .85rem; line-height: 1.5; }
.guia code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.guia :not(pre) > code { background: #f1f5f9; color: #0f172a; border-radius: .375rem; padding: .1rem .35rem;
  font-size: .85em; overflow-wrap: break-word; }
.guia td > code { white-space: nowrap; }                     /* un código de error no se parte (MULTIFACTURA) */
.guia .tabla { overflow-x: auto; margin: 1rem 0; border: 1px solid #e2e8f0; border-radius: .75rem; }
.guia table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.guia th, .guia td { border-bottom: 1px solid #e2e8f0; padding: .55rem .75rem; vertical-align: top; text-align: left; }
.guia tr:last-child td { border-bottom: 0; }
.guia th { background: #f8fafc; color: #64748b; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; }
.guia td pre { margin: 0; padding: .5rem; font-size: .78rem; }
.guia .etiqueta { display: inline-block; margin: 0 0 .75rem; padding: .25rem .65rem; border-radius: 9999px;
  background: #ecfdf5; color: #047857; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.guia a.boton { display: inline-block; padding: .65rem 1.25rem; border-radius: .75rem; background: #059669; color: #fff;
  font-weight: 700; }
.guia a.boton:hover { background: #047857; text-decoration: none; }
.guia .pendiente { color: #b91c1c; }
.guia .marcas { font-size: .8rem; color: #64748b; }
.guia footer { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; font-size: .85rem; color: #64748b; }

/* La referencia (Swagger UI trae su propio estilo; aquí solo el margen y la vuelta a la guía) */
body.referencia { margin: 0; background: #fff; }
.referencia .volver { max-width: 72rem; margin: .75rem auto 0; padding: 0 1rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: .875rem; }
.referencia .volver a { color: #059669; font-weight: 600; text-decoration: none; }

@media (min-width: 768px) {
  .barra .ancho { height: 5rem; padding: 0 1.5rem; }
  .barra .marca { font-size: 1.5rem; }
  .ancho, .guia main, .guia footer, .referencia .volver { padding-left: 1.5rem; padding-right: 1.5rem; }
  .guia .portada { padding: 3.5rem 0 2rem; }
  .guia .portada h1 { font-size: 2.5rem; }
  .guia section { padding: 2rem; }
}