/* Hero Fight Club — Manual del administrador
 * Hoja común de docs/manuales/admin/*.html. Colores solo por var(--hero-*) (design/tokens.css).
 * Los gráficos son HTML/CSS (no imágenes): se adaptan de 390 a 1440 y se leen con lector de pantalla.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--hero-ink); color: var(--hero-text);
  font-family: var(--hero-font-ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: hidden;
}
a { color: var(--hero-blue-soft); text-underline-offset: 3px; }
a:hover { color: var(--hero-text); }
:focus-visible { outline: 2px solid var(--hero-blue-soft); outline-offset: 2px; border-radius: 6px; }
.num, .pin, .u-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--hero-blue-bright); color: var(--hero-text); padding: 10px 14px; border-radius: var(--hero-r-sm); }
.skip:focus { left: 8px; }

/* ---------- Barra superior y navegación ---------- */
.top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--hero-ink-deep); border-bottom: 1px solid var(--hero-line);
}
.top-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--hero-blue); display: grid; place-items: center; box-shadow: var(--hero-glow); flex-shrink: 0; }
.top-name { font-family: var(--hero-font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; }
.top-sub { font-size: 12px; color: var(--hero-text-2); line-height: 1.2; }
.top a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }

.layout { display: block; }
.side {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--hero-line);
  background: var(--hero-surface); scrollbar-width: thin;
}
.side a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; white-space: nowrap;
  border-radius: var(--hero-r-pill); border: 1px solid var(--hero-line); color: var(--hero-text-2);
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.side a:hover { background: var(--hero-blue-wash); color: var(--hero-text); }
.side a[aria-current="page"] { background: var(--hero-blue-wash); color: var(--hero-blue-soft); border-color: var(--hero-blue); font-weight: 600; }
.side-label { display: none; }

main { padding: 24px 16px 56px; max-width: 920px; margin: 0 auto; min-width: 0; }

@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
  .side {
    position: sticky; top: 59px; flex-direction: column; gap: 2px; overflow: visible; padding: 20px 12px;
    border-bottom: 0; border-right: 1px solid var(--hero-line); min-height: calc(100dvh - 59px);
  }
  .side a { border-radius: var(--hero-r-sm); border-color: transparent; white-space: normal; }
  .side-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hero-text-3); padding: 0 14px 8px; }
  main { padding: 40px 40px 80px; }
}

/* ---------- Tipografía del documento ---------- */
h1, h2, h3 { font-family: var(--hero-font-display); letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 800; }
h2 { font-size: clamp(21px, 4.4vw, 26px); font-weight: 700; margin-bottom: 8px; }
h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
p { max-width: 68ch; text-wrap: pretty; }
p + p { margin-top: 10px; }
.lead { font-size: 17px; color: var(--hero-text-2); margin-top: 10px; }
.muted { color: var(--hero-text-2); }
q, .ui { quotes: '«' '»'; font-weight: 600; color: var(--hero-text); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: max(12px, .9em); white-space: nowrap; background: var(--hero-surface-2); padding: 1px 6px; border-radius: 6px; }

.page-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.page-ico { width: 52px; height: 52px; border-radius: var(--hero-r-md); background: var(--hero-blue-wash); color: var(--hero-blue-soft); display: grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--hero-line); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hero-blue-soft); margin-bottom: 4px; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 8px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--hero-r-pill); background: var(--hero-surface); box-shadow: inset 0 0 0 1px var(--hero-line); color: var(--hero-text-2); text-decoration: none; font-size: 14px; }
.toc a:hover { color: var(--hero-text); background: var(--hero-surface-2); }

section.task { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hero-line); }
.when { color: var(--hero-text-2); margin-bottom: 4px; }

/* ---------- Pasos numerados (coinciden con los pines del gráfico) ---------- */
.pin {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; background: var(--hero-blue-bright); color: var(--hero-text);
  font-family: var(--hero-font-display); font-weight: 700; font-size: 13px; line-height: 1;
  box-shadow: 0 0 0 3px var(--hero-ink-deep), 0 2px 6px rgba(2, 10, 18, .5);
}
.steps { list-style: none; margin-top: 16px; display: grid; gap: 12px; counter-reset: paso; }
.steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: paso; }
.steps > li::before { content: counter(paso); display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--hero-blue-bright); color: var(--hero-text); font-family: var(--hero-font-display); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.steps > li > div > p { max-width: 62ch; }
.bul { margin: 8px 0 0 18px; display: grid; gap: 6px; max-width: 66ch; }
.bul li::marker { color: var(--hero-blue-soft); }

