/* =========================================================================
   NVL LEGAL — páginas legales (components/legal-page.php: la genérica y las
   tres políticas con texto propio, templates/legal-*.php) y
   página de agradecimiento (templates/thanks.php). Depende de
   nvl-components.css (y esta, a su vez, de nvl-base.css). Ambas vistas son
   contenido editorial de ancho de lectura cómodo, sin layout de catálogo.
   Mobile-first, tokens de docs/home-especificacion-visual.md.
   ========================================================================= */

/* --- Página legal (templates/legal.php) ----------------------------------- */

.nvl-legal__inner {
    padding-block: var(--nvl-space-2xl);
    max-width: var(--nvl-measure);
}

@media (min-width: 768px) {
    .nvl-legal__inner {
        padding-block: var(--nvl-space-3xl);
    }
}

.nvl-legal__header {
    margin-bottom: var(--nvl-space-xl);
}

.nvl-legal__title {
    font-size: var(--nvl-text-2xl);
    font-weight: var(--nvl-weight-extrabold);
    line-height: var(--nvl-leading-snug);
    margin-bottom: var(--nvl-space-2xs);
}

@media (min-width: 768px) {
    .nvl-legal__title {
        font-size: var(--nvl-text-3xl);
    }
}

@media (min-width: 1280px) {
    .nvl-legal__title {
        font-size: var(--nvl-text-4xl);
    }
}

.nvl-legal__updated {
    color: var(--nvl-color-text-primary); /* sube de la tinta secundaria: sobre banda, el #64748b oficial da 4.36:1 — fecha de actualización */
    font-size: var(--nvl-text-sm);
}

/* Tipografía editorial del contenido del editor (the_content()). Único
   punto del tema donde el HTML llega desde wp_kses_post() y no desde un
   componente con contrato propio; por eso los selectores son de etiqueta,
   no de clase — el editor no puede aplicar clases .nvl-*. */
.nvl-legal__content {
    color: var(--nvl-color-text-primary);
}

.nvl-legal__content > * + * {
    margin-top: var(--nvl-space-md);
}

.nvl-legal__content h2 {
    font-size: var(--nvl-text-xl);
    font-weight: var(--nvl-weight-bold);
    line-height: var(--nvl-leading-snug);
    margin-top: var(--nvl-space-2xl);
}

.nvl-legal__content h2:first-child {
    margin-top: 0;
}

.nvl-legal__content h3 {
    font-size: var(--nvl-text-lg);
    font-weight: var(--nvl-weight-bold);
    line-height: var(--nvl-leading-heading);
    margin-top: var(--nvl-space-xl);
}

.nvl-legal__content p {
    font-size: var(--nvl-text-base);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-legal__content ul,
.nvl-legal__content ol {
    padding-inline-start: var(--nvl-space-lg);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-legal__content li + li {
    margin-top: var(--nvl-space-2xs);
}

.nvl-legal__content a {
    color: var(--nvl-color-primary-dark);
    text-decoration-thickness: 1px;
}

.nvl-legal__content a:hover {
    color: var(--nvl-color-primary);
}

.nvl-legal__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvl-text-sm);
}

.nvl-legal__content th,
.nvl-legal__content td {
    border: var(--nvl-border-hairline) solid var(--nvl-color-border);
    padding: var(--nvl-space-xs) var(--nvl-space-sm);
    text-align: left;
}

.nvl-legal__content th {
    background: var(--nvl-color-section-alt);
    font-weight: var(--nvl-weight-bold);
}

/* --- Políticas con texto propio (templates/legal-*.php, F3.1) -------------
   docs/checkout-revisa-tu-pedido-especificacion.md §F3.1.4. Dirección
   editorial: texto sobre la página, secciones separadas por espacio, y las
   ÚNICAS cajas son los avisos — por eso se ven. Sin tarjetas, sin íconos en
   los encabezados, sin animación de entrada. */

