/* ==========================================================================
   Centro de Ayuda MASFACILITO
   ==========================================================================
   CSS propio, sin Tailwind y sin CDN. A propósito: este sitio NO tiene paso de
   compilación, así que corregir una explicación es editar un archivo — sin
   build y sin desplegar el ERP.

   ── La paleta ────────────────────────────────────────────────────────────
   El azul de marca manda, y cada módulo tiene su color tomado de los cuadritos
   del menú lateral del ERP. Eso no es decoración: el usuario ya asocia el
   naranja con Productos y el verde con Compras porque los ve todos los días en
   la barra izquierda. Reusarlos hace que el manual se sienta parte del sistema.

   ── Los tres estados del tema ────────────────────────────────────────────
   `:root` define el claro completo. El oscuro se redefine dos veces: bajo
   `prefers-color-scheme` (para quien no eligió nada) y bajo `[data-theme]`
   (para quien tocó el interruptor). Ningún color se define SOLO dentro de un
   bloque de tema, o al leer con el otro quedaría texto de un tema sobre el
   fondo del contrario.
   ========================================================================== */

:root {
  --azul:        #0041CE;
  --azul-vivo:   #1D5BFF;
  --azul-claro:  #3BBAFD;
  --azul-suave:  #EDF3FF;
  --azul-borde:  #C9DCFF;
  --azul-hondo:  #001A5E;

  --tinta:       #0B1220;
  --tinta-media: #4A5568;
  --tinta-suave: #8794A8;
  --linea:       #E4E9F2;
  --linea-tenue: #F0F3F9;
  --fondo:       #F6F8FC;
  --papel:       #FFFFFF;
  --papel-alto:  #FBFCFE;

  /* Los colores de los módulos, tomados del menú del ERP. */
  --m-ventas:    #38BDF8;
  --m-productos: #F97316;
  --m-cartera:   #EC4899;
  --m-compras:   #22C55E;
  --m-terceros:  #14B8A6;
  --m-inventario:#A855F7;
  --m-nomina:    #EAB308;
  --m-contable:  #6366F1;
  --m-config:    #64748B;
  --m-tesoreria: #06B6D4;
  --m-informes:  #8B5CF6;
  --m-soporte:   #F43F5E;

  --verde:       #15A34A;
  --verde-suave: #E7F9EE;
  --verde-tinta: #0F5132;
  --ambar-suave: #FFF8E8;
  --ambar-borde: #F6DFA8;
  --ambar-tinta: #7C4A03;
  --rojo:        #DC2626;
  --rojo-suave:  #FEF0F0;
  --rojo-borde:  #F8C9C9;
  --rojo-tinta:  #7F1D1D;

  --radio:       16px;
  --radio-chico: 11px;
  --sombra:      0 1px 2px rgb(11 18 32 / .04), 0 10px 28px -14px rgb(11 18 32 / .18);
  --sombra-alta: 0 2px 6px rgb(11 18 32 / .06), 0 28px 56px -22px rgb(11 18 32 / .3);
  --lateral:     266px;
  --lectura:     70ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul-vivo:  #7BA5FF;
    --azul-suave: #141F3A;
    --azul-borde: #2A3D68;
    --azul-hondo: #04081A;

    --tinta:       #E9EEF7;
    --tinta-media: #A3B0C6;
    --tinta-suave: #6B7A92;
    --linea:       #1F2B44;
    --linea-tenue: #17203234;
    --linea-tenue: #172032;
    --fondo:       #080C16;
    --papel:       #0F1626;
    --papel-alto:  #151E31;

    --verde-suave: #0D2A1B;
    --verde-tinta: #7EE2A8;
    --ambar-suave: #2A2010;
    --ambar-borde: #47380F;
    --ambar-tinta: #FBD38D;
    --rojo-suave:  #2B1316;
    --rojo-borde:  #4A2024;
    --rojo-tinta:  #FCA5A5;

    --sombra:      0 1px 2px rgb(0 0 0 / .5), 0 10px 28px -14px rgb(0 0 0 / .7);
    --sombra-alta: 0 2px 6px rgb(0 0 0 / .5), 0 28px 56px -22px rgb(0 0 0 / .8);
  }
}

