/**
 * Página pública de términos y condiciones
 * ============================================================================
 *
 * Solo la envoltura: el contenido lo estiliza `components/terminos-modal.css`, que
 * es la misma hoja que usa el modal. Aquí está la caja, la cabecera, las acciones
 * y el comportamiento al imprimir.
 *
 * La medida de todo es el ancho de lectura. Un texto legal a lo ancho de un
 * monitor no se lee: la vista pierde el renglón al volver. De ahí el ancho máximo
 * de unos 760 px, que ronda los 75 caracteres por línea.
 */

.terminos-page {
    background: #f6f8fb;
    min-height: 100vh;
}

/* La cabecera de la plataforma es `position: fixed` y mide 4rem, así que no ocupa
   sitio en el flujo y hay que reservárselo a mano. Es lo que hacen el resto de las
   páginas (`feed.css`, `eventos.css`, `explorar.css`), y aquí faltaba: el título del
   documento nacía por debajo de ella.

   Va en una variable porque el mismo número lo necesita el salto del índice, unas
   líneas más abajo, y tenerlo escrito dos veces es tenerlo mal una de las dos. */
.terminos-page {
    --tycp-cabecera: 4rem;
}

.tycp {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--tycp-cabecera) + 28px) 20px 80px;
}

/* Salto desde el índice.

   El navegador deja el destino pegado al borde de arriba de la ventana, y ahí está la
   cabecera: el título del apartado al que acabas de saltar quedaba justo detrás. Con
   `scroll-margin-top` el destino se detiene por debajo, con un dedo de aire.

   Se resuelve en CSS y no en JavaScript a propósito: así vale para las dos formas de
   llegar, el clic en el índice —que usa `scrollIntoView`— y la dirección con ancla
   pegada en la barra, que la resuelve el navegador y no pasa por nuestro código.

   Va acotado a `.tycp` porque `.tyc-seccion` es la misma clase que usan el modal y la
   vista previa del panel, y en ninguno de los dos hay cabecera que esquivar. */
.tycp .tyc-seccion {
    scroll-margin-top: calc(var(--tycp-cabecera) + 16px);
}

/* ==========================================================================
   CARGANDO Y VACÍO
   ========================================================================== */

.tycp-cargando,
.tycp-vacio {
    padding: 90px 20px;
    text-align: center;
}

.tycp-cargando[hidden], .tycp-vacio[hidden], .tycp-doc[hidden] { display: none; }

.tycp-cargando i {
    font-size: 30px;
    color: #b9c2d0;
    animation: tycpGira 0.9s linear infinite;
    display: inline-block;
}

@keyframes tycpGira { to { transform: rotate(360deg); } }

.tycp-cargando p {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: #8a95a5;
}

.tycp-vacio i {
    font-size: 40px;
    color: #c3cbd8;
}

.tycp-vacio h1 {
    margin: 16px 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #17202e;
}

.tycp-vacio p {
    margin: 0 auto 22px;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.65;
    color: #6b7787;
}

.tycp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;

    border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
}

/* ==========================================================================
   EL DOCUMENTO
   ========================================================================== */

.tycp-doc {
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(12, 20, 32, 0.06),
                0 0 0 1px rgba(12, 20, 32, 0.04);

    /* Aquí había `overflow: hidden` para recortar las esquinas. Se quitó porque un
       ancestro con overflow distinto de `visible` se convierte en contenedor de
       desplazamiento y eso anula el `position: sticky` de los títulos de apartado,
       sin dar ningún aviso: simplemente dejan de fijarse.

       El recorte lo hacen ahora las dos piezas que tocan los bordes y tienen fondo
       propio, la cabecera y el pie, cada una con su par de esquinas. */
}

/* --- Cabecera ------------------------------------------------------------- */

