/* SIAC · plantilla de los manuales GENERADOS (docs/manuales-web/generar.py; MANUALES_WEB_PLAN §4).
 *
 * Va DESPUÉS de styles.css (la barra, el héroe, el acento por producto y la cuadrícula que comparten los 45
 * manuales) y solo agrega lo nuevo: la ficha de pantalla, los avisos del protocolo, las tablas, los diagramas,
 * el índice con la sección activa y el bloque de Airo. Todo cuelga de `body.mw` para no tocar a los demás.
 */
body.mw {
  --mw-azul: #1D63C9; --mw-verde: #1B7F52; --mw-rojo: #B42318; --mw-violeta: #5B3FA6; --mw-naranja-txt: #A34F10;
  --mw-nota-azul: #EAF1FC; --mw-nota-azul-b: #C5D7F2; --mw-nota-naranja: #FDF0E4; --mw-nota-naranja-b: #F3CFAE;
  --mw-nota-verde: #E6F4EC; --mw-nota-verde-b: #BFE0CC; --mw-nota-rojo: #FCEBE9; --mw-nota-rojo-b: #F2C4BE;
  --mw-nota-violeta: #F2EDFB; --mw-nota-violeta-b: #D9CDF1; --mw-fila: #fafbfd;
}
.mw-saltar { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--brand); color: #fff; padding: 8px 14px;
  border-radius: 8px; font-weight: 700; }
.mw-saltar:focus { top: 10px; }

/* ---------- héroe: la pantalla real en lugar del dibujo ---------- */
.mw-hero .hero-art .shot img { display: block; width: 100%; height: auto; }
.mw-hero .hero-art .shot { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }
.mw-meta span { font-size: 12.5px; }
.mw-hero .hero-cta a.primary::before { content: "↓ "; font-weight: 800; }

