/* ==========================================================================
   LUCESAT RASTREO SATELITAL — Políticas de privacidad
   --------------------------------------------------------------------------
   Estilos EXCLUSIVOS de politicas-de-privacidad.php. Se encolan sólo en esa
   página (ver includes/header.php → $page_privacidad).

   Esta hoja se carga después de styles.css, así que puede apoyarse en todos
   los tokens (:root) y utilidades de la landing. Acá vive únicamente lo
   propio de la página legal: layout de dos columnas, índice sticky, prosa
   jurídica, tablas y avisos destacados.

   @package LuceSat
   @version 7.0.0  (Etapa 7 — Optimización)

   PRODUCCIÓN
   Se sirve sin minificar a propósito (el proyecto no tiene build). Para
   minificarla al desplegar:
       npx clean-css-cli -O2 -o assets/css/privacidad.min.css assets/css/privacidad.css
   y apuntar lucase_asset('css/privacidad.min.css') en includes/header.php.
   ⚠️ Subir LUCESAT_VERSION en config/config.php después de minificar.
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT
   ========================================================================== */
.legal {
    /* Una sola columna: al no haber índice lateral, la grilla de dos columnas
       dejaba el contenido en la franja angosta. */
    display: block;
}

.legal__cuerpo {
    min-width: 0;
}

.legal__contenido {
    max-width: 46rem;
    margin-inline: auto;
}

.legal__dato {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    background-color: var(--marino-profundo);
}

.legal__dato-rotulo {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    /* Etiqueta chica: --color-texto-suave asegura AA sobre el fondo. */
    color: var(--color-texto-suave);
}

.legal__dato-valor {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-texto);
}

.legal__dato-valor a {
    color: var(--color-acento);
}

.legal__dato-valor a:hover {
    color: var(--celeste-suave);
}

/* ==========================================================================
   4. PROSA JURÍDICA
   ========================================================================== */
.legal__seccion {
    /* Compensa el header sticky cuando el índice salta a esta sección. */
    scroll-margin-top: calc(var(--header-h) + 1.75rem);
}

.legal__seccion + .legal__seccion {
    margin-top: clamp(2.75rem, 6vw, 4rem);
    padding-top: clamp(2.75rem, 6vw, 4rem);
    border-top: 1px solid var(--color-borde);
}

.legal__seccion h2 {
    font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.7rem);
}

/* Numeración automática: los números del índice y de los títulos salen del
   mismo contador, así no se pueden desincronizar. */
.legal__seccion h2::before {
    counter-increment: seccion-legal;
    content: counter(seccion-legal) ". ";
    /* Mismo motivo que los números del índice: el azul marino se aclara por el
       gradiente de fondo y --color-texto-tenue no alcanza AA. */
    color: var(--color-texto-suave);
    font-weight: 500;
}

.legal__cuerpo {
    counter-reset: seccion-legal;
}

.legal__contenido > p,
.legal__contenido > ul > li,
.legal__contenido > ol > li,
.legal__seccion p,
.legal__seccion li {
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--color-texto-suave);
}

.legal__seccion p + p {
    margin-top: var(--sp-4);
}

.legal__seccion h3 {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-md);
    color: var(--color-titulo);
}

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

.legal__seccion ul,
.legal__seccion ol {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-left: 1.35rem;
}

.legal__seccion ul { list-style: disc; }
.legal__seccion ol { list-style: decimal; }

.legal__seccion li::marker {
    color: var(--celeste);
}

.legal__seccion a {
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.legal__seccion a:hover {
    color: var(--celeste-suave);
}

.legal__seccion strong {
    font-weight: 600;
    color: var(--color-texto);
}

.legal__seccion abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted var(--color-texto-tenue);
    cursor: help;
}

