/*
 * Páginas de documentos legales — /ayuda/{documento}
 *
 * CSS plano, no compilado desde SCSS. El resto de los archivos de esta
 * carpeta tienen su par .scss porque los compila `sass` a mano, y acá no hace
 * falta ninguna característica de SCSS: es una página de texto. Escribirlo
 * como .scss obligaría a instalar el compilador para cambiar un margen.
 *
 * Tampoco se importa desde style.scss: estas páginas lo enlazan directo, y
 * así el resto del sitio no carga estilos que no usa.
 *
 * El contenido lo emite la plataforma como HTML (h1..h4, p, ul, ol, table),
 * sin clases propias. Por eso se estiliza por etiqueta dentro de
 * .doc-legal-cuerpo y no con clases.
 */

.doc-legal-pagina {
    padding: 60px 0 80px;
    background-color: var(--whiteColor);
}

/* Ancho de lectura. Un texto legal a todo el ancho de la pantalla no se lee:
   el ojo pierde el renglón al volver. 75 caracteres es el límite cómodo. */
.doc-legal-contenedor {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Cabecera de la página --- */

.doc-legal-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--paragraphColor);
    text-decoration: none;
    transition: var(--transition);
}

.doc-legal-volver:hover {
    color: var(--mainColor);
}

/* Va arriba del título, como antetítulo. Sin borde inferior: una línea acá
   se lee como separador de sección y deja el título del documento del lado
   de abajo, como si fuera otra cosa. */
.doc-legal-meta {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--paragraphColor);
}

/* --- Cuerpo del documento --- */

.doc-legal-cuerpo {
    color: var(--blackColor);
    font-size: 16px;
    line-height: 1.75;
}

.doc-legal-cuerpo h1 {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
}

.doc-legal-cuerpo h2 {
    margin: 44px 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.doc-legal-cuerpo h3 {
    margin: 32px 0 12px;
    font-size: 18px;
    font-weight: 600;
}

.doc-legal-cuerpo h4 {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.doc-legal-cuerpo p {
    margin: 0 0 18px;
    color: var(--paragraphColor);
}

.doc-legal-cuerpo strong {
    color: var(--blackColor);
    font-weight: 600;
}

.doc-legal-cuerpo a {
    color: var(--mainColor);
    text-decoration: underline;
    /* Las direcciones de correo y las URLs largas de un texto legal desbordan
       el contenedor en móvil si no se las deja partir. */
    word-break: break-word;
}

.doc-legal-cuerpo ul,
.doc-legal-cuerpo ol {
    margin: 0 0 18px;
    padding-left: 24px;
    color: var(--paragraphColor);
}

.doc-legal-cuerpo li {
    margin-bottom: 8px;
}

.doc-legal-cuerpo blockquote {
    margin: 0 0 18px;
    padding: 12px 20px;
    border-left: 3px solid var(--mainColor);
    background: #faf7f8;
    color: var(--paragraphColor);
}

.doc-legal-cuerpo code {
    padding: 2px 5px;
    border-radius: 3px;
    background: #f2f3f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Los documentos traen bloques preformateados (la Política de Cookies dibuja
   así los botones del banner). `white-space: pre` no envuelve, así que sin
   scroll propio el bloque empuja la página entera: en móvil el documento
   quedaba con scroll horizontal por una sola línea de ejemplo. */
.doc-legal-cuerpo pre {
    max-width: 100%;
    margin: 0 0 18px;
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: 4px;
    background: #f7f8fa;
}

.doc-legal-cuerpo pre code {
    padding: 0;
    background: none;
    /* Adentro de un bloque preformateado el scroll ya resuelve el ancho.
       Partir las palabras acá desarma el ejemplo que el bloque ilustra. */
    word-break: normal;
}

/* Las tablas de los documentos tienen columnas de encabezado largas. En
   móvil no caben: se les deja scroll propio en vez de romper la página. */
.doc-legal-cuerpo table {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.doc-legal-cuerpo th,
.doc-legal-cuerpo td {
    padding: 10px 14px;
    border: 1px solid #e7e8ee;
    text-align: left;
    vertical-align: top;
    color: var(--paragraphColor);
}

.doc-legal-cuerpo th {
    background: #f7f8fa;
    color: var(--blackColor);
    font-weight: 600;
}

/* --- Huella --- */

.doc-legal-huella {
    margin: 48px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e7e8ee;
    font-size: 13px;
    color: var(--paragraphColor);
    word-break: break-all;
}

/* --- Aviso de versión archivada --- */

.doc-legal-aviso {
    margin: 0 0 32px;
    padding: 16px 20px;
    border-left: 3px solid #b8860b;
    border-radius: 0 var(--kc-radio, 6px) var(--kc-radio, 6px) 0;
    background: #fdf8ec;
    font-size: 15px;
    line-height: 1.6;
    color: #5c4813;
}

.doc-legal-aviso a {
    color: #7a5c10;
    text-decoration: underline;
}

/* --- Estados --- */

.doc-legal-estado {
    padding: 40px 0;
    color: var(--paragraphColor);
}

.doc-legal-estado h1 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--blackColor);
}

.doc-legal-estado a {
    color: var(--mainColor);
}

.doc-legal-estado--cargando {
    color: var(--paragraphColor);
}

@media (max-width: 767px) {
    .doc-legal-pagina {
        padding: 36px 0 56px;
    }

    .doc-legal-cuerpo h1 {
        font-size: 26px;
    }

    .doc-legal-cuerpo h2 {
        font-size: 19px;
    }
}

/* --- Barra superior y pie propios ---
   Estas páginas no repiten el navbar de la portada a propósito: ese navbar
   arrastra MeanMenu, el sticky y el resto de main.js, y una página de texto
   no necesita nada de eso. Solo el logo, para volver. */

.doc-legal-barra {
    padding: 20px 0;
    border-bottom: 1px solid #e7e8ee;
    background: var(--whiteColor);
}

.doc-legal-barra-interior {
    display: flex;
    align-items: center;
}

.doc-legal-logo img {
    display: block;
    height: auto;
    max-width: 138px;
}

.doc-legal-pie {
    padding: 32px 0 40px;
    border-top: 1px solid #e7e8ee;
    background: #fafafb;
}

.doc-legal-pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.doc-legal-pie-enlaces a {
    font-size: 14px;
    color: var(--paragraphColor);
    text-decoration: none;
    transition: var(--transition);
}

.doc-legal-pie-enlaces a:hover {
    color: var(--mainColor);
}

.doc-legal-pie-copy {
    margin: 0;
    font-size: 13px;
    color: var(--paragraphColor);
}