:root[data-theme="dark"] {
  --azul-vivo:  #7BA5FF;
  --azul-suave: #141F3A;
  --azul-borde: #2A3D68;
  --azul-hondo: #04081A;

  --tinta:       #E9EEF7;
  --tinta-media: #A3B0C6;
  --tinta-suave: #6B7A92;
  --linea:       #1F2B44;
  --linea-tenue: #172032;
  --fondo:       #080C16;
  --papel:       #0F1626;
  --papel-alto:  #151E31;

  --verde-suave: #0D2A1B;
  --verde-tinta: #7EE2A8;
  --ambar-suave: #2A2010;
  --ambar-borde: #47380F;
  --ambar-tinta: #FBD38D;
  --rojo-suave:  #2B1316;
  --rojo-borde:  #4A2024;
  --rojo-tinta:  #FCA5A5;

  --sombra:      0 1px 2px rgb(0 0 0 / .5), 0 10px 28px -14px rgb(0 0 0 / .7);
  --sombra-alta: 0 2px 6px rgb(0 0 0 / .5), 0 28px 56px -22px rgb(0 0 0 / .8);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 16px;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-vivo); text-underline-offset: 3px; }
::selection { background: var(--azul-claro); color: #04122E; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.progreso {
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  transition: width .1s linear;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.barra-izq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.barra-der { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

.barra-marca { display: flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.barra-marca img { display: block; height: 26px; width: auto; }
:root[data-theme="dark"]  .barra-marca img { content: url("logo-oscuro.webp"); }
:root[data-theme="light"] .barra-marca img { content: url("logo.webp"); }
.barra-marca small {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: var(--tinta-suave); text-transform: uppercase;
  border: 1px solid var(--linea); border-radius: 6px; padding: 2px 6px;
}
.barra-ruta { font-size: 13px; color: var(--tinta-suave); }
.barra-ruta b { color: var(--tinta-media); font-weight: 600; }

/* ── El buscador: grande y al centro ─────────────────────────────────────
   Es lo primero que busca quien llega con una pregunta, así que ocupa el
   centro de la barra y no una esquina. El atajo va a la vista porque es lo
   que hace que la gente descubra que existe. */

.buscador { position: relative; width: min(560px, 46vw); justify-self: center; }
.buscador input {
  width: 100%; padding: 12px 78px 12px 46px;
  font: inherit; font-size: 15px;
  color: var(--tinta); background: var(--papel);
  border: 1.5px solid var(--linea); border-radius: 13px;
  box-shadow: 0 1px 2px rgb(11 18 32 / .05);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:hover { border-color: var(--azul-borde); }
.buscador input:focus {
  outline: 0; border-color: var(--azul-vivo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-claro) 26%, transparent),
              0 8px 24px -12px color-mix(in srgb, var(--azul) 50%, transparent);
}
.buscador::before {
  content: "⌕"; position: absolute; left: 16px; top: 50%;
  transform: translateY(-53%); font-size: 21px; color: var(--tinta-suave);
  pointer-events: none;
}
.buscador kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px; align-items: center;
  font: inherit; font-size: 11px; font-weight: 700;
  color: var(--tinta-suave); pointer-events: none; transition: opacity .15s;
}
.buscador kbd span {
  padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--linea); background: var(--fondo);
}
.buscador.escribiendo kbd { opacity: 0; }

.sin-resultados {
  margin-top: 18px; padding: 30px; text-align: center;
  border: 1px dashed var(--linea); border-radius: var(--radio);
  color: var(--tinta-suave); font-size: 14.5px;
}
.sin-resultados b { color: var(--tinta-media); }

.tema {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta-media); cursor: pointer; font-size: 15px;
  transition: border-color .15s, color .15s, transform .15s;
}
.tema:hover { border-color: var(--azul-claro); color: var(--azul-vivo); transform: translateY(-1px); }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.envoltura { display: flex; align-items: flex-start; max-width: 1480px; margin: 0 auto; }