/* ---------- Figura: pantalla del panel ---------- */
.fig { margin: 20px 0 8px; }
.fig figcaption { font-size: 13px; color: var(--hero-text-2); margin-top: 10px; max-width: 68ch; }
.screen { container-type: inline-size; background: var(--hero-ink-deep); border-radius: var(--hero-r-lg); box-shadow: var(--hero-shadow-2), inset 0 0 0 1px var(--hero-line); overflow: hidden; }
.screen-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--hero-line); background: var(--hero-surface); }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hero-line); }
.screen-bar span { margin-left: 8px; font-size: 12px; color: var(--hero-text-3); }
.screen-body { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.screen-body.center { justify-items: center; padding: 24px 16px; }
.u-scroll { overflow-x: auto; border-radius: var(--hero-r-md); scrollbar-width: thin; }

.u-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.u-title { font-family: var(--hero-font-display); font-weight: 800; font-size: 19px; line-height: 1.2; }
.u-sub { font-size: 12px; color: var(--hero-text-2); }
.u-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--hero-r-sm); font-size: 13px; font-weight: 600; line-height: 1.2; background: var(--hero-surface-2); color: var(--hero-text); box-shadow: inset 0 0 0 1px var(--hero-line); white-space: nowrap; }
.u-btn.pri { background: var(--hero-blue-bright); box-shadow: none; }
.u-btn.dan { background: var(--hero-danger-wash); color: var(--hero-danger); box-shadow: inset 0 0 0 1px var(--hero-danger-line); }
.u-btn.ghost { background: transparent; color: var(--hero-text-2); }
.u-btn.wide { width: 100%; justify-content: center; padding: 10px 12px; }
.u-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--hero-r-pill); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--hero-surface-2); color: var(--hero-text-2); }
.u-chip.ok { background: var(--hero-ok-wash); color: var(--hero-ok); }
.u-chip.warn { background: var(--hero-warn-wash); color: var(--hero-warn); }
.u-chip.danger { background: var(--hero-danger-wash); color: var(--hero-danger); }
.u-chip.blue { background: var(--hero-blue-wash); color: var(--hero-blue-soft); }
.u-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--hero-line); font-size: 13px; font-weight: 600; color: var(--hero-text-2); }
.u-tabs > span:not(.pin) { padding: 8px 0; display: inline-flex; gap: 6px; align-items: center; }
.u-tabs > .pin { align-self: center; }
.u-tabs > .on { color: var(--hero-blue-soft); box-shadow: inset 0 -2px 0 var(--hero-blue-bright); }
.u-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .u-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.u-kpi { background: var(--hero-surface); border-radius: var(--hero-r-md); padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--hero-line-soft); }
.u-kpi b { display: block; font-family: var(--hero-font-display); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.u-kpi span { font-size: 12px; color: var(--hero-text-2); }
.u-card { background: var(--hero-surface); border-radius: var(--hero-r-md); box-shadow: inset 0 0 0 1px var(--hero-line-soft); }
.u-input { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: var(--hero-r-sm); background: var(--hero-ink); box-shadow: inset 0 0 0 1px var(--hero-line); font-size: 13px; color: var(--hero-text-3); }
.u-input.filled { color: var(--hero-text); }
.u-field { display: grid; gap: 4px; min-width: 0; }
.u-field > label, .u-label { font-size: 12px; font-weight: 600; color: var(--hero-text-2); display: flex; gap: 6px; align-items: center; }
.u-req { color: var(--hero-danger); }
.u-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.u-note { font-size: 12px; color: var(--hero-text-2); background: var(--hero-blue-wash); border-radius: var(--hero-r-sm); padding: 8px 10px; }
.u-note.dan { background: var(--hero-danger-wash); color: var(--hero-danger); }
.u-note.warn { background: var(--hero-warn-wash); color: var(--hero-warn); }
.u-note.ok { background: var(--hero-ok-wash); color: var(--hero-ok); }

/* tabla de la interfaz: filas en grid; --cols la define cada tabla */
.u-table { font-size: 13px; }
.pp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@container (max-width: 560px) {
  .u-table .u-tr.th { display: none; }
  .u-table .u-tr { display: flex; flex-wrap: wrap; gap: 6px 10px; }
  .u-table .u-tr > :first-child { flex-basis: 100%; font-weight: 600; }
  .u-table .u-tr > :empty { display: none; }
  .u-table .u-tr:nth-child(2) { border-top: 0; }
}
.u-tr { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--hero-line-soft); }
.u-tr.th { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hero-text-3); }
.u-tr > * { min-width: 0; }
.u-ava { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hero-blue); font-size: 12px; font-weight: 700; margin-right: 6px; vertical-align: middle; }