/* ---------- índice ---------- */
.mw-toc a.is-activa { background: var(--brand-50); color: var(--brand); border-left-color: var(--brand); }
.mw-toc a.mw-toc-pdf { margin-top: 14px; border: 1px dashed var(--brand-100); color: var(--brand); text-align: center; }
.mw-toc-movil { display: none; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.mw-toc-movil summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; }
.mw-toc-movil nav { display: grid; padding: 0 8px 10px; }
.mw-toc-movil a { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
@media (max-width: 820px) { .mw-toc-movil { display: block; } }

/* ---------- cuerpo ---------- */
.mw-cuerpo { min-width: 0; }
.mw-como-leer { display: flex; gap: 10px; align-items: baseline; margin: 0 0 26px; padding: 11px 14px; font-size: 13.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.mw-seccion { scroll-margin-top: 76px; }
.mw-seccion.mw-pantalla { padding-top: 26px; border-top: 1px solid var(--border); }
.mw-seccion p { margin: 0 0 12px; }
.mw-para { font-size: 15.5px; max-width: 72ch; }
.mw-h3, .mw-cuerpo h3 { font-size: 16px; margin: 24px 0 8px; letter-spacing: -.1px; }
.mw-cuerpo span.btn { display: inline-block; margin: 0; padding: 1px 9px; border-radius: 7px; font-size: .88em; font-weight: 700; line-height: 1.55;
  background: var(--brand-50); color: var(--brand-dark); border: 1px solid var(--brand-100); box-shadow: none; white-space: nowrap; }
.mw-cuerpo span.btn:hover { transform: none; filter: none; }
.mw-cuerpo .ruta { font-weight: 700; color: var(--brand); }
.mw-cuerpo .ruta .sep { color: #B4530F; margin: 0 2px; }
.mw-cuerpo .cod { font: 600 .86em "Cascadia Code", Consolas, monospace; background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.mw-req li { margin: 4px 0; }

/* ---------- ficha de la pantalla ---------- */
.mw-cuerpo .ficha-pantalla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; margin: 4px 0 18px;
  padding: 14px 18px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px;
  font-size: 14px; box-shadow: var(--shadow-sm); }
.mw-cuerpo .ficha-pantalla > div > b:first-child { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* ---------- avisos del protocolo (§8): tipo y color ---------- */
.mw-cuerpo .nota { margin: 16px 0; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--mw-nota-azul-b); background: var(--mw-nota-azul);
  font-size: 14.5px; }
.mw-cuerpo .nota-t { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--mw-azul); margin-bottom: 4px; }
.mw-cuerpo .nota > div > :last-child { margin-bottom: 0; }
.mw-cuerpo .nota.importante { background: var(--mw-nota-naranja); border-color: var(--mw-nota-naranja-b); }
.mw-cuerpo .nota.importante .nota-t { color: var(--mw-naranja-txt); }
.mw-cuerpo .nota.regla { background: var(--mw-nota-verde); border-color: var(--mw-nota-verde-b); }
.mw-cuerpo .nota.regla .nota-t { color: var(--mw-verde); }
.mw-cuerpo .nota.bloqueo { background: var(--mw-nota-rojo); border-color: var(--mw-nota-rojo-b); }
.mw-cuerpo .nota.bloqueo .nota-t { color: var(--mw-rojo); }
.mw-cuerpo .nota.cuando { background: var(--mw-nota-violeta); border-color: var(--mw-nota-violeta-b); }
.mw-cuerpo .nota.cuando .nota-t { color: var(--mw-violeta); }
.mw-bloqueo { padding: 8px 0; border-top: 1px dashed var(--mw-nota-rojo-b); }
.mw-bloqueo:first-child { border-top: 0; padding-top: 2px; }
.mw-mensaje { font: 600 13.5px "Cascadia Code", Consolas, monospace; color: var(--mw-rojo); margin-bottom: 3px; }

/* ---------- tablas ---------- */
.mw-cuerpo table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0; font-size: 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.mw-cuerpo caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 2px 8px; }
.mw-cuerpo th { text-align: left; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 800;
  padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.mw-cuerpo td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.mw-cuerpo tbody tr:last-child td { border-bottom: 0; }
.mw-cuerpo tbody tr:nth-child(even) td { background: var(--mw-fila); }
.mw-cuerpo table.botones td:first-child { width: 30%; } .mw-cuerpo table.botones td:nth-child(2) { width: 26%; color: var(--muted); }
.mw-cuerpo table.botones2 td:first-child { width: 30%; }

/* ---------- diagramas (SVG del núcleo) ---------- */
.mw-cuerpo figure.diagrama { margin: 18px 0; padding: 18px 16px 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.mw-cuerpo figure.diagrama svg { display: block; min-width: 560px; height: auto; }
.mw-cuerpo figure.diagrama figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; font-weight: 600; }

/* ---------- preguntas y Airo ---------- */
details.mw-pregunta { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px; }
details.mw-pregunta summary { cursor: pointer; padding: 13px 16px; font-weight: 700; }
details.mw-pregunta > :not(summary) { padding: 0 16px; }
details.mw-pregunta[open] { padding-bottom: 6px; }
.mw-airo { display: flex; gap: 18px; align-items: flex-start; border-color: var(--brand-100);
  background: linear-gradient(135deg, var(--brand-50), var(--panel) 60%); }
.mw-airo-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: var(--shadow-md); }
.mw-airo-ej { margin: 12px 0 4px !important; font-weight: 700; font-size: 13.5px; }
.mw-airo-lista { margin: 0 0 6px; color: var(--muted); }
.mw-acciones { display: flex; flex-wrap: wrap; gap: 0 4px; }
.mw-cuerpo .falta { color: var(--mw-rojo); font-weight: 700; }

@media (max-width: 560px) {
  .mw .topnav .cta { display: none; }              /* el héroe ya trae «Abrir en SIAC»: la barra cabe en una línea */
  .mw-cuerpo table { display: block; overflow-x: auto; }
  /* Las tablas de elementos, apiladas: cada fila es una ficha (el botón arriba, qué hace debajo). Con desplazamiento
     lateral, el título de la tabla se cortaba y había que arrastrar para leer «Qué hace». */
  .mw-cuerpo table.botones, .mw-cuerpo table.botones2 { display: table; }
  .mw-cuerpo table.botones thead, .mw-cuerpo table.botones2 thead { display: none; }
  .mw-cuerpo table.botones tr, .mw-cuerpo table.botones2 tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .mw-cuerpo table.botones td, .mw-cuerpo table.botones2 td { display: block; width: auto !important; padding: 2px 0; border: 0; }
  .mw-cuerpo table.botones caption, .mw-cuerpo table.botones2 caption { white-space: normal; }
  .mw-cuerpo td span.btn { white-space: normal; }   /* «Nodos · Herramientas · Llamadas 24 h · Pendientes» no cabe en 360 px */
  .mw-airo { flex-direction: column; }
  .mw-hero .hero-art { display: none; }
  .mw-cuerpo .ficha-pantalla { grid-template-columns: 1fr; }
}

/* ---------- tema oscuro ---------- */
@media (prefers-color-scheme: dark) {
  body.mw {
    --mw-azul: #8db8ff; --mw-verde: #6fd3a0; --mw-rojo: #ff9c90; --mw-violeta: #c6b2ff; --mw-naranja-txt: #ffb77a;
    --mw-nota-azul: #15233a; --mw-nota-azul-b: #27406a; --mw-nota-naranja: #2e1f12; --mw-nota-naranja-b: #5c3a1c;
    --mw-nota-verde: #11281d; --mw-nota-verde-b: #1f4d36; --mw-nota-rojo: #2f1715; --mw-nota-rojo-b: #5e2a25;
    --mw-nota-violeta: #221a36; --mw-nota-violeta-b: #3d3163; --mw-fila: #1b2027;
  }
  .mw-cuerpo .ruta .sep { color: #f0a064; }
  .mw-cuerpo span.btn { color: #dbe8fb; background: color-mix(in srgb, var(--brand) 30%, #10151c);
    border-color: color-mix(in srgb, var(--brand) 60%, #10151c); }
  /* Los diagramas del núcleo pintan cajas blancas y tinta oscura: en oscuro se invierten con CSS, sin tocar el SVG. */
  .mw-cuerpo figure.diagrama svg rect[fill="#fff"] { fill: #1c222b; }
  .mw-cuerpo figure.diagrama svg text[fill="#1B2430"] { fill: #e3e8ef; }
}

/* ---------- impresión desde el navegador (el PDF bueno es el descargable) ---------- */
@media print {
  .mw-saltar, .mw-toc-movil, .mw-como-leer, .mw-hero .hero-cta, .mw-toc-pdf, #airo { display: none !important; }
  .layout { display: block; }
  .mw-seccion { animation: none; break-inside: auto; }
  .mw-cuerpo table, .mw-cuerpo .nota, .mw-cuerpo figure.diagrama { box-shadow: none; break-inside: avoid; }
  details.mw-pregunta > :not(summary) { display: block; }
}
/* Bloque de código (```): un comando largo se desplaza dentro de su caja, nunca ensancha la página. */
.mw-cuerpo pre.bloque-cod { margin: 14px 0; padding: 12px 14px; overflow-x: auto; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; font: 500 13px/1.55 "Cascadia Code", Consolas, monospace; color: var(--text); white-space: pre; }