.lateral {
  position: sticky; top: 64px;
  width: var(--lateral); flex: 0 0 var(--lateral);
  height: calc(100vh - 64px); overflow-y: auto;
  padding: 28px 14px 60px;
  border-right: 1px solid var(--linea);
}
.lateral::-webkit-scrollbar { width: 6px; }
.lateral::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 3px; }

/* ── La jerarquía del menú ───────────────────────────────────────────────── */
/* El grupo es el PADRE y tiene que verse como tal. Estuvo al revés: el
   encabezado iba en 10 px gris claro y los hijos en 13,5 px más oscuros, así que
   el hijo pesaba más que el padre y no se distinguía qué colgaba de qué.
   Ahora el padre es más grande, más oscuro y más pesado; los hijos cuelgan de
   un riel del color de su módulo, que es lo que hace visible la pertenencia sin
   necesidad de leer. */
.lateral h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 10px 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: -.006em; color: var(--tinta);
}
/* El aire va ENTRE grupos, no en el encabezado. Al envolver cada grupo en su
   div, `h3:first-child` pasó a valer para TODOS los encabezados —cada uno es el
   primero de su grupo— y les borraba el margen: la lista quedaba apelmazada y
   volvía a costar ver dónde empezaba cada menú. */
.lateral .grupo + .grupo { margin-top: 24px; }
.lateral h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px;
  background: var(--acento, var(--tinta-suave));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, var(--tinta-suave)) 16%, transparent);
}

/* El riel. Va como borde de CADA enlace: al ir pegados sin margen entre ellos,
   los bordes forman una línea continua que va del primer hijo al último. Es lo
   que hace visible «esto cuelga de aquello» sin tener que leer. */
.grupo > a {
  margin-left: 13px;
  border-left: 2px solid color-mix(in srgb, var(--acento, var(--linea)) 22%, transparent);
  border-radius: 0 9px 9px 0;
}
.lateral a {
  position: relative; display: block;
  padding: 7px 12px; font-size: 13px;
  color: var(--tinta-media); text-decoration: none;
  border-radius: 9px;
  transition: background .14s, color .14s, border-color .14s;
}
.lateral a:hover {
  background: var(--linea-tenue); color: var(--tinta);
  border-left-color: color-mix(in srgb, var(--acento, var(--linea)) 55%, transparent);
}
/* El activo se lee de dos formas a la vez: el riel se pinta entero del color del
   módulo y el renglón se rellena. Con una sola de las dos, en el modo oscuro
   casi no se notaba cuál estaba abierto. */
.lateral a.activo {
  background: color-mix(in srgb, var(--acento, var(--azul)) 12%, transparent);
  color: var(--tinta); font-weight: 650;
  border-left-color: var(--acento, var(--azul-vivo));
}

/* ── «Ir a otro módulo»: la salida, plegada ─────────────────────────────── */
/* El índice de la página es lo que se vino a usar. Los otros 18 módulos son la
   salida de emergencia: abiertos, alargan el menú hasta que el índice de arriba
   parece un renglón más de la lista. */
.otros {
  margin: 26px 4px 0; padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.otros > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--tinta-media);
  list-style: none; transition: background .14s, color .14s;
}
.otros > summary::-webkit-details-marker { display: none; }
/* El triángulo se dibuja acá para poder girarlo: el nativo no se anima igual en
   todos los navegadores. */
.otros > summary::before {
  content: "▸"; font-size: 11px; color: var(--tinta-suave);
  transition: transform .16s;
}
.otros[open] > summary::before { transform: rotate(90deg); }
.otros > summary:hover { background: var(--linea-tenue); color: var(--tinta); }
.otros > summary span {
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--tinta-suave);
  background: var(--linea-tenue); border-radius: 20px; padding: 2px 8px;
}

