:root { --neon-cyan: #00f2fe; --neon-magenta: #fe019a; } html, body { margin: 0; padding: 0; background: #09090B; color: #fff; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; /* CORRECCIÓN v109 (la barra se desplazaba con `sticky`): aquí había `overflow-y: auto`, que convierte a `body` en un CONTENEDOR DE SCROLL. Con eso, el `position: sticky` de la barra se resuelve contra un contenedor que no scrollea (el scroll real ocurre en el viewport), así que la barra se comporta como `static` y el modo «fija» no se distinguía del «desplazable». `overflow-x: clip` NO crea contenedor de scroll (a diferencia de hidden/auto) y mantiene el recorte horizontal seguro; el eje vertical vuelve a `visible`, es decir, el scroll vive en el documento. Con esto `position: sticky` vuelve a funcionar de verdad. */ /* v118/v119 · SIN SCROLL HORIZONTAL (causa del desplazamiento lateral en móvil). `clip` es lo ideal (no crea contenedor de scroll), pero Safari < 16 y algunos WebView no lo entienden y caen a `visible`: entonces cualquier elemento más ancho que la pantalla genera scroll horizontal, el navegador se queda «paneado» y se ve un MARGEN a la izquierda con el contenido cortado a la derecha (incluida la barra fija, que acompaña al viewport). Se declara primero `hidden` —compatible con todo— y después `clip`: los navegadores modernos usan `clip` y los antiguos conservan `hidden`, que también impide el scroll lateral. */ overflow-y: auto; overflow-x: hidden; overflow-x: clip; /* Evita el «rebote» lateral y el paneo accidental al arrastrar sobre los carriles. */ overscroll-behavior-x: none; } /* === RETÍCULA HORIZONTAL ÚNICA (v123) ======================================================== `--sangria-tarjetas` es la distancia real desde el borde de la pantalla hasta el borde de las TARJETAS del catálogo. Sale de sumar la cadena de rellenos de la portada: · `#principal-app` .... `px-1` ......... 4 px · `main > div` ........ `px-3` ......... 12 px · marco del catálogo .. `p-1.5` (móvil) / `sm:p-3` (≥640px) ..... 6 px / 12 px ⇒ 4 + 12 + 6 = 22 px en móvil y 4 + 12 + 12 = 28 px desde 640 px. La usa la cabecera (y por tanto el carril de navegación) para que el inicio de la primera píldora y el final de la última coincidan EXACTAMENTE con los bordes de las tarjetas. Si algún día cambia el relleno de la portada, basta con actualizar este número (una sola fuente de verdad). */ :root { --sangria-tarjetas: 22px; } @media (min-width: 640px) { :root { --sangria-tarjetas: 28px; } } /* === AUTOSUFICIENCIA DE `.hidden` (v124) ==================================================== `.hidden` es una UTILIDAD DE TAILWIND (CDN). Si el CDN no cargara (sin red, red lenta, bloqueo de terceros), `app.js` no podría ocultar secciones como «En Línea Ahora» o «Destacadas de la semana» y aparecerían **vacías con su título**. Se declara aquí para no depender de nada externo. ⚠ SIN `!important` A PROPÓSITO: Tailwind combina `.hidden` con utilidades de breakpoint (`hidden sm:inline`, `hidden md:block`…). Un `!important` aquí ganaría también en escritorio y dejaría elementos ocultos para siempre; sin él, la utilidad de breakpoint (que el CDN inyecta después) recupera el `display` correcto, igual que hoy. */ .hidden { display: none; } ::-webkit-scrollbar { width: 6px; background-color: #09090B; } ::-webkit-scrollbar-thumb { background-color: #09090B; border-radius: 10px; } html, body { scrollbar-color: #09090B #09090B; } /* ============================================================================ BARRA SUPERIOR FIJA (v94) — cabecera de la aplicación La barra del header se queda pegada al borde superior mientras se hace scroll. SE USA `position: sticky` (y NO `fixed`) A PROPÓSITO · `sticky` reserva su espacio en el flujo: el contenido NUNCA queda oculto detrás de la barra y no hay que compensar con números mágicos. La cabecera mide distinto en móvil (la navegación baja a una SEGUNDA fila por `flex-wrap`) que en escritorio (una sola fila), así que un `padding-top` fijo quedaría corto o largo según la pantalla; con `fixed` ese hueco habría que acertarlo a mano en cada franja. · El resultado visible es el mismo que con `fixed`: arriba de todo, siempre. · Por eso `left: 0` / `width: 100%` tampoco son necesarios (la cabecera es un bloque a todo lo ancho) y se evita introducir restricciones de sticky horizontal en un layout sin scroll lateral (`overflow-x: clip`). NIVEL DE APILADO: `z-index: 50`. Mapa real de capas de index.html (nada queda tapado): barra 50 < #modal-reseñas 70 < #modal-perfil 80 < #login-modal 90 < #lightbox-perfil 95 < #panic-trigger 100 < office-mode 200 < avisos 300. Es decir: la barra tapa el contenido de la página y TODOS los overlays tapan la barra. FONDO: color corporativo oscuro (#09090B → #18181b) casi opaco + difuminado con saturación, para que las fotos que pasan por debajo no se lean a través del texto. Si el navegador no soporta `backdrop-filter`, el respaldo es un fondo SÓLIDO. ============================================================================ */ #app-shell > header { position: sticky; top: 0; z-index: 50; width: 100%; background: linear-gradient(180deg, rgba(9, 9, 11, 0.97) 0%, rgba(24, 24, 27, 0.95) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.95); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* Respaldo sin difuminado: opaco del todo (mismo color corporativo). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #app-shell > header { background: #09090B; } } /* Desplazamiento de anclas con la barra pegada arriba: al pulsar un enlace del menú (p. ej. «Gran Concepción» → #filtros-comuna) el destino no aterriza bajo la barra. Móvil/tablet: la barra ocupa dos filas. Escritorio (≥1280px): una sola fila. */ html { scroll-padding-top: 6.5rem; zoom: 0.85; } @media (min-width: 1280px) { html { scroll-padding-top: 4.5rem; } } #filtros-comuna { scroll-margin-top: 0.5rem; } .neon-border { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 18px rgba(0, 242, 254, 0.15), 0 0 32px rgba(254, 1, 154, 0.08); } .neon-text { text-shadow: 0 0 12px rgba(0, 242, 254, 0.35), 0 0 20px rgba(254, 1, 154, 0.2); } .neon-glow { box-shadow: 0 0 12px rgba(0, 242, 254, 0.22), 0 0 24px rgba(254, 1, 154, 0.16); } .glass-card { cursor: pointer; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 200ms ease, box-shadow 200ms ease; } .glass-card:hover, .glass-card:active { transform: scale(1.01); box-shadow: 0 0 18px rgba(0, 242, 254, 0.2); } .comuna-row { position: relative; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.625rem 0.75rem; color: #a1a1aa; font-size: 0.875rem; font-weight: 500; transition: all 200ms ease; } .comuna-row:hover, .comuna-row:active { background: rgba(255, 255, 255, 0.03); color: #fff; text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); } .comuna-row:has(input:checked)::before { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #00f2fe; box-shadow: 0 0 8px rgba(0, 242, 254, 0.6); content: ''; } .comuna-row span { min-width: 0; flex: 1; } .comuna-count { margin-left: auto; color: #52525b; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; line-height: 1rem; } .comuna-row:has(input:checked) .comuna-count { color: #00f2fe; text-shadow: 0 0 6px rgba(0, 242, 254, 0.5); } /* Cabecera de grupo del selector de BARRIO / SECTOR (v98): separa visualmente los barrios de cada comuna cuando el selector muestra varias. Mismo tono apagado que el resto del panel. */ .filtros-sector-grupo { margin: 0.35rem 0 0.1rem; padding: 0 0.75rem; color: #52525b; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* Insignia DISCRETA de la franja horaria (v99 · Fase 2) en la tarjeta del catálogo: pastilla mínima alineada con el nombre, que no compite con el estado ni con el precio. Sólo se pinta cuando el perfil declaró su franja de atención preferente. */ /* === BARRA SUPERIOR: FIJA vs DESPLAZABLE (v113) ============================================== El documento scrollea de forma NATURAL en la ventana (v113 revirtió el viewport fijo de v112) y lo ÚNICO que cambia entre modos es la POSICIÓN de la barra, elegida por el administrador en el Panel Maestro (`configuracion_sistema.barra_superior` → `html[data-barra]`): · `fija` → `position: sticky; top: 0; z-index: 50`: se queda arriba mientras el resto scrollea. · `movil` → `position: static`: sube y desaparece junto con el contenido. Sin atributo manda la regla base de `#app-shell > header` (sticky), es decir, el modo por defecto. `!important` a propósito: la clase Tailwind `sticky` se inyecta DESPUÉS de este archivo. -------------------------------------------------------------------------------------------- */ /* ARQUITECTURA DE SCROLL (v113): se RETIRÓ el viewport fijo de v112 (`height: 100vh` + flex + scroller interno en `main`) porque el usuario pidió el scroll tradicional de la ventana. El documento scrollea con normalidad; `#app-shell` vuelve a su flujo natural. */ /* MODO FIJA (v114): `position: fixed` — es MÁS FUERTE que `sticky`: la barra sale del flujo y el contenido se desplaza POR DEBAJO de ella, sin que ningún ancestro con `overflow` pueda anularlo. Como `fixed` quita la barra del flujo, el hueco que deja se repone con un relleno calculado en `app.js` (`--altura-barra`), que se recalcula al redimensionar y cuando la barra cambia de alto (en móvil ocupa dos filas). */ html[data-barra='fija'] #app-shell > header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 50 !important; } html[data-barra='fija'] #app-shell { padding-top: var(--altura-barra, 0px); } html[data-barra='movil'] #app-shell { padding-top: 0; } /* === MARCA DE AGUA «PRIVÉ CONCE» (v116) ====================================================== Marca de agua DINÁMICA superpuesta al medio (imagen o vídeo) justo antes de renderizarlo en el catálogo, en la galería del perfil y en el visor ampliado. Se dibuja como CAPA de CSS (pseudo- elemento `::after`) con el logotipo de la marca —cuadro rojo con la «P» + texto PRIVÉ CONCE— en SVG embebido, semitransparente (alfa 0,55) y en la esquina INFERIOR DERECHA, con tamaño reducido para no tapar el rostro. CLAVES DE UX Y SEGURIDAD: · `pointer-events: none` → NUNCA intercepta clics: las flechas del visor, la ✕ de cerrar, el botón de abrir perfil y los controles del carril siguen funcionando igual. · `z-index: 3` → queda por encima de la foto pero por debajo de los controles del visor (que viven fuera de la caja del medio), así que no tapa el título ni el contador. · Se aplica al CONTENEDOR: en el marcado sólo hay que añadir la clase `marca-agua`. LÍMITE HONESTO: es una marca visual disuasoria (dificulta el uso de la foto sin marca al copiar la pantalla), pero no cifra ni sirve la imagen «limpia» por otra ruta; el archivo original sigue siendo accesible a quien conozca su URL. ============================================================================================ */ .marca-agua { position: relative; } .marca-agua::after { content: ''; position: absolute; right: 4%; bottom: 4%; width: 36%; max-width: 130px; aspect-ratio: 220 / 48; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 48'%3E%3Crect x='0' y='8' width='32' height='32' rx='8' fill='%23E11D48'/%3E%3Ctext x='16' y='31' font-family='Arial,Helvetica,sans-serif' font-size='20' font-weight='bold' fill='%23FFFFFF' text-anchor='middle'%3EP%3C/text%3E%3Ctext x='42' y='31' font-family='Arial,Helvetica,sans-serif' font-size='20' font-weight='bold' letter-spacing='1.5' fill='%23FFFFFF'%3EPRIV%C3%89 CONCE%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.55; pointer-events: none; z-index: 3; } /* En pantallas pequeñas la marca gana algo de tamaño relativo para seguir siendo legible. */ @media (max-width: 640px) { .marca-agua::after { width: 44%; } } /* En fichas muy pequeñas (carrusel de destacadas) la marca se reduce para no saturar. */ .marca-agua--mini::after { width: 52%; max-width: 76px; opacity: 0.5; } /* === DESTACADAS: TODAS LAS FICHAS EN MÓVIL (v146) ============================================ Se RETIRÓ el recorte de la v117 —`@media (max-width: 767px) { .destacada-item:nth-child(n + 6) { display: none } }`—: en móvil el carril muestra **todas** las fichas cargadas y se desliza en horizontal para verlas, exactamente como en escritorio. Ninguna ficha queda oculta por posición; el único mecanismo de ocultación del proyecto sigue siendo la utilidad `.hidden` en la SECCIÓN. El carril mantiene su scroll táctil con `scroll-snap` (`.destacadas-track`). */ /* A partir de 768px vuelven a verse todas (el escritorio no necesita ninguna regla nueva). */ @media (min-width: 768px) { .destacada-item:nth-child(n + 6) { display: list-item; } } /* === ALINEACIÓN HORIZONTAL ROBUSTA (v118) ==================================================== SINTOMA: en móvil todo el contenido aparecía desplazado hacia un lado. CAUSA: el ancho de los contenedores clave dependía del `box-sizing: border-box` que aporta el **preflight de Tailwind**, y ese CSS se inyecta DESPUÉS de este archivo (y podría no llegar a cargarse). En modo `content-box`, un contenedor con `width: 100%` MÁS relleno —la cabecera `fixed` con su padding seguro y el shell con `env(safe-area-inset-*)`— se hace MÁS ANCHO que el viewport y descuadra el conjunto hacia un lado. SOLUCIÓN: se declara aquí, y sin depender del CDN, el modelo de caja y los anchos máximos de los tres niveles raíz y de la cabecera fija. Además `img/video/svg` nunca podrán empujar el layout. NOTA: NO se usan `margin: auto` en `#app-shell`; el shell es de ancho completo y centrarlo con márgenes automáticos sólo generaría descuadres al combinarlo con el relleno de zona segura. */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; } #app-shell { /* v120 · SIN INSETS LATERALES (causa del desplazamiento en móvil). `env(safe-area-inset-left/right)` puede devolver un valor DESIGUAL en móviles con borde curvo o agujero de cámara (izquierda > 0, derecha = 0). Aplicado como relleno horizontal, eso empuja TODO el contenido hacia un lado: exactamente el «margen a la izquierda» reportado. Los insets VERTICALES (notch arriba, barra gestual abajo) no afectan al centrado y se conservan. */ padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; /* Nadie dentro del shell puede generar scroll lateral: lo que se salga se recorta aquí (la barra fija no se ve afectada porque está fuera del flujo del shell). */ overflow-x: clip; /* v134 · ALTURA MÍNIMA Y COLUMNA FLEX: el shell mide al menos la pantalla y ordena sus piezas en vertical, de modo que el contenido (`#principal-app`) crece (`flex: 1`) y el pie queda SIEMPRE empujado al fondo con un colchón sólido debajo. Es `min-height` (no `height`) y sin `overflow`, así el scroll sigue viviendo en el documento y la barra (fixed) no se ve afectada. */ display: flex; flex-direction: column; min-height: 100vh; } /* El contenido empuja al pie: ocupa todo el espacio libre del shell. */ #principal-app { flex: 1; } /* La cabecera fija ocupa EXACTAMENTE el viewport: izquierda, derecha y ancho explícitos y con el relleno incluido en ese ancho (border-box). */ #app-shell > header { left: 0; right: 0; width: 100%; max-width: 100%; box-sizing: border-box; } /* Ningún medio puede exceder su contenedor (causa clásica de scroll lateral en móvil). */ img, video, svg, canvas { max-width: 100%; } /* === CARRILES HORIZONTALES SIN BARRA VISIBLE (v115) ========================================== El marcado de la navegación móvil y del carril de filtros usa la clase `scrollbar-none`, pero NO estaba definida en este archivo: en escritorio las barras de esos carriles se dibujaban y robaban espacio útil (y ensuciaban el borde inferior). Aquí se ocultan en los tres motores. */ .scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; } .scrollbar-none::-webkit-scrollbar { width: 0; height: 0; } /* ============================================================================ §2.110 · OPTIMIZACIÓN MÓVIL (FASE 1) — filtros compactos y deslizables «above the fold» ---------------------------------------------------------------------------- QUÉ HACE (sólo en móvil) · `#catalog-search` ocupa el 100 % del ancho en SU PROPIA LÍNEA (`basis-full`). · El carril `#filtros-strip` queda SIEMPRE en una sola línea con desplazamiento horizontal táctil (`overflow-x: auto` + `nowrap`), sin barra de scroll visible (la oculta `.scrollbar-none`). · Los botones de filtro pasan a «píldoras» compactas (`px-2.5 py-1 text-[11px]`) con glassmorphism sutil (`rgba(255,255,255,.05)` + `blur(8px)`) y bordes redondeados. REGLA CRÍTICA: EXCLUSIVO MÓVIL Todo vive dentro de `@media (max-width: 767px)`. En ≥768 px NO se aplica ninguna de estas reglas: el escritorio conserva EXACTAMENTE el layout y el comportamiento anteriores (buscador flexible en la misma fila, carril con `sm:flex-wrap` y píldoras grandes). Los selectores usan el id (`#filtros-strip`, `#filtros-strip summary`) para ganar a las utilidades de Tailwind en el rango 640–767 px, donde `sm:` ya está activo. Sin `100vw`, sin márgenes negativos y sin bloquear el scroll de la página (reglas de la casa). ============================================================================ */ @media (max-width: 767px) { /* 1) Buscador a ancho completo en su propia línea. */ .buscador-principal { flex: 1 0 100%; width: 100%; padding: 0.375rem 0.75rem; } /* 2) Carril de filtros: una sola línea deslizable con el dedo. */ #filtros-strip { flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } /* 3) Píldoras compactas con glassmorphism sutil. */ #filtros-strip summary { padding: 0.25rem 0.625rem; font-size: 11px; border-radius: 9999px; border-color: rgba(255, 255, 255, 0.10); background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --------------------------------------------------------------------------- §2.111 · FASE 2 — BLOQUES DESTACADOS / BANNERS SUPERIORES (sólo móvil) Recorta el AIRE VERTICAL de la cabecera de la portada para que la primera fila de tarjetas del catálogo quede dentro de la primera pantalla, sin scroll: · `#destacadas-portada`: separación superior 1.25rem → 0.375rem y relleno vertical del panel 0.45/0.35rem → 0.375/0.25rem. · `#destacadas-track` (el carril): relleno vertical 0.85/0.8rem → 0.375rem (py-1.5); el relleno LATERAL sigue siendo `var(--relleno-destacadas-lados)`, que es la medida que garantiza la alineación con la retícula del catálogo (arnés móvil v127). Se apunta por ID (no por clase) a propósito: así la regla base del carril —de la que dependen los arneses v83/v127— sigue siendo la primera regla de esa clase que aparece en la hoja. · `#stories-en-linea` («En Línea ahora»): 0.75rem → 0.375rem. · buscador y filtros (`#principal-app aside`): 1.25rem → 0.5rem. Nada de esto se modifica fuera de la media query: en ≥768 px las alturas son las de siempre. --------------------------------------------------------------------------- */ #destacadas-portada { margin-top: 0.375rem; padding-top: 0.375rem; padding-bottom: 0.25rem; } .destacadas-portada h2 { margin-bottom: 0.15rem; } #destacadas-track { padding-top: 0.375rem; padding-bottom: 0.375rem; } #stories-en-linea { margin-top: 0.375rem; } #principal-app aside { margin-top: 0.5rem; } /* --------------------------------------------------------------------------- §2.112 · FASE 3 — MODAL DE PERFIL `#modal-perfil` (sólo móvil) 1) PESTAÑAS: barra compacta Galería · Detalles · Reputación que evita el scroll infinito. Se muestra sólo aquí (en el HTML nace con `hidden`) y el gating se hace con el atributo `data-perfil-tab-activa` que fija app.js → mostrarTabPerfil(). 2) REPUTACIÓN 2×2: los cuatro ejes (Veracidad, Puntualidad, Higiene, Trato) en una cuadrícula compacta de dos columnas, con la barra a lo ancho de su celda. 3) CTA FIJO: la fila de WhatsApp/Llamar se queda pegada al borde inferior con `z-index` alto, siempre al alcance del pulgar. Nada de esto existe fuera de la media query: en ≥768 px el modal se ve EXACTAMENTE como antes (todas las secciones visibles, sin barra de pestañas y con la reputación en tres columnas). --------------------------------------------------------------------------- */ /* v2.11 · Prominencia de las pestañas: barra con halo cian, píldoras más grandes y legibles, pestaña activa de alto contraste con PUNTO LUMINOSO, y «Detalles» resaltada (es la sección que más se consulta). Sigue siendo exclusivo de móvil: nada de esto existe fuera de la media query. */ #perfil-tabs { display: flex; flex: 0 0 auto; align-items: center; gap: 0.3rem; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid rgba(34, 211, 238, 0.25); background: rgba(20, 20, 20, 0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 18px -16px rgba(0, 0, 0, 0.95); padding: 0.4rem 0.5rem; -webkit-overflow-scrolling: touch; } .perfil-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.3rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9999px; background: rgba(255, 255, 255, 0.07); padding: 0.3rem 0.7rem; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; color: #e4e4e7; white-space: nowrap; } /* Pestaña activa: contraste alto + borde luminoso + punto brillante. */ .perfil-tab--activa, .perfil-tab[aria-selected="true"] { border-color: rgba(34, 211, 238, 0.8); background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(225, 29, 72, 0.18)); color: #a5f3fc; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 12px -2px rgba(34, 211, 238, 0.6); } .perfil-tab--activa::before, .perfil-tab[aria-selected="true"]::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 9999px; background: #67e8f9; box-shadow: 0 0 6px 1px rgba(34, 211, 238, 0.9); } /* Gating de secciones: §2.118 · «Detalles» dejó de ser pestaña propia y ahora se muestra INTEGRADA en la pestaña «Galería» (fotos + datos, servicios y descripción en la misma columna vertical), así que sólo se oculta lo que pertenece a «Reputación» y viceversa. */ #modal-perfil[data-perfil-tab-activa="galeria"] [data-perfil-seccion]:not([data-perfil-seccion="galeria"]):not([data-perfil-seccion="detalles"]), #modal-perfil[data-perfil-tab-activa="reputacion"] [data-perfil-seccion]:not([data-perfil-seccion="reputacion"]) { display: none; } /* Legibilidad de la información integrada (servicios, medidas y descripción) en móvil. */ #perfil-descripcion { font-size: 12px; line-height: 1.55; } /* Reputación de los cuatro ejes en 2×2 compacto (etiqueta + valor arriba, barra debajo). */ #perfil-reputacion-barras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; } #perfil-reputacion-barras > * + * { margin-top: 0; /* neutraliza el `space-y-1` del contenedor original */ } #perfil-reputacion-barras .reputacion-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiqueta valor" "barra barra"; gap: 0.2rem 0.35rem; } #perfil-reputacion-barras .reputacion-etiqueta { grid-area: etiqueta; font-size: 0.625rem; } #perfil-reputacion-barras .reputacion-valor { grid-area: valor; } #perfil-reputacion-barras .reputacion-barra { grid-area: barra; } /* CTA de conversión siempre a la vista (pegado al borde inferior de la ficha). */ .perfil-cta-barra { position: sticky; bottom: 0; z-index: 70; } /* --------------------------------------------------------------------------- §2.114 · FASE 4 — MÁRGENES Y CONTENEDORES DEL CATÁLOGO (sólo móvil) Recorta el «aire» muerto de la retícula y abarata el pintado de las tarjetas para que el scroll táctil se sienta más fluido, sin tocar ninguna medida lateral (la sangría de la retícula sigue siendo la que verifican los arneses v119/v123). · `#ads-grid`: separación entre bloques 0.5rem (Tailwind `gap-2`) → 0.375rem. · `.bloque-categoria > div` (la banda de categoría): margen y relleno vertical reducidos y tipografía algo más ajustada, para que entren más tarjetas en pantalla. · `#catalog-resumen` y `#filtros-chips`: menos aire respecto a los filtros. · Tarjetas: sin resalte azul de toque (`-webkit-tap-highlight-color`) y con una sombra de UNA capa en vez del `shadow-xl` de varias (mismo aspecto percibido en pantalla pequeña, menos pintado por fotograma durante el scroll). Se respeta el `touch-action: pan-y` de v79. EXCLUSIVO MÓVIL: fuera de esta media query no cambia nada; el escritorio mantiene su retícula de 6 columnas, sus separaciones y su `shadow-xl` originales. --------------------------------------------------------------------------- */ #ads-grid { gap: 0.375rem; } #ads-grid .bloque-categoria > div { margin-top: 0.25rem; margin-bottom: 0.25rem; padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 11px; letter-spacing: 0.08em; } #catalog-resumen, #filtros-chips { margin-top: 0.25rem; } #ads-grid article[data-id] { -webkit-tap-highlight-color: transparent; box-shadow: 0 3px 10px -8px rgba(0, 0, 0, 0.75); } /* --------------------------------------------------------------------------- §2.116 · FASE 5.1 — BOTONERA 50/50 Y DELGADA (sólo móvil) Los dos botones de la tarjeta (WhatsApp y llamada, generados por `contacto.js`) reparten el ancho de forma ESTRICTAMENTE SIMÉTRICA y pierden grosor: · `flex: 1 1 0` en ambos ⇒ ancho exacto = (100 % − gap) / 2 para cada uno, sin importar el contenido; `width: auto` neutraliza el `w-7` del botón de llamada y `min-width: 0` evita que el texto fuerce el ancho. · Alto por RELLENO: `padding: 0.375rem 0.25rem` con `line-height: 1` (≈24 px en vez de los 28 px del `h-7`), esquinas limpias de `0.5rem` y relleno lateral recortado para que la etiqueta quepa en su mitad. · Tipografía e iconos proporcionados: texto 11 px, iconos 0.875rem. Los selectores llevan la clase de la tarjeta (`.tarjeta-contacto-host .tarjeta-contacto`) para ganar a las utilidades de Tailwind con independencia del orden de inyección del CDN. EXCLUSIVO MÓVIL: en ≥768 px la botonera conserva su `h-7`, su `gap-1`, su reparto (`flex-1` + `w-7` cuadrados) y su tipografía originales, sin ninguna interferencia. --------------------------------------------------------------------------- */ .tarjeta-contacto-host .tarjeta-contacto { gap: 0.25rem; align-items: stretch; } /* §2.117 · ULTRA DELGADO (sólo móvil): barra de 22 px fijos (máx. 24 px) con relleno vertical mínimo, manteniendo el reparto 50/50 exacto de §2.116 y el icono reducido a 0.75rem. */ .tarjeta-contacto-host .tarjeta-contacto > a, .tarjeta-contacto-host .tarjeta-contacto > span { flex: 1 1 0; width: auto; min-width: 0; height: 22px; max-height: 24px; min-height: 22px; padding: 0.15rem 0.25rem; border-radius: 0.375rem; font-size: 10px; line-height: 1; gap: 0.15rem; } .tarjeta-contacto-host .tarjeta-contacto svg { width: 0.75rem; height: 0.75rem; } /* --------------------------------------------------------------------------- §2.119 · FASE 7 — WIDGET VIP EN MÓVIL (cierre accesible para cualquier visitante) El widget flota sobre el catálogo, así que en móvil la «✕» debe ser un blanco de toque cómodo (2rem = 32 px) y con contraste suficiente incluso sobre las fotos. A quién se le ofrece la «✕» y qué se recuerda vive en `app.js` (sesión registrada **o** vista móvil; el cierre se guarda en `localStorage`, por cuenta si hay sesión). Los perfiles VIP, además, entran en la retícula del catálogo en móvil (Fase 7.2, `app.js`), de modo que nunca desaparecen al cerrar el widget. EXCLUSIVO MÓVIL: en ≥768 px la «✕» conserva su tamaño y su aspecto originales. --------------------------------------------------------------------------- */ #vip-fila.vip-widget .vip-widget-cerrar { height: 2rem; width: 2rem; font-size: 0.8125rem; background: rgba(0, 0, 0, 0.82); color: #ffffff; } } /* === MÁRGENES SEGUROS EN MÓVIL (v115, corregido en v120) ===================================== `index.html` declara `viewport-fit=cover`, así que el layout puede invadir el notch/isla y la barra gestual. Sólo se usan los insets VERTICALES (arriba en la barra, abajo en el pie): son simétricos y no alteran el centrado horizontal. Los LATERALES se eliminaron en v120 porque en móviles con borde curvo/agujero de cámara pueden venir DESIGUALES (izquierda > 0, derecha = 0) y desplazaban todo el contenido a un lado. En escritorio `env()` vale 0 y todo queda igual que antes. */ #app-shell > header { /* RELLENO LATERAL RETIRADO (v122/v123) — antes 0.75rem, que se SUMABA al `px-3 sm:px-4` de la fila interior: la barra quedaba a 24 px del borde mientras el catálogo empezaba a 22 px (desalineado y con menos ancho útil). Ahora la sangría la aporta la FILA con `--sangria-tarjetas` (ver regla siguiente), así que la cabecera no acumula nada. Se conserva el inset VERTICAL (notch), que sí es simétrico y no afecta al centrado horizontal. */ padding-left: 0; padding-right: 0; padding-top: env(safe-area-inset-top); max-width: 100%; box-sizing: border-box; } /* LA FILA DE LA CABECERA COMPARTE LA RETÍCULA DE LAS TARJETAS (v123) -------------------------- `#app-shell > header > div` es un selector con ID: gana siempre al `px-3 sm:px-4` de utilidades (especificidad 1-0-2 frente a 0-1-0) sin necesidad de `!important`. Con esto el logotipo, el bloque de acciones y el carril de navegación empiezan y terminan exactamente donde las tarjetas, en TODOS los anchos (móvil y escritorio), porque el valor sale de la misma variable. */ #app-shell > header > div { padding-left: var(--sangria-tarjetas); padding-right: var(--sangria-tarjetas); } #app-shell > footer { /* v134 · El pie nunca se pega al borde inferior: `margin-top: auto` lo empuja al fondo del shell (que mide al menos una pantalla) y el relleno inferior se queda en 5rem como mínimo, respetando el inset de la barra gestual del móvil cuando es mayor. */ margin-top: auto; padding-bottom: max(5rem, env(safe-area-inset-bottom)); } html[data-barra='movil'] #app-shell > header { /* `!important` a propósito: la clase Tailwind `sticky` (inyectada por el CDN DESPUÉS de este archivo) y la regla base deben perder SIEMPRE contra el modo elegido por el administrador. */ position: static !important; top: auto !important; z-index: auto !important; } .franja-pill { display: block; max-width: 100%; margin-top: 0.15rem; overflow: hidden; color: #fcd34d; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; opacity: 0.9; } /* INSIGNIAS DE CONFIANZA (v100 · Fase 3): en la ficha del catálogo van sólo los iconos, en una fila mínima que no compite con el nombre ni con el precio; en el modal se añade el texto. */ .insignias-pill { display: flex; max-width: 100%; margin-top: 0.15rem; gap: 0.15rem; overflow: hidden; } .insignia-pill { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1rem; height: 1rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.35rem; background: rgba(255, 255, 255, 0.06); font-size: 9px; line-height: 1; } /* Variante con texto (modal): la pastilla se estira para que se lea la insignia. */ .insignia-pill--texto { gap: 0.2rem; width: auto; height: auto; padding: 0.15rem 0.4rem; color: #d4d4d8; font-size: 10px; white-space: nowrap; } aside input[type="checkbox"] { appearance: none; width: 16px; height: 16px; flex: 0 0 16px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.375rem; background: transparent; cursor: pointer; transition: all 200ms ease; } aside input[type="checkbox"]:checked { border-color: #00f2fe; background: #00f2fe; box-shadow: 0 0 8px rgba(0, 242, 254, 0.6); } aside input[type="checkbox"]:checked::after { display: block; color: #121212; content: '✓'; font-size: 12px; font-weight: 800; line-height: 14px; text-align: center; } .status-live { animation: status-pulse 1.6s ease-in-out infinite; } @media (max-width: 1279px) { #ads-grid a[aria-label] > span { display: none !important; } } @keyframes status-pulse { 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.08); } } /* Se retiró la regla legacy `body, main, aside, nav, section, div { -webkit-overflow-scrolling: touch }`: en iOS 13+ es el comportamiento por defecto y aplicada de forma global creaba contenedores compuestos que congelaban el scroll vertical de la página. */ /* Tarjetas del catálogo: permiso explícito de desplazamiento vertical nativo (dedo y rueda). Las tarjetas (`article` / `.abrir-perfil`) NO llevan `touch-action: none` ni `pointer-events: none`; esos valores solo existen en overlays decorativos internos (degradado, marca de agua, badge), que deben seguir sin interceptar el clic de apertura. */ #ads-grid article, #ads-grid .abrir-perfil { touch-action: pan-y; } /* ============================================================================ RETÍCULA DEL CATÁLOGO EN ESCRITORIO (v143) Escritorio (≥1024px): exactamente **6 tarjetas por fila**. La versión móvil no se toca: 3 columnas fijas por debajo de 768px (`index.html`) y 4 de 768 a 1023px (`md:grid-cols-4`). Espejo en utilidades de `app.js`: `lg:grid-cols-6`. ============================================================================ */ @media (min-width: 1024px) { #ads-grid .bloque-categoria > .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ============================================================================ BOTONERA DE CONTACTO DE LAS TARJETAS (v79, generalizada en v80) WhatsApp (verde corporativo) + llamada directa (cian, en armonía con el botón de llamada del modal de perfil) sobre el borde INFERIOR de la tarjeta, para no tapar la foto de portada. Se aplica a TODA tarjeta marcada con `.tarjeta-contacto-host`, es decir: · las tarjetas del catálogo público (#ads-grid, app.js) y · las tarjetas de «Mis escorts favoritas» del panel del cliente. El HTML de la botonera lo genera `contacto.js` para que ambas vistas sean idénticas (mismo verde/cian, mismos tamaños, mismos aria-label). · Sin hover (móvil/tablet táctil): SIEMPRE visibles y pulsables. Son la vía principal de contacto y no existe hover que las revele. · Con ratón (hover + puntero fino): en reposo quedan ocultas y con `pointer-events: none`, de modo que un clic en esa franja siga abriendo el perfil; se revelan al pasar el cursor o al enfocar con el teclado dentro de la tarjeta (`:focus-within`), así también son accesibles por teclado. · En pantallas híbridas (portátil táctil con ratón) el navegador declara hover: con el dedo la franja abre el perfil, que ya incluye su propia fila de contacto; con el ratón la botonera aparece con normalidad. ============================================================================ */ .tarjeta-contacto { opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; } @media (hover: hover) and (pointer: fine) { .tarjeta-contacto-host .tarjeta-contacto { opacity: 0; transform: translateY(4px); pointer-events: none; } .tarjeta-contacto-host:hover .tarjeta-contacto, .tarjeta-contacto-host:focus-within .tarjeta-contacto { opacity: 1; transform: none; pointer-events: auto; } } /* ---------------------------------------------------------------------------- HOVER CORPORATIVO DE LA TARJETA (v92) Mismo carmesí que el carrusel destacado y que los elementos de la casa (`.salida-rapida`, `.cta-publicar`): borde rojo + brillo carmesí al pasar el cursor por las tarjetas del catálogo tradicional (`#ads-grid`) — y también por las de «Mis escorts favoritas» del panel del cliente, porque ambas comparten `.tarjeta-contacto-host` por diseño (mismos colores y tamaños en las dos vistas). · En reposo nada cambia: la tarjeta conserva su `border-zinc-900/60` y su `shadow-xl`. Al hacer hover (o al enfocar con el teclado dentro de ella) el borde se enciende y la sombra plana pasa a ser un resplandor carmesí. · GANA por especificidad `(0,2,0)` frente al `(0,1,0)` de las clases de Tailwind del marcado (app.js): no hace falta `!important`. · NO interfiere con los colores de estado del catálogo: el punto «En Línea» (`.status-live` + `bg-emerald-400`), la insignia «Verificada» (`bg-red-600/80`) y el corazón de favoritos (`rose`) conservan los suyos. Esta regla sólo declara `border-color` y `box-shadow` del CONTENEDOR. · La transición vive en la tarjeta, de modo que el encendido es fluido y respeta `prefers-reduced-motion` (bloque de más abajo). ---------------------------------------------------------------------------- */ .tarjeta-contacto-host { transition: border-color 180ms ease, box-shadow 200ms ease; } .tarjeta-contacto-host:hover, .tarjeta-contacto-host:focus-within { border-color: rgba(248, 113, 113, 0.7); box-shadow: 0 0 14px -2px rgba(225, 29, 72, 0.55), 0 20px 40px -26px rgba(0, 0, 0, 0.95); } /* Tarjetas estrechas (rejilla de 3 columnas en móvil): los botones van sólo con icono, porque el texto no cabe y el nombre de la escort debe seguir mandando. */ @media (max-width: 1279px) { .tarjeta-contacto-texto { display: none; } } @media (prefers-reduced-motion: reduce) { .tarjeta-contacto, .tarjeta-contacto-host { transition: none; } } /* Barra de categorías: scroll horizontal fluido con la scrollbar oculta (se aplica solo a este contenedor; no se usa la regla global que congelaba el scroll). */ .category-scroll { scrollbar-width: none; -ms-overflow-style: none; } .category-scroll::-webkit-scrollbar { display: none; } .sidebar-glass { background: rgba(18, 18, 18, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right: 1px solid rgba(255, 255, 255, 0.05); padding: 0.75rem 0; } /* ============================================================================ BOTÓN DE PÁNICO / SALIDA RÁPIDA Visible en la cabecera fija (`sticky top-0`), accesible con el pulgar en móvil y con el ratón en desktop. El color de urgencia es discreto (rojo apagado) para no romper la estética oscura del catálogo. Sin utilidades Tailwind en conflicto: todo el aspecto vive aquí. ============================================================================ */ .salida-rapida { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.375rem; min-height: 34px; padding: 0.35rem 0.5rem; border: 1px solid rgba(248, 113, 113, 0.45); border-radius: 9999px; background: rgba(127, 29, 29, 0.28); color: #fecaca; font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .salida-rapida:hover { border-color: rgba(248, 113, 113, 0.8); background: rgba(185, 28, 28, 0.5); color: #fff; } .salida-rapida:active { transform: scale(0.96); } .salida-rapida:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; } .salida-rapida-icono { width: 1rem; height: 1rem; flex: 0 0 auto; } /* En pantallas estrechas el botón queda como ícono puro (accesible por aria-label) para no saturar la cabecera; desde 640px recupera el texto "Salida Rápida". */ .salida-rapida-texto { display: none; } @media (min-width: 640px) { .salida-rapida { padding: 0.35rem 0.75rem; } .salida-rapida-texto { display: inline; } } /* ============================================================================ CTA DE CONVERSIÓN «ANÚNCIATE» (v82) Botón de captación de la barra superior (nuevas escorts / anunciantes). Va junto a la Salida Rápida, ANTES del bloque de sesión: es el único botón de acento cálido de la cabecera y no debe quedar bajo el overlay invisible #panic-trigger (z-[100], esquina superior derecha). Visible para invitados y clientes; app.js lo oculta a escorts y superadmin. Como en la Salida Rápida, todo el aspecto vive aquí (sin utilidades Tailwind en conflicto) para que el degradado no dependa del CDN de Tailwind. ============================================================================ */ .cta-publicar { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.375rem; min-height: 34px; padding: 0.35rem 0.7rem; border: 1px solid rgba(251, 113, 133, 0.5); border-radius: 9999px; background: linear-gradient(135deg, #e11d48 0%, #be123c 55%, #881337 100%); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; box-shadow: 0 0 12px rgba(225, 29, 72, 0.35); transition: filter 160ms ease, box-shadow 200ms ease, transform 160ms ease; } .cta-publicar:hover { filter: brightness(1.1); box-shadow: 0 0 20px rgba(225, 29, 72, 0.55); } .cta-publicar:active { transform: scale(0.96); } .cta-publicar:focus-visible { outline: 2px solid #fb7185; outline-offset: 2px; } .cta-publicar-icono { width: 1rem; height: 1rem; flex: 0 0 auto; } /* En pantallas muy estrechas (≤359px) el CTA queda como icono puro para no empujar la Salida Rápida ni el bloque de sesión; desde 360px recupera el texto. */ .cta-publicar-texto { display: none; } @media (min-width: 360px) { .cta-publicar-texto { display: inline; } } /* Navegación de la cabecera: en móvil/tablet vive en una segunda fila con scroll horizontal fluido (nunca desborda la pantalla); desde 1280px se integra en la fila única con el logotipo y las acciones. */ #nav-principal { -webkit-overflow-scrolling: touch; /* Deslizamiento fluido (v122): el rebote lateral se contiene EN EL PROPIO CARRIL (no arrastra la página, que era la vía por la que el viewport quedaba «paneado») y el desplazamiento es suave. */ overscroll-behavior-x: contain; scroll-behavior: smooth; } /* === CARRIL DE NAVEGACIÓN ALINEADO CON LA RETÍCULA DE TARJETAS (v122 · afinado en v123) === Por debajo de 1280px la navegación vive en su PROPIA fila (ocupa el 100% por `flex-wrap`) y es un carril con scroll horizontal. La sangría lateral NO se declara aquí: ya la aporta la fila de la cabecera con `--sangria-tarjetas` (22 px en móvil, 28 px desde 640 px), que es EXACTAMENTE la misma que separa las tarjetas del borde. Consecuencias buscadas: · la primera píldora arranca en el borde izquierdo de las tarjetas y, al deslizar hasta el final, la última termina en el borde derecho: alineación milimétrica con la retícula; · al no haber relleno propio en el carril, no se suma ninguna sangría y la última píldora queda SIEMPRE completa (su borde derecho coincide con el del carril, ya dentro de la pantalla); · `scroll-padding` usa la misma medida como referencia al desplazar o al enfocar con teclado; · `scroll-snap` (proximidad, nunca forzado) deja cada píldora asentada en esa misma línea. Desde 1280px la navegación vuelve a ser una fila en línea (`xl:overflow-visible`) y nada de esto se aplica: el espaciado recupera el comportamiento de escritorio. */ @media (max-width: 1279.98px) { #nav-principal { width: 100%; min-width: 0; max-width: 100%; /* Sin relleno: la alineación la garantiza la fila de la cabecera (una sola fuente de verdad). */ padding-left: 0; padding-right: 0; scroll-padding-left: var(--sangria-tarjetas); scroll-padding-right: var(--sangria-tarjetas); scroll-snap-type: x proximity; } .nav-enlace { scroll-snap-align: start; } } /* ============================================================================ ENLACES DE LA NAVEGACIÓN (v82) Un único