/* Wiki de Eleven — neutral. El color solo significa estado: verde bien, amarillo
   atención, rojo paso manual o límite de política. Nada decorativo lleva color. */

:root {
  --papel: #FFFFFF;
  --sup: #FAFAFA;
  --sup-2: #F4F4F5;
  --tinta: #18181B;
  --apagado: #52525B;
  --tenue: #71717A;
  --linea: #E4E4E7;
  --linea-fuerte: #D4D4D8;

  --verde: #15803D;  --verde-bg: #F0FDF4;  --verde-linea: #BBF7D0;
  --ambar: #A16207;  --ambar-bg: #FEFCE8;  --ambar-linea: #FDE68A;
  --rojo:  #B91C1C;  --rojo-bg:  #FEF2F2;  --rojo-linea:  #FECACA;

  --texto: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --lateral-ancho: 15rem;
  --medida: 41rem;
  color-scheme: light;
}

html[data-tema="oscuro"],
html:not([data-tema="claro"]) body.auto-oscuro {
  --papel: #0B0B0C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #0B0B0C;
    --sup: #121214;
    --sup-2: #1A1A1D;
    --tinta: #F4F4F5;
    --apagado: #A1A1AA;
    --tenue: #8B8B93;
    --linea: #27272A;
    --linea-fuerte: #3F3F46;

    --verde: #4ADE80;  --verde-bg: #0D1F14;  --verde-linea: #166534;
    --ambar: #FACC15;  --ambar-bg: #231D06;  --ambar-linea: #854D0E;
    --rojo:  #F87171;  --rojo-bg:  #250F0F;  --rojo-linea:  #991B1B;
    color-scheme: dark;
  }
}

html[data-tema="oscuro"] {
  --papel: #0B0B0C;
  --sup: #121214;
  --sup-2: #1A1A1D;
  --tinta: #F4F4F5;
  --apagado: #A1A1AA;
  --tenue: #8B8B93;
  --linea: #27272A;
  --linea-fuerte: #3F3F46;

  --verde: #4ADE80;  --verde-bg: #0D1F14;  --verde-linea: #166534;
  --ambar: #FACC15;  --ambar-bg: #231D06;  --ambar-linea: #854D0E;
  --rojo:  #F87171;  --rojo-bg:  #250F0F;  --rojo-linea:  #991B1B;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: .6rem 1rem;
}
.saltar:focus { left: 0; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  height: 3.25rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--tinta); text-decoration: none;
}
.marca .logo { height: 1.125rem; width: auto; display: block; }
.marca span {
  color: var(--tenue); font-size: .8125rem; font-weight: 500;
  letter-spacing: .02em; padding-left: .55rem;
  border-left: 1px solid var(--linea);
}
/* Un logo por tema: el lima nunca va sobre fondo claro */
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-oscuro { display: block; }
}
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }
:root[data-tema="claro"] .logo-claro { display: block; }
:root[data-tema="claro"] .logo-oscuro { display: none; }
.barra .tema { margin-left: auto; }
.barra button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
  background: transparent; color: var(--apagado);
  border: 1px solid transparent; border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.barra button:hover { background: var(--sup-2); color: var(--tinta); }
.menu { display: none; }

/* ---------- Disposición ---------- */
.disposicion {
  display: grid;
  grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
  gap: 0;
  max-width: 84rem;
  margin: 0 auto;
}

