/* ============================================================================
   LA AYUDA DE CADA MÓDULO, VESTIDA CON EL IDIOMA DE METRONIC

   Markdig emite HTML pelón —`<h2>`, `<table>`, `<blockquote>`, `<code>` sin una sola clase— y sin
   esto el documento se leía como un muro: títulos del tamaño de la pantalla, tablas sin líneas y
   el párrafo de entrada idéntico al resto. Es el estilo que ya tiene TechTailor, que Alberto puso
   de referencia el 2026-10-17 (work item 1227).

   CÓMO SE USA: el HTML del documento va dentro de `<div class="ayuda-md">`. El modal de cada
   pantalla (`AyudaDelModulo`) y la página `/ayuda/{slug}` (`Ayuda.razor`) usan la misma clase.

   POR QUÉ UNA HOJA COMPARTIDA Y NO UN .razor.css: la usan dos componentes, y el CSS aislado de
   Blazor no alcanza el marcado de otro; copiarlo en los dos acabaría pintando distinto el mismo
   documento. Se carga después de style.bundle.css en los dos App.razor.

   TODO EN TOKENS DE BOOTSTRAP/METRONIC (`--bs-*`), ningún color literal: tiene que seguir el
   `data-bs-theme` del portal, y un `#333` se vería bien en claro e ilegible en oscuro. */

/* ---------- Ritmo vertical ---------- */

.ayuda-md > *:first-child {
    margin-top: 0;
}

.ayuda-md h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-gray-300);
}

/* El párrafo que sigue al título dice para qué es la pantalla: se pinta como el aviso informativo
   del portal para que se lea primero. `primary` y no `info`, que en este tema es morado. */
.ayuda-md h1 + p {
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--bs-primary);
    background-color: var(--bs-primary-light);
    border-radius: 0.475rem;
    color: var(--bs-gray-800);
}

.ayuda-md h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    scroll-margin-top: 1rem;
}

.ayuda-md h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-gray-800);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.ayuda-md p,
.ayuda-md li {
    font-size: 1.075rem;
    color: var(--bs-gray-700);
    line-height: 1.7;
}

.ayuda-md p {
    margin-bottom: 1rem;
}

/* Medida de lectura: un renglón de 1,200 px se pierde al saltar al siguiente. Las tablas no se
   acotan, porque ahí el ancho sí sirve. */
.ayuda-md p,
.ayuda-md ul,
.ayuda-md ol,
.ayuda-md blockquote {
    max-width: 75ch;
}

.ayuda-md ul,
.ayuda-md ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.ayuda-md li + li {
    margin-top: 0.35rem;
}

.ayuda-md li::marker {
    color: var(--bs-primary);
}

.ayuda-md strong {
    color: var(--bs-gray-900);
    font-weight: 600;
}

.ayuda-md a {
    color: var(--bs-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Tablas ---------- */

/* Con scroll propio: una tabla ancha en una pantalla angosta se desborda ELLA y no saca de cuadro
   al modal entero. */
.ayuda-md table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.5rem;
    font-size: 0.95rem;
}

.ayuda-md th {
    text-align: left;
    font-weight: 600;
    color: var(--bs-gray-600);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--bs-gray-300);
    white-space: nowrap;
}

.ayuda-md td {
    color: var(--bs-gray-700);
    padding: 0.6rem 0.85rem;
    border-bottom: 1px dashed var(--bs-gray-300);
    vertical-align: top;
}

.ayuda-md tbody tr:hover td {
    background-color: var(--bs-gray-100);
}

/* ---------- Citas: las advertencias de cada documento ---------- */

.ayuda-md blockquote {
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--bs-warning);
    background-color: var(--bs-warning-light);
    border-radius: 0.475rem;
}

.ayuda-md blockquote > *:last-child {
    margin-bottom: 0;
}

/* ---------- Código: nombres de columna, claves, valores ---------- */

.ayuda-md code {
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
    color: var(--bs-gray-800);
    background-color: var(--bs-gray-200);
    padding: 0.15rem 0.35rem;
    border-radius: 0.325rem;
}

.ayuda-md pre {
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.25rem 0;
}

.ayuda-md pre code {
    background: none;
    padding: 0;
}

.ayuda-md hr {
    border: 0;
    border-top: 1px solid var(--bs-gray-300);
    margin: 2rem 0;
}

/* ---------- En el modal ---------- */

/* El encabezado del modal ya dice el nombre del módulo: el `#` del documento lo repetía justo
   debajo (la captura de Clientes del 2026-10-17). En la página `/ayuda/{slug}` sí se queda. */
.ayuda-modal .ayuda-md > h1:first-child {
    display: none;
}

.ayuda-modal .ayuda-md > h1:first-child + p {
    margin-top: 0;
}

/* En el modal la medida de lectura ya la pone su ancho: acotar el párrafo además dejaba un tercio
   del modal en blanco a la derecha. */
.ayuda-modal .ayuda-md p,
.ayuda-modal .ayuda-md ul,
.ayuda-modal .ayuda-md ol,
.ayuda-modal .ayuda-md blockquote {
    max-width: none;
}