/* ═══════════════════════════════════════════════════════════════════════════
   Manuales de HeyyySoft Ventrax — estilos del documento.

   Depende de `base.css`, que trae los tokens, el reset y el cromo de la barra.
   Aquí vive solo lo que es propio de un manual: portada, índice, cuerpo,
   llamadas, tablas y la hoja de impresión.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Estructura ─────────────────────────────────────────────────────────── */
.lienzo{max-width:1180px; margin:0 auto; padding:0 28px 96px}
@media (max-width:640px){ .lienzo{padding:0 18px 72px} }

.portada{padding:72px 0 8px; max-width:var(--vx-medida)}
.etiqueta{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:var(--vx-acento-tenue); color:var(--vx-acento);
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
h1{
  font-size:clamp(2.4rem,6vw,3.4rem); line-height:1.05; letter-spacing:-.035em;
  font-weight:700; margin:22px 0 0;
}
.entrada{font-size:1.1875rem; color:var(--vx-texto-suave); margin:20px 0 0; max-width:60ch}
.meta{
  margin:34px 0 0; padding-top:22px; border-top:1px solid var(--vx-borde);
  display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:.8125rem; color:var(--vx-texto-suave);
}
.meta b{font-weight:600; color:var(--vx-texto)}

.cuerpo{display:grid; grid-template-columns:1fr; gap:0; margin-top:64px}
@media (min-width:1040px){
  .cuerpo{grid-template-columns:minmax(0,1fr) 236px; gap:64px; align-items:start}
  .indice{order:2; position:sticky; top:96px}
  .texto{order:1}
}

/* ── Índice ─────────────────────────────────────────────────────────────── */
.indice{margin-bottom:44px}
.indice-tit{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vx-texto-suave); margin:0 0 14px;
}
.indice ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--vx-borde)}
.indice a{
  display:block; padding:7px 0 7px 16px; margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--vx-texto-suave); text-decoration:none; font-size:.875rem; line-height:1.4;
  transition:color .3s var(--vx-salida), border-color .3s var(--vx-salida);
}
.indice a:hover{color:var(--vx-texto)}
.indice a.activo{color:var(--vx-acento); border-left-color:var(--vx-acento); font-weight:500}

/* ── Texto ──────────────────────────────────────────────────────────────── */
.texto{max-width:var(--vx-medida)}
section{padding-top:12px; margin-bottom:64px; scroll-margin-top:88px}
h2{
  font-size:1.75rem; line-height:1.2; letter-spacing:-.025em; font-weight:700;
  margin:0 0 20px; display:flex; gap:14px; align-items:baseline;
}
h2 .num{
  font-family:var(--vx-fuente-mono); font-size:.9375rem; font-weight:600;
  color:var(--vx-acento); flex:none; letter-spacing:0;
}
h3{
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
  margin:38px 0 12px; color:var(--vx-texto);
}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px; padding-left:22px}
li{margin-bottom:9px}
li::marker{color:var(--vx-texto-suave)}
code{
  font-family:var(--vx-fuente-mono); font-size:.875em;
  background:var(--vx-acento-tenue); color:var(--vx-acento);
  padding:2px 6px; border-radius:6px;
}

/* Ruta de menú dentro del CRM. Se distingue del texto porque es algo que hay que ir
   a buscar en pantalla, no algo que se lee. */
.ruta{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  padding:8px 14px; border-radius:999px;
  background:var(--vx-superficie); border:1px solid var(--vx-borde);
  font-size:.875rem; font-weight:500; box-shadow:var(--vx-sombra-1);
}
.ruta::before{content:'›'; color:var(--vx-acento); font-weight:600}

/* ── Pasos numerados ────────────────────────────────────────────────────── */
.paso{position:relative; padding-left:56px; margin:36px 0 0}
.paso::before{
  content:attr(data-paso); position:absolute; left:0; top:1px;
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--vx-acento); color:#fff; box-shadow:var(--vx-sombra-1);
  font-family:var(--vx-fuente-mono); font-size:.9375rem; font-weight:600;
}
.paso h3{margin-top:4px}
@media (max-width:640px){ .paso{padding-left:0} .paso::before{position:static; margin-bottom:12px} }