/* Adentro se usan los MISMOS códigos que arriba —padre oscuro con su punto,
   hijos colgando de un riel de color—. Si allá se viera distinto, el usuario
   creería que es otra cosa. */
.otros-lista { padding-top: 6px; }
.otros-lista .grupo { margin-bottom: 2px; }
.otros-lista b {
  display: flex; align-items: center; gap: 8px;
  margin: 13px 10px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: -.005em; color: var(--tinta);
}
.otros-lista b::before {
  content: ""; width: 7px; height: 7px; border-radius: 2.5px;
  background: var(--acento, var(--tinta-suave));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, var(--tinta-suave)) 16%, transparent);
}
.otros-lista a { font-size: 12.5px; padding: 6px 12px; }
.otros-lista > a:first-child { margin-left: 0; border-left: 0; font-weight: 600; }

.nota-modulos { margin: 4px 0 0; font-size: 13.5px; color: var(--tinta-suave); }

.lateral a.pendiente { color: var(--tinta-suave); cursor: default; }
.lateral a.pendiente:hover { background: transparent; color: var(--tinta-suave); }
.lateral a.pendiente::after {
  content: "pronto"; float: right; font-size: 9px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); border: 1px solid var(--linea);
  padding: 0 6px; border-radius: 20px; margin-top: 4px;
}

.contenido { flex: 1; min-width: 0; padding: 40px 48px 130px; }

/* ── Portada ────────────────────────────────────────────────────────────
   Un panel oscuro con el azul de marca. La página entera era blanca sobre
   gris y no había dónde posar el ojo al entrar; esto da un punto de partida
   y separa "de qué va esto" del contenido. */

.portada {
  position: relative; overflow: hidden;
  padding: 40px 40px 42px; border-radius: 22px;
  background:
    radial-gradient(120% 150% at 88% -10%, rgb(59 186 253 / .34) 0%, transparent 55%),
    radial-gradient(90% 130% at 0% 110%, rgb(59 186 253 / .16) 0%, transparent 50%),
    linear-gradient(135deg, var(--azul) 0%, var(--azul-hondo) 100%);
  color: #fff;
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--azul) 75%, transparent);
}
/* Trama sutil: le da textura sin competir con el texto. */
.portada::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(120deg, #000 0%, transparent 62%);
  pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }

.portada .marca-mod {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 20px;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #E8F2FF;
}
.titulo {
  margin: 16px 0 0; font-size: clamp(32px, 4.6vw, 46px); font-weight: 800;
  letter-spacing: -.038em; line-height: 1.06; color: #fff;
}
.entradilla {
  margin: 14px 0 0; font-size: 18px; line-height: 1.6;
  color: rgb(232 242 255 / .88); max-width: 60ch;
}
.portada .atajos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.portada .atajos a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 11px;
  font-size: 13.5px; font-weight: 650; text-decoration: none;
  color: #fff; background: rgb(255 255 255 / .13);
  border: 1px solid rgb(255 255 255 / .22);
  backdrop-filter: blur(4px);
  transition: background .16s, transform .16s;
}
.portada .atajos a:hover { background: rgb(255 255 255 / .24); transform: translateY(-2px); }

/* ── Secciones ──────────────────────────────────────────────────────────── */

.seccion { margin-top: 64px; scroll-margin-top: 96px; }
.seccion > h2 {
  margin: 0 0 6px; font-size: 25px; font-weight: 750;
  letter-spacing: -.026em; line-height: 1.22;
}
.seccion > h2 + p { margin: 0 0 24px; color: var(--tinta-media); max-width: var(--lectura); font-size: 16px; }
.seccion > p, .seccion > .aviso { max-width: var(--lectura); }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso {
  display: flex; gap: 13px; padding: 15px 17px;
  border-radius: var(--radio-chico); font-size: 14.5px; line-height: 1.6;
  border: 1px solid; border-left-width: 3px; margin: 20px 0;
}
.aviso > span:first-child { flex: 0 0 auto; font-size: 17px; line-height: 1.45; }
.aviso b { font-weight: 700; }
.aviso.ojo   { background: var(--ambar-suave); border-color: var(--ambar-borde); color: var(--ambar-tinta); }
.aviso.grave { background: var(--rojo-suave);  border-color: var(--rojo-borde);  color: var(--rojo-tinta); }
.aviso.dato  { background: var(--azul-suave);  border-color: var(--azul-borde);  color: var(--tinta); }