/* modal de la interfaz */
.u-modal { width: 100%; max-width: 440px; background: var(--hero-surface); border-radius: var(--hero-r-lg); box-shadow: var(--hero-shadow-2), inset 0 0 0 1px var(--hero-line); }
.u-modal-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--hero-line); font-family: var(--hero-font-display); font-weight: 700; font-size: 15px; }
.u-modal-b { padding: 14px 16px; display: grid; gap: 12px; font-size: 13px; }
.u-modal-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hero-line); }
.u-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--hero-r-sm); background: var(--hero-ink); font-size: 13px; font-weight: 600; text-align: center; color: var(--hero-text-2); }
.u-seg > .on { background: var(--hero-surface-2); color: var(--hero-text); border-radius: 6px; }
.u-seg > span { padding: 6px; }
.u-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.u-check::before { content: ''; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--hero-text-3); }
.u-check.on::before { background: var(--hero-blue-bright); box-shadow: none; }
.u-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.u-prog i { height: 4px; border-radius: 2px; background: var(--hero-line); }
.u-prog i.on { background: var(--hero-blue-bright); }

/* parrilla del horario */
.u-grid { display: grid; grid-template-columns: 44px repeat(var(--dias, 3), minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.u-grid .h { color: var(--hero-text-3); font-weight: 600; text-align: center; padding: 2px 0; }
.u-grid .h.hoy { color: var(--hero-blue-soft); }
.u-grid .t { color: var(--hero-text-3); font-variant-numeric: tabular-nums; padding-top: 8px; }
.u-cell { min-height: 58px; border-radius: var(--hero-r-sm); background: repeating-linear-gradient(135deg, var(--hero-line-hatch) 0 6px, transparent 6px 12px); }
.u-clase { min-height: 58px; border-radius: var(--hero-r-sm); background: var(--hero-surface-2); padding: 6px 8px; display: grid; gap: 2px; position: relative; box-shadow: inset 0 0 0 1px var(--hero-line-soft); }
.u-clase.full { background: var(--hero-danger-wash); box-shadow: inset 0 0 0 1px var(--hero-danger-line); }
.u-clase b { font-size: 12px; line-height: 1.3; padding-right: 14px; overflow-wrap: anywhere; }
.u-clase .cnt { font-weight: 700; font-variant-numeric: tabular-nums; }
.u-clase .dots { position: absolute; top: 4px; right: 4px; color: var(--hero-text-2); }
.c-ok { color: var(--hero-ok); } .c-warn { color: var(--hero-warn); } .c-danger { color: var(--hero-danger); } .c-blue { color: var(--hero-blue-soft); }

/* menú lateral del panel (figura) */
.u-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .u-shell { grid-template-columns: 190px minmax(0, 1fr); } }
.u-side { background: var(--hero-surface); border-right: 1px solid var(--hero-line); padding: 12px 10px; display: grid; gap: 2px; align-content: start; font-size: 13px; }
.u-side .it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--hero-r-sm); color: var(--hero-text-2); }
.u-side .it.on { background: var(--hero-blue-wash); color: var(--hero-blue-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--hero-blue-bright); }
.u-side .it .pin { margin-left: auto; }
.u-side .cap { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hero-text-3); padding: 6px 10px 2px; }