.tycp-hero {
    padding: 30px 36px 24px;
    border-bottom: 1px solid #eef1f6;
    background: linear-gradient(180deg, #fbfcfe, #fff);

    /* Las esquinas de arriba de la tarjeta, por el mismo motivo que en el pie */
    border-radius: 20px 20px 0 0;
}

.tycp-migas {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #9aa5b4;
}

.tycp-migas a {
    color: #7f8b9c;
    text-decoration: none;
}

.tycp-migas a:hover { color: #2563eb; }

.tycp-migas i { font-size: 14px; }

.tycp-hero h1 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #141c28;
}

.tycp-sub {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6b7787;
}

.tycp-sub[hidden] { display: none; }

.tycp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.tycp-sello {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8a95a5;
}

.tycp-sello[hidden] { display: none; }

/* --- Acciones: solo iconos ------------------------------------------------ */

.tycp-acciones {
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.tycp-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;

    border: 1px solid #e6ebf3;
    border-radius: 10px;
    background: #fff;
    color: #7f8b9c;
    cursor: pointer;
    font-size: 17px;

    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tycp-ico:hover {
    background: #f7f9fc;
    border-color: #cfd8e6;
    color: #2b3646;
}

.tycp-ico:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.tycp-ico.copiado {
    border-color: #a9d9bd;
    background: #eefaf1;
    color: #2f7d4f;
}

/* --- Contenido ------------------------------------------------------------ */

/* El relleno lateral va en una variable porque el título fijado tiene que salirse
   justo esa medida para que su fondo llegue de un borde de la tarjeta al otro. */
.tyc-contenido {
    --tycp-aire: 36px;
    padding: 28px var(--tycp-aire) 34px;
}

/* En la página los apartados llevan separación de aire, no de línea: son muchos y
   una regla entre cada dos convertiría el documento en una tabla.

   Ese aire es relleno interior y no margen, y la diferencia importa por el título
   fijado. Un elemento `sticky` solo se mantiene dentro de la caja de su padre, así
   que con margen entre apartados quedaba una franja de 34 px en la que el título
   saliente ya se había ido y el entrante todavía no había llegado: el documento se
   quedaba un instante sin rótulo. Con relleno las cajas se tocan y el relevo es
   inmediato. */
.tyc-contenido .tyc-seccion {
    margin-bottom: 0;
    padding-bottom: 34px;
}

/* El último no necesita el aire: ya lo pone el relleno de abajo del contenido */
.tyc-contenido .tyc-seccion:last-child { padding-bottom: 0; }

/* ==========================================================================
   TÍTULO DE APARTADO FIJADO

   Al bajar, el título del apartado que se está leyendo se queda pegado al borde
   inferior de la cabecera de la plataforma, y solo lo desplaza el título del
   apartado siguiente. En un documento legal largo es la diferencia entre saber que
   sigues en «Uso de las galerías» y no saber dónde estás.

   Es `position: sticky` a secas, sin JavaScript que calcule posiciones. El relevo
   entre un título y el siguiente lo hace el navegador: cada uno solo puede moverse
   dentro de su propia sección, así que cuando la sección termina, su título sale
   empujado por el de la sección que entra. Escrito a mano eso son listeners de
   scroll, medidas y saltos; aquí son cuatro líneas y va a la velocidad de la pantalla.

   Acotado a `.tyc-contenido` dentro de la página: la misma clase se usa en el modal
   y en la vista previa del panel, y en ninguno de los dos hay cabecera que esquivar.
   ========================================================================== */

.tycp .tyc-contenido .tyc-seccion > h2 {
    position: sticky;
    top: var(--tycp-cabecera);
    z-index: 5;

    /* Los negativos anulan el relleno del contenido para que el fondo cruce la
       tarjeta de lado a lado; el relleno propio devuelve el texto a su sitio. */
    margin: 0 calc(var(--tycp-aire) * -1) 6px;
    padding: 10px var(--tycp-aire);

    /* Opaco: por debajo pasa el texto del apartado */
    background: #fff;

    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* La clase la pone `js/pages/terminos.js` cuando el título llega al tope. Sirve
   para separarlo del texto que le pasa por debajo: sin la sombra, el título y el
   párrafo se tocan y por un momento parecen el mismo bloque. */
.tycp .tyc-contenido .tyc-seccion > h2.fijado {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px -12px rgba(12, 20, 32, 0.45);
}

/* Los apartados sin número (Documentos, Enlaces, Contacto) se comportan igual: son
   secciones del documento y merecen el mismo rótulo. */

/* --- Pie ------------------------------------------------------------------ */

.tycp-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 36px;
    border-top: 1px solid #eef1f6;
    background: #fbfcfe;

    /* Las esquinas de abajo de la tarjeta: las redondea esta pieza porque la tarjeta
       ya no recorta. */
    border-radius: 0 0 20px 20px;
}

.tycp-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
}

.tycp-volver:hover { color: #2563eb; }

.tycp-marca {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #a8b2c0;
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 720px) {
    .tycp { padding: 14px 12px 70px; }

    .tycp-doc { border-radius: 16px; }

    .tycp-hero { padding: 22px 20px 18px; border-radius: 16px 16px 0 0; }
    .tycp-hero h1 { font-size: 22px; }
    .tycp-sub { font-size: 14px; }

    /* Al cambiar el aire cambia solo el desbordado del título fijado */
    .tyc-contenido { --tycp-aire: 20px; padding: 20px var(--tycp-aire) 26px; }
    .tyc-contenido .tyc-seccion { padding-bottom: 28px; }

    /* Menos alto en la barra del título: en una pantalla de móvil cada píxel que
       ocupa el rótulo es un píxel que no lee del documento. */
    .tycp .tyc-contenido .tyc-seccion > h2 { padding-top: 8px; padding-bottom: 8px; }

    .tycp-pie { padding: 14px 20px; border-radius: 0 0 16px 16px; }

    /* El índice a una columna: a este ancho, dos son ilegibles */
    .tyc-contenido .tyc-indice ol { columns: 1; }
}

/* ==========================================================================
   IMPRESIÓN
   --------------------------------------------------------------------------
   Alguien va a querer guardarlo en PDF o llevarlo en papel, y para eso hay que
   quitar todo lo que no es el documento: cabecera del sitio, barra inferior,
   botones e índice de saltos, que en papel no lleva a ninguna parte.
   ========================================================================== */

@media print {
    .terminos-page { background: #fff; }

    app-header,
    bottom-nav,
    .tycp-acciones,
    .tycp-migas,
    .tycp-pie,
    .tyc-indice {
        display: none !important;
    }

    .tycp { max-width: none; padding: 0; }

    .tycp-doc {
        border-radius: 0;
        box-shadow: none;
    }

    .tycp-hero {
        padding: 0 0 16px;
        background: none;
        border-radius: 0;
    }

    .tyc-contenido { --tycp-aire: 0px; padding: 16px 0 0; }

    /* En papel no hay desplazamiento, así que el título fijado no tiene sentido: se
       devuelve a un título normal, sin fondo, sin sombra y sin el desbordado. */
    .tycp .tyc-contenido .tyc-seccion > h2 {
        position: static;
        margin: 0 0 12px;
        padding: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    /* Un apartado no debe partirse entre dos páginas si se puede evitar */
    .tyc-seccion { break-inside: avoid; }

    .tyc-seccion h2 { break-after: avoid; }

    /* Los enlaces en papel no se pueden pulsar, así que se escribe su destino */
    .tyc-seccion a::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        color: #666;
        word-break: break-all;
    }
}

/* ==========================================================================
   MODO OSCURO
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .terminos-page { background: #0f1114; }

    .tycp-doc {
        background: #16191d;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .tycp-hero {
        background: linear-gradient(180deg, #191d22, #16191d);
        border-color: #262a31;
    }

    .tycp-hero h1 { color: #f0f2f5; }

    /* El fondo del título fijado tiene que ser el de la tarjeta en oscuro, o al
       pegarse arriba se vería un rectángulo claro sobre el texto */
    .tycp .tyc-contenido .tyc-seccion > h2 { background: #16191d; }

    .tycp .tyc-contenido .tyc-seccion > h2.fijado {
        background: rgba(22, 25, 29, 0.92);
        box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.7);
    }
    .tycp-sub { color: #97a1b0; }
    .tycp-migas a { color: #97a1b0; }

    .tycp-ico {
        background: #1f242b;
        border-color: #333a44;
        color: #97a1b0;
    }
    .tycp-ico:hover { background: #262c34; color: #e6e9ee; }

    .tycp-pie { background: #131619; border-color: #262a31; }
    .tycp-vacio h1 { color: #f0f2f5; }
    .tycp-vacio p { color: #97a1b0; }
}

/* ==========================================================================
   VOLVER ARRIBA

   Va por encima de la barra inferior, que también es fija y mide 4rem. Sin ese
   descuento el botón caería justo detrás de ella.

   Se oculta con `opacity` y `visibility` en vez de con `display: none` para que la
   aparición se pueda animar: `display` no admite transición, y un botón que aparece
   de golpe en una esquina se lee como un fallo de pintado.
   ========================================================================== */

.tycp-arriba {
    position: fixed;

    /* FUERA de la tarjeta, en el margen de al lado, no encima.

       La cuenta, de dentro hacia fuera: la columna mide 820 px y está centrada, y le
       quita 20 px de relleno a cada lado, así que el borde derecho de la tarjeta cae
       a `50% - 390px` del borde derecho de la ventana. Restando el ancho del botón y
       un hueco de respiro, queda por completo al lado y sin tocarla.

       Si se cambia el ancho de la columna o el relleno de `.tycp`, hay que rehacer
       esta resta: son las mismas medidas escritas en dos sitios. No se puede sacar de
       una variable porque el `max()` necesita el valor ya resuelto.

       El `max()` es la salida para pantallas medianas y estrechas. Por debajo de unos
       910 px de ancho no hay margen donde ponerlo —la tarjeta ya ocupa lo que hay— y
       la cuenta daría negativo, lo que echaría el botón fuera de la pantalla. Ahí
       vuelve al margen de la ventana, que es el único sitio posible. */
    right: max(16px, calc(50% - 390px - 44px - 20px));
    bottom: calc(4rem + 16px);
    z-index: 900;

    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;

    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    color: #46536a;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    cursor: pointer;

    font-size: 19px;
    line-height: 1;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.tycp-arriba.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tycp-arriba:hover {
    background: #fff;
    color: #1d2739;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.tycp-arriba:active { transform: translateY(1px); }

.tycp-arriba:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tycp-arriba { transition: opacity 0.18s ease; transform: none; }
    .tycp-arriba.visible { transform: none; }
}

/* Al imprimir no existe */
@media print {
    .tycp-arriba { display: none !important; }
}