.lateral {
  position: sticky; top: 3.25rem; align-self: start;
  max-height: calc(100vh - 3.25rem); overflow-y: auto;
  padding: 1.75rem 1rem 3rem;
  border-right: 1px solid var(--linea);
}
.lateral ul {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  border-left: 1px solid var(--linea);
}
.lateral li { margin: 0; }
.lateral a {
  display: block; padding: .25rem 0 .25rem .85rem; margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--apagado); text-decoration: none;
  font-size: .9063rem; line-height: 1.5;
  transition: color .15s ease, border-color .15s ease;
}
.lateral a:hover { color: var(--tinta); border-left-color: var(--linea-fuerte); }
.lateral a.activo {
  color: var(--tinta); font-weight: 600; border-left-color: var(--tinta);
}
.nav-grupo {
  margin: 1.5rem 0 .5rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.nav-vacio {
  margin: 0 0 1.25rem; font-size: .8125rem; color: var(--tenue);
  font-style: italic;
}

main {
  min-width: 0;
  padding: 2.5rem clamp(1rem, 4vw, 3.5rem) 5rem;
}
article { max-width: var(--medida); }

/* ---------- Índice lateral derecho ---------- */
.indice {
  display: none;
  position: sticky; top: 3.25rem; align-self: start;
  max-height: calc(100vh - 3.25rem); overflow-y: auto;
  padding: 2.75rem 1.25rem 3rem; width: 13rem;
}
.indice p {
  margin: 0 0 .6rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice a {
  display: block; padding: .2rem 0; color: var(--apagado);
  text-decoration: none; font-size: .8438rem; line-height: 1.4;
}
.indice a:hover, .indice a.activo { color: var(--tinta); }

@media (min-width: 1200px) {
  .disposicion { grid-template-columns: var(--lateral-ancho) minmax(0, 1fr) 13rem; }
  .indice { display: block; }
}

/* ---------- Tipografía del contenido ---------- */
h1 {
  margin: 0 0 .5rem; font-size: 2.125rem; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.15; text-wrap: balance;
}
h2 {
  margin: 4rem 0 .7rem;
  font-size: 1.3125rem; font-weight: 600; letter-spacing: -.018em;
  line-height: 1.3; text-wrap: balance;
}
h2 + h3 { margin-top: 1.5rem; }
h3 {
  margin: 2.5rem 0 .5rem; font-size: 1.0313rem; font-weight: 600;
  letter-spacing: -.005em;
}
p { margin: 0 0 1.05rem; }
a { color: var(--tinta); font-weight: 500; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: var(--linea-fuerte);
    transition: text-decoration-color .15s ease, text-decoration-thickness .15s ease; }
a:hover { text-decoration-color: var(--tinta); text-decoration-thickness: 2px; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

/* Ficha de cabecera */
.ficha {
  display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 1.25rem 0 2.25rem;
  padding: 0 0 1.5rem; border-bottom: 1px solid var(--linea);
}
.ficha div { display: flex; flex-direction: column; gap: .1rem; }
.ficha dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tenue);
}
.ficha dd { margin: 0; font-size: .9063rem; color: var(--apagado); }

/* Listas */
ul, ol { margin: 0 0 1.05rem; padding-left: 1.5rem; }
li { margin: 0 0 .4rem; }
li > ul, li > ol { margin-top: .4rem; }
ul li::marker { color: var(--tenue); }
ol { list-style: none; counter-reset: n; }
ol > li { counter-increment: n; position: relative; }
ol > li::before {
  content: counter(n) ".";
  position: absolute; right: calc(100% + .4rem);
  min-width: 1.5rem; text-align: end;
  font-variant-numeric: tabular-nums; color: var(--apagado); font-weight: 500;
}
ol.pasos > li::before { all: unset; }

/* Pasos numerados: el número es el ancla visual */
ol.pasos { list-style: none; padding: 0; counter-reset: paso; margin: 1.5rem 0; }
ol.pasos > li {
  counter-increment: paso; position: relative;
  padding: 0 0 1.5rem 2.75rem; margin: 0;
  border-left: 1px solid var(--linea); margin-left: .9rem;
}
ol.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: -.9rem; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--papel); border: 1px solid var(--linea-fuerte);
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .06em; color: var(--apagado);
}

/* Checklist */
ul.lista { list-style: none; padding: 0; margin: 1.25rem 0; }
ul.lista li {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--linea); margin: 0;
}
ul.lista li::before {
  content: ""; flex: none; width: .85rem; height: .85rem;
  border: 1px solid var(--linea-fuerte); border-radius: 3px;
  position: relative; top: .15rem;
}