/* ---------- Diagrama de flujo ---------- */
.flow { display: flex; flex-direction: column; gap: 0; margin: 20px 0 8px; list-style: none; }
.flow > li { display: flex; flex-direction: column; align-items: stretch; }
.node { background: var(--hero-surface); border-radius: var(--hero-r-md); padding: 12px 14px; box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-line); display: grid; gap: 4px; align-content: start; flex: 1; }
.node b { font-family: var(--hero-font-display); font-size: 15px; display: block; }
.node b > .ic, .node b > .pin { margin-right: 8px; }
.node b > .u-chip { margin-right: 4px; }
.node > span { font-size: 13px; color: var(--hero-text-2); }
.node.ok { box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-ok); }
.node.warn { box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-warn); }
.node.danger { box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-danger-line); }
.flow > li + li::before { content: ''; align-self: center; width: 20px; height: 28px; background: var(--hero-blue-soft);
  -webkit-mask: var(--ic-arrow-down) center / 20px no-repeat; mask: var(--ic-arrow-down) center / 20px no-repeat; }
.flow > li[data-via]::before { margin-bottom: 0; }
.via { align-self: center; font-size: 12px; color: var(--hero-blue-soft); font-weight: 600; text-align: center; padding: 0 0 4px; }
@media (min-width: 768px) {
  .flow { flex-direction: row; align-items: stretch; }
  .flow > li { flex-direction: row; flex: 1; min-width: 0; }
  .flow > li + li::before { width: 28px; height: auto; min-height: 28px; align-self: stretch; flex-shrink: 0; -webkit-mask-image: var(--ic-arrow-right); mask-image: var(--ic-arrow-right); }
  .flow.col { flex-direction: column; }
  .flow.col > li { flex-direction: column; }
  .flow.col > li + li::before { width: 20px; height: 28px; min-height: 0; align-self: center; -webkit-mask-image: var(--ic-arrow-down); mask-image: var(--ic-arrow-down); }
}
.branch { display: grid; gap: 10px; margin: 16px 0 8px; }
@media (min-width: 640px) { .branch { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.branch .node b .u-chip { font-family: var(--hero-font-ui); }

/* ---------- Avisos, tablas de mensajes, «no hace» ---------- */
.call { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--hero-r-md); margin: 16px 0 0; background: var(--hero-blue-wash); max-width: 72ch; }
.call > .ic { color: var(--hero-blue-soft); margin-top: 2px; }
.call.warn { background: var(--hero-warn-wash); } .call.warn > .ic { color: var(--hero-warn); }
.call.danger { background: var(--hero-danger-wash); } .call.danger > .ic { color: var(--hero-danger); }
.call strong { display: block; font-family: var(--hero-font-display); }
.call p { font-size: 15px; }

.msgs { margin-top: 16px; border-radius: var(--hero-r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hero-line); background: var(--hero-surface); }
.msgs > div { display: grid; gap: 4px 20px; padding: 12px 16px; border-top: 1px solid var(--hero-line-soft); }
.msgs > div:first-child { border-top: 0; }
.msgs dt { font-weight: 600; font-size: 15px; }
.msgs dd { color: var(--hero-text-2); font-size: 15px; }
@media (min-width: 768px) { .msgs > div { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.nope { list-style: none; display: grid; gap: 10px; margin-top: 16px; max-width: 70ch; }
.nope li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--hero-text-2); }
.nope li .ic { color: var(--hero-text-3); margin-top: 3px; }

.cards { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: var(--hero-r-lg); background: var(--hero-surface); box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-line); text-decoration: none; color: var(--hero-text); transition: background 160ms ease-out, transform 160ms ease-out; }
a.card:hover { background: var(--hero-surface-2); color: var(--hero-text); }
a.card:active { transform: scale(.985); }
.card .cico { width: 44px; height: 44px; border-radius: var(--hero-r-md); background: var(--hero-blue-wash); color: var(--hero-blue-soft); display: grid; place-items: center; }
.card b { font-family: var(--hero-font-display); font-size: 17px; display: flex; gap: 8px; align-items: center; }
.card > span:last-child > span { font-size: 14px; color: var(--hero-text-2); display: block; margin-top: 2px; }