/* ── Campos explicados ──────────────────────────────────────────────────── */

.campos { display: grid; gap: 13px; margin-top: 24px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.campo {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 17px 19px; border-radius: var(--radio);
  background: var(--papel); border: 1px solid var(--linea);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.campo:hover, .campo.resaltado {
  border-color: var(--azul-borde); transform: translateY(-2px); box-shadow: var(--sombra);
}
.campo.resaltado { background: var(--azul-suave); }
.campo .n {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, var(--azul), var(--azul-vivo)); color: #fff;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; margin-top: 1px;
  box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--azul) 70%, transparent);
}
.campo h4 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; letter-spacing: -.014em; }
.campo p  { margin: 0; font-size: 14.5px; color: var(--tinta-media); line-height: 1.6; }
.campo .porque {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--linea);
  font-size: 13.5px; color: var(--tinta-suave);
}

/* ── Pasos con imagen ───────────────────────────────────────────────────────
   Las guías para conectar el correo al Buzón: la MISMA imagen que el cliente
   ve debajo del formulario, para que la ayuda y la pantalla no se contradigan. */
.pasos-ilustrados { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.paso-ilustrado {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  padding: 17px 19px; border-radius: var(--radio);
  background: var(--papel); border: 1px solid var(--linea);
}
.paso-texto { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.paso-texto .n {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, var(--azul), var(--azul-vivo)); color: #fff;
  font-size: 12.5px; font-weight: 800; display: grid; place-items: center; margin-top: 1px;
}
.paso-texto h4 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; letter-spacing: -.014em; }
.paso-texto p  { margin: 0; font-size: 14.5px; color: var(--tinta-media); line-height: 1.6; }
.paso-enlace {
  display: inline-block; margin-top: 10px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--azul);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.paso-enlace:hover { border-color: var(--azul-borde); }
