/** * Modal y contenido de términos y condiciones * ============================================================================ * * Dos cosas en un archivo, y a propósito: * * · `.tyc-modal` y sus piezas → el modal, solo aquí. * · `.tyc-seccion`, `.tyc-indice`, `.tyc-contacto`… → el CONTENIDO, que se * comparte con la página pública y con la vista previa del panel. * * Que el contenido esté aquí es lo que garantiza que el mismo texto se lea igual * en el modal, en la página y en el editor. Antes había dos hojas distintas * definiendo `.terms-section` con valores diferentes y el texto cambiaba de * aspecto según por dónde se entrara. * * El prefijo `tyc-` es nuevo a propósito: `terms-` estaba usado por los dos * modales viejos con semánticas incompatibles entre sí, y reutilizarlo habría * heredado el conflicto. */ /* ========================================================================== EL MODAL ========================================================================== */ .tyc-modal { position: fixed; inset: 0; /* El MISMO valor que `#authModal`, no uno menos. El modal de acceso lleva `z-index: 2147483647 !important` puesto en línea, que es el máximo de un entero de 32 bits: no se puede superar con un número mayor porque el navegador lo recorta. Con este modal en 2147483646 quedaba DEBAJO, y lo que se veía al pulsar «términos y condiciones» desde el registro era el texto legal asomando por los lados del formulario. Empatando, gana el que aparece después en el documento, y este se añade al final del `` cuando se abre. Es el mismo recurso que usan el selector de barrios y su mapa. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 20px; /* Cerrado no existe: ni se ve, ni recibe clics, ni lo leen los lectores de pantalla. Con `visibility` en vez de `display` se puede animar la entrada. */ opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0.26s ease; } .tyc-modal.abierto { opacity: 1; visibility: visible; } .tyc-velo { position: absolute; inset: 0; background: rgba(12, 18, 28, 0.62); backdrop-filter: blur(5px); cursor: pointer; } .tyc-caja { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 760px; /* Alto según contenido con tope: un texto corto no debe estirar la caja hasta el borde de la pantalla. */ max-height: min(86vh, 880px); background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(12, 18, 28, 0.32), 0 2px 6px rgba(12, 18, 28, 0.08); overflow: hidden; transform: translateY(14px) scale(0.985); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); } .tyc-modal.abierto .tyc-caja { transform: none; } /* --- Cabecera fija -------------------------------------------------------- */ .tyc-cab { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 16px; border-bottom: 1px solid #eef1f6; flex: none; } .tyc-cab-txt { flex: 1; min-width: 0; } .tyc-titulo { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #172029; line-height: 1.25; } .tyc-subtitulo { margin: 5px 0 0; font-size: 13px; color: #6b7787; line-height: 1.4; } .tyc-subtitulo[hidden], .tyc-sello[hidden] { display: none; } .tyc-sello { margin: 7px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #9aa5b4; } .tyc-cerrar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 10px; background: #f3f5f9; color: #6b7787; cursor: pointer; font-size: 19px; transition: background 0.18s ease, color 0.18s ease; } .tyc-cerrar:hover { background: #e7ebf2; color: #172029; } .tyc-cerrar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.32); } /* --- Cuerpo desplazable --------------------------------------------------- */ .tyc-cuerpo { flex: 1; overflow-y: auto; padding: 20px 24px 24px; /* Barra discreta: en un texto largo la del sistema es una columna de ruido */ scrollbar-width: thin; scrollbar-color: #d3dae4 transparent; } .tyc-cuerpo::-webkit-scrollbar { width: 8px; } .tyc-cuerpo::-webkit-scrollbar-track { background: transparent; } .tyc-cuerpo::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 99px; border: 2px solid #fff; } /* --- Pie ------------------------------------------------------------------ */ .tyc-pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #eef1f6; background: #fbfcfe; } .tyc-ver-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #3b82f6; text-decoration: none; } .tyc-ver-pagina:hover { color: #2563eb; } .tyc-ver-pagina[hidden] { display: none; } .tyc-ok { margin-left: auto; padding: 10px 22px; border: none; border-radius: 11px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24); transition: transform 0.16s ease, box-shadow 0.16s ease; } .tyc-ok:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3); } .tyc-ok:active { transform: none; } /* Aquí había una clase `.tyc-cargando` que atenuaba el enlace mientras se consultaba el texto. Se retiró: el enlace de los términos suele ir dentro de una frase, y verlo apagarse y encenderse por una consulta que dura décimas de segundo es más ruido que información. La guarda contra clics repetidos está en el JavaScript y no se ve. */ /* El scroll del fondo se bloquea con una clase y no con un estilo en línea, para no pisar lo que otros componentes hayan puesto ahí */ body.tyc-sin-scroll { overflow: hidden; } /* ========================================================================== EL CONTENIDO -------------------------------------------------------------------------- Compartido por el modal, la página pública y la vista previa del panel. La idea que gobierna estas reglas: un texto legal es largo y nadie lo lee entero, así que lo que importa es que se pueda RECORRER. De ahí la numeración grande de los apartados, el interlineado alto y los párrafos cortos con aire entre ellos. ========================================================================== */ .tyc-resumen { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #f1f4f8; } .tyc-resumen p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: #3d4757; } .tyc-resumen p:last-child { margin-bottom: 0; } /* --- Índice --------------------------------------------------------------- */ .tyc-indice { margin: 0 0 26px; padding: 16px 18px; border-radius: 14px; background: #f7f9fc; border: 1px solid #eef1f6; } .tyc-indice-tit { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a95a5; } .tyc-indice ol { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 26px; } .tyc-indice li { margin-bottom: 6px; font-size: 13px; line-height: 1.45; break-inside: avoid; } .tyc-indice a { color: #3d4757; text-decoration: none; } .tyc-indice a:hover { color: #2563eb; text-decoration: underline; } /* --- Secciones ------------------------------------------------------------ */ .tyc-seccion { margin-bottom: 26px; /* Para que al pulsar en el índice el título no quede pegado al borde */ scroll-margin-top: 16px; } .tyc-seccion:last-child { margin-bottom: 0; } .tyc-seccion h2, .tyc-seccion h3, .tyc-seccion h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.01em; color: #172029; line-height: 1.3; } .tyc-seccion h2 { font-size: 20px; } .tyc-seccion h3 { font-size: 17px; } .tyc-seccion h4 { font-size: 15.5px; } /* El número del apartado, en su propia columna. Ayuda a recorrer el documento y a citarlo («el punto 7 dice…»), que es lo que se hace con un texto legal. */ .tyc-num { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; background: rgba(59, 130, 246, 0.1); color: #2563eb; font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0; } .tyc-seccion p { margin: 0 0 11px; font-size: 14px; line-height: 1.7; color: #4a5563; } .tyc-seccion p:last-child { margin-bottom: 0; } .tyc-seccion strong { color: #2b3646; font-weight: 650; } .tyc-seccion a { color: #2563eb; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .tyc-seccion ul { margin: 0 0 12px; padding: 0; list-style: none; } .tyc-seccion ul li { position: relative; margin-bottom: 7px; padding-left: 18px; font-size: 14px; line-height: 1.65; color: #4a5563; } /* Punto propio en vez del de la lista: se puede colocar donde toca respecto a la primera línea, que con `list-style` no se controla. Se excluyen las listas de contacto y de enlaces: esas ya tienen su propio icono al principio de cada línea, y el punto quedaba delante como una viñeta suelta. */ .tyc-seccion ul:not(.tyc-contacto-lista):not(.tyc-enlaces) li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #b9c6d8; } /* Y esas dos listas no necesitan la sangría que deja hueco para el punto */ .tyc-seccion .tyc-contacto-lista li, .tyc-seccion .tyc-enlaces li { padding-left: 0; } /* --- Documentos adjuntos -------------------------------------------------- */ .tyc-adjuntos-lista { display: flex; flex-direction: column; gap: 8px; } .tyc-adjunto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e6ebf3; border-radius: 12px; background: #fff; text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease; } .tyc-adjunto:hover { border-color: #c3d7fa; background: #f8fbff; } .tyc-adjunto > i:first-child { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(59, 130, 246, 0.1); color: #2563eb; font-size: 17px; } .tyc-adjunto-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tyc-adjunto-nom { font-size: 13.5px; font-weight: 600; color: #202a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tyc-adjunto-nota { font-size: 11.5px; color: #8a95a5; } .tyc-adjunto-ir { flex: none; font-size: 15px; color: #b9c2d0; } /* --- Enlaces y contacto --------------------------------------------------- */ .tyc-enlaces { margin: 0; padding: 0; list-style: none; } .tyc-enlaces li { margin-bottom: 7px; font-size: 14px; } .tyc-contacto-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .tyc-contacto-lista li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #4a5563; } .tyc-contacto-lista li i { flex: none; font-size: 16px; color: #7f8b9c; } .tyc-eti { font-size: 12px; font-weight: 600; color: #8a95a5; } .tyc-eti::after { content: ':'; } /* --- Cierre --------------------------------------------------------------- */ .tyc-cierre { margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: #f7f9fc; border: 1px solid #eef1f6; } .tyc-cierre p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.6; color: #3d4757; } .tyc-cierre p:last-child { margin-bottom: 0; } /* ========================================================================== MÓVIL -------------------------------------------------------------------------- El modal pasa a ocupar casi toda la pantalla y se ancla abajo: en un teléfono, una caja centrada con márgenes desperdicia el sitio que hace falta para leer. ========================================================================== */ @media (max-width: 640px) { .tyc-modal { padding: 0; align-items: flex-end; } .tyc-caja { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(100%); } .tyc-modal.abierto .tyc-caja { transform: none; } .tyc-cab { padding: 18px 18px 14px; } .tyc-titulo { font-size: 17px; } .tyc-cuerpo { padding: 18px 18px 22px; } .tyc-pie { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); } /* Una sola columna: a este ancho, dos son ilegibles */ .tyc-indice ol { columns: 1; } .tyc-seccion h4 { font-size: 15px; } .tyc-seccion p, .tyc-seccion ul li { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { .tyc-modal, .tyc-caja { transition-duration: 0.01s; } .tyc-ok:hover { transform: none; } } /* ========================================================================== MODO OSCURO ========================================================================== */ @media (prefers-color-scheme: dark) { .tyc-caja { background: #16191d; } .tyc-cab, .tyc-pie { border-color: #262a31; } .tyc-pie { background: #131619; } .tyc-titulo { color: #f0f2f5; } .tyc-subtitulo { color: #97a1b0; } .tyc-sello { color: #6f7987; } .tyc-cerrar { background: #1f242b; color: #97a1b0; } .tyc-cerrar:hover { background: #262c34; color: #f0f2f5; } .tyc-resumen { border-color: #22262c; } .tyc-resumen p { color: #c3cad4; } .tyc-indice, .tyc-cierre { background: #1a1e23; border-color: #262a31; } .tyc-indice a { color: #c3cad4; } .tyc-cierre p { color: #c3cad4; } .tyc-seccion h2, .tyc-seccion h3, .tyc-seccion h4 { color: #f0f2f5; } .tyc-seccion p, .tyc-seccion ul li { color: #aab3c0; } .tyc-seccion strong { color: #dfe4ea; } .tyc-seccion a { color: #7aa7ff; } .tyc-num { background: rgba(122, 167, 255, 0.16); color: #7aa7ff; } .tyc-adjunto { background: #1a1e23; border-color: #262a31; } .tyc-adjunto:hover { background: #1f252d; border-color: #33445e; } .tyc-adjunto-nom { color: #e6e9ee; } .tyc-adjunto > i:first-child { background: rgba(122, 167, 255, 0.14); color: #7aa7ff; } .tyc-contacto-lista li { color: #aab3c0; } .tyc-cuerpo::-webkit-scrollbar-thumb { background: #333a44; border-color: #16191d; } }