/* tabla comparativa del documento */
.cmp { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; background: var(--hero-surface); border-radius: var(--hero-r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hero-line); }
.cmp th, .cmp td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--hero-line-soft); vertical-align: top; }
.cmp thead th { border-top: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--hero-text-3); }
.cmp tbody th { font-weight: 600; }
@media (min-width: 640px) { .cmp tbody th { white-space: nowrap; } }
.cmp td { color: var(--hero-text-2); }
.cmp .y { color: var(--hero-ok); font-weight: 600; } .cmp .n { color: var(--hero-text-3); }
.cmp-wrap { overflow-x: auto; }
.cmp-hint { display: none; }
@media (max-width: 639px) {
  .cmp:not(.wide) thead { position: absolute; left: -9999px; }
  .cmp:not(.wide), .cmp:not(.wide) tbody, .cmp:not(.wide) tr, .cmp:not(.wide) th, .cmp:not(.wide) td { display: block; }
  .cmp:not(.wide) tr { padding: 12px 14px; border-top: 1px solid var(--hero-line-soft); }
  .cmp:not(.wide) tbody tr:first-child { border-top: 0; }
  .cmp:not(.wide) th, .cmp:not(.wide) td { padding: 0; border: 0; }
  .cmp:not(.wide) td { margin-top: 4px; }
  .cmp td[data-l]::before { content: attr(data-l) ' '; font-weight: 600; color: var(--hero-text); }
  .cmp.wide th:first-child { position: sticky; left: 0; background: var(--hero-surface); max-width: 132px; }
  .cmp-hint { display: block; font-size: 13px; color: var(--hero-blue-soft); margin-top: 12px; }
}

/* ---------- Gráficos interactivos ---------- */
.sim { margin: 20px 0 8px; padding: 16px; border-radius: var(--hero-r-lg); background: var(--hero-surface); box-shadow: var(--hero-shadow-1), inset 0 0 0 1px var(--hero-line); display: grid; gap: 14px; }
.sim-t { font-family: var(--hero-font-display); font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.sim label { font-size: 14px; color: var(--hero-text-2); display: grid; gap: 6px; }
.sim input[type="range"] { width: 100%; height: 44px; accent-color: var(--hero-blue-bright); cursor: pointer; }
.sim input[type="number"], .sim input[type="text"] { min-height: 44px; padding: 8px 12px; border-radius: var(--hero-r-sm); border: 1px solid var(--hero-line); background: var(--hero-ink); color: var(--hero-text); font: inherit; width: 100%; max-width: 320px; }
.sim .chk { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--hero-text); }
.sim .chk input { width: 20px; height: 20px; accent-color: var(--hero-blue-bright); cursor: pointer; }
.sim-out { display: grid; gap: 8px; padding: 14px; border-radius: var(--hero-r-md); background: var(--hero-ink); }
.sim-out .big { font-family: var(--hero-font-display); font-weight: 800; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim-out p { font-size: 14px; color: var(--hero-text-2); }
.bar { height: 10px; border-radius: 5px; background: var(--hero-line); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 100%; transform-origin: left; background: currentColor; transition: transform 200ms ease-out; }
.sim-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .sim-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.reqs { list-style: none; display: grid; gap: 6px; font-size: 14px; }
.reqs li { display: flex; gap: 8px; align-items: center; color: var(--hero-text-2); }
.reqs li.on { color: var(--hero-ok); }
.reqs li .ic { -webkit-mask-image: var(--ic-x); mask-image: var(--ic-x); }
.reqs li.on .ic { -webkit-mask-image: var(--ic-check); mask-image: var(--ic-check); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { min-height: 44px; padding: 0 16px; border-radius: var(--hero-r-pill); border: 1px solid var(--hero-line); background: transparent; color: var(--hero-text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 160ms ease-out, color 160ms ease-out; }
.tabs button:hover { background: var(--hero-blue-wash); color: var(--hero-text); }
.tabs button[aria-selected="true"] { background: var(--hero-blue-bright); border-color: var(--hero-blue-bright); color: var(--hero-text); }
.js .tabpanel[hidden] { display: none; }
.tabpanel + .tabpanel { margin-top: 20px; }
.js .tabpanel + .tabpanel { margin-top: 0; }
.tabpanel > h3:first-child { margin-top: 16px; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--hero-text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; }

.pager { display: grid; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hero-line); }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } .pager .next { text-align: right; justify-items: end; } }
.pager a { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--hero-r-md); background: var(--hero-surface); box-shadow: inset 0 0 0 1px var(--hero-line); text-decoration: none; min-height: 44px; }
.pager a:hover { background: var(--hero-surface-2); }
.pager small { color: var(--hero-text-3); font-size: 12px; }
.pager b { font-family: var(--hero-font-display); color: var(--hero-text); }
.foot { margin-top: 24px; font-size: 13px; color: var(--hero-text-3); }