.paso-img { display: block; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.paso-img img { width: 100%; height: auto; }
@media (max-width: 760px) { .paso-ilustrado { grid-template-columns: 1fr; } }

/* ── Preguntas ──────────────────────────────────────────────────────────── */

.pregunta {
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--papel); margin-bottom: 10px; max-width: var(--lectura);
  transition: border-color .15s, box-shadow .15s;
}
.pregunta:hover { border-color: var(--azul-borde); box-shadow: var(--sombra); }
.pregunta[open] { background: var(--papel-alto); border-color: var(--azul-borde); }
.pregunta summary {
  padding: 15px 17px; font-size: 15.5px; font-weight: 650;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before {
  content: "+"; flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 7px;
  background: var(--azul-suave); color: var(--azul-vivo);
  font-size: 15px; font-weight: 700; line-height: 20px; text-align: center;
}
.pregunta[open] summary::before { content: "−"; background: var(--azul-vivo); color: #fff; }
.pregunta div { padding: 0 17px 17px 50px; font-size: 14.5px; color: var(--tinta-media); line-height: 1.65; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie { margin-top: 84px; padding-top: 26px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--tinta-suave); }

/* El botón que abre el menú en el teléfono. Lo crea `ayuda.js` para no tener
   que repetirlo en las 20 páginas; en pantalla grande ni se pinta. */
.abrir-menu {
  display: none; align-items: center; gap: 7px;
  padding: 8px 11px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--tinta-media);
  font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.abrir-menu:hover { background: var(--linea-tenue); color: var(--tinta); }
body.menu-abierto .abrir-menu { background: var(--azul-suave); color: var(--azul-vivo); border-color: var(--azul-vivo); }
@media (max-width: 980px) { .abrir-menu { display: inline-flex; } }

/* ── Móvil ──────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* En el teléfono el menú NO desaparece: se convierte en un panel que se abre
     desde el botón del encabezado.
     Antes se ocultaba del todo, y con él se iba la única forma de saltar a otra
     sección o a otro módulo — el buscador seguía ahí, filtrando elementos
     invisibles, así que parecía roto. Un manual al que solo se puede llegar
     leyendo de arriba abajo no es un manual, es un texto largo. */
  .lateral {
    position: fixed; top: 106px; left: 0; right: 0; bottom: 0; z-index: 60;
    width: auto; flex: none; height: auto;
    padding: 18px 16px 90px;
    background: var(--papel); border-right: 0;
    border-top: 1px solid var(--linea);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  body.menu-abierto .lateral { transform: none; opacity: 1; visibility: visible; }
  body.menu-abierto { overflow: hidden; }
  /* Con el panel abierto los otros módulos van desplegados: el usuario ya hizo
     el gesto de abrir el menú, plegarlos otra vez le cobra un toque de más. */
  body.menu-abierto .otros > summary { display: none; }
  body.menu-abierto .otros-lista { display: block; }
  .lateral a { padding: 10px 12px; font-size: 14px; }
  .lateral h3 { font-size: 13px; }
  .contenido { padding: 24px 18px 90px; }
  /* Dos filas: identidad + botones arriba, buscador abajo a lo ancho. En una
     sola fila, el botón «Contenido» le comía el sitio al buscador y este
     quedaba en una caja de 50 px donde no cabe ni una palabra. */
  .barra {
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; gap: 10px;
  }
  .barra-izq { flex: 1 1 auto; }
  .barra-der { flex: 0 0 auto; margin-left: auto; }
  .buscador { flex: 1 1 100%; width: 100%; order: 3; }
  .buscador input { padding: 10px 14px 10px 40px; font-size: 14px; }
  .buscador kbd { display: none; }
  .barra-ruta, .barra-marca small { display: none; }
  .portada { padding: 28px 22px 30px; border-radius: 18px; }
  .entradilla { font-size: 16px; }
  .seccion { margin-top: 48px; }
  .seccion > h2 { font-size: 21px; }
  .campos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LA FOTO — la pantalla del sistema, capturada
   ==========================================================================
   Es una captura REAL, tomada por `scripts/manual/capturar.mjs` contra el ERP
   corriendo. No un dibujo: se intentó dibujarlas a mano y se llega al 80% de
   parecido — y cada 20% que falta es un usuario buscando un botón que en el
   dibujo no está.

   Los globos numerados se colocan con las coordenadas que el guion midió sobre
   la pantalla real, en PORCENTAJE: la foto se ve a otro ancho y en móvil se
   encoge más, así que un punto fijo se despegaría del campo que señala.
   ========================================================================== */

.foto {
  position: relative; margin-top: 22px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra-alta); background: #fff;
}
.foto-cromo {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: #EEF2F7; border-bottom: 1px solid #DDE4EE;
}
.foto-cromo i { width: 9px; height: 9px; border-radius: 50%; }
.foto-cromo i:nth-child(1) { background: #F87171; }
.foto-cromo i:nth-child(2) { background: #FBBF24; }
.foto-cromo i:nth-child(3) { background: #4ADE80; }
.foto-cromo b {
  margin-left: 8px; padding: 2px 12px; border-radius: 20px;
  background: #fff; border: 1px solid #DDE4EE;
  font-size: 10.5px; font-weight: 500; color: #9CA3AF;
}

.foto-marco { position: relative; line-height: 0; }
.foto-marco img { width: 100%; height: auto; display: block; }

.foto-capa { position: absolute; inset: 0; }

/* El área del campo, que se ilumina al pasar por su número. */
.foto-zona {
  position: absolute; border-radius: 6px;
  border: 2px solid transparent; background: transparent;
  transition: border-color .18s, background .18s;
  pointer-events: none;
}
.foto-zona.viva {
  border-color: var(--azul-vivo);
  background: color-mix(in srgb, var(--azul-claro) 16%, transparent);
}

/* El número. Va sobre la ESQUINA del campo, no en su centro: en el centro
   taparía justo el texto que el usuario quiere leer. */
.foto-globo {
  position: absolute; transform: translate(-52%, -52%);
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul); color: #fff; text-decoration: none;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgb(15 23 42 / .35), 0 0 0 2px #fff;
  transition: transform .16s, background .16s;
}
.foto-globo:hover, .foto-globo:focus-visible {
  transform: translate(-52%, -52%) scale(1.22);
  background: var(--azul-vivo); outline: 0;
}

/* El globo que no tiene ficha abajo sigue señalando la zona en la foto, pero no
   se ofrece como enlace: el cursor de mano prometería una explicación que no
   existe. */
.foto-globo.sin-ficha { cursor: default; }

.foto-pie {
  padding: 9px 14px; background: var(--papel);
  border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--tinta-suave);
}

/* ==========================================================================
   LA REPETICIÓN — la tarea, grabada con rrweb
   ==========================================================================
   No es un video: son los cambios del DOM guardados mientras se hacía la tarea
   DE VERDAD en el sistema. Por eso es idéntico a lo que el usuario va a ver, se
   puede pausar y rebobinar, y se ve nítido a cualquier zoom.
   ========================================================================== */

.rep { margin-top: 22px; }

.rep-cabeza {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  background: var(--papel); border: 1px solid var(--linea); border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0;
}
.rep-cabeza h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.rep-cabeza .dura {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 20px; background: var(--linea-tenue);
}

.rep-caja {
  position: relative; overflow: hidden; background: #F1F5F9;
  border: 1px solid var(--linea); border-top: 0; border-bottom: 0;
  min-height: 120px;
}
/* ⚠️ `zoom`, NO `transform: scale`.
   Con `transform` el iframe de rrweb queda dentro de un ancestro transformado y
   Chrome deja de componerlo: la grabación tiene sus 1.008 nodos, el iframe mide
   lo que debe y aun así el recuadro sale EN BLANCO. Se comprobó reproduciendo
   la misma grabación en una página sin escalar, donde se ve perfecta.
   `zoom` re-hace el layout en vez de pintar sobre una capa transformada. */
.rep-lienzo { zoom: 1; }
.rep-lienzo iframe { border: 0; display: block; background: #fff; }

.rep-aviso {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; color: var(--tinta-suave); text-align: center; padding: 30px;
}

.rep-mandos {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 0 0 var(--radio) var(--radio);
}
.rep-mandos button {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta-media); cursor: pointer; font-size: 13px;
  transition: all .15s;
}
.rep-mandos button:hover:not(:disabled) { border-color: var(--azul-claro); color: var(--azul-vivo); }
.rep-mandos button:disabled { opacity: .3; cursor: default; }
.rep-mandos button.principal {
  width: 42px; height: 42px; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--azul), var(--azul-vivo));
  border-color: transparent;
  box-shadow: 0 3px 12px -3px color-mix(in srgb, var(--azul) 55%, transparent);
}
.rep-mandos button.principal:hover { filter: brightness(1.1); color: #fff; }
.rep-mandos .nota { margin-left: auto; font-size: 12px; color: var(--tinta-suave); }

@media (max-width: 760px) {
  .rep-mandos .nota { display: none; }
  .foto-globo { width: 19px; height: 19px; font-size: 10.5px; }
  .foto-cromo b { display: none; }
}

/* ── Lo que rrweb necesita para colocarse ────────────────────────────────
   rrweb trae su propio `style.css` que NO se incluye acá (una hoja externa más
   que mantener). Estas tres reglas son las que hacen falta, y faltar duele:

   ⚠️ Al activar `mouseTail`, rrweb crea un <canvas> del tamaño de la grabación
   (1440×900). Sin `position: absolute`, ese canvas se queda EN EL FLUJO y
   empuja el iframe 900 px hacia abajo — fuera del recuadro, que recorta. El
   resultado: la grabación tiene sus 1.008 nodos, el iframe mide lo que debe, y
   el usuario ve un rectángulo vacío. Se cazó midiendo: iframe en y=1167 con el
   contenedor en y=479. */

.rep .replayer-wrapper { position: relative; }
.rep .replayer-mouse-tail {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2;
}

/* ── El puntero de la repetición ─────────────────────────────────────────
   rrweb dibuja el cursor como un `div` de 20 px con un SVG de fondo. Tal cual
   viene es casi invisible sobre una pantalla clara, y al hacer clic no pasa
   nada visible: el menú se abre y se cierra tan rápido que **no se alcanza a
   ver QUÉ opción se eligió**. Eso lo reportó el usuario probando el manual.

   Acá se agranda, se le pone sombra para que despegue del fondo, y se le
   agrega un anillo que late en el clic. La estela (`mouseTail`) muestra de
   dónde viene, que es la mitad de entender a dónde va. */

.rep .replayer-mouse {
  position: absolute;
  width: 26px !important; height: 26px !important;
  filter: drop-shadow(0 2px 4px rgb(15 23 42 / .55));
  z-index: 3;
}
/* El anillo del clic. rrweb pone `.active` en el mousedown. */
.rep .replayer-mouse::after {
  content: ""; position: absolute;
  left: 1px; top: 1px; width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%; background: #3BBAFD;
  opacity: 0; pointer-events: none;
}
.rep .replayer-mouse.active::after { animation: clic-rep .6s ease-out; }
@keyframes clic-rep {
  from { opacity: .65; transform: scale(.3); }
  to   { opacity: 0;   transform: scale(2); }
}

/* ==========================================================================
   Las tarjetas de los ÍNDICES (el del sistema y el del portal de clientes).
   Vivían dentro de index.html; al tener dos índices se pasaron acá para no
   copiarlas.
   ========================================================================== */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
/* El encabezado de familia usa las MISMAS palabras y el mismo orden que el
   menú del ERP. Sin eso, el portal enseñaba un segundo mapa del producto. */
.familia {
  display: flex; align-items: center; gap: 9px;
  margin: 34px 0 13px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
.familia::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--c, var(--tinta-suave));
}
.familia::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}
.familia:first-of-type { margin-top: 22px; }
.mod {
  position: relative; display: block; padding: 20px 21px 21px;
  text-decoration: none; color: inherit; overflow: hidden;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
/* Una franja del color del módulo arriba: crece en el hover. Es el mismo
   color que ese módulo tiene en el menú lateral del ERP, así que el usuario
   ya lo asocia. */
.mod::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--azul)); opacity: .85;
  transition: height .18s;
}
a.mod:hover::before { height: 6px; }
a.mod::after {
  content: "→"; position: absolute; right: 19px; top: 21px;
  color: var(--tinta-suave); font-size: 16px;
  transition: transform .18s, color .18s;
}
a.mod:hover {
  border-color: color-mix(in srgb, var(--c, var(--azul)) 45%, var(--linea));
  transform: translateY(-3px); box-shadow: var(--sombra);
}
a.mod:hover::after { transform: translateX(4px); color: var(--c, var(--azul-vivo)); }
.mod .ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px; font-size: 20px;
  background: color-mix(in srgb, var(--c, var(--azul)) 15%, transparent);
}
/* A qué menú del ERP pertenece. Va DENTRO de la tarjeta y no como encabezado
   de una fila propia: siete de las once familias tienen un solo módulo, y un
   encabezado por familia dejaba filas con una tarjeta y dos huecos. */
.familia-chip {
  display: block; margin: 13px 0 0; font-size: 9.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c, var(--azul)) 72%, var(--tinta-suave));
}
.mod h3 { margin: 3px 0 5px; font-size: 16.5px; font-weight: 700; letter-spacing: -.017em; }
.mod p  { margin: 0; font-size: 13.5px; color: var(--tinta-media); line-height: 1.55; }