/*
 * La ayuda de VMAPAY (docs.vmapay.net). **Los colores y la tipografía son los del producto** —los mismos tokens
 * que `assets/panel/tokens.css`—, copiados aquí a propósito: este sitio es estático, no carga nada del panel y no
 * ejecuta PHP. Si los tokens del panel cambian, estos se cambian a mano; son doce, y vale la pena a cambio de que
 * la ayuda no dependa de nada.
 *
 * Tres columnas en un ordenador —las páginas, el texto y lo que hay dentro de esta—, una sola en un móvil, que es
 * donde se lee cuando uno está atascado.
 */
/* Las dos fuentes, servidas por el propio sitio como las sirve el panel (`assets/panel/panel-lienzo.css`). Los
   ficheros los copia el generador desde `assets/panel/fuentes/`: sin ellos, la ayuda saldría con la tipografía del
   sistema y no se parecería al producto. No se piden a Google: la CSP de este sitio solo deja lo suyo. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/instrument-sans-v4-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fuentes/jetbrains-mono-v24-latin.woff2) format('woff2'); }

:root {
	--fondo: #ffffff;
	--superficie: #ffffff;
	--suave: #f4f5f8;
	--borde: #e5e7ec;
	--tinta-1: #101828;
	--tinta-2: #3f4a5c;
	--tinta-3: #5f6b7e;
	--acento: #3346d3;
	--acento-suave: #eef0fd;
	--aviso-fondo: #fdf3e1;
	--aviso-borde: #f1d49b;
	--ancho: 46rem;
	--sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* El oscuro, de dos maneras y con los mismos valores: el del sistema mientras nadie elija, y el elegido con el
   botón, que manda sobre él. Es el patrón del panel (`assets/panel/tokens.css`): `data-tema` gana al sistema. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--fondo: #0b0d12;
		--superficie: #12151c;
		--suave: #181c25;
		--borde: #232835;
		--tinta-1: #eef1f6;
		--tinta-2: #b4bccb;
		--tinta-3: #8c96a8;
		--acento: #8b98ff;
		--acento-suave: #1d2242;
		--aviso-fondo: #2b2110;
		--aviso-borde: #5a4419;
	}
}
:root[data-tema="oscuro"] {
	--fondo: #0b0d12;
	--superficie: #12151c;
	--suave: #181c25;
	--borde: #232835;
	--tinta-1: #eef1f6;
	--tinta-2: #b4bccb;
	--tinta-3: #8c96a8;
	--acento: #8b98ff;
	--acento-suave: #1d2242;
	--aviso-fondo: #2b2110;
	--aviso-borde: #5a4419;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta-1);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
}

/* Lo primero que se tabula, para quien no usa ratón */
.dc-saltar {
	position: absolute;
	left: -9999px;
}
.dc-saltar:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: var(--acento);
	color: #fff;
}

.dc-cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 3.5rem;
	padding: 0 1.25rem;
	border-bottom: 1px solid var(--borde);
	background: var(--superficie);
	position: sticky;
	top: 0;
	z-index: 5;
}
.dc-marca {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tinta-1);
	text-decoration: none;
}
.dc-marca span { font-weight: 500; color: var(--tinta-3); }
.dc-panel {
	padding: 0.4rem 0.75rem;
	border-radius: 0.5rem;
	background: var(--acento);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* El buscador de la cabecera: no es un campo, es el botón que abre el diálogo. Parece un campo porque es lo que
   uno busca con la mirada, pero escribir pasa siempre dentro del diálogo, con el teclado atrapado. */
.dc-buscar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: min(22rem, 38vw);
	margin-left: auto;
	padding: 0.4rem 0.625rem;
	border: 1px solid var(--borde);
	border-radius: 0.625rem;
	background: var(--suave);
	color: var(--tinta-3);
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
}
.dc-buscar:hover { border-color: var(--tinta-3); color: var(--tinta-2); }
.dc-buscar span { flex: 1; }
.dc-tecla {
	padding: 0.05rem 0.3rem;
	border: 1px solid var(--borde);
	border-radius: 0.3rem;
	background: var(--superficie);
	color: var(--tinta-3);
	font-family: var(--sans);
	font-size: 0.6875rem;
	line-height: 1.5;
}