/* ---------- Iconos (Lucide, los mismos del panel) ---------- */
.ic { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; vertical-align: -3px;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ic.s { width: 14px; height: 14px; vertical-align: -2px; }
.ic.l { width: 24px; height: 24px; }

@media print {
  .top, .side, .pager, .skip { display: none; }
  body { background: var(--hero-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  section.task { break-inside: avoid-page; }
}

/* ICONOS-GEN */
:root {
  --ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");
  --ic-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --ic-pay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
  --ic-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  --ic-usercog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M10.3 15H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3Cpath d='M18 11.5V13M18 19v1.5M21.9 13.75l-1.3.75M15.4 17.5l-1.3.75M21.9 18.25l-1.3-.75M15.4 14.5l-1.3-.75'/%3E%3C/svg%3E");
  --ic-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
  --ic-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4M21 2l-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E");
  --ic-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
  --ic-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
  --ic-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3ZM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --ic-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
  --ic-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --ic-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
  --ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .7-1.5l7-6a2 2 0 0 1 2.6 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ic-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E");
  --ic-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4'/%3E%3C/svg%3E");
  --ic-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
}
.ic.i-calendar { -webkit-mask-image: var(--ic-calendar); mask-image: var(--ic-calendar); }
.ic.i-users { -webkit-mask-image: var(--ic-users); mask-image: var(--ic-users); }
.ic.i-pay { -webkit-mask-image: var(--ic-pay); mask-image: var(--ic-pay); }
.ic.i-settings { -webkit-mask-image: var(--ic-settings); mask-image: var(--ic-settings); }
.ic.i-shield { -webkit-mask-image: var(--ic-shield); mask-image: var(--ic-shield); }
.ic.i-usercog { -webkit-mask-image: var(--ic-usercog); mask-image: var(--ic-usercog); }
.ic.i-logout { -webkit-mask-image: var(--ic-logout); mask-image: var(--ic-logout); }
.ic.i-plus { -webkit-mask-image: var(--ic-plus); mask-image: var(--ic-plus); }
.ic.i-key { -webkit-mask-image: var(--ic-key); mask-image: var(--ic-key); }
.ic.i-dots { -webkit-mask-image: var(--ic-dots); mask-image: var(--ic-dots); }
.ic.i-refresh { -webkit-mask-image: var(--ic-refresh); mask-image: var(--ic-refresh); }
.ic.i-pencil { -webkit-mask-image: var(--ic-pencil); mask-image: var(--ic-pencil); }
.ic.i-search { -webkit-mask-image: var(--ic-search); mask-image: var(--ic-search); }
.ic.i-check { -webkit-mask-image: var(--ic-check); mask-image: var(--ic-check); }
.ic.i-x { -webkit-mask-image: var(--ic-x); mask-image: var(--ic-x); }
.ic.i-alert { -webkit-mask-image: var(--ic-alert); mask-image: var(--ic-alert); }
.ic.i-info { -webkit-mask-image: var(--ic-info); mask-image: var(--ic-info); }
.ic.i-ban { -webkit-mask-image: var(--ic-ban); mask-image: var(--ic-ban); }
.ic.i-arrow-right { -webkit-mask-image: var(--ic-arrow-right); mask-image: var(--ic-arrow-right); }
.ic.i-arrow-down { -webkit-mask-image: var(--ic-arrow-down); mask-image: var(--ic-arrow-down); }
.ic.i-menu { -webkit-mask-image: var(--ic-menu); mask-image: var(--ic-menu); }
.ic.i-home { -webkit-mask-image: var(--ic-home); mask-image: var(--ic-home); }
.ic.i-login { -webkit-mask-image: var(--ic-login); mask-image: var(--ic-login); }
.ic.i-sliders { -webkit-mask-image: var(--ic-sliders); mask-image: var(--ic-sliders); }
.ic.i-copy { -webkit-mask-image: var(--ic-copy); mask-image: var(--ic-copy); }