/* ============================================================================
   DOCUMENTOS LEGALES (Términos y Condiciones · Política de Privacidad) — V2
   2-oct-2026. Gilberto: «carta blanca para modernizarlos, solo respeta los textos».
   El texto de cada documento es el original (dentro de .tg-legal-doc); aquí solo vive
   la presentación: barra superior, encabezado con la mascota, índice lateral que se
   arma solo con las secciones, hoja de lectura cómoda, progreso y volver arriba.
   Claro y oscuro con los tokens de tinguro-ui.css (tema: tinguro-theme.js).
   ========================================================================= */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
    margin: 0;
    font-family: var(--tg-fuente);
    background: var(--tg-fondo);
    color: var(--tg-texto);
    -webkit-font-smoothing: antialiased;
}

/* ---- Progreso de lectura ------------------------------------------------- */
.tg-legal-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.tg-legal-progreso i {
    display: block; height: 100%; background: var(--tg-grad-marca-llano);
    transform: scaleX(0); transform-origin: left; transition: transform .1s linear;
}

/* ---- Barra superior ------------------------------------------------------ */
.tg-legal-barra {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px clamp(16px, 4vw, 40px);
    background: color-mix(in srgb, var(--tg-superficie) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tg-linea);
}
.tg-legal-logo img { height: 34px; width: auto; display: block; }
.tg-legal-acciones { display: flex; align-items: center; gap: 8px; }
.tg-legal-enlace {
    font-size: 13.5px; font-weight: 600; color: var(--tg-texto-medio); text-decoration: none;
    padding: 9px 14px; border-radius: var(--tg-radio-pastilla);
}
.tg-legal-enlace:hover { color: var(--tg-brand); background: var(--tg-brand-tenue); }
.tg-legal-volver {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
    padding: 9px 16px; border-radius: var(--tg-radio-pastilla);
    background: var(--tg-grad-marca-llano);
    box-shadow: 0 6px 16px rgba(107, 91, 255, .28);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.tg-legal-volver:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(107, 91, 255, .36); }
.tg-legal-volver:focus-visible, .tg-legal-enlace:focus-visible { outline: none; box-shadow: var(--tg-foco); }

/* ---- Encabezado con la mascota ------------------------------------------- */
.tg-legal-hero {
    position: relative; overflow: hidden;
    max-width: 1180px; margin: 28px auto 0; padding: 34px clamp(22px, 4vw, 48px);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--tg-grad-marca);
    border-radius: var(--tg-radio-hero, 28px);
    color: #fff;
    box-shadow: var(--tg-sombra-3);
    margin-left: clamp(16px, 4vw, 40px); margin-right: clamp(16px, 4vw, 40px);
}
@media (min-width: 1260px) { .tg-legal-hero { margin-left: auto; margin-right: auto; } }
.tg-legal-hero::after {
    content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
    pointer-events: none;
}
.tg-legal-hero-texto { position: relative; z-index: 1; min-width: 0; }
.tg-legal-rotulo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--tg-radio-pastilla);
    background: rgba(255, 255, 255, .18);
}
.tg-legal-titulo {
    margin: 14px 0 8px;
    font-family: var(--tg-fuente-display); font-weight: 700;
    font-size: clamp(26px, 4vw, 40px); line-height: 1.1; letter-spacing: -.01em;
}
.tg-legal-sub { margin: 0; font-size: 14.5px; opacity: .92; }
.tg-legal-sub:empty { display: none; }
.tg-legal-mascota {
    position: relative; z-index: 1; flex: none;
    width: 300px; height: auto; margin: -18px -10px -30px 0;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25));
    /* (2-oct-2026) La misma imagen nueva del login (horizontal, 640×355): se dimensiona
       por ANCHO. Quieta a propósito: en un documento legal la mascota da identidad, no
       distrae (Gilberto: «flotando en términos sería too much»; «sin animación ahí»). */
}

/* ---- Cuerpo: índice + hoja ----------------------------------------------- */
.tg-legal-cuerpo {
    max-width: 1180px; margin: 28px auto 64px; padding: 0 clamp(16px, 4vw, 40px);
    box-sizing: border-box;
    display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start;
}
.tg-legal-indice { position: sticky; top: 84px; }
.tg-legal-indice details {
    background: var(--tg-superficie); border: 1px solid var(--tg-linea);
    border-radius: var(--tg-radio-lg); box-shadow: var(--tg-sombra-1);
    padding: 14px 10px 10px;
    max-height: calc(100vh - 110px); overflow: auto;
}
.tg-legal-indice summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 2px 10px 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tg-texto-medio);
}
.tg-legal-indice summary::-webkit-details-marker { display: none; }
.tg-legal-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tg-legal-indice a {
    display: flex; gap: 10px; align-items: baseline;
    padding: 7px 10px; border-radius: var(--tg-radio-sm);
    font-size: 12.5px; line-height: 1.35; color: var(--tg-texto-medio); text-decoration: none;
    letter-spacing: .01em;
}
.tg-legal-indice a::before {
    content: attr(data-num); flex: none; min-width: 20px;
    font-family: var(--tg-fuente-display); font-weight: 700; font-size: 12px; color: var(--tg-brand-suave);
}
.tg-legal-indice a:hover { background: var(--tg-superficie-alt); color: var(--tg-texto); }
.tg-legal-indice a.activo { background: var(--tg-brand-tenue); color: var(--tg-brand); font-weight: 600; }
.tg-legal-indice a.activo::before { color: var(--tg-brand); }