/* Avisos */
.aviso {
  margin: 1.5rem 0; padding: .9rem 1.1rem; border-radius: 6px;
  border: 1px solid var(--linea); background: var(--sup);
  font-size: .9688rem;
}
.aviso > :last-child { margin-bottom: 0; }
.aviso .et {
  display: block; font-size: .6875rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .3rem;
  color: var(--tenue);
}
.aviso.criterio { background: var(--sup); }
/* Solo dos avisos llevan color, y los dos codifican un estado que cambia con el
   tiempo: lo que no se puede hacer, y lo que todavia no esta. El resto va gris. */
.aviso.limite { background: var(--rojo-bg); border-color: var(--rojo-linea); }
.aviso.limite .et { color: var(--rojo); }
.aviso.ojo { background: var(--ambar-bg); border-color: var(--ambar-linea); }
.aviso.ojo .et { color: var(--ambar); }

/* Chips de estado */
.chip {
  display: inline-block; vertical-align: middle;
  padding: .15rem .5rem; border-radius: 5px; border: 1px solid transparent;
  font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.chip.c-vigente { background: var(--verde-bg); color: var(--verde); border-color: var(--verde-linea); }
.chip.c-borrador { background: var(--ambar-bg); color: var(--ambar); border-color: var(--ambar-linea); }
.chip.c-falta { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo-linea); }
.chip.c-neutro { background: var(--sup-2); color: var(--apagado); border-color: var(--linea); }

/* Tablas — la hoja de control */
table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .9063rem; font-variant-numeric: tabular-nums;
}
thead th {
  text-align: left; padding: .5rem .75rem;
  border-bottom: 1px solid var(--linea-fuerte);
  font-size: .6875rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tenue); white-space: nowrap;
}
tbody td { padding: .6rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
thead th:first-child, tbody td:first-child { padding-inline-start: 0; }
thead th:last-child,  tbody td:last-child  { padding-inline-end: 0; }
/* la tabla es lo unico que puede pasarse de la medida: un RACI no cabe en 656px */
article > table, article > .tabla-ancha { width: min(100%, 56rem); max-width: none; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sup); }
.tabla-ancha { overflow-x: auto; margin: 1.5rem 0; }
.tabla-ancha table { margin: 0; }

code {
  font-family: var(--mono); font-size: .875em;
  background: var(--sup-2); padding: .1rem .35rem; border-radius: 4px;
}
pre {
  background: var(--sup); border: 1px solid var(--linea); border-radius: 6px;
  padding: .9rem 1.1rem; overflow-x: auto; font-size: .875rem; line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

blockquote {
  margin: 1.5rem 0; padding-left: 1.1rem;
  border-left: 2px solid var(--linea-fuerte); color: var(--apagado);
}
blockquote > :last-child { margin-bottom: 0; }

figure { margin: 1.75rem 0; }
figure img { max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 6px; }
figcaption { margin-top: .5rem; font-size: .8438rem; color: var(--tenue); }

.pie {
  margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--linea);
  color: var(--tenue); font-size: .8438rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pie p { margin: 0; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .menu { display: inline-flex; }
  .disposicion { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    display: none; position: fixed; inset: 3.25rem 0 0 0; z-index: 25;
    max-height: none; width: 100%; background: var(--papel);
    border-right: 0; padding: 1.25rem 1.25rem 3rem; overflow-y: auto;
  }
  .lateral.abierto { display: block; }
  main { padding: 2rem 1.25rem 4rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; margin-top: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .barra, .lateral, .indice, .saltar { display: none; }
  .disposicion { display: block; }
  main { padding: 0; }
  a { text-decoration: none; }
}

/* Flujogramas: el color solo marca estado, las figuras dicen el tipo de paso */
figure.flujo { margin: 1.75rem 0; }
figure.flujo svg { width: 100%; height: auto; display: block; }