.dc-tema, .dc-menu-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: none;
	color: var(--tinta-2);
	cursor: pointer;
}
.dc-tema:hover, .dc-menu-boton:hover { background: var(--suave); color: var(--tinta-1); }
.dc-menu-boton { display: none; }
/* Un icono u otro, nunca los dos: el que se ve es el del tema al que se va a cambiar */
.dc-luna { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .dc-sol { display: none; }
	:root:not([data-tema="claro"]) .dc-luna { display: block; }
}
:root[data-tema="oscuro"] .dc-sol { display: none; }
:root[data-tema="oscuro"] .dc-luna { display: block; }
:root[data-tema="claro"] .dc-sol { display: block; }
:root[data-tema="claro"] .dc-luna { display: none; }

.dc-cuerpo {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr) 14rem;
	gap: 2.5rem;
	max-width: 82rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* Las páginas, por secciones */
.dc-menu > ul { margin: 0; padding: 0; list-style: none; position: sticky; top: 5rem; }
.dc-menu ul ul { margin: 0; padding: 0; list-style: none; }
.dc-menu li { margin-bottom: 0.125rem; }
.dc-grupo + .dc-grupo { margin-top: 1.25rem; }
.dc-grupo-rotulo {
	margin: 0 0 0.375rem 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-3);
}
.dc-menu a {
	display: block;
	padding: 0.375rem 0.625rem;
	border-radius: 0.5rem;
	color: var(--tinta-2);
	font-size: 0.9375rem;
	text-decoration: none;
}
.dc-menu a:hover { background: var(--suave); color: var(--tinta-1); }
.dc-menu a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

/* Dónde estás, encima del título */
.dc-migas { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--tinta-3); }
.dc-migas a { color: var(--tinta-3); text-decoration: none; }
.dc-migas a:hover { color: var(--acento); }
.dc-migas span[aria-hidden] { margin: 0 0.25rem; }

/* Anterior y siguiente */
.dc-pasos { display: flex; gap: 0.75rem; margin-top: 3rem; }
.dc-pasos a {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--borde);
	border-radius: 0.75rem;
	text-decoration: none;
}
.dc-pasos a:hover { border-color: var(--acento); }
.dc-pasos span { font-size: 0.75rem; color: var(--tinta-3); }
.dc-pasos strong { font-size: 0.9375rem; color: var(--tinta-1); font-weight: 600; }
.dc-sig { text-align: right; }
.dc-ant + .dc-sig, .dc-sig:only-child { margin-left: auto; }

/* El texto */
.dc-principal { max-width: var(--ancho); min-width: 0; }
.dc-principal h1 {
	margin: 0 0 1.25rem;
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.022em;
}
.dc-principal h2 {
	margin: 2.5rem 0 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--borde);
	font-size: 1.375rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
}
.dc-principal h3 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; }
.dc-principal p { margin: 0 0 1rem; color: var(--tinta-2); }
.dc-principal strong { color: var(--tinta-1); }
.dc-principal a { color: var(--acento); }
.dc-principal ul, .dc-principal ol { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--tinta-2); }
.dc-principal li { margin-bottom: 0.375rem; }
.dc-principal li > ul, .dc-principal li > ol { margin: 0.375rem 0 0; }
.dc-principal hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--borde); }
.dc-principal code {
	padding: 0.1em 0.35em;
	border-radius: 0.3rem;
	background: var(--suave);
	font-family: var(--mono);
	font-size: 0.875em;
}
.dc-principal pre {
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--borde);
	border-radius: 0.625rem;
	background: var(--suave);
	overflow-x: auto;
}
.dc-principal pre code { padding: 0; background: none; font-size: 0.8125rem; line-height: 1.5; }
/* Las citas son avisos: lo que hay que leer dos veces */
.dc-principal blockquote {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--aviso-borde);
	border-radius: 0.625rem;
	background: var(--aviso-fondo);
}
.dc-principal blockquote p { margin: 0; color: var(--tinta-1); }
.dc-principal blockquote p + p { margin-top: 0.625rem; }
/* El marco de la tabla: en una pantalla estrecha se desplaza a lo ancho, en vez de apretar las columnas */
.dc-tabla { margin: 0 0 1rem; overflow-x: auto; }
.dc-principal table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.dc-principal th, .dc-principal td {
	padding: 0.5rem 0.625rem;
	border-bottom: 1px solid var(--borde);
	text-align: left;
	vertical-align: top;
	color: var(--tinta-2);
}
.dc-principal th { color: var(--tinta-1); font-weight: 600; }
/* La última fila no cierra con línea: el h2 que suele venir detrás trae la suya, y quedaban dos paralelas */
.dc-principal tbody tr:last-child td { border-bottom: 0; }