/* ── Llamadas ───────────────────────────────────────────────────────────── */
.nota,.aviso{
  border-radius:var(--vx-radio); padding:18px 22px; margin:26px 0;
  font-size:.9375rem; line-height:1.6; border:1px solid;
}
.nota{background:var(--vx-acento-tenue); border-color:color-mix(in srgb,var(--vx-acento) 18%,transparent)}
.aviso{background:var(--vx-aviso-tenue); border-color:var(--vx-aviso-borde)}
.nota p:last-child,.aviso p:last-child{margin-bottom:0}
.nota-tit,.aviso-tit{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:7px;
}
.nota-tit{color:var(--vx-acento)}
.aviso-tit{color:var(--vx-aviso)}

/* ── Tabla ──────────────────────────────────────────────────────────────── */
.tabla-marco{overflow-x:auto; margin:26px 0; border-radius:var(--vx-radio);
  border:1px solid var(--vx-borde); background:var(--vx-superficie); box-shadow:var(--vx-sombra-1)}
table{border-collapse:collapse; width:100%; min-width:440px; font-size:.9375rem}
th{
  text-align:left; padding:13px 20px; font-weight:600; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--vx-texto-suave);
  border-bottom:1px solid var(--vx-borde);
}
td{padding:15px 20px; border-bottom:1px solid var(--vx-borde); vertical-align:top}
tr:last-child td{border-bottom:0}
/* Sin zebra ni bordes verticales: una línea fina por fila y el hover bastan */

/* ── Lista numerada destacada ───────────────────────────────────────────── */
.costumbres{list-style:none; padding:0; margin:26px 0; counter-reset:c}
.costumbres li{
  counter-increment:c; position:relative; padding:16px 20px 16px 62px; margin-bottom:10px;
  background:var(--vx-superficie); border:1px solid var(--vx-borde);
  border-radius:var(--vx-radio); box-shadow:var(--vx-sombra-1);
  font-size:.9375rem; line-height:1.6;
}
.costumbres li::before{
  content:counter(c); position:absolute; left:20px; top:16px;
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--vx-acento-tenue); color:var(--vx-acento);
  font-family:var(--vx-fuente-mono); font-size:.8125rem; font-weight:600;
}

/* ── Preguntas ──────────────────────────────────────────────────────────── */
.problema{padding:20px 0; border-top:1px solid var(--vx-borde)}
.problema:last-of-type{border-bottom:1px solid var(--vx-borde)}
.problema h4{
  margin:0 0 7px; font-size:1rem; font-weight:600; letter-spacing:-.01em;
  display:flex; gap:11px; align-items:baseline;
}
.problema h4::before{content:'?'; color:var(--vx-acento); font-family:var(--vx-fuente-mono); font-weight:600; flex:none}
.problema p{margin:0; color:var(--vx-texto-suave); font-size:.9375rem; padding-left:23px}
.problema p + p{margin-top:10px}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--vx-borde); margin-top:16px; padding-top:36px}
.pie-enlaces{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px}
.tarjeta-enl{
  flex:1 1 250px; display:block; text-decoration:none; color:inherit;
  padding:18px 20px; border-radius:var(--vx-radio);
  background:var(--vx-superficie); border:1px solid var(--vx-borde);
  box-shadow:var(--vx-sombra-1);
  transition:transform .4s var(--vx-salida), box-shadow .4s var(--vx-salida), border-color .4s var(--vx-salida);
}
.tarjeta-enl:hover{transform:translateY(-2px); box-shadow:var(--vx-sombra-2); border-color:var(--vx-borde-fuerte)}
.tarjeta-enl b{display:block; font-weight:600; margin-bottom:3px; font-size:.9375rem}
.tarjeta-enl span{color:var(--vx-texto-suave); font-size:.8125rem}
.pie-legal{color:var(--vx-texto-suave); font-size:.8125rem; margin:0}

/* ── Impresión ──────────────────────────────────────────────────────────── */
@media print{
  .barra,.indice,.pie-enlaces{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .lienzo{max-width:none; padding:0}
  .cuerpo{display:block; margin-top:24px}
  .texto,.portada{max-width:none}
  section{page-break-inside:avoid; margin-bottom:28px}
  .js .revela{opacity:1; transform:none}
  .nota,.aviso,.costumbres li,.tarjeta-enl,.ruta{box-shadow:none}
  .paso::before{background:#000; color:#fff}
  a{color:#000; text-decoration:none}
}