.nvl-legal__content > .nvl-legal__lead {
    font-size: var(--nvl-text-md);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-legal__content > * + .nvl-legal__section {
    margin-top: var(--nvl-space-2xl);
}

@media (min-width: 768px) {
    .nvl-legal__content > * + .nvl-legal__section {
        margin-top: var(--nvl-space-3xl);
    }
}

.nvl-legal__section > * + * {
    margin-top: var(--nvl-space-md);
}

/* El subtítulo se pega a lo suyo: 32 por encima (su regla), 8 por debajo. */
.nvl-legal__section h3 + * {
    margin-top: var(--nvl-space-2xs);
}

.nvl-legal__section ul > li::marker {
    color: var(--nvl-color-primary);
}

/* Lo que la política NO hace: el «no» lo dice el texto; el rojo lo refuerza. */
.nvl-legal__section .nvl-legal__exclusions > li::marker {
    color: var(--nvl-color-danger);
}

/* Aviso: la receta de .nvl-transfer__status--info (nvl-transfer.css), mismos
   valores. Si un tercer consumidor la necesita, se extrae un aviso común. */
.nvl-legal__notice {
    padding: var(--nvl-space-xs) var(--nvl-space-sm);
    border: var(--nvl-border-hairline) solid var(--nvl-color-border);
    border-inline-start: var(--nvl-border-accent) solid var(--nvl-color-primary);
    border-radius: var(--nvl-radius-md);
    background: var(--nvl-color-surface);
    color: var(--nvl-color-text-primary);
}

.nvl-legal__notice > * + * {
    margin-top: var(--nvl-space-2xs);
}

.nvl-legal__notice--warning {
    border-color: var(--nvl-color-warning-border);
    border-inline-start-color: var(--nvl-color-warning);
    background: var(--nvl-color-warning-bg);
}

.nvl-legal__notice--danger {
    border-color: var(--nvl-color-danger);
    border-inline-start-color: var(--nvl-color-danger);
    background: var(--nvl-color-danger-tint);
}

/* Puntos de entrega: una columna en móvil, dos desde 768. */
@media (min-width: 768px) {
    .nvl-legal__points {
        columns: 2;
        column-gap: var(--nvl-space-xl);
    }

    /* El margen del primer punto de la segunda columna se trunca en el salto:
       las dos columnas arrancan a la misma altura. */
    .nvl-legal__points > li {
        break-inside: avoid;
    }
}

/* Cierre: botones apilados a todo el ancho, al alcance del pulgar; desde 768,
   en un renglón y de ancho natural. */
.nvl-legal__actions {
    display: grid;
    gap: var(--nvl-space-xs);
    margin-top: var(--nvl-space-2xl);
}

@media (min-width: 768px) {
    .nvl-legal__actions {
        display: flex;
        flex-wrap: wrap;
        margin-top: var(--nvl-space-3xl);
    }
}

/* --- Agradecimiento (templates/thanks.php) --------------------------------- */

.nvl-thanks__inner {
    padding-block: var(--nvl-space-3xl);
    max-width: var(--nvl-measure-narrow);
    margin-inline: auto;
    text-align: center;
}

@media (min-width: 768px) {
    .nvl-thanks__inner {
        padding-block: var(--nvl-space-4xl);
    }
}

/* Marca de éxito puramente decorativa: glifo de texto, no icono ni SVG
   (mismo recurso que las estrellas de testimonios en la Home — cero
   dependencias de librerías de iconos). aria-hidden en el markup: el H1 ya
   comunica el mensaje. */
.nvl-thanks__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--nvl-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nvl-radius-circle);
    background: var(--nvl-color-success);
    color: var(--nvl-color-secondary); /* 7.04:1 — el verde oficial no aguanta blanco encima */
    font-size: var(--nvl-text-xl);
    font-weight: var(--nvl-weight-bold);
    line-height: 1;
}

.nvl-thanks__title {
    font-size: var(--nvl-text-2xl);
    font-weight: var(--nvl-weight-extrabold);
    line-height: var(--nvl-leading-snug);
    margin-bottom: var(--nvl-space-md);
}

@media (min-width: 768px) {
    .nvl-thanks__title {
        font-size: var(--nvl-text-3xl);
    }
}

.nvl-thanks__content {
    color: var(--nvl-color-text-primary); /* sube de la tinta secundaria: sobre banda, el #64748b oficial da 4.36:1 — cuerpo de la página de gracias */
}

.nvl-thanks__content > * + * {
    margin-top: var(--nvl-space-md);
}

.nvl-thanks__content p {
    font-size: var(--nvl-text-base);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-thanks__content ul,
.nvl-thanks__content ol {
    text-align: left;
    padding-inline-start: var(--nvl-space-lg);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-thanks__content li + li {
    margin-top: var(--nvl-space-2xs);
}

.nvl-thanks__content a {
    color: var(--nvl-color-primary-dark);
}

.nvl-thanks__content a:hover {
    color: var(--nvl-color-primary);
}

/* --- Copiar el correo (.nvl-legal__actions del Aviso de Privacidad) -------
   owner, 2026-10-29.

   Vive aquí y no reutiliza .nvl-copy-button de la página de transferencia: esa
   receta está en nvl-transfer.css, que NO se encola en una página legal. Son
   dos recetas hermanas; un cambio en una no viaja a la otra.

   El botón es un .nvl-button--secondary normal —mismo aspecto que el de
   WhatsApp que tiene al lado—, así que aquí solo está lo que esa clase no
   cubre: las dos etiquetas apiladas y el estado copiado. */

/* DOS ETIQUETAS EN LA MISMA CELDA, la inactiva con visibility:hidden: el botón
   mide siempre lo que la más larga y NO cambia de ancho al pasar a «Copiado».
   inline-grid pisa el inline-flex de .nvl-button, así que se repite el hueco y
   el centrado que aquella trae. */
.nvl-mail-copy {
    display: inline-grid;
    place-items: center;
}

.nvl-mail-copy__idle,
.nvl-mail-copy__done {
    grid-area: 1 / 1;
}

.nvl-mail-copy__done {
    visibility: hidden;
}

.nvl-mail-copy.nvl-is-copied .nvl-mail-copy__idle {
    visibility: hidden;
}

.nvl-mail-copy.nvl-is-copied .nvl-mail-copy__done {
    visibility: visible;
}

/* El acuse: relleno verde con la tinta que ese verde admite encima (7.04:1).
   El outline transparente se conserva porque en forced-colors el navegador
   descarta el relleno y hace falta que quede algo. */
.nvl-mail-copy.nvl-is-copied {
    background: var(--nvl-color-success);
    border-color: var(--nvl-color-success);
    color: var(--nvl-color-on-success);
    outline: var(--nvl-focus-width) solid transparent;
}

@media (forced-colors: active) {
    .nvl-mail-copy.nvl-is-copied {
        outline-color: Highlight;
    }
}

/* EL RESPALDO. Si el portapapeles falla —contexto no seguro, permiso denegado,
   navegador sin la API—, el JS revela aquí la dirección para copiarla a mano.
   Hasta entonces el elemento está vacío y con [hidden]: la dirección NO viaja
   en el HTML que sirve el servidor.

   user-select: all selecciona la dirección entera con un solo clic. */
.nvl-mail-copy__reveal {
    align-self: center;
    user-select: all;
    font-size: var(--nvl-text-sm);
    color: var(--nvl-color-text-primary);
    overflow-wrap: anywhere;
}