.tg-legal-hoja {
    background: var(--tg-superficie); border: 1px solid var(--tg-linea);
    border-radius: var(--tg-radio-lg); box-shadow: var(--tg-sombra-2);
    padding: clamp(22px, 4vw, 48px);
    min-width: 0;
}

/* ---- El texto (original): tipografía de lectura -------------------------- */
.tg-legal-doc { max-width: 760px; font-size: 15.5px; line-height: 1.72; color: var(--tg-texto); overflow-wrap: anywhere; }
.tg-legal-doc > p:first-child {
    margin-top: 0; padding: 14px 16px; border-radius: var(--tg-radio);
    background: var(--tg-superficie-alt); border: 1px solid var(--tg-linea);
    font-size: 14px; color: var(--tg-texto-medio);
}
.tg-legal-doc > p:first-child b { color: var(--tg-texto); }
.tg-legal-doc h3 {
    margin: 2.2em 0 .7em; padding-top: .2em;
    font-family: var(--tg-fuente-display); font-weight: 700;
    font-size: 20px; line-height: 1.25; letter-spacing: .01em; color: var(--tg-texto);
}
.tg-legal-doc h3::after {
    content: ''; display: block; width: 42px; height: 3px; margin-top: 10px;
    border-radius: 3px; background: var(--tg-grad-marca-llano);
}
.tg-legal-doc h4 { margin: 1.6em 0 .5em; font-size: 16px; font-weight: 700; color: var(--tg-texto); }
.tg-legal-doc p { margin: 0 0 1em; }
.tg-legal-doc ul, .tg-legal-doc ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.tg-legal-doc li { margin: .35em 0; }
.tg-legal-doc li::marker { color: var(--tg-brand); }
.tg-legal-doc ul ul { margin: .3em 0 .4em; }
.tg-legal-doc b, .tg-legal-doc strong { font-weight: 600; color: var(--tg-texto); }
.tg-legal-doc a { color: var(--tg-brand); }

/* ---- Volver arriba ------------------------------------------------------- */
.tg-legal-arriba {
    position: fixed; right: 18px; bottom: 46px; z-index: 40;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--tg-superficie); color: var(--tg-brand);
    border: 1px solid var(--tg-linea); box-shadow: var(--tg-sombra-2);
    cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.tg-legal-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.tg-legal-arriba:hover { background: var(--tg-brand); color: #fff; }

/* ==========================================================================
   TABLETA y TELÉFONO: una columna; el índice es un desplegable arriba del texto.
   ========================================================================== */
@media (max-width: 900px) {
    .tg-legal-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
    .tg-legal-indice { position: static; }
    .tg-legal-indice details { max-height: none; padding: 12px 8px 8px; }
    .tg-legal-indice summary { padding-bottom: 2px; }
    .tg-legal-indice details[open] summary { padding-bottom: 10px; }
    .tg-legal-mascota { width: 240px; }
}
@media (max-width: 620px) {
    .tg-legal-barra { padding: 10px 14px; }
    .tg-legal-logo img { height: 28px; }
    .tg-legal-enlace { display: none; }
    .tg-legal-volver span { display: none; }
    .tg-legal-volver { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .tg-legal-hero { margin-top: 16px; padding: 22px 18px; border-radius: var(--tg-radio-lg); }
    /* Escala con la pantalla: a 375 px deja 184 px al título («CONDICIONES» mide 162). */
    .tg-legal-mascota { width: clamp(96px, 28vw, 130px); margin: -6px -6px -14px 0; }
    .tg-legal-hoja { padding: 20px 16px; border-radius: var(--tg-radio); }
    .tg-legal-doc { font-size: 15px; line-height: 1.68; }
    .tg-legal-doc h3 { font-size: 18.5px; }
    .tg-legal-arriba { right: 12px; bottom: 40px; width: 40px; height: 40px; }
}

/* ---- Impresión: solo el documento ---------------------------------------- */
@media print {
    .tg-legal-barra, .tg-legal-progreso, .tg-legal-indice, .tg-legal-arriba, .tg-legal-mascota { display: none !important; }
    body { background: #fff; color: #000; }
    .tg-legal-hero { background: none; color: #000; box-shadow: none; padding: 0; margin: 0 0 16px; }
    .tg-legal-rotulo { background: none; padding: 0; }
    .tg-legal-cuerpo { display: block; margin: 0; padding: 0; }
    .tg-legal-hoja { border: 0; box-shadow: none; padding: 0; }
}

/* (2-oct-2026) Botón de tema claro/oscuro: leer de noche en el teléfono no cansa (Gilberto). */
.tg-boton-tema-pub {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tg-linea); border-radius: 50%;
    background: var(--tg-superficie); color: var(--tg-brand);
    box-shadow: var(--tg-sombra-1); cursor: pointer; font-size: 15px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.tg-boton-tema-pub:hover { background: var(--tg-brand-tenue); transform: rotate(-12deg); }
.tg-boton-tema-pub:focus-visible { outline: none; box-shadow: var(--tg-foco); }