/* ═══════════════════════════════════════════════════════════════════════════
   HOSTBRID DOCS — la capa que convierte sphinx_rtd_theme en el panel
   ═══════════════════════════════════════════════════════════════════════════

   POR QUÉ ESTA HOJA Y NO UN TEMA PROPIO

   La imagen de producción (`app/Dockerfile`) instala `python3-sphinx` y
   `python3-sphinx-rtd-theme` desde los paquetes de Debian y compila con
   `sphinx-build -W`. Un tema que pidiera algo por pip no se podría desplegar;
   uno propio dentro del repositorio sí, pero obligaría a reescribir el
   `layout.html`, la barra lateral y el enganche de la búsqueda — y cualquier
   descuido ahí es un aviso, y un aviso con `-W` es una imagen que no se
   construye.

   Read the Docs ya trae lo que hace falta: barra lateral con el árbol, buscador
   propio, migas y botones de anterior/siguiente. Lo que no trae es el aspecto.
   Así que se queda el tema y se reescribe entero desde aquí. Además, todo lo
   que sale de aquí cae en `_static/`, que YA está en la lista blanca de
   `proxmoxpanel/urls.py`: ni una ruta nueva, ni un fichero de salida con otro
   nombre — los 57 artículos con `rel=canonical` a /docs/guias/<guia>.html
   siguen apuntando a donde apuntaban.

   LOS COLORES NO SE INVENTAN

   Son los de `app/static/css/nova.css`, que a su vez son los de
   hostbrid-web/src/styles/global.css. Copiados, no aproximados.

   TEMA CLARO Y OSCURO

   Read the Docs no tiene tema oscuro. Aquí el claro va en `:root` —como la web
   pública, que arranca en claro— y el oscuro entra por `prefers-color-scheme`.
   Como todo el resto de la hoja usa variables, el tema oscuro son 30 líneas de
   tokens y ninguna regla duplicada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS — tema claro (nova.css, bloque [data-bs-theme="light"])
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);   /* 6px  */
  --radius-md: calc(var(--radius) - 2px);   /* 8px  */
  --radius-lg: var(--radius);               /* 10px */
  --radius-xl: calc(var(--radius) + 4px);   /* 14px */

  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --text-secondary: #404040;

  --brand-50: #eaf6ff;
  --brand-500: #2cb2ff;
  --brand-600: #0d99e8;
  --brand-700: #0b7cbd;
  --brand: var(--brand-500);
  /* El azul de marca sobre fondo claro se queda en 2,2:1. Para TEXTO se usa el
     700 (4,6:1); --brand se reserva a rellenos, bordes y acentos. Mismo
     criterio que nova.css, y por el mismo motivo. */
  --brand-text: var(--brand-700);

  --status-operational: #50c249;
  --status-degraded: #edb200;
  --status-outage: #e40014;
  --status-maintenance: #1578ef;
  --status-operational-text: #3f7c39;
  --status-degraded-text: #8a6800;
  --status-outage-text: #e40014;
  --status-maintenance-text: #0f66cf;

  --shadow-sm: 0 1px 2px 0 rgb(10 10 10 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(10 10 10 / 0.07);

  /* Tipografía: la misma que carga `app/templates/base.html` del panel.
     Se trae de Google Fonts igual que el panel y por el mismo motivo: no hay
     CSP que lo impida (no existe middleware de CSP en el proyecto — buscado) y
     empaquetar dos familias variables dentro de `_static/` engorda la imagen
     para ganar poco. El enlace, con sus `preconnect`, va en
     `_templates/layout.html`; si el CDN no responde, la pila de reserva es la
     del sistema y la página se lee igual. */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Superficie del cromo (barra lateral y cabecera móvil). En el panel la
     barra lateral tiene EL MISMO fondo que la página y sólo la separa el
     borde (`--nx-panel-bg: var(--background)` en nova.css). */
  --chrome-bg: var(--background);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. TOKENS — tema oscuro (nova.css, bloque :root)
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #171717;
    --muted: #262626;
    --muted-foreground: #a1a1a1;
    --border: #ffffff1a;
    --input: #ffffff26;
    --primary: #e5e5e5;
    --primary-foreground: #171717;
    --secondary: #262626;
    --text-secondary: #d4d4d4;

    --brand-50: #0d2634;
    --brand-text: var(--brand-500);

    --status-outage: #ff5a68;
    --status-operational-text: #50c249;
    --status-degraded-text: #edb200;
    --status-outage-text: #ff5a68;
    --status-maintenance-text: #4d94f5;   /* #1578ef sobre #0a0a0a: 4,48 */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35);

    /* `--chrome-bg` NO se redefine aquí, y es una decisión, no un olvido.
       Ver la nota de la sección 5. */
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. BASE
   ─────────────────────────────────────────────────────────────────────────── */
html, body,
.wy-body-for-nav,
.wy-nav-content-wrap,
.wy-nav-content {
  background: var(--background);
}

body,
.rst-content,
.wy-menu-vertical,
.wy-side-nav-search input[type="text"],
input, select, textarea, button {
  font-family: var(--font-sans);
}

body,
.rst-content p,
.rst-content li,
.wy-plain-list-disc li {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

.rst-content .section,
.rst-content section { color: var(--text-secondary); }

a, .rst-content a {
  color: var(--brand-text);
  text-decoration: none;
}
a:hover, .rst-content a:hover,
a:active, a:focus {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:visited, .rst-content a:visited { color: var(--brand-text); }

/* Foco visible con el anillo de marca, como en el panel. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. TITULARES — Read the Docs usa una serif («Roboto Slab») que no aparece en
   ninguna pantalla de Hostbrid. Fuera.
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content h1, .rst-content h2, .rst-content h3,
.rst-content h4, .rst-content h5, .rst-content h6,
h1, h2, h3, h4, h5, h6,
legend, .rst-content .toctree-wrapper > p.caption {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rst-content h1 { font-size: 2rem;     line-height: 1.2;  margin-bottom: 1rem; letter-spacing: -0.02em; }
.rst-content h2 { font-size: 1.4375rem; line-height: 1.3; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.rst-content h3 { font-size: 1.1875rem; margin-top: 2rem; }
.rst-content h4 { font-size: 1.0625rem; margin-top: 1.5rem; }
.rst-content h5, .rst-content h6 { font-size: 1rem; margin-top: 1.25rem; }

/* La primera h2 no necesita raya: ya la separa el h1. */
.rst-content h1 + section > h2,
.rst-content section > section:first-of-type > h2 { border-top: 0; padding-top: 0; margin-top: 2rem; }

/* El ancla «¶» de cada titular: apagada hasta que se pasa por encima. */
.rst-content .headerlink { color: var(--muted-foreground); opacity: 0; transition: opacity .15s ease; }
.rst-content h1:hover .headerlink,
.rst-content h2:hover .headerlink,
.rst-content h3:hover .headerlink,
.rst-content h4:hover .headerlink { opacity: 1; text-decoration: none; }

/* ───────────────────────────────────────────────────────────────────────────
   5. BARRA LATERAL
   ─────────────────────────────────────────────────────────────────────────── */
/* LA BARRA LATERAL LLEVA EL FONDO DE LA PÁGINA, EN LOS DOS TEMAS.
   Estaba a `--background` en claro y a `#171717` en oscuro, y quien lo dejó
   así lo marcó para que lo decidiera un diseñador. Decidido:

   - **El dato manda.** En el panel el cromo es `--nx-panel-bg`, y `nova.css`
     lo define UNA vez, fuera de los bloques de tema: `var(--background)`. La
     barra del panel es del color de la página en claro Y en oscuro. La
     documentación se pega a eso.
   - **Es lo que hace el producto, no lo que queda más bonito suelto.** El
     gráfico defendía un raíl con un tono propio: ancla la retícula y evita
     que en claro la página sea una pared blanca de lado a lado. El de
     producto sostenía que el raíl es navegación, no una tarjeta, y que darle
     superficie lo convierte en un panel flotando sobre el texto que se lleva
     la mirada mientras lees. Gana producto: lo que se juega aquí no es que la
     página esté bien sola, es que el cliente pase del panel a las guías sin
     notar una costura.
   - **La estructura la dan los bordes, no el relleno.** El filo de 1 px, el
     borde bajo el bloque de marca y la barra azul del apartado activo bastan
     para que el raíl se lea. Si un día no bastaran, se sube el contraste del
     borde antes que rellenar el fondo. */
.wy-nav-side {
  background: var(--chrome-bg);
  border-right: 1px solid var(--border);
}
.wy-side-scroll { background: transparent; width: 100%; overflow-x: hidden; }

/* La cabecera con el logotipo y el buscador. `conf.py` ya no manda el
   `style_nav_header_background`, así que aquí no hay que pelear con un estilo
   en línea; si alguien lo vuelve a poner, este `!important` lo tapa. */
.wy-side-nav-search {
  background: transparent !important;
  padding: 1.25rem 1rem 1rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.wy-side-nav-search > a,
.wy-side-nav-search > a.icon-home,
.wy-side-nav-search .icon-home {
  color: var(--foreground);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0;
  margin-bottom: 0.875rem;
}
.wy-side-nav-search > a:hover { background: transparent; }
.wy-side-nav-search > a img.logo { border-radius: var(--radius-md); }
.wy-side-nav-search > div.version,
.wy-side-nav-search .version { color: var(--muted-foreground); }

/* El buscador, con la misma caja que un campo del panel. */
.wy-side-nav-search input[type="text"] {
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.wy-side-nav-search input[type="text"]::placeholder { color: var(--muted-foreground); }
.wy-side-nav-search input[type="text"]:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 178, 255, 0.25);
}

/* Los rótulos de sección («GUÍAS», «DOMINIOS Y DNS»…). En el panel son
   mayúsculas pequeñas en gris apagado, no en azul. */
.wy-menu-vertical p.caption,
.wy-menu-vertical header,
.wy-menu-vertical .caption-text {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wy-menu-vertical p.caption { margin: 1.5rem 0 0.375rem; padding: 0 1rem; }

.wy-menu-vertical { width: auto; }
.wy-menu-vertical li { margin: 0; }
.wy-menu-vertical a,
.wy-menu-vertical li.toctree-l1 > a,
.wy-menu-vertical li.toctree-l2 > a,
.wy-menu-vertical li.toctree-l3 > a {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.4375rem 1rem;
  border-radius: 0;
}
.wy-menu-vertical a:hover,
.wy-menu-vertical li.toctree-l1 > a:hover,
.wy-menu-vertical li.toctree-l2 > a:hover {
  background: var(--muted);
  color: var(--foreground);
  cursor: pointer;
}

/* El renglón activo: fondo apagado y una barra de marca a la izquierda. Es
   `box-shadow: inset` y no `border-left` a propósito — con borde, el renglón
   se desplaza 3 px al activarse y la lista «baila». Mismo apaño que nova.css. */
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a:hover,
.wy-menu-vertical li.on a:hover,
.wy-menu-vertical li.toctree-l1.current > a,
.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 500;
  border: 0;
  box-shadow: inset 2px 0 0 var(--brand);
}
/* El contenedor de un apartado abierto no es el renglón activo: no lleva barra
   ni fondo, sólo abre el sub-árbol. */
.wy-menu-vertical li.current { background: transparent; }
.wy-menu-vertical li.current ul,
.wy-menu-vertical li.toctree-l2.current > ul { background: transparent; }
.wy-menu-vertical li.toctree-l2 > a { padding-left: 1.75rem; font-weight: 400; }
.wy-menu-vertical li.toctree-l3 > a { padding-left: 2.5rem; font-weight: 400; font-size: 0.8125rem; }
.wy-menu-vertical li.toctree-l2 a:hover,
.wy-menu-vertical li.toctree-l3 a:hover { background: var(--muted); }
.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l3.current > a { box-shadow: inset 2px 0 0 var(--brand); }
.wy-menu-vertical li span.toctree-expand,
.wy-menu-vertical li.current > a span.toctree-expand,
.wy-menu-vertical li.on a span.toctree-expand { color: var(--muted-foreground); }

/* ───────────────────────────────────────────────────────────────────────────
   6. CABECERA MÓVIL (la barra que sale por debajo de 768 px)
   ─────────────────────────────────────────────────────────────────────────── */
.wy-nav-top {
  background: var(--chrome-bg) !important;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  line-height: 1.5;
  padding: 0.75rem 1rem;
}
.wy-nav-top a { color: var(--foreground); font-weight: 600; }
.hostbrid-menu-button {
  float: left;
  border: 0;
  background: transparent;
  color: var(--foreground);
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.wy-nav-top img { border-radius: var(--radius-sm); }

/* ───────────────────────────────────────────────────────────────────────────
   7. ZONA DE CONTENIDO
   ─────────────────────────────────────────────────────────────────────────── */
.wy-nav-content-wrap { background: var(--background); }
.wy-nav-content {
  max-width: 54rem;
  padding: 1.5rem 2.5rem 3rem;
  background: var(--background);
}

/* Migas de pan */
.wy-breadcrumbs { font-size: 0.8125rem; }
.wy-breadcrumbs li,
.wy-breadcrumbs li a { color: var(--muted-foreground); }
.wy-breadcrumbs li a:hover { color: var(--brand-text); }
.wy-breadcrumbs-aside a { color: var(--muted-foreground); font-size: 0.8125rem; }
.rst-content .wy-breadcrumbs li tt,
.wy-breadcrumbs li code { color: var(--muted-foreground); background: transparent; border: 0; }
/* La raya que RTD pone bajo las migas: la marca el mismo borde que todo. */
.wy-breadcrumbs-aside + hr,
hr.docutils,
.rst-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0 2rem;
}
/* La pagina de busqueda trae su propia raya justo debajo de la de las migas:
   salian dos lineas paralelas separadas por un dedo de aire. */
.rst-content hr + hr { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   8. CÓDIGO
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content code,
.rst-content tt,
code, tt,
.rst-content code.literal, .rst-content tt.literal {
  font-family: var(--font-mono);
  background: var(--muted);
  color: var(--brand-text);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.875em;
  font-weight: 400;
  /* Un valor largo partido en dos líneas se dibujaba como DOS cajas sueltas —
     el registro DMARC del asistente de DNS salía en tres trozos y parecía la
     pantalla rota. Igual que en nova.css. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}
.rst-content a code,
.rst-content a tt,
.rst-content a code.literal { color: var(--brand-text); }

/* Las rutas de menu (`:menuselection:`, 29 en las guias) son lo que mas se
   lee de una guia: «En Facturacion > Contratar…». Read the Docs las pinta con
   un azul claro fijo (`background: #e7f2fa`) y un texto oscuro fijo — en el
   tema oscuro quedaban ilegibles, chip claro con letra clara. Aqui son un
   chip neutro con el texto del tema, como las pildoras del panel. */
.rst-content .menuselection,
.rst-content .guilabel,
.rst-content .guibutton,
.rst-content .kbd,
.rst-content kbd {
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.875em;
  font-weight: 500;
  padding: 0.1em 0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rst-content .accelerator { text-decoration: underline; }

.highlight,
.rst-content div[class^="highlight"],
.rst-content pre.literal-block {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rst-content div[class^="highlight"] { margin-bottom: 1.5rem; }
.highlight pre,
.rst-content div[class^="highlight"] pre,
.rst-content pre.literal-block {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--foreground);
  background: transparent;
  padding: 1rem 1.125rem;
  border: 0;
}
.rst-content pre code { background: transparent; padding: 0; color: inherit; }

/* Pygments sólo trae paleta clara. Estas son las clases que de verdad aparecen
   en las guías (contadas sobre el HTML construido: w, nv, o, m, se, p, nb, doc);
   en oscuro se repintan a mano porque la hoja del tema las deja ilegibles. */
@media (prefers-color-scheme: dark) {
  .highlight .nv, .highlight .nb, .highlight .nf, .highlight .nc { color: #74c8ff; }
  .highlight .s, .highlight .s1, .highlight .s2, .highlight .se, .highlight .sd,
  .highlight .doc { color: #8ad78a; }
  .highlight .k, .highlight .kd, .highlight .kn, .highlight .kt { color: #ff9ecb; }
  .highlight .m, .highlight .mi, .highlight .mf { color: #edb200; }
  .highlight .o, .highlight .p, .highlight .ow { color: var(--text-secondary); }
  .highlight .c, .highlight .c1, .highlight .cm { color: var(--muted-foreground); font-style: italic; }
  .highlight .gp { color: var(--muted-foreground); }
  .highlight .err { color: var(--status-outage-text); background: transparent; border: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   9. AVISOS — los cuatro que usan las guías: note, tip, important, warning.
   Se pintan con los colores de estado de hostbrid.com, no con los de RTD.
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content .admonition,
.rst-content .note,
.rst-content .tip,
.rst-content .hint,
.rst-content .important,
.rst-content .warning,
.rst-content .caution,
.rst-content .attention,
.rst-content .danger,
.rst-content .error,
.rst-content .seealso,
.rst-content .admonition-todo {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 1.5rem;
}
/* El titulillo. RTD pinta el fondo con selectores de DOS clases
   (`.rst-content .note .admonition-title { background: #6ab0de }`), asi que
   una regla de una sola clase pierde: la NOTA seguia saliendo con su barra
   azul de Read the Docs encima del recuadro ya reestilado. Se listan los
   tipos uno a uno para empatar en especificidad. */
.rst-content .admonition-title,
.rst-content .note > .admonition-title,
.rst-content .tip > .admonition-title,
.rst-content .hint > .admonition-title,
.rst-content .important > .admonition-title,
.rst-content .warning > .admonition-title,
.rst-content .caution > .admonition-title,
.rst-content .attention > .admonition-title,
.rst-content .danger > .admonition-title,
.rst-content .error > .admonition-title,
.rst-content .seealso > .admonition-title,
.rst-content .admonition-todo > .admonition-title {
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.75rem 1.125rem 0;
  margin: 0;
}
.rst-content .admonition > *:not(.admonition-title) { padding: 0 1.125rem; }
.rst-content .admonition > p:not(.admonition-title) { margin-top: 0.5rem; }
.rst-content .admonition > *:last-child { padding-bottom: 0.875rem; margin-bottom: 0; }
.rst-content .admonition p { color: var(--text-secondary); }
.rst-content .admonition .admonition-title::before { display: none; }

.rst-content .note, .rst-content .seealso {
  border-left-color: var(--status-maintenance);
}
.rst-content .note > .admonition-title,
.rst-content .seealso > .admonition-title { color: var(--status-maintenance-text); }

.rst-content .tip, .rst-content .hint {
  border-left-color: var(--status-operational);
}
.rst-content .tip > .admonition-title,
.rst-content .hint > .admonition-title { color: var(--status-operational-text); }

.rst-content .important {
  border-left-color: var(--brand);
}
.rst-content .important > .admonition-title { color: var(--brand-text); }

.rst-content .warning, .rst-content .caution, .rst-content .attention,
.rst-content .admonition-todo {
  border-left-color: var(--status-degraded);
}
.rst-content .warning > .admonition-title,
.rst-content .caution > .admonition-title,
.rst-content .attention > .admonition-title,
.rst-content .admonition-todo > .admonition-title { color: var(--status-degraded-text); }

.rst-content .danger, .rst-content .error {
  border-left-color: var(--status-outage);
}
.rst-content .danger > .admonition-title,
.rst-content .error > .admonition-title { color: var(--status-outage-text); }

/* ───────────────────────────────────────────────────────────────────────────
   10. BOTONES — los de anterior/siguiente son los únicos de la documentación.
   Se pintan como el `.btn-primary` del panel: negro sobre blanco en claro,
   blanco sobre negro en oscuro, radio 8 px, peso 500.
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content .btn,
.btn, .btn-neutral,
.rst-content .btn-neutral {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  transition: opacity .15s ease;
}
.rst-content .btn:hover,
.btn:hover, .btn-neutral:hover,
.rst-content .btn-neutral:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  opacity: 0.88;
  text-decoration: none;
}
.rst-content .btn:active, .btn:active { box-shadow: none; top: 0; }
.rst-content .btn .fa,
.btn .fa, .btn-neutral .fa,
.rst-content .btn-neutral .fa { color: var(--primary-foreground) !important; }
.rst-content .btn:visited, .btn-neutral:visited { color: var(--primary-foreground) !important; }

.rst-footer-buttons { margin-top: 2rem; }
/* RTD pone los botones arriba Y abajo (`prev_next_buttons_location: both`).
   El de arriba, justo debajo de las migas, es ruido antes de haber leído
   nada: se queda sólo el de abajo. Es cosmética; el enlace sigue existiendo
   abajo, así que no se pierde ninguna ruta. */
.rst-content > div[role="navigation"] + .rst-footer-buttons,
.rst-content .document + .rst-footer-buttons { }

/* ───────────────────────────────────────────────────────────────────────────
   11. TABLAS
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content table.docutils,
.wy-table-responsive table,
.rst-content table.field-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  font-size: 0.9375rem;
}
.rst-content table.docutils thead th,
.wy-table-responsive table thead th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 0.875rem;
}
.rst-content table.docutils td,
.wy-table-responsive table td {
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 0.875rem;
  vertical-align: top;
}
.rst-content table.docutils tbody tr:last-child td,
.wy-table-responsive table tbody tr:last-child td { border-bottom: 0; }
/* Sin cebra: el panel no la tiene, sólo resalta al pasar por encima. */
.rst-content table.docutils tbody tr:nth-child(odd) td,
.wy-table-responsive table tbody tr:nth-child(odd) td,
.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td { background: transparent; }
.wy-table-responsive table tbody tr:hover td,
.rst-content table.docutils tbody tr:hover td { background: var(--muted); }

/* El texto de las celdas parte línea. El tema pone `white-space: nowrap` en
   cada celda; con eso una tabla de dos columnas con frases dentro se sale del
   ancho y hay que arrastrarla en horizontal para leer el final de cada fila.
   Se deja el `nowrap` en el código de dentro de una celda: ahí partir una
   orden por la mitad sí estorba. */
.rst-content .wy-table-responsive table td,
.rst-content .wy-table-responsive table th {
  white-space: normal;
  word-break: break-word;
}
.rst-content .wy-table-responsive table td code,
.rst-content .wy-table-responsive table th code,
.rst-content .wy-table-responsive table td tt,
.rst-content .wy-table-responsive table th tt { white-space: nowrap; }
.wy-table-responsive { margin-bottom: 1.5rem; }

/* ───────────────────────────────────────────────────────────────────────────
   12. FIGURAS — las capturas del panel. Marco de una línea y el mismo radio
   que una tarjeta, para que la captura parezca incrustada y no pegada.
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content figure,
.rst-content .figure { margin: 1.5rem 0 2rem; }
.rst-content figure img,
.rst-content .figure img,
.rst-content img {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 100%;
  height: auto;
  box-shadow: var(--shadow-sm);
}
/* Los iconos en línea y los logotipos no son capturas: sin marco. */
.rst-content .wy-side-nav-search img,
.rst-content a.reference.image-reference > img.inline,
.rst-content img.no-marco { border: 0; box-shadow: none; border-radius: 0; }

/* Ojo con `.caption-text` a secas: `toctree` lo usa TAMBIEN para los rotulos
   de seccion del cuerpo (<p class="caption" role="heading"><span
   class="caption-text">Dominios y DNS</span></p>). Con la regla sin acotar,
   los siete rotulos de la portada se quedaban mas pequenos que el texto
   normal y la pagina perdia su jerarquia entera. Se acota a la figura. */
.rst-content figure > figcaption,
.rst-content .figure > .caption,
.rst-content figure > figcaption p,
.rst-content .figure > .caption .caption-text {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.5;
}

/* Y los rotulos de seccion del cuerpo se pintan como un h2, que es lo que
   son: `role="heading"`. */
.rst-content .toctree-wrapper > p.caption,
.rst-content div.toctree-wrapper p.caption {
  margin: 2.5rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.rst-content .toctree-wrapper > p.caption .caption-text,
.rst-content div.toctree-wrapper p.caption .caption-text {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. LISTAS, CITAS, DEFINICIONES
   ─────────────────────────────────────────────────────────────────────────── */
.rst-content ul li, .rst-content ol li { margin-bottom: 0.375rem; }
.rst-content blockquote {
  border-left: 3px solid var(--border);
  color: var(--muted-foreground);
  margin-left: 0;
  padding-left: 1rem;
  font-style: normal;
}
.rst-content dl dt {
  color: var(--foreground);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--brand);
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
}
.rst-content dl:not(.docutils) dt {
  background: var(--muted);
  color: var(--foreground);
  border-top: 0;
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}
.rst-content dl:not(.docutils) dt .headerlink { color: var(--muted-foreground); }

/* ───────────────────────────────────────────────────────────────────────────
   14. BUSCADOR (search.html) — la página que más se aleja del panel si no se
   toca: RTD la deja con el estilo de lista por defecto.
   ─────────────────────────────────────────────────────────────────────────── */
#search-results .search li,
.rst-content .search li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.125rem;
  margin-bottom: 0.75rem;
  list-style: none;
  border-bottom: 1px solid var(--border);
}
#search-results .search li a,
.rst-content .search li a { font-weight: 600; font-size: 1rem; color: var(--foreground); }
#search-results .search li a:hover { color: var(--brand-text); }
#search-results .search li div.context,
.rst-content .search li div.context {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  padding-left: 0;
}
#search-results .context .highlighted,
.rst-content .highlighted {
  background: var(--brand-50);
  color: var(--brand-text);
  border-radius: var(--radius-sm);
  padding: 0 0.15em;
  box-shadow: none;
  font-weight: 600;
}
#search-results p.search-summary, #search-results .search-summary { color: var(--muted-foreground); }
/* El formulario de la propia página de búsqueda. */
#rtd-search-form input[type="text"],
.rst-content form input[type="text"],
.wy-form input[type="text"] {
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}
.rst-content form input[type="submit"],
.wy-form input[type="submit"] {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────────
   15. PIE
   ─────────────────────────────────────────────────────────────────────────── */
footer, .rst-content footer {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
footer p, footer div { color: var(--muted-foreground); }
footer a { color: var(--brand-text); }
footer hr { display: none; }

/* La marca de agua de Read the Docs: la documentación no está alojada ahí —
   la sirve el propio panel desde `/docs/`— así que la línea «Built with
   Sphinx using a theme provided by Read the Docs» sobra y confunde. */
.rst-content .rst-versions,
footer .rst-footer-buttons + hr { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   16. MÓVIL — objetivo: 390 px sin desbordes horizontales.
   ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .wy-nav-content { padding: 1rem 1.125rem 2.5rem; }
  .rst-content h1 { font-size: 1.625rem; }
  .rst-content h2 { font-size: 1.25rem; margin-top: 2rem; padding-top: 1.25rem; }
  .rst-content h3 { font-size: 1.0625rem; }
  .wy-nav-content-wrap.shift { background: var(--background); }
  /* Con el menú desplegado, el fondo que queda detrás era el gris de RTD. */
  .wy-nav-content-wrap { min-height: 100vh; }
  /* Una tabla ancha se arrastra dentro de su caja, no empuja la página. */
  .wy-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rst-content table.docutils, .wy-table-responsive table { font-size: 0.875rem; }
  /* Las órdenes largas de las guías no caben en 390 px: que partan. */
  .highlight pre, .rst-content div[class^="highlight"] pre, .rst-content pre.literal-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    padding: 0.75rem 0.875rem;
  }
  /* Anterior / Siguiente en columna. Son DOS bloques y con clases distintas:
     `.rst-breadcrumbs-buttons` arriba (debajo de las migas) y
     `.rst-footer-buttons` abajo. Cubrir solo el de abajo dejaba el «Siguiente»
     de arriba flotando a la derecha: sobresalia 52 px del viewport de 390 y la
     pagina se desplazaba en horizontal. Medido con
     `document.documentElement.scrollWidth` = 442 sobre `clientWidth` = 390. */
  .rst-footer-buttons .btn,
  .rst-breadcrumbs-buttons .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    float: none !important;
    box-sizing: border-box;
  }
  /* Y en movil el par de arriba sobra: son los MISMOS dos enlaces que hay al
     final de la pagina, y apilados a pantalla completa ocupaban media
     pantalla antes del titulo. Se ocultan, no se quitan del HTML: los
     enlaces `rel=prev`/`rel=next` del pie siguen ahi. */
  .rst-breadcrumbs-buttons { display: none; }
  /* Y las migas, que llevan el «Ver codigo fuente» flotando a la derecha. */
  .wy-breadcrumbs-aside { float: none; display: block; margin-top: 0.25rem; }
}

/* En pantallas muy anchas, el panel no estira el texto hasta el borde. */
@media screen and (min-width: 1400px) {
  .wy-nav-content { max-width: 58rem; }
}

/* Nadie ha pedido animaciones, pero el tema trae transiciones en el menú. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   17. LA MARCA
   ─────────────────────────────────────────────────────────────────────────── */

/* El logotipo sustituye a la casita + «Hostbrid» que ponía el tema. El
   wordmark va en `currentColor`, así que hereda `--foreground`: negro sobre
   claro, blanco sobre oscuro, un solo SVG. El disco del símbolo es blanco
   fijo, que es como se pinta en el panel y en la web. */
.hb-marca {
  display: block;
  padding: 0 !important;
  margin: 0 0 0.875rem !important;
  background: transparent !important;
  color: var(--foreground) !important;
  line-height: 0;
}
.hb-marca:hover { background: transparent !important; opacity: 0.85; }
.hb-marca .hb-logo {
  height: 1.75rem;
  width: auto;
  display: block;
}
/* El tema mete `::before` con la casita de Font Awesome en cualquier `a`
   dentro de la cabecera. Si se cuela, el SVG aparece con una casita delante. */
.hb-marca::before { content: none !important; }

/* En la cabecera de móvil el ancla va centrada y el tema le pone su propio
   color de fondo y `font-weight`. */
.wy-nav-top a.hb-marca--movil {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block;
}
.wy-nav-top a.hb-marca--movil .hb-logo { height: 1.5rem; }

/* ───────────────────────────────────────────────────────────────────────────
   18. EL PIE, CON LA FORMA QUE PIDIÓ EL DUEÑO
   ─────────────────────────────────────────────────────────────────────────── */

/* Dos líneas, en este orden y sin nada más:
       Copyright 2026, enginerIT.
       Built with Sphinx
   La segunda, más apagada: es un crédito técnico, no información. */
.hb-pie-marca {
  margin: 0;
  color: var(--muted-foreground);
}
.hb-pie-sphinx {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

/* La regla que tapaba «Built with Sphinx using a theme provided by Read the
   Docs» ya no hace falta: `_templates/footer.html` no lo genera. Se deja
   fuera a propósito en vez de dejarla «por si acaso»: una regla que no tapa
   nada es una regla que el siguiente no sabe si puede tocar. */

/* ───────────────────────────────────────────────────────────────────────────
   19. LA PORTADA: TARJETAS, NO UNA LISTA DE ENLACES
   ─────────────────────────────────────────────────────────────────────────── */

/* La portada repetía la barra lateral: los mismos quince títulos, dos veces en
   la misma pantalla, sin una palabra de qué hace cada uno. Ahora cada guía es
   una tarjeta con su frase, y el lector elige leyendo, no adivinando.

   SE PINTA SOBRE UNA LISTA DE VERDAD, no sobre HTML en bruto. `.. raw:: html`
   habría dado el marcado exacto de un tirón, pero el contenido de un `raw` NO
   se extrae a los catálogos: la portada se habría quedado en castellano en
   `en`, `ca` y `fr` sin que nada avisara. Una `container` con una lista
   dentro sí se traduce, así que la tarjeta se construye con CSS a partir del
   `<li>`. */
.hb-tarjetas ul,
ul.simple.hb-tarjetas {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.rst-content .hb-tarjetas ul > li,
.rst-content ul.hb-tarjetas > li {
  margin: 0 !important;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rst-content .hb-tarjetas ul > li::marker,
.rst-content ul.hb-tarjetas > li::marker { content: none; }
.rst-content .hb-tarjetas ul > li:hover,
.rst-content ul.hb-tarjetas > li:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}
/* El título de la tarjeta es el propio enlace a la guía: en bloque, con el
   color del texto normal y el peso de un titular, para que la tarjeta no sea
   una mancha azul. El subrayado sólo al pasar por encima. */
.rst-content .hb-tarjetas ul > li > p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* docutils envuelve el contenido de cada elemento en un `<p>`, así que el
   enlace es NIETO del `<li>`, no hijo. Con `>` directo la regla no casaba con
   nada y el título salía en azul y en la misma línea que la descripción: se
   veía en el render, no en la hoja. */
.rst-content .hb-tarjetas ul > li > p > a.reference {
  display: block;
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  margin-bottom: 0.1875rem;
}
.rst-content .hb-tarjetas ul > li > p > a.reference:hover {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Los tres pasos de «Empezar». Es el único camino que la portada recomienda,
   así que se pinta distinto de las tarjetas: si todo destaca, no destaca
   nada. El número lo pone la lista ordenada del RST, no un contador de CSS:
   así sigue siendo una lista numerada para quien la escucha. */
.hb-ruta ol,
ol.hb-ruta {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.rst-content .hb-ruta ol > li,
.rst-content ol.hb-ruta > li {
  margin: 0 !important;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.rst-content .hb-ruta ol > li::marker { content: none; }
.rst-content .hb-ruta ol > li::before {
  content: counter(list-item);
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--brand);
  color: #04212f;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-align: center;
}
.rst-content .hb-ruta ol > li > p { margin: 0; }
.rst-content .hb-ruta ol > li > p > a.reference {
  color: var(--foreground);
  font-weight: 600;
}
.rst-content .hb-ruta ol > li > p > a.reference:hover {
  color: var(--brand-text);
  text-decoration: underline;
}

/* A 390 px las tarjetas caen a una columna solas (`minmax` de 18rem); lo que
   se aprieta es el aire, que a pantalla estrecha se come el contenido. */
@media screen and (max-width: 480px) {
  .hb-tarjetas ul { gap: 0.625rem; }
  .rst-content .hb-tarjetas ul > li { padding: 0.75rem 0.875rem; }
}