/* Las capturas del panel. Van a sangre dentro de la columna, con su borde, y su pie debajo: una captura sin pie
   obliga a adivinar qué se está mirando. `width`/`height` van en el <img> para que no salte la página al cargar. */
.dc-captura { margin: 1.25rem 0 1.5rem; }
.dc-ampliar {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.dc-marco { display: block; position: relative; }
.dc-captura img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--borde);
	border-radius: 0.75rem;
	background: var(--suave);
}
.dc-ampliar:hover img { border-color: var(--acento); }

/* La anotación: un recuadro sobre la zona y su número pegado arriba a la izquierda. El texto va en la lista de
   debajo y no flotando aquí, que en un móvil no cabría; el número ata una cosa con la otra.
   Las posiciones (left/top/width/height) las pone el generador al final de la hoja, medidas sobre la pantalla. */
.dc-marca {
	position: absolute;
	border: 2px solid var(--acento);
	border-radius: 0.375rem;
	box-shadow: 0 0 0 3px rgba(51, 70, 211, 0.14);
	pointer-events: none;
}
/* El número, FUERA del recuadro y a su izquierda: en la esquina tapaba el principio del dato que señala
   (medido el 2026-11-01: el ① se comía el «20» de la IP) */
.dc-marca b {
	position: absolute;
	top: 50%;
	left: -1.9rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--acento);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	font-style: normal;
}
.dc-leyenda {
	margin: 0.625rem 0 0;
	padding-left: 1.5rem;
	font-size: 0.875rem;
	color: var(--tinta-2);
}
.dc-leyenda li { margin-bottom: 0.25rem; }
.dc-leyenda li::marker { color: var(--acento); font-weight: 700; }

/* La captura abierta entera */
.dc-lupa {
	width: min(96vw, 90rem);
	max-height: 92vh;
	padding: 0.75rem;
	border: 1px solid var(--borde);
	border-radius: 0.875rem;
	background: var(--superficie);
	cursor: zoom-out;
}
.dc-lupa::backdrop { background: rgba(8, 10, 16, 0.75); }
/* El diálogo recibe el foco al abrirse y dibujaba un anillo alrededor de toda la imagen. No se pierde nada: se
   cierra con Esc o pulsando, y dentro no hay ningún control que recorrer. */
.dc-lupa:focus, .dc-lupa:focus-visible { outline: none; }
/* La altura manda sobre el ancho: con `width: 100%` una captura alta se salía y se comía su propio pie */
.dc-lupa img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 3.5rem);
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 0.5rem;
}
.dc-lupa p { margin: 0.5rem 0 0.125rem; font-size: 0.8125rem; color: var(--tinta-3); text-align: center; }
.dc-captura figcaption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--tinta-3);
}

.dc-pie {
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--borde);
	font-size: 0.875rem;
}
.dc-pie p { margin: 0; color: var(--tinta-3); }

/* Lo que hay dentro de esta página */
.dc-dentro { font-size: 0.875rem; }
.dc-dentro > p {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-3);
}
.dc-dentro ul { margin: 0; padding: 0; list-style: none; position: sticky; top: 5rem; }
.dc-dentro a {
	display: block;
	padding: 0.2rem 0 0.2rem 0.75rem;
	border-left: 2px solid var(--borde);
	color: var(--tinta-3);
	text-decoration: none;
}
.dc-dentro a:hover { color: var(--acento); }
/* El apartado que se está leyendo, marcado en la raya de la izquierda (lo pone docs.js) */
.dc-dentro a[aria-current="true"] { border-left-color: var(--acento); color: var(--acento); font-weight: 600; }
.dc-dentro .n3 a { padding-left: 1.5rem; }

/* ── El buscador ─────────────────────────────────────────────────────────────────────────────────────────── */
.dc-dialogo {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(32rem, calc(100vh - 6rem));
	margin-top: 10vh;
	padding: 0;
	border: 1px solid var(--borde);
	border-radius: 0.875rem;
	background: var(--superficie);
	color: var(--tinta-1);
	overflow: hidden;
}
.dc-dialogo::backdrop { background: rgba(8, 10, 16, 0.5); }
.dc-dialogo-campo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--borde);
	color: var(--tinta-3);
}
.dc-dialogo-campo input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--tinta-1);
	font-family: var(--sans);
	font-size: 1rem;
	outline: none;
}
.dc-dialogo-campo input::-webkit-search-cancel-button { display: none; }
.dc-dialogo-lista { max-height: 24rem; overflow-y: auto; padding: 0.375rem; }
.dc-vacio { margin: 0; padding: 1.5rem 0.75rem; text-align: center; color: var(--tinta-3); font-size: 0.875rem; }
.dc-res {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.625rem;
	text-decoration: none;
}
.dc-res[aria-selected="true"] { background: var(--acento-suave); }
.dc-res-donde { display: block; font-size: 0.6875rem; color: var(--tinta-3); }
.dc-res-que { display: block; font-size: 0.9375rem; color: var(--tinta-1); font-weight: 600; }
.dc-res-texto {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--tinta-2);
}
/* La palabra que se buscó: en el acento y en negrita, sin fondo. Con fondo de aviso casi no se veía en oscuro
   —medido el 2026-11-01 contra el sitio ya publicado—, y un bloque de color dentro de una frase se lee peor. */
.dc-res-texto mark { background: none; color: var(--acento); font-weight: 600; }
.dc-dialogo-pie {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border-top: 1px solid var(--borde);
	font-size: 0.75rem;
	color: var(--tinta-3);
}

/* En un móvil, una sola columna: el índice de la página se va y el de las páginas queda arriba, que es donde se
   busca cuando uno llega desde un enlace y no sabe dónde está */
@media (max-width: 63.9375rem) {
	.dc-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.25rem 1rem 3rem; }
	.dc-dentro { display: none; }
	.dc-menu-boton { display: flex; }
	/* El menú deja de ser una columna y pasa a ser un cajón que abre su botón. Una fila de pastillas servía con
	   nueve páginas sueltas; con secciones, ocupaba media pantalla antes del título. */
	.dc-menu {
		display: none;
		margin-bottom: 1.5rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid var(--borde);
	}
	.dc-menu.abierto { display: block; }
	.dc-menu > ul { position: static; }
	.dc-menu a { font-size: 0.9375rem; padding: 0.5rem 0.625rem; }
	.dc-principal h1 { font-size: 1.625rem; }
	.dc-buscar span, .dc-buscar .dc-tecla { display: none; }
	.dc-buscar { width: auto; padding: 0.4rem; }
	.dc-cabecera { gap: 0.5rem; padding: 0 0.75rem; }
	.dc-pasos { flex-direction: column; }
	.dc-sig { text-align: left; }
	.dc-ant + .dc-sig, .dc-sig:only-child { margin-left: 0; }
	/* La tabla no se encoge: mantiene un ancho legible y se desplaza dentro de su marco. Que hay más a la derecha
	   se ve en la columna cortada; se probó además el truco de las sombras con gradientes y **sobre el fondo
	   oscuro no se veía** (medido a 390 px en Firefox, 2026-11-01), así que no está: una pieza que no se ve no
	   es una pieza. */
	.dc-principal table { min-width: 30rem; }
}

/* Dónde cae cada anotación sobre su captura. Lo generó deploy/docs/capturas.sh midiendo el
   elemento en la pantalla de verdad: no se edita a mano. */
.dc-m-alta-0 { left: 28.77%; top: 27.13%; width: 68.73%; height: 26.61%; }
.dc-m-conectar-script-0 { left: 25.43%; top: 53.13%; width: 39.57%; height: 15%; }
.dc-m-conectar-0 { left: 25.43%; top: 46.76%; width: 19.16%; height: 10.67%; }
.dc-m-conectar-1 { left: 25.43%; top: 61.87%; width: 39.57%; height: 4%; }
.dc-m-dominios-registros-0 { left: 71.78%; top: 52.77%; width: 26.52%; height: 3.83%; }
.dc-m-dominios-registros-1 { left: 71.78%; top: 76.28%; width: 26.52%; height: 3.83%; }
.dc-m-editor-0 { left: 21.69%; top: 11.28%; width: 53.68%; height: 86.98%; }