/* Manual satelital AvanSys — estilos de impresión A4 */
@page { size: A4; margin: 17mm 16mm 18mm 16mm; }
@page { @bottom-right { content: counter(page); font: 9px "Segoe UI", Arial, sans-serif; color: #7a8a85; } }
@page { @bottom-left { content: "AvanSys · Satelital · Manual de uso"; font: 9px "Segoe UI", Arial, sans-serif; color: #7a8a85; } }
@page :first { @bottom-left { content: none; } @bottom-right { content: none; } }

:root {
  --ink: #163d35; --ink2: #1f2937; --soft: #5f7b73; --muted: #8aa39b;
  --brand: #125248; --accent: #159670; --line: #dfe7e4; --line2: #eef2f0;
  --bg: #f4f7f6; --warn: #b45309; --alert: #b91c1c; --blue: #1d4ed8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--ink2); font-size: 10.6pt; line-height: 1.5; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.2; margin: 0 0 8px; break-after: avoid; }
h1 { font-size: 24pt; }
h2 { font-size: 17pt; margin-top: 4px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
h3 { font-size: 12.5pt; margin-top: 18px; }
h4 { font-size: 10.8pt; margin-top: 12px; color: var(--brand); }
p { margin: 0 0 8px; }
ul, ol { margin: 0 0 10px 18px; padding: 0; }
li { margin: 2px 0; }
small { color: var(--soft); }
a { color: var(--brand); text-decoration: none; }
table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; font-size: 9.6pt; break-inside: auto; }
th, td { border: 1px solid var(--line); padding: 5px 7px; vertical-align: top; text-align: left; }
th { background: var(--bg); color: var(--ink); font-weight: 600; }
tr { break-inside: avoid; }
.chapter { break-before: page; }
.avoid { break-inside: avoid; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Etiqueta de interfaz (texto exacto que se ve en pantalla) */
.ui { display: inline-block; font-weight: 600; color: var(--ink); background: #eaf3ef; border: 1px solid #cfe3da; border-radius: 5px; padding: 0 5px; font-size: 0.93em; white-space: nowrap; }
.kbd { font-family: Consolas, monospace; font-size: 0.9em; background: #f1f3f2; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* Estado de disponibilidad */
.tag { display: inline-block; font-size: 8pt; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 1px 8px; vertical-align: middle; margin-left: 6px; }
.tag.prod { background: #dcf5e9; color: #0f6b47; }
.tag.new { background: #fff1d6; color: #9a5b00; }
.tag.desk { background: #e3ecff; color: #1f3f9e; }

/* Cajas */
.box { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: #f7faf9; border-radius: 8px; padding: 8px 12px; margin: 10px 0; break-inside: avoid; }
.box.warn { border-left-color: var(--warn); background: #fff9f0; }
.box.info { border-left-color: var(--blue); background: #f3f6ff; }
.box b:first-child { color: var(--ink); }
.steps { counter-reset: st; margin: 6px 0 12px; padding: 0; list-style: none; }
.steps li { position: relative; padding-left: 28px; margin: 5px 0; }
.steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 9pt; font-weight: 700; text-align: center; line-height: 19px; }

/* Portada */
.cover { height: 250mm; display: flex; flex-direction: column; justify-content: space-between; }
.cover .brand { font-size: 12pt; letter-spacing: .18em; font-weight: 700; color: var(--brand); }
.cover h1 { font-size: 34pt; margin-top: 60mm; }
.cover .sub { font-size: 15pt; color: var(--soft); margin-top: 6px; }
.cover .meta { color: var(--soft); font-size: 10pt; border-top: 1px solid var(--line); padding-top: 10px; }
.cover .band { height: 6px; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 3px; width: 120mm; margin-top: 16px; }

/* Índice */
.toc ol { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 24px; }
.toc li { padding: 3px 0; border-bottom: 1px dotted var(--line); break-inside: avoid; }
.toc li b { color: var(--brand); margin-right: 6px; }

/* Capturas reales */
figure { margin: 10px 0 14px; break-inside: avoid; }
figure img { width: 100%; border: 1px solid var(--line); border-radius: 8px; }
figcaption { font-size: 8.8pt; color: var(--soft); margin-top: 4px; }

/* ============ MAQUETAS ============ */
.mock { border: 1px solid #cfd9d5; border-radius: 12px; background: var(--bg); padding: 12px; margin: 8px 0 4px; font-size: 8.6pt; line-height: 1.35; color: var(--ink); break-inside: avoid; }
.mock.web { background: #f5f6f8; }
.mock.dark { background: #0f1f1b; color: #d9e6e1; border-color: #24443b; }
.mock-cap { font-size: 8.4pt; color: var(--soft); margin: 0 0 12px 2px; }
.mock-cap::before { content: "Maqueta ilustrativa · "; font-weight: 700; color: var(--brand); }
.m-card { background: #fff; border: 1px solid #dfe7e4; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.dark .m-card { background: #15302a; border-color: #24443b; }
.m-card.flat { box-shadow: none; }
.m-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.m-h b { font-size: 10pt; }
.m-h .sp { flex: 1; }
.m-kicker { font-size: 7.4pt; font-weight: 700; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.m-chip { display: inline-block; border: 1px solid #cfe3da; background: #eef6f2; color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 7.9pt; margin: 1px 3px 1px 0; white-space: nowrap; }
.m-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.m-chip.alert { background: #fde8e8; color: var(--alert); border-color: #f5c2c2; }
.m-chip.warn { background: #fff1d6; color: var(--warn); border-color: #f5d9a5; }
.m-chip.muted { background: #f1f3f2; color: var(--soft); border-color: #e2e7e5; }
.m-chip.ok { background: #dcf5e9; color: #0f6b47; border-color: #b9e6d0; }
.m-chip.blue { background: #e3ecff; color: var(--blue); border-color: #c5d5fb; }
.dark .m-chip { background: rgba(255,255,255,.06); border-color: #2e5248; color: #d9e6e1; }
.dark .m-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-btn { display: inline-block; border: 1px solid #cfd9d5; background: #fff; color: var(--ink); border-radius: 8px; padding: 3px 9px; font-size: 8.2pt; font-weight: 600; margin: 2px 4px 2px 0; white-space: nowrap; }
.m-btn.primary { background: #0d2b25; color: #fff; border-color: #0d2b25; }
.m-btn.ghost { border-color: transparent; background: transparent; color: var(--brand); padding-left: 4px; }
.m-btn.small { padding: 1px 7px; font-size: 7.6pt; }
.m-btn.danger { color: var(--alert); border-color: #f5c2c2; background: #fff5f5; }
.dark .m-btn { background: #1c3a33; border-color: #2e5248; color: #d9e6e1; }
.dark .m-btn.primary { background: var(--accent); border-color: var(--accent); }
.m-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.m-row .sp { flex: 1; }
.m-sub { color: var(--soft); font-size: 7.9pt; }
.dark .m-sub { color: #9fb8b0; }
.m-label { font-size: 7.4pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin: 8px 0 3px; }
.dark .m-label { color: #9fb8b0; }
.m-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); margin-right: 4px; vertical-align: middle; }
.m-dot.green { background: var(--accent); }
.m-ico { display: inline-block; width: 15px; text-align: center; color: var(--accent); font-weight: 700; }
.m-ico.red { color: var(--alert); }
.m-ico.blue { color: var(--blue); }
.m-ico.warn { color: var(--warn); }
.m-input { display: inline-block; border: 1px solid #cfd9d5; background: #fff; border-radius: 6px; padding: 2px 7px; min-width: 60px; color: var(--ink2); font-size: 8pt; }
.m-input.wide { min-width: 160px; }
.dark .m-input { background: #102621; border-color: #2e5248; color: #d9e6e1; }
.m-bar { height: 6px; background: #e3ebe7; border-radius: 3px; overflow: hidden; margin: 4px 0; }
.m-bar i { display: block; height: 100%; background: linear-gradient(90deg, #159670, #0d2b25); }
.m-facts { margin: 4px 0 6px 14px; padding: 0; }
.m-facts li { margin: 1px 0; }
.m-alert { border: 1px solid #dfe7e4; border-radius: 10px; padding: 6px 9px; margin: 5px 0; background: rgba(255,255,255,.7); }
.dark .m-alert { background: rgba(255,255,255,.04); border-color: #2e5248; }
.m-mods { border: 1px solid #eef2f0; border-radius: 10px; padding: 5px 9px; margin: 6px 0; display: grid; gap: 2px; }
.m-mods b { margin-right: 5px; }
.dark .m-mods { border-color: #2e5248; }
.m-foot { color: var(--soft); font-size: 7.6pt; margin-top: 6px; }
.dark .m-foot { color: #9fb8b0; }
.m-dialog { background: #fff; border-radius: 12px; border: 1px solid #dfe7e4; box-shadow: 0 6px 20px rgba(0,0,0,.08); max-width: 480px; margin: 0 auto; padding: 12px 14px; }
.m-dialog .m-h b { font-size: 11pt; }
.m-seg { display: inline-flex; border: 1px solid #cfd9d5; border-radius: 8px; overflow: hidden; }
.m-seg span { padding: 2px 8px; font-size: 7.8pt; }
.m-seg span.on { background: var(--brand); color: #fff; }
.m-slider { position: relative; height: 4px; background: #d8e2de; border-radius: 2px; margin: 10px 6px 6px; }
.m-slider i { position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px #9ec9b8; }
.m-scale { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #a16207, #fde047, #65a30d, #166534); position: relative; margin: 6px 0; }
.m-scale i { position: absolute; top: -3px; width: 3px; height: 14px; background: #111; }
.m-table { width: 100%; border-collapse: collapse; font-size: 7.9pt; margin: 4px 0; }
.m-table th, .m-table td { border: none; border-bottom: 1px solid #eef2f0; padding: 2px 4px; }
.dark .m-table th, .dark .m-table td { border-color: #2e5248; }
.m-rail { display: flex; gap: 8px; }
.m-rail .m-side { width: 40px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.m-rail .m-side span { width: 30px; height: 30px; border-radius: 8px; background: #1c3a33; border: 1px solid #2e5248; display: flex; align-items: center; justify-content: center; font-size: 7pt; color: #9fb8b0; }
.m-rail .m-side span.on { background: var(--accent); color: #fff; }
.m-rail .m-panel { flex: 1; }
.m-toast { background: #fff; border: 1px solid #dfe7e4; border-left: 4px solid var(--accent); border-radius: 8px; padding: 5px 9px; font-size: 8pt; display: inline-block; }
.m-legend { background: #fff; border: 1px solid #dfe7e4; border-radius: 10px; padding: 6px 9px; width: 190px; font-size: 7.8pt; }
.m-legend .z { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.m-legend .z i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* mini mapa */
.m-map { position: relative; height: 150px; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(45deg, #b9c9a2 0 6px, #aebd97 6px 12px), #b3c39c; border: 1px solid #c5d1c9; }
.m-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-map .lbl { position: absolute; background: rgba(255,255,255,.92); border-radius: 6px; padding: 1px 6px; font-size: 7.6pt; border: 1px solid #dfe7e4; }
.m-map .divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.m-map .divider b { position: absolute; top: 50%; left: -11px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #9aa; text-align: center; line-height: 22px; font-size: 10pt; transform: translateY(-50%); }
.m-map.tall { height: 210px; }