/* ==========================================================================
   6. AVISOS DESTACADOS
   ==========================================================================
   Los revisores de Google Play y de App Store buscan explícitamente dos cosas:
   la divulgación de la UBICACIÓN EN SEGUNDO PLANO y el mecanismo de ELIMINACIÓN
   DE DATOS. Por eso esos dos puntos van en avisos propios, imposibles de pasar
   por alto al leer en diagonal.
   ========================================================================== */
.aviso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: clamp(1rem, 2.5vw, 1.35rem);
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-borde);
    border-left-width: 3px;
    border-radius: var(--radio-md);
}

.aviso__icono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--celeste);
    background-color: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
}

.aviso__svg {
    width: 18px;
    height: 18px;
}

.aviso__titulo {
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-titulo);
}

.aviso p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--color-texto-suave);
}

.aviso p + p {
    margin-top: var(--sp-3);
}

.aviso ul {
    margin-top: var(--sp-3);
    padding-left: 1.2rem;
    list-style: disc;
}

/* Divulgación clave: ubicación en segundo plano, eliminación de datos. */
.aviso--destacado {
    background-color: rgba(56, 189, 248, 0.07);
    border-color: rgba(56, 189, 248, 0.28);
    border-left-color: var(--celeste);
}

/* Compromisos y derechos del usuario. */
.aviso--legal {
    background-color: rgba(110, 231, 183, 0.055);
    border-color: rgba(110, 231, 183, 0.28);
    border-left-color: var(--exito);
}

.aviso--legal .aviso__icono {
    color: var(--exito);
    background-color: rgba(110, 231, 183, 0.1);
    border-color: rgba(110, 231, 183, 0.25);
}

/* Lo que falta completar antes de publicar. */
.aviso--alerta {
    background-color: var(--error-fondo);
    border-color: var(--error-borde);
    border-left-color: var(--error);
}

.aviso--alerta .aviso__icono {
    color: var(--error);
    background-color: rgba(255, 123, 114, 0.1);
    border-color: rgba(255, 123, 114, 0.25);
}

.aviso--alerta .aviso__titulo {
    color: var(--error);
}

/* ==========================================================================
   8. AVISO DE BORRADOR
   ========================================================================== */
.legal__borrador {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding: clamp(1.1rem, 2.5vw, 1.4rem);
    background-color: var(--error-fondo);
    border: 1px solid var(--error-borde);
    border-left: 3px solid var(--error);
    border-radius: var(--radio-md);
}

.legal__borrador-titulo {
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--error);
}

.legal__borrador p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--color-texto-suave);
}

.legal__borrador p + p {
    margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   BOTÓN FLOTANTE EN ESTA PÁGINA
   --------------------------------------------------------------------------
   Acá el texto llega hasta el borde de la columna, así que el botón flotante
   tapa contenido —justo las instrucciones de eliminación de datos, que son
   las más importantes del documento—. Por debajo de 1024px se compacta a sólo
   el ícono; el nombre accesible sigue viniendo del aria-label del enlace.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .page-privacidad .float-wa {
        padding: 0.72rem;
    }

    .page-privacidad .float-wa__texto {
        display: none;
    }
}

/* Al imprimir una política, el índice y el aviso de borrador estorban. */
@media print {

    .legal__seccion {
        break-inside: avoid;
    }
}

/* --- Declaración: lista con viñetas -------------------------------------- */
.legal__declaracion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal__declaracion li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-texto);
}

/* Viñeta: punto con el degradado de la marca. */
.legal__declaracion li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-image: var(--grad-acento);
}

/* --- Cláusulas con rótulo ------------------------------------------------ */
.legal__clausulas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin: 0;
}

.legal__clausulas dd {
    margin: 0;
}

/* --- Contacto y fecha ---------------------------------------------------- */
.legal__contacto {
    margin-top: var(--sp-5);
}

.legal__contacto-svg {
    width: 1.1em;
    height: 1.1em;
}

.legal__actualizado {
    margin-top: clamp(2rem, 5vw, 3rem);
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--color-texto-suave);
}