@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap'); /* ============================================ ¿QUÉ ES CSS? CSS (Cascading Style Sheets) = Hojas de Estilo en Cascada Define CÓMO SE VE todo: - Colores - Tamaños - Posiciones - Animaciones - Tipografías - Espaciados "Cascada" significa que los estilos se aplican en orden: 1. Estilos del navegador (por defecto) 2. Tu archivo CSS 3. CSS inline (style="...") 4. !important (máxima prioridad) SINTAXIS: selector { propiedad: valor; } Ejemplo: h1 { color: red; font-size: 32px; } SELECTORES PRINCIPALES: h1 { } → selecciona TODAS las etiquetas

.clase { } → selecciona elementos con class="clase" #id { } → selecciona el elemento con id="id" .padre .hijo → selecciona .hijo DENTRO de .padre ============================================ */ /* ============================================ VARIABLES CSS (Custom Properties) ============================================ :root selecciona el elemento raíz del documento (). Aquí definimos VARIABLES que usaremos en todo el CSS. ¿Por qué variables? Si quieres cambiar el color principal de TODA la página, solo cambias UNA línea aquí en vez de buscar en 500 líneas. Se definen con: --nombre: valor; Se usan con: var(--nombre) */ :root { /* Colores principales */ --color-primary: #e91e63; /* Rosa/Magenta - color principal */ --color-primary-dark: #c2185b; /* Rosa oscuro - para hover */ --color-primary-light: #f8bbd0; /* Rosa claro - fondos suaves */ /* Colores secundarios */ --color-secondary: #2c3e50; /* Azul oscuro - textos, fondos */ --color-secondary-light: #34495e; /* Colores de estado */ --color-success: #27ae60; /* Verde - éxito, verificado */ --color-warning: #f39c12; /* Amarillo - advertencia */ --color-danger: #e74c3c; /* Rojo - error, eliminar */ --color-info: #3498db; /* Azul - información */ /* Colores neutros */ --color-white: #ffffff; --color-light: #f8f9fa; /* Gris muy claro - fondos */ --color-gray: #6c757d; /* Gris medio - textos secundarios */ --color-gray-light: #dee2e6; /* Gris claro - bordes */ --color-dark: #212529; /* Casi negro - textos principales */ /* Tipografía */ --font-main: 'Poppins', sans-serif; /* Espaciados */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 40px; --spacing-xl: 80px; /* Bordes redondeados */ --radius-sm: 5px; --radius-md: 10px; --radius-lg: 20px; --radius-full: 50%; /* Círculo perfecto */ /* Sombras */ --shadow-sm: 0 2px 5px rgba(0,0,0,0.1); --shadow-md: 0 5px 15px rgba(0,0,0,0.1); --shadow-lg: 0 10px 30px rgba(0,0,0,0.15); /* Transiciones */ --transition: all 0.3s ease; /* all = aplica a todas las propiedades que cambien 0.3s = dura 0.3 segundos ease = empieza lento, acelera, termina lento */ } /* ============================================ RESET / NORMALIZACIÓN ============================================ Cada navegador tiene estilos por defecto diferentes. Chrome, Firefox, Safari muestran las cosas ligeramente distinto. El "reset" elimina esos estilos por defecto para que tu página se vea IGUAL en todos los navegadores. * selecciona TODOS los elementos de la página. */ * { margin: 0; /* Elimina márgenes por defecto */ padding: 0; /* Elimina relleno por defecto */ box-sizing: border-box; /* box-sizing: border-box es MUY IMPORTANTE. Sin border-box: Un div de width:200px con padding:20px mide 240px (200+20+20) Con border-box: Un div de width:200px con padding:20px mide 200px El padding se resta del ancho, no se suma. Esto hace que los cálculos de tamaño sean más intuitivos. */ } /* Estilos base del body */ body { font-family: var(--font-main); /* Usa la fuente Poppins */ font-size: 16px; /* Tamaño base del texto */ line-height: 1.6; /* Espacio entre líneas (1.6x el tamaño) */ color: var(--color-dark); /* Color del texto */ background-color: var(--color-white); overflow-x: hidden; /* Oculta scroll horizontal */ /* overflow-x: hidden evita la barra de scroll horizontal que a veces aparece por elementos que se salen de la pantalla. */ } /* Que todos los enlaces no tengan subrayado por defecto */ a { text-decoration: none; /* Elimina el subrayado */ color: inherit; /* Hereda el color del padre */ transition: var(--transition); } /* Que todas las listas no tengan viñetas */ ul { list-style: none; /* Elimina los puntos/números */ } /* Que las imágenes se adapten a su contenedor */ img { max-width: 100%; /* Nunca más ancha que su contenedor */ height: auto; /* Mantiene la proporción */ display: block; /* Elimina espacio fantasma debajo */ } /* ============================================ CONTENEDOR PRINCIPAL ============================================ El "container" centra el contenido y le da un ancho máximo. Sin esto, en una pantalla de 2560px el texto se leería de izquierda a derecha muy incómodo. */ .container { max-width: 1200px; /* Ancho máximo */ margin: 0 auto; /* margin: 0 auto; 0 = arriba y abajo sin margen auto = izquierda y derecha automático → CENTRA el elemento */ padding: 0 var(--spacing-md); /* 20px a los lados */ } /* ============================================ BOTONES ============================================ Clases reutilizables para botones en toda la web. */ /* Estilo BASE de todos los botones */ .btn { display: inline-flex; /* Flex permite alinear ícono + texto */ align-items: center; /* Centra verticalmente */ gap: 8px; /* Espacio entre ícono y texto */ padding: 12px 24px; /* 12px arriba/abajo, 24px lados */ border: 2px solid transparent; /* Borde transparente base */ border-radius: var(--radius-md); font-family: var(--font-main); font-size: 14px; font-weight: 600; /* Semi-bold */ cursor: pointer; /* Cursor de manita al pasar */ transition: var(--transition); text-align: center; white-space: nowrap; /* El texto no se parte en 2 líneas */ } /* Botón principal (fondo rosa) */ .btn-primary { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } /* :hover se activa cuando el mouse PASA POR ENCIMA del elemento. transform: translateY(-2px) lo mueve 2px hacia arriba. Esto da sensación de que el botón "se levanta". */ .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Botón con solo borde (sin fondo) */ .btn-outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); transform: translateY(-2px); } /* Botón outline claro (para fondos oscuros) */ .btn-outline-light { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .btn-outline-light:hover { background-color: var(--color-white); color: var(--color-primary); transform: translateY(-2px); } /* Tamaños de botones */ .btn-sm { padding: 8px 16px; font-size: 12px; min-height: 36px; } .btn-lg { padding: 16px 32px; font-size: 16px; } .btn-block { display: flex; width: 100%; justify-content: center; } /* btn-block ocupa todo el ancho disponible */ /* ============================================ BARRA DE NAVEGACIÓN (HEADER) ============================================ */ .header { position: fixed; /* Se queda FIJA al hacer scroll */ top: 0; left: 0; width: 100%; z-index: 1000; background-color: #fff; box-shadow: var(--shadow-sm); } .header.scrolled { background-color: #fff; box-shadow: var(--shadow-sm); } .navbar { padding: var(--spacing-sm) 0; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); display: flex; /* FLEXBOX - clave para layouts */ justify-content: space-between; /* Espacio entre elementos */ align-items: center; /* Centra verticalmente */ /* FLEXBOX es el sistema de layout más usado en CSS moderno. display: flex convierte al elemento en un "contenedor flex". Sus hijos directos se convierten en "items flex". justify-content: controla la distribución HORIZONTAL - flex-start: todos a la izquierda - center: todos centrados - flex-end: todos a la derecha - space-between: primera a la izq, última a la der, espacio ENTRE ellos - space-around: espacio ALREDEDOR de cada uno align-items: controla la alineación VERTICAL - flex-start: arriba - center: centrado - flex-end: abajo - stretch: se estiran para llenar la altura */ } /* Logo */ .logo { display: flex; align-items: center; gap: 8px; font-family: 'Tilt Neon', sans-serif; font-size: 22px; font-weight: 700; color: #ff2d78; text-decoration: none; letter-spacing: 1px; animation: neon-flicker 4s infinite; } .logo i { font-size: 28px; color: #ff2d78; filter: drop-shadow(0 0 4px #ff2d78) drop-shadow(0 0 10px #ff006a); } .logo span { color: #ede0ff; text-shadow: 0 0 8px #a855f7, 0 0 20px #7c00cc; } .logo span strong { color: #fff; text-shadow: 0 0 8px #c084fc, 0 0 18px #8800ff; } @keyframes neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.75; } } /* Enlaces de navegación */ .nav-links { display: flex; gap: 24px; margin: 0 auto; /* centra los links entre logo y botones */ } .nav-links a { color: var(--color-secondary); font-weight: 500; font-size: 0.95rem; padding: 8px 0; position: relative; /* Necesario para el ::after */ } /* ::after es un PSEUDO-ELEMENTO. Crea un elemento "virtual" DESPUÉS del contenido del enlace. Lo usamos para crear una línea animada debajo del enlace. content: '' es OBLIGATORIO para que el pseudo-elemento exista. */ .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; /* Empieza desde el centro */ width: 0; /* Ancho 0 por defecto (invisible) */ height: 2px; background-color: var(--color-primary); transform: translateX(-50%); /* Centra la línea */ } /* Al pasar el mouse, la línea se expande */ .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* Botones de la navegación */ .nav-buttons { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* Botón hamburguesa (solo visible en celulares) */ .hamburger { display: none; /* Oculto en pantallas grandes */ flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .hamburger span { display: block; width: 25px; height: 3px; background-color: var(--color-secondary); border-radius: 3px; transition: var(--transition); } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(233, 30, 99, 0.8), rgba(44, 62, 80, 0.9)), url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1920') center/cover no-repeat; color: var(--color-white); text-align: center; padding: var(--spacing-xl) var(--spacing-md); } /* Versión reducida del hero (aparece después de los anuncios) */ .hero.hero-mini { min-height: 340px; padding: 60px var(--spacing-md); } .hero-content { max-width: 800px; z-index: 2; /* Por encima del overlay */ } .hero-title { font-size: 3.5rem; /* rem = "root em" 1rem = el tamaño de fuente del (generalmente 16px) 3.5rem = 3.5 × 16px = 56px ¿Por qué rem y no px? rem se adapta si el usuario cambia el tamaño de fuente en su navegador (accesibilidad). px es fijo. */ font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-md); } .highlight { color: var(--color-primary-light); /* Esta clase colorea las palabras importantes del título para darles énfasis visual. */ } .hero-subtitle { font-size: 1.2rem; font-weight: 300; margin-bottom: var(--spacing-lg); opacity: 0.9; /* Ligeramente transparente */ } .hero-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; /* Si no caben, bajan a la siguiente línea */ margin-bottom: var(--spacing-lg); } /* BARRA DE BÚSQUEDA EN EL HERO */ .search-form { display: flex; background-color: var(--color-white); border-radius: var(--radius-lg); padding: 8px; gap: 5px; box-shadow: var(--shadow-lg); flex-wrap: wrap; } .search-group { flex: 1; /* Cada grupo ocupa el mismo espacio */ min-width: 150px; /* Mínimo 150px antes de bajar de línea */ } .search-form select, .search-form input { width: 100%; padding: 12px 16px; border: none; border-radius: var(--radius-md); font-family: var(--font-main); font-size: 14px; color: var(--color-dark); background-color: var(--color-light); outline: none; /* Elimina el borde azul al hacer focus */ } /* :focus se activa cuando el usuario CLICKEA en un campo de formulario. */ .search-form select:focus, .search-form input:focus { background-color: var(--color-primary-light); } .search-form .btn { border-radius: var(--radius-md); } /* ============================================ ESTADÍSTICAS ============================================ */ .stats-section { padding: var(--spacing-lg) 0; background-color: var(--color-secondary); color: var(--color-white); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* CSS GRID es otro sistema de layout (como Flexbox). DIFERENCIA: - Flexbox: para layouts en 1 dimensión (fila O columna) - Grid: para layouts en 2 dimensiones (filas Y columnas) grid-template-columns: repeat(4, 1fr) Crea 4 columnas de igual tamaño. 1fr = 1 fracción del espacio disponible. Ejemplo: si hay 1200px disponibles: repeat(4, 1fr) = cada columna mide 300px (1200/4) */ gap: var(--spacing-md); text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--color-primary-light); } .stat-label { font-size: 0.9rem; opacity: 0.8; margin-top: 5px; } /* ============================================ CÓMO FUNCIONA ============================================ */ .how-it-works { padding: var(--spacing-xl) 0; background-color: var(--color-light); } /* Títulos de sección reutilizables */ .section-title { text-align: center; font-size: 2.2rem; font-weight: 700; margin-bottom: var(--spacing-sm); color: var(--color-secondary); } .section-subtitle { text-align: center; color: var(--color-gray); font-size: 1.1rem; margin-bottom: var(--spacing-lg); } /* PESTAÑAS */ .tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; border: 2px solid var(--color-gray-light); border-radius: var(--radius-lg); background: var(--color-white); font-family: var(--font-main); font-size: 15px; font-weight: 500; color: var(--color-gray); cursor: pointer; transition: var(--transition); } .tab-btn.active, .tab-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background-color: rgba(233, 30, 99, 0.05); } /* Contenido de las pestañas */ .tab-content { display: none; /* Oculto por defecto */ } .tab-content.active { display: block; /* Solo el activo se muestra */ /* JavaScript añade/quita la clase "active" para mostrar/ocultar el contenido de cada pestaña. */ } /* Tarjetas de pasos */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); } .step-card { background: var(--color-white); padding: var(--spacing-lg) var(--spacing-md); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; } .step-card:hover { transform: translateY(-10px); /* Se eleva al pasar el mouse */ box-shadow: var(--shadow-lg); } .step-number { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background-color: var(--color-primary); color: white; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .step-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: var(--spacing-md); } .step-card h3 { margin-bottom: var(--spacing-sm); color: var(--color-secondary); } .step-card p { color: var(--color-gray); font-size: 0.9rem; } /* ============================================ ANUNCIOS DESTACADOS ============================================ */ .featured-section { padding: var(--spacing-xl) 0; } .anuncios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } /* Tarjeta de anuncio */ .anuncio-card { background: #000; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; } .anuncio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .anuncio-image-link { display: block; text-decoration: none; } /* Foto vertical (3:4) — ocupa toda la tarjeta */ .anuncio-image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .anuncio-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); display: block; } .anuncio-card:hover .anuncio-image img { transform: scale(1.05); opacity: 0.9; } /* Badge (insignia) sobre la imagen */ .anuncio-badge { position: absolute; top: 15px; left: 15px; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: white; } .anuncio-badge.premium { background-color: var(--color-warning); } .anuncio-badge.verificado { background-color: var(--color-success); } /* Botón de favorito (corazón) */ .btn-favorite { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-gray); transition: var(--transition); } .btn-favorite:hover, .btn-favorite.active { color: var(--color-primary); background-color: var(--color-white); } /* Cuerpo superpuesto sobre la foto con degradado */ .anuncio-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 0.9rem 0.9rem; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, transparent 100%); color: #fff; } .anuncio-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .anuncio-header h3 { font-size: 1rem; color: #fff; font-weight: 700; line-height: 1.2; } .anuncio-rating { display: flex; align-items: center; gap: 3px; font-size: 14px; color: var(--color-warning); } .anuncio-rating small { color: var(--color-gray); } .anuncio-location { color: rgba(255,255,255,0.8); font-size: 0.78rem; margin-bottom: 6px; } .anuncio-location i { color: rgba(255,255,255,0.7); } /* Descripción y tags ocultos en tarjeta retrato */ .anuncio-description { display: none; } .anuncio-tags { display: none; } .anuncio-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.2); } .anuncio-price { font-size: 1rem; font-weight: 700; color: #fff; } /* ============================================ PLANES DE SUSCRIPCIÓN ============================================ */ .pricing-section { padding: var(--spacing-xl) 0; background-color: var(--color-light); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); align-items: start; } .pricing-card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-lg) var(--spacing-md); text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; } .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Tarjeta "Popular" destacada */ .pricing-card.popular { border: 2px solid var(--color-primary); transform: scale(1.05); /* Ligeramente más grande */ } .pricing-card.popular:hover { transform: scale(1.05) translateY(-5px); } .popular-badge { position: absolute; top: 0; right: 0; background-color: var(--color-primary); color: white; padding: 5px 20px; font-size: 12px; font-weight: 600; border-radius: 0 0 0 var(--radius-md); } .pricing-header h3 { font-size: 1.3rem; color: var(--color-secondary); margin-bottom: 15px; } .pricing-price { margin-bottom: var(--spacing-md); } .pricing-price .currency { font-size: 1.5rem; font-weight: 600; color: var(--color-primary); vertical-align: super; /* Superíndice */ } .pricing-price .amount { font-size: 3rem; font-weight: 700; color: var(--color-secondary); } .pricing-price .period { font-size: 1rem; color: var(--color-gray); } /* Lista de características */ .pricing-features { text-align: left; margin-bottom: var(--spacing-lg); } .pricing-features li { padding: 10px 0; border-bottom: 1px solid var(--color-gray-light); display: flex; align-items: center; gap: 10px; font-size: 0.9rem; } .pricing-features li i.fa-check { color: var(--color-success); } .pricing-features li i.fa-times { color: var(--color-gray-light); } .pricing-features li.disabled { color: var(--color-gray-light); } /* ============================================ TESTIMONIOS ============================================ */ .testimonials-section { padding: var(--spacing-xl) 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .testimonial-card { background: var(--color-white); padding: var(--spacing-lg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition); } .testimonial-card:hover { box-shadow: var(--shadow-md); } .testimonial-stars { color: var(--color-warning); margin-bottom: 15px; } .testimonial-text { color: var(--color-gray); font-style: italic; margin-bottom: 15px; line-height: 1.8; } .testimonial-author strong { display: block; color: var(--color-secondary); } .testimonial-author span { font-size: 0.85rem; color: var(--color-primary); } /* ============================================ FOOTER ============================================ */ .footer { background-color: var(--color-secondary); color: var(--color-white); padding: var(--spacing-xl) 0 var(--spacing-md); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; /* 2fr 1fr 1fr 1fr La primera columna ocupa el DOBLE de espacio. 2 + 1 + 1 + 1 = 5 partes totales Columna 1: 2/5 del espacio Columnas 2, 3, 4: 1/5 cada una */ gap: var(--spacing-lg); } .footer-col h4 { font-size: 1.1rem; margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: 8px; } .footer-col p { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.8; margin-bottom: var(--spacing-md); } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; transition: var(--transition); } .footer-col ul li a:hover { color: var(--color-primary-light); padding-left: 5px; /* Se mueve a la derecha al hover */ } .contact-info li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .contact-info li i { color: var(--color-primary-light); } /* Redes sociales */ .social-links { display: flex; gap: 10px; } .social-links a { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: white; transition: var(--transition); } .social-links a:hover { background-color: var(--color-primary); transform: translateY(-3px); } .footer-bottom { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); } /* Centro de texto auxiliar */ .text-center { text-align: center; } /* ============================================ PÁGINAS DE AUTENTICACIÓN (login / registro) ============================================ */ /* Fondo especial para páginas de auth */ .auth-page { background-color: var(--color-light); min-height: 100vh; display: flex; flex-direction: column; } /* Header con fondo blanco desde el inicio */ .header-solid { background-color: var(--color-white) !important; box-shadow: var(--shadow-sm); } /* Logo en versión oscura (para header blanco) */ .logo-dark { color: #ff2d78 !important; } /* Texto del nav de auth */ .auth-nav-text { font-size: 14px; color: var(--color-gray); } /* Área principal de auth: ocupa el espacio restante y centra el contenido */ .auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 100px var(--spacing-md) var(--spacing-lg); /* padding-top: 100px para compensar el header fijo (position: fixed). Sin esto, el contenido quedaría tapado por el header. */ } /* Contenedor del layout de 2 columnas */ .auth-container { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas iguales: - Izquierda: panel decorativo/branding - Derecha: formulario */ max-width: 960px; width: 100%; min-height: 600px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } /* ---- Panel izquierdo: decorativo ---- */ .auth-banner { background: linear-gradient( 135deg, var(--color-primary), var(--color-secondary) ); /* Gradiente de 135 grados: empieza en rosa (color-primary) y termina en azul oscuro (color-secondary). 135deg = dirección diagonal. */ display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl) var(--spacing-lg); color: var(--color-white); position: relative; overflow: hidden; } /* Círculo decorativo de fondo */ .auth-banner::before { content: ''; position: absolute; width: 350px; height: 350px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); top: -80px; right: -80px; } .auth-banner::after { content: ''; position: absolute; width: 250px; height: 250px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); bottom: -60px; left: -60px; } .auth-banner-content { position: relative; z-index: 1; /* Por encima de los círculos decorativos */ text-align: center; } /* Ícono grande en el banner */ .auth-banner-logo { width: 80px; height: 80px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto var(--spacing-md); } .auth-banner-content h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: var(--spacing-sm); } .auth-banner-content > p { opacity: 0.85; font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--spacing-lg); } /* Estadísticas en el banner */ .auth-stats { display: flex; justify-content: center; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .auth-stat { text-align: center; } .auth-stat strong { display: block; font-size: 1.4rem; font-weight: 700; } .auth-stat span { font-size: 0.75rem; opacity: 0.8; } /* Caja de testimonio en el banner */ .auth-testimonial { background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); padding: var(--spacing-md); border-left: 3px solid rgba(255, 255, 255, 0.5); text-align: left; } .auth-testimonial p { font-style: italic; font-size: 0.9rem; margin-bottom: var(--spacing-xs); opacity: 0.9; } .auth-testimonial span { font-size: 0.8rem; opacity: 0.7; } /* ---- Panel derecho: formulario ---- */ .auth-form-side { background: var(--color-white); display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); } /* Tarjeta del formulario */ .auth-card { width: 100%; max-width: 420px; } .auth-card-header { margin-bottom: var(--spacing-md); } .auth-title { font-size: 1.8rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 6px; } .auth-subtitle { color: var(--color-gray); font-size: 0.9rem; } /* ---- Pestañas del formulario ---- */ .auth-tabs { display: flex; background: var(--color-light); border-radius: var(--radius-md); padding: 4px; margin-bottom: var(--spacing-md); gap: 4px; } .auth-tab-btn { flex: 1; padding: 10px; border: none; border-radius: var(--radius-md); font-family: var(--font-main); font-size: 13px; font-weight: 500; color: var(--color-gray); background: transparent; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; } .auth-tab-btn.active { background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-sm); font-weight: 600; } /* ---- Grupos de campos del formulario ---- */ .auth-form { display: flex; flex-direction: column; gap: var(--spacing-md); } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 13px; font-weight: 600; color: var(--color-secondary); display: flex; align-items: center; gap: 6px; } .form-label i { color: var(--color-primary); width: 14px; } /* Contenedor del input (para el botón de mostrar/ocultar) */ .input-wrapper { position: relative; } /* Input base */ .form-input { width: 100%; padding: 12px 16px; border: 2px solid var(--color-gray-light); border-radius: var(--radius-md); font-family: var(--font-main); font-size: 14px; color: var(--color-dark); background: var(--color-white); transition: var(--transition); outline: none; } .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1); /* box-shadow con 0 spread y gran blur crea un "halo" de color alrededor del input al hacer focus. Es un patrón visual muy común para indicar que el campo está activo. */ } /* Input con error */ .form-input.error { border-color: var(--color-danger); } .form-input.error:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); } /* Input con campo de acción (ojo para contraseña) */ .input-with-action .form-input { padding-right: 48px; /* Espacio para el botón del ojo */ } /* Botón dentro del input (mostrar contraseña) */ .input-action-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-gray); cursor: pointer; padding: 4px; font-size: 16px; transition: var(--transition); } .input-action-btn:hover { color: var(--color-primary); } /* Mensaje de error por campo */ .form-error { font-size: 12px; color: var(--color-danger); display: flex; align-items: center; gap: 4px; min-height: 16px; /* Reserva espacio para evitar saltos */ } /* Fila de checkbox + link */ .form-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs); } /* Checkbox personalizado */ .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-gray); cursor: pointer; user-select: none; /* Evita seleccionar el texto al hacer doble click */ } /* Ocultar el checkbox nativo */ .checkbox-label input[type="checkbox"] { display: none; } /* Checkbox visual personalizado */ .checkbox-custom { width: 18px; height: 18px; border: 2px solid var(--color-gray-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; } /* Cuando el checkbox está marcado, el ::after crea la palomita */ .checkbox-label input:checked + .checkbox-custom { background: var(--color-primary); border-color: var(--color-primary); } .checkbox-label input:checked + .checkbox-custom::after { content: ''; width: 5px; height: 9px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); } /* Link dentro del formulario */ .form-link { font-size: 13px; color: var(--color-primary); font-weight: 500; } .form-link:hover { color: var(--color-primary-dark); text-decoration: underline; } .font-semibold { font-weight: 600; } /* Botón de envío con estado de carga */ .auth-submit { margin-top: var(--spacing-xs); position: relative; } /* Alertas de éxito/error del formulario */ .form-alert { padding: 12px 16px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; font-size: 14px; } .form-alert-error { background: rgba(231, 76, 60, 0.1); color: var(--color-danger); border: 1px solid rgba(231, 76, 60, 0.2); } .form-alert-success { background: rgba(39, 174, 96, 0.1); color: var(--color-success); border: 1px solid rgba(39, 174, 96, 0.2); } /* ---- Separador "o continúa con" ---- */ .auth-divider { display: flex; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-md) 0; color: var(--color-gray); font-size: 13px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-light); /* flex: 1 hace que las líneas ocupen todo el espacio disponible, empujando el texto al centro. Es una técnica común para crear separadores con texto en el medio. */ } /* ---- Botones de login social ---- */ .social-auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: var(--radius-md); font-family: var(--font-main); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); border: 2px solid var(--color-gray-light); background: var(--color-white); } .btn-social:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-google { color: #DB4437; } .btn-google:hover { border-color: #DB4437; background: rgba(219, 68, 55, 0.05); } .btn-facebook { color: #1877F2; } .btn-facebook:hover { border-color: #1877F2; background: rgba(24, 119, 242, 0.05); } /* Texto al pie de la tarjeta de auth */ .auth-footer-text { text-align: center; font-size: 14px; color: var(--color-gray); } /* ---- Footer mínimo ---- */ .footer-minimal { background: var(--color-white); border-top: 1px solid var(--color-gray-light); padding: var(--spacing-md); text-align: center; font-size: 13px; color: var(--color-gray); } .footer-minimal a { color: var(--color-gray); transition: var(--transition); } .footer-minimal a:hover { color: var(--color-primary); } /* ============================================ REGISTRO: ESTILOS ADICIONALES ============================================ */ /* Contenedor más ancho para el formulario de registro */ .auth-container-wide { max-width: 1060px; } /* Panel de formulario con scroll cuando es largo */ .auth-form-scrollable { overflow-y: auto; max-height: 85vh; align-items: flex-start; padding: var(--spacing-lg) var(--spacing-lg); } /* Contenedor de campos extra (acompañante) */ .register-extra-fields { display: flex; flex-direction: column; gap: var(--spacing-md); } /* Lista de beneficios del banner */ .auth-benefits { text-align: left; margin-bottom: var(--spacing-lg); } .auth-benefits li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 0.9rem; opacity: 0.9; } .auth-benefits li i { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* Grid de checkboxes (categorías) */ .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Select estilizado */ .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } /* Textarea */ .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; } /* Hint de caracteres */ .form-hint { font-size: 12px; color: var(--color-gray); text-align: right; } /* Indicador de fuerza de contraseña */ .password-strength { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .strength-bars { display: flex; gap: 4px; flex: 1; } .strength-bar { height: 4px; flex: 1; border-radius: 2px; background: var(--color-gray-light); transition: var(--transition); } /* Colores según nivel de fuerza */ .strength-bar.weak { background: var(--color-danger); } .strength-bar.medium { background: var(--color-warning); } .strength-bar.strong { background: var(--color-success); } .strength-text { font-size: 11px; font-weight: 500; min-width: 48px; text-align: right; } /* ============================================ RESPONSIVE: AUTH PAGES ============================================ */ /* Tablets: ocultar el banner, mostrar solo formulario */ @media (max-width: 768px) { .auth-container { grid-template-columns: 1fr; max-width: 480px; min-height: auto; box-shadow: none; } .auth-banner { display: none; /* En móvil ocultamos el panel decorativo para no desperdiciar espacio vertical. */ } .auth-main { padding: 90px var(--spacing-md) var(--spacing-md); align-items: flex-start; } .auth-form-side { padding: var(--spacing-lg) var(--spacing-md); } .auth-nav-text { display: none; /* Ocultar el texto "¿No tienes cuenta?" en móvil */ } } /* ============================================ RESPONSIVE DESIGN (Diseño Adaptable) ============================================ @media son "consultas de medios". Permiten aplicar estilos DIFERENTES según el tamaño de la pantalla. max-width: 768px = "si la pantalla es de 768px o menos" Breakpoints comunes: - 1200px: pantallas grandes - 992px: tablets horizontales - 768px: tablets verticales - 576px: celulares */ /* TABLETS */ @media (max-width: 992px) { .stats-grid, .steps-grid, .pricing-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); /* De 3-4 columnas pasamos a 2 */ } .anuncios-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .hero-title { font-size: 2.5rem; } } /* CELULARES */ @media (max-width: 768px) { /* Mostrar hamburguesa, ocultar navegación normal */ .nav-links, .nav-buttons { display: none; } .hamburger { display: flex; } /* Menú mobile (se despliega al clickear hamburguesa) */ .nav-links.active { display: flex; flex-direction: column; /* Se apila verticalmente */ position: absolute; top: 100%; /* Justo debajo de la barra */ left: 0; width: 100%; background-color: var(--color-white); padding: var(--spacing-md); box-shadow: var(--shadow-md); gap: 0; } .nav-links.active a { color: var(--color-secondary) !important; padding: 12px 0; } .nav-links.active a::after { display: none; /* Oculta la línea decorativa en menú móvil */ } .nav-buttons.active { display: flex; position: absolute; top: calc(100% + 200px); left: 0; width: 100%; padding: var(--spacing-md); background-color: var(--color-white); justify-content: center; } .stats-grid, .steps-grid, .pricing-grid, .testimonials-grid { grid-template-columns: 1fr; } .anuncios-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .search-form { flex-direction: column; /* Campos del buscador apilados */ } .pricing-card.popular { transform: scale(1); /* Sin escala extra en mobile */ } .tabs { flex-direction: column; align-items: center; } } /* ===================================================== ESTILOS PARA ANUNCIOS.HTML ===================================================== */ /* ------------------------------------------------------- MINI BANNER DE PÁGINA Aparece justo debajo del navbar con título y breadcrumb ------------------------------------------------------- */ .page-banner { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%); padding: 0.55rem 0; margin-top: 80px; color: var(--color-white); } .page-banner .container { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .page-banner h1 { font-size: 0.9rem; font-weight: 600; margin: 0; white-space: nowrap; } /* Subtítulo descriptivo — oculto para mantener franja compacta */ .page-banner > .container > p, .page-banner p.page-banner-subtitle { display: none; } /* Ruta de navegación: Inicio > Anuncios */ .breadcrumb { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); margin-left: auto; } .breadcrumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .breadcrumb a:hover { color: #fff; text-decoration: underline; } .breadcrumb span { color: rgba(255, 255, 255, 0.75); } .breadcrumb span { color: var(--color-white); } /* ------------------------------------------------------- LAYOUT PRINCIPAL: SIDEBAR + CONTENIDO Flexbox: sidebar fija izquierda + área derecha flexible ------------------------------------------------------- */ .anuncios-page { padding: var(--spacing-lg) 0; background-color: var(--color-light); } .anuncios-page .container { display: flex; gap: var(--spacing-md); align-items: flex-start; } /* ------------------------------------------------------- SIDEBAR DE FILTROS (columna izquierda) ------------------------------------------------------- */ .filtros-sidebar { width: 280px; flex-shrink: 0; /* No se encoge */ background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); position: sticky; /* Se queda pegado al hacer scroll */ top: 100px; } .filtros-sidebar h3 { font-size: 1.1rem; color: var(--color-secondary); margin-bottom: var(--spacing-md); padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); display: flex; align-items: center; gap: 8px; } /* Cada grupo de filtros (Categoría, Ciudad, etc.) */ .filtro-grupo { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-gray-light); } .filtro-grupo:last-child { border-bottom: none; margin-bottom: 0; } .filtro-grupo h4 { font-size: 0.9rem; font-weight: 600; color: var(--color-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } /* Lista de opciones dentro de cada filtro */ .filtro-opciones { display: flex; flex-direction: column; gap: 8px; } .filtro-opcion { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; color: var(--color-gray); transition: var(--transition); } .filtro-opcion:hover { color: var(--color-primary); } .filtro-opcion input[type="checkbox"], .filtro-opcion input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; } /* Select de ciudad */ .filtro-select { width: 100%; padding: 8px 12px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 0.9rem; color: var(--color-secondary); background-color: var(--color-white); cursor: pointer; transition: var(--transition); } .filtro-select:focus { outline: none; border-color: var(--color-primary); } /* Botón Cerca de mí */ .geo-filtro { margin-top: 10px; } .btn-geo { width: 100%; padding: 9px 14px; background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 0.88rem; color: var(--color-secondary); cursor: pointer; text-align: left; transition: background .15s, border-color .15s, color .15s; } .btn-geo:hover { background: #f3f4f6; border-color: var(--color-primary); color: var(--color-primary); } .btn-geo.activo { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-geo:disabled { opacity: .6; cursor: not-allowed; } /* Input de búsqueda por texto */ .filtro-busqueda { width: 100%; padding: 10px 12px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 0.9rem; color: var(--color-secondary); box-sizing: border-box; transition: var(--transition); } .filtro-busqueda:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1); } /* Slider de precio */ .precio-range { width: 100%; accent-color: var(--color-primary); cursor: pointer; margin: 5px 0; } .precio-valor { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--color-gray); margin-top: 5px; } .precio-valor strong { color: var(--color-primary); font-weight: 700; } /* Opciones de valoración por estrellas */ .filtro-estrellas { display: flex; gap: 5px; flex-wrap: wrap; } .estrella-opcion { padding: 4px 10px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; transition: var(--transition); color: var(--color-gray); } .estrella-opcion:hover, .estrella-opcion.activa { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* Botón limpiar filtros */ .btn-limpiar { width: 100%; padding: 10px; background: transparent; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); color: var(--color-gray); font-family: var(--font-main); font-size: 0.9rem; cursor: pointer; transition: var(--transition); margin-top: var(--spacing-sm); display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-limpiar:hover { border-color: var(--color-danger); color: var(--color-danger); } /* ------------------------------------------------------- ÁREA DE CONTENIDO (columna derecha) ------------------------------------------------------- */ .anuncios-content { flex: 1; min-width: 0; } /* Barra: "X resultados | Ordenar por:" */ .resultados-header { display: flex; justify-content: space-between; align-items: center; background: var(--color-white); padding: 15px var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: 10px; } .resultados-contador { font-size: 0.95rem; color: var(--color-gray); } .resultados-contador strong { color: var(--color-secondary); font-size: 1.1rem; } .ordenar-select { padding: 8px 12px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 0.9rem; color: var(--color-secondary); background-color: var(--color-white); cursor: pointer; transition: var(--transition); } .ordenar-select:focus { outline: none; border-color: var(--color-primary); } /* Grid de tarjetas dentro del área de contenido */ .anuncios-content .anuncios-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--spacing-md); } /* Mensaje cuando no hay resultados */ .no-resultados { background: var(--color-white); border-radius: var(--radius-md); padding: 60px var(--spacing-md); text-align: center; box-shadow: var(--shadow-sm); display: none; /* JavaScript lo muestra cuando hace falta */ } .no-resultados i { font-size: 3rem; color: var(--color-gray-light); margin-bottom: var(--spacing-md); display: block; } .no-resultados h3 { color: var(--color-secondary); margin-bottom: 10px; } .no-resultados p { color: var(--color-gray); margin-bottom: var(--spacing-md); } /* ------------------------------------------------------- PAGINACIÓN: botones < 1 2 3 > ------------------------------------------------------- */ .paginacion { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--spacing-md); flex-wrap: wrap; } .pagina-btn { width: 40px; height: 40px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-secondary); font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .pagina-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Página actualmente seleccionada */ .pagina-btn.activa { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .pagina-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Botón "Mostrar filtros" solo visible en móvil */ .btn-filtros-movil { display: none; width: 100%; padding: 12px; background: var(--color-secondary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-family: var(--font-main); font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: var(--spacing-md); align-items: center; justify-content: center; gap: 8px; transition: var(--transition); } .btn-filtros-movil:hover { background: var(--color-primary); } /* ------------------------------------------------------- RESPONSIVE PARA ANUNCIOS.HTML ------------------------------------------------------- */ /* Tablets (hasta 1024px) */ @media (max-width: 1024px) { .anuncios-content .anuncios-grid { grid-template-columns: repeat(2, 1fr); } .filtros-sidebar { width: 240px; } } /* Celulares (hasta 768px) */ @media (max-width: 768px) { .anuncios-page .container { flex-direction: column; } .filtros-sidebar { width: 100%; position: static; display: none; /* Oculto por defecto en móvil */ } .filtros-sidebar.visible { display: block; /* Se muestra al hacer clic en el botón */ } .btn-filtros-movil { display: flex; } .anuncios-content .anuncios-grid { grid-template-columns: 1fr; } .resultados-header { flex-direction: column; align-items: flex-start; } } /* ============================================ BOTÓN WHATSAPP ============================================ */ .btn-whatsapp { background-color: #25d366; color: #ffffff; border: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s ease, transform 0.1s ease; } .btn-whatsapp:hover { background-color: #1ebe5d; color: #ffffff; transform: translateY(-1px); } .btn-whatsapp i { font-size: 1rem; } .btn-telegram { background-color: #229ed9; color: #ffffff; border: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s ease, transform 0.1s ease; } .btn-telegram:hover { background-color: #1a8bbf; color: #ffffff; transform: translateY(-1px); } .btn-telegram i { font-size: 1rem; } /* Dos botones en el pie de tarjeta */ .anuncio-btns { display: flex; gap: 6px; align-items: center; } /* ============================================ PÁGINA DETALLE DE ANUNCIO ============================================ */ .detalle-page { padding: 60px 0 80px; background: var(--color-bg); min-height: 60vh; } .detalle-error { text-align: center; padding: 80px 20px; color: var(--color-text-light); } .detalle-error i { font-size: 3rem; color: var(--color-primary); margin-bottom: 16px; display: block; } .detalle-error h2 { margin-bottom: 10px; } .detalle-error p { margin-bottom: 24px; } /* Grid superior: foto + info */ .perfil-hero-grid { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; margin-bottom: 40px; } .perfil-foto-wrap { position: relative; } .perfil-foto-grande { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 3/4; box-shadow: 0 8px 30px rgba(0,0,0,0.12); } /* Galería de miniaturas en la página de detalle */ .perfil-fotos-miniaturas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .perfil-miniatura { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: opacity 0.15s, border-color 0.15s; } .perfil-miniatura:hover { opacity: 1; } .perfil-miniatura.activa { border-color: var(--color-primary, #8b5cf6); opacity: 1; } .perfil-foto-wrap .anuncio-badge { position: absolute; top: 14px; left: 14px; font-size: 0.8rem; padding: 4px 12px; border-radius: 20px; } .perfil-info-principal { display: flex; flex-direction: column; gap: 18px; } .perfil-nombre-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .perfil-nombre-row h1 { font-size: 2rem; color: var(--color-secondary); margin: 0; } .perfil-verificado-badge { display: inline-flex; align-items: center; gap: 5px; background: #e8f5e9; color: #2e7d32; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; } .perfil-ciudad { color: var(--color-text-light); font-size: 1rem; display: flex; align-items: center; gap: 6px; margin: 0; } .perfil-ciudad i { color: var(--color-primary); } .perfil-rating-row { display: flex; align-items: center; gap: 8px; } .estrellas-grandes i { color: #f59e0b; font-size: 1.1rem; } .perfil-rating-row strong { font-size: 1.1rem; color: var(--color-secondary); } .rating-resenas { color: var(--color-text-light); font-size: 0.9rem; } .perfil-precio-box { display: flex; flex-direction: column; gap: 2px; } .precio-label { font-size: 0.8rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; } .precio-grande { font-size: 2rem; font-weight: 700; color: var(--color-primary); } .perfil-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* Grid inferior: descripción + sidebar */ .perfil-detalle-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; } .perfil-descripcion-card, .perfil-sidebar-card { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); } .perfil-descripcion-card h2 { font-size: 1.2rem; color: var(--color-secondary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .perfil-descripcion-card h2 i { color: var(--color-primary); } .perfil-descripcion-card p { line-height: 1.8; color: var(--color-text); font-size: 1rem; } .perfil-info-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .perfil-info-item:last-of-type { border-bottom: none; } .perfil-info-item > i { font-size: 1.1rem; color: var(--color-primary); margin-top: 2px; width: 20px; text-align: center; } .perfil-info-item strong { display: block; font-size: 0.78rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .perfil-info-item p, .perfil-info-item .categorias-lista { margin: 0; color: var(--color-secondary); font-size: 0.95rem; } .categorias-lista { display: flex; flex-wrap: wrap; gap: 6px; } .btn-block { display: block; text-align: center; justify-content: center; margin-top: 20px; } @media (max-width: 900px) { .perfil-hero-grid { grid-template-columns: 1fr; } .perfil-foto-grande { width: 100%; max-width: 100%; display: block; aspect-ratio: 3/4; } .perfil-detalle-grid { grid-template-columns: 1fr; } } /* ============================================ SECCIÓN ACCIÓN: PUBLICAR + BÚSQUEDA Aparece justo debajo del header en index.html ============================================ */ .accion-bar { background: #fff; margin-top: 72px; border-top: 2px solid var(--color-gray-light); border-bottom: 1px solid var(--color-gray-light); padding: 28px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .accion-bar-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .accion-publicar { white-space: nowrap; flex-shrink: 0; } .accion-divider { color: var(--color-gray); font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; } /* El search-form dentro del accion-bar ocupa el resto del espacio */ .accion-bar-inner .search-form { flex: 1; background: transparent; padding: 0; box-shadow: none; border-radius: 0; } /* Separador visual en menú mobile */ .nav-separator { border-top: 1px solid var(--color-gray-light); margin: 6px 0; } /* Botón salir */ .btn-salir { border-color: var(--color-gray-light); color: var(--color-gray); font-size: 0.85rem; } .btn-salir:hover { border-color: var(--color-danger); color: var(--color-danger); background: transparent; } /* En desktop: ocultar separador y los li mobile-only (Regístrate / Iniciar Sesión con icono) */ @media (min-width: 769px) { .nav-separator, .nav-separator ~ li { display: none; } } @media (max-width: 768px) { .accion-bar .search-form { flex-direction: column; } } /* ============================================ MAPA APROXIMADO ============================================ */ .perfil-mapa-section { margin-top: 40px; background: #fff; border-radius: 12px; padding: 28px 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); } .perfil-mapa-titulo { font-size: 1.25rem; font-weight: 600; color: #333; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .perfil-mapa-titulo i { color: var(--primary); } .perfil-mapa-aviso { font-size: 0.85rem; color: #888; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; } .perfil-mapa-aviso i { color: var(--primary); } .perfil-mapa-container { width: 100%; height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; z-index: 0; } .mapa-pin-aprox { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* ============================================ COMENTARIOS ============================================ */ .comentarios-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--color-gray-light); } .comentarios-titulo { font-size: 1.3rem; font-weight: 600; color: var(--color-secondary); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .comentarios-lista { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; } .comentarios-vacio { color: var(--color-gray); font-size: 0.95rem; padding: 16px 0; } .comentario-item { background: var(--color-light); border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); padding: 16px 20px; } .comentario-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .comentario-autor { font-weight: 600; font-size: 0.9rem; color: var(--color-secondary); display: flex; align-items: center; gap: 6px; } .comentario-fecha { font-size: 0.8rem; color: var(--color-gray); } .comentario-texto { font-size: 0.95rem; color: var(--color-dark); line-height: 1.5; } /* Formulario de comentario */ .comentario-form-wrap { background: var(--color-light); border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); padding: 24px; } .comentario-form-wrap h3 { font-size: 1rem; font-weight: 600; color: var(--color-secondary); margin-bottom: 16px; } .comentario-form { display: flex; flex-direction: column; gap: 12px; } .comentario-form input, .comentario-form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 0.9rem; background: #fff; resize: vertical; } .comentario-form input:focus, .comentario-form textarea:focus { outline: none; border-color: var(--color-primary); } .comentario-aviso { margin-top: 12px; font-size: 0.82rem; color: var(--color-gray); display: flex; align-items: center; gap: 6px; } /* Selector de estrellas en formulario de comentario */ .estrellas-selector { display: flex; gap: 4px; margin-top: 4px; } .estrella-seleccionable { font-size: 1.6rem; color: var(--color-gray-light); cursor: pointer; transition: color 0.15s; user-select: none; line-height: 1; } .estrella-seleccionable.activa, .estrella-seleccionable:hover { color: #f59e0b; } /* Moderación en dashboard */ .mod-comentario-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); margin-bottom: 10px; } .mod-comentario-info { flex: 1; } .mod-comentario-meta { font-size: 0.82rem; color: var(--color-gray); margin-bottom: 4px; } .mod-comentario-texto { font-size: 0.93rem; color: var(--color-dark); } .mod-comentario-acciones { display: flex; gap: 8px; flex-shrink: 0; } /* ============================================ PÁGINA DE PLANES ============================================ */ .planes-page { padding: 60px 0 80px; } .planes-subtitulo { text-align: center; color: var(--color-gray); font-size: 1rem; margin-bottom: 48px; line-height: 1.7; } /* Grid de 3 columnas en desktop */ .planes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; margin-bottom: 64px; } /* Tarjeta base */ .plan-card { background: #fff; border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); padding: 32px 28px; position: relative; transition: var(--transition); } .plan-card:hover { box-shadow: var(--shadow-md); } /* Tarjeta destacada (plan Medio) */ .plan-card-destacado { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-8px); } .plan-badge-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 16px; border-radius: 20px; letter-spacing: 0.5px; white-space: nowrap; } /* Header de la tarjeta */ .plan-header { text-align: center; margin-bottom: 24px; } .plan-icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--color-light); border-radius: var(--radius-full); font-size: 1.3rem; color: var(--color-primary); margin-bottom: 12px; } .plan-icono-premium { background: #fff8e1; color: #f59e0b; } .plan-nombre { font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 4px; } .plan-publico { font-size: 0.83rem; color: var(--color-gray); } /* Precio */ .plan-precio-wrap { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-gray-light); } .plan-precio-tachado { font-size: 1.1rem; color: var(--color-gray); text-decoration: line-through; margin-right: 6px; } .plan-descuento-badge { display: inline-block; background: #ef4444; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; vertical-align: middle; letter-spacing: .5px; } .plan-precio { font-size: 2.4rem; font-weight: 700; color: var(--color-secondary); } .plan-periodo { font-size: 0.95rem; color: var(--color-gray); } /* Lista de características */ .plan-features { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; } .plan-features li { font-size: 0.9rem; color: var(--color-dark); display: flex; align-items: center; gap: 10px; } .plan-features li i.fa-check { color: var(--color-success); font-size: 0.8rem; flex-shrink: 0; } .plan-feature-no { color: var(--color-gray) !important; } .plan-feature-no i.fa-times { color: var(--color-gray-light) !important; font-size: 0.8rem; flex-shrink: 0; } /* Botones específicos por plan */ .btn-plan-basico { background: var(--color-light); color: var(--color-secondary); border: 1px solid var(--color-gray-light); } .btn-plan-basico:hover { background: var(--color-gray-light); } .btn-plan-premium { background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a; } .btn-plan-premium:hover { background: #333; } /* Oferta anual (plan Premium) */ .plan-oferta-anual { text-align: center; font-size: 0.8rem; color: var(--color-primary); margin-top: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; } /* FAQ */ .planes-faq { border-top: 1px solid var(--color-gray-light); padding-top: 48px; } .planes-faq h3 { font-size: 1.2rem; font-weight: 600; color: var(--color-secondary); margin-bottom: 28px; text-align: center; } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .faq-item { background: var(--color-light); border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); padding: 20px; } .faq-item strong { display: flex; align-items: center; gap: 8px; font-size: 0.93rem; color: var(--color-secondary); margin-bottom: 8px; } .faq-item strong i { color: var(--color-primary); } .faq-item p { font-size: 0.87rem; color: var(--color-gray); line-height: 1.6; } /* Responsive planes */ @media (max-width: 900px) { .planes-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .plan-card-destacado { transform: none; } .faq-grid { grid-template-columns: 1fr; } } /* ===================================================================== DASHBOARD — Panel de acompañante ===================================================================== */ /* Reset para body del dashboard (sin navbar fijo) */ .dashboard-body { background: #f5f6fa; min-height: 100vh; } /* Layout sidebar + main */ .dashboard-layout { display: flex; min-height: 100vh; } /* ---- SIDEBAR ---- */ .dashboard-sidebar { width: 260px; min-width: 260px; background: #fff; border-right: 1px solid var(--color-gray-light); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 200; transition: transform 0.3s ease; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--color-gray-light); } .sidebar-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--color-primary); text-decoration: none; } .sidebar-logo i { color: var(--color-primary); } .sidebar-close { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-secondary); padding: 0.2rem; } .sidebar-perfil { display: flex; align-items: center; gap: 0.8rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--color-gray-light); } .sidebar-avatar { font-size: 2.4rem; color: var(--color-primary); line-height: 1; } .sidebar-perfil-info { display: flex; flex-direction: column; gap: 0.2rem; } .sidebar-perfil-info strong { font-size: 0.9rem; color: var(--color-secondary); } .sidebar-plan-badge { font-size: 0.7rem; background: var(--color-primary-light); color: var(--color-primary); border-radius: 20px; padding: 0.1rem 0.6rem; font-weight: 600; width: fit-content; } .sidebar-nav { display: flex; flex-direction: column; padding: 1rem 0; flex: 1; } .sidebar-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.4rem; color: #666; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background 0.15s, color 0.15s; position: relative; } .sidebar-nav-item:hover { background: #f5f6fa; color: var(--color-primary); } .sidebar-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; } .sidebar-nav-item i { width: 18px; text-align: center; } .sidebar-salir { color: #e74c3c; margin-top: auto; } .sidebar-salir:hover { background: #fdf0ef; color: #c0392b; } .sidebar-divider { height: 1px; background: var(--color-gray-light); margin: 0.5rem 1rem; } .sidebar-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 50%; width: 18px; height: 18px; margin-left: auto; } /* Overlay mobile */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 299; } .sidebar-overlay.active { display: block; } /* ---- MAIN ---- */ .dashboard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- TOPBAR ---- */ .dashboard-topbar { background: #fff; border-bottom: 1px solid var(--color-gray-light); display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.5rem; position: sticky; top: 0; z-index: 100; } .topbar-menu-btn { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--color-secondary); padding: 0.2rem; } .topbar-title { font-size: 1.1rem; font-weight: 600; color: var(--color-secondary); flex: 1; margin: 0; } /* ---- SECCIONES ---- */ .dash-section { display: none; padding: 2rem 1.5rem; animation: fadeIn 0.25s ease; } .dash-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- WELCOME ---- */ .dash-welcome { margin-bottom: 1.8rem; } .dash-welcome h1 { font-size: 1.5rem; color: var(--color-secondary); margin-bottom: 0.3rem; } .dash-welcome p { color: #777; font-size: 0.9rem; } /* ---- STATS GRID ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .stat-icon-primary { background: var(--color-primary-light); color: var(--color-primary); } .stat-icon-green { background: #e8f8f0; color: #27ae60; } .stat-icon-blue { background: #e8f4fd; color: #2980b9; } .stat-icon-orange { background: #fef3e2; color: #e67e22; } .stat-valor { font-size: 1.6rem; font-weight: 700; color: var(--color-secondary); line-height: 1; display: block; } .stat-label { font-size: 0.75rem; color: #888; display: block; margin-top: 0.2rem; } /* ---- ACCIONES RÁPIDAS ---- */ .dash-quick-actions h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--color-secondary); } .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.8rem; } .quick-action-btn { background: #fff; border: 1px solid var(--color-gray-light); border-radius: 10px; padding: 1.1rem 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--color-secondary); font-weight: 500; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font-main); } .quick-action-btn i { font-size: 1.4rem; color: var(--color-primary); } .quick-action-btn:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(231,76,96,0.12); } /* ---- SECCIÓN HEADER ---- */ .dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .dash-section-header h2 { font-size: 1.15rem; color: var(--color-secondary); margin: 0; } .dash-section-desc { color: #777; font-size: 0.875rem; margin-bottom: 1.2rem; } /* ---- EMPTY STATE ---- */ .dash-empty { text-align: center; padding: 3rem 1rem; color: #777; background: #fff; border-radius: 12px; } .dash-empty i { font-size: 2.5rem; margin-bottom: 0.8rem; color: #bbb; display: block; } .dash-empty h3 { color: #888; margin-bottom: 0.5rem; } .dash-empty p { margin-bottom: 1.2rem; } /* ---- ANUNCIOS CARDS GRID ---- */ .anuncios-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .anuncio-dash-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; flex-direction: column; } .adc-imagen { height: 160px; overflow: hidden; background: #f0f0f0; } .adc-imagen img { width: 100%; height: 100%; object-fit: cover; } .adc-info { padding: 0.9rem 1rem; flex: 1; } .adc-info h4 { font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--color-secondary); } .adc-ciudad, .adc-precio, .adc-fecha, .adc-vistas { font-size: 0.8rem; color: #888; margin: 0.15rem 0; } .adc-vistas { color: #64748b; } .adc-vistas i { margin-right: 3px; } .adc-precio { color: var(--color-primary); font-weight: 600; } .adc-acciones { padding: 0.7rem 1rem; display: flex; gap: 0.5rem; border-top: 1px solid #f0f0f0; } /* ---- AVISO LÍMITE ---- */ .aviso-limite { display: flex; align-items: center; gap: 0.6rem; background: #fef9e7; border: 1px solid #f9c74f; border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.85rem; color: #7d6608; margin-bottom: 1rem; } .aviso-limite a { color: var(--color-primary); font-weight: 600; text-decoration: underline; } /* ---- COMENTARIOS MODERACIÓN ---- */ .comentarios-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--color-gray-light); padding-bottom: 0; } .com-tab { padding: 0.55rem 1.2rem; border: none; background: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; font-family: var(--font-main); } .com-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab-count { display: inline-flex; align-items: center; justify-content: center; background: #eee; border-radius: 20px; padding: 0.1rem 0.5rem; font-size: 0.7rem; margin-left: 0.3rem; } .com-tab.active .tab-count { background: var(--color-primary-light); color: var(--color-primary); } .comentarios-dash-lista { display: flex; flex-direction: column; gap: 0.8rem; } .comentario-mod-card { background: #fff; border-radius: 10px; padding: 1rem 1.2rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .com-mod-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: #888; margin-bottom: 0.6rem; } .com-mod-autor { color: var(--color-secondary); font-weight: 600; } .com-mod-texto { font-size: 0.9rem; color: #444; margin-bottom: 0.8rem; line-height: 1.5; } .com-mod-acciones { display: flex; gap: 0.5rem; } /* ---- SUSCRIPCIÓN ---- */ .suscripcion-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .sus-plan-actual { display: flex; align-items: center; gap: 1rem; } .sus-icono { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .sus-icono-ninguno { background: #f0f0f0; color: #aaa; } .sus-icono-basico { background: #f0f0f0; color: #666; } .sus-icono-medio { background: var(--color-primary-light); color: var(--color-primary); } .sus-icono-premium { background: #fef3cd; color: #c9a227; } .sus-info h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--color-secondary); } .sus-badge-pendiente { display: inline-block; background: #fef3cd; color: #c9a227; font-size: 0.7rem; font-weight: 600; border-radius: 20px; padding: 0.1rem 0.5rem; margin-left: 0.4rem; vertical-align: middle; } .sus-badge-activo { display: inline-block; background: #e8f8f0; color: #27ae60; font-size: 0.7rem; font-weight: 600; border-radius: 20px; padding: 0.1rem 0.5rem; margin-left: 0.4rem; vertical-align: middle; } .sus-info p { font-size: 0.85rem; color: #888; margin: 0; } .planes-comparativa h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--color-secondary); } .planes-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .plan-mini-card { background: #fff; border: 1.5px solid var(--color-gray-light); border-radius: 12px; padding: 1.2rem; position: relative; transition: border-color 0.2s; } .plan-mini-card.plan-mini-destacado { border-color: var(--color-primary); } .plan-mini-card.plan-mini-activo { border-color: #27ae60; background: #f7fff9; } .plan-mini-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 20px; padding: 0.15rem 0.7rem; white-space: nowrap; } .plan-mini-card h4 { font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--color-secondary); } .plan-mini-precio { font-size: 1.2rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.7rem; } .plan-mini-precio span { font-size: 0.75rem; font-weight: 400; color: #888; } .plan-mini-card ul { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.8rem; color: #666; } .plan-mini-card ul li { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; } .plan-mini-card ul li i { color: #27ae60; font-size: 0.75rem; } /* ---- FORMULARIO DEL DASHBOARD ---- */ .dash-form { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); max-width: 620px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--color-secondary); } .form-group input, .form-group select, .form-group textarea { padding: 0.6rem 0.9rem; border: 1.5px solid var(--color-gray-light); border-radius: 8px; font-size: 0.875rem; font-family: var(--font-main); color: var(--color-secondary); background: #fff; transition: border-color 0.2s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); } .form-group input[readonly] { background: #f5f6fa; color: #777; cursor: not-allowed; } .form-hint { font-size: 0.75rem; color: #666; font-weight: 400; } .form-mensaje { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; } .form-mensaje-ok { background: #e8f8f0; color: #27ae60; } .form-mensaje-error { background: #fdf0ef; color: #e74c3c; } .input-error { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,.2) !important; } .campo-error-msg { display: block; color: #e74c3c; font-size: .78rem; margin-top: .25rem; } /* Checkboxes de categorías */ .checkboxes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4rem; } .checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: #555; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 15px; height: 15px; border: 1.5px solid var(--color-gray-light); border-radius: 3px; cursor: pointer; accent-color: var(--color-primary); } /* ---- MODALES ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-box { background: #fff; border-radius: 14px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .modal-sm { max-width: 420px; } .modal-lg { max-width: 700px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-gray-light); position: sticky; top: 0; background: #fff; z-index: 1; } .modal-header h3 { font-size: 1rem; margin: 0; color: var(--color-secondary); } .modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #666; padding: 0.4rem; line-height: 1; min-width: 32px; min-height: 32px; } .modal-close:hover { color: var(--color-secondary); } .modal-body { padding: 1.4rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.7rem; padding-top: 1rem; border-top: 1px solid #f0f0f0; margin-top: 0.5rem; } /* ---- BOTONES EXTRA ---- */ .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; min-height: 36px; } .btn-success { background: #27ae60; color: #fff; border: none; } .btn-success:hover { background: #219a52; } .btn-danger { background: #e74c3c; color: #fff; border: none; } .btn-danger:hover { background: #c0392b; } .btn-danger-outline { background: transparent; color: #e74c3c; border: 1.5px solid #e74c3c; } .btn-danger-outline:hover { background: #fdf0ef; } /* ---- TOAST ---- */ .dash-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(30px); background: var(--color-secondary); color: #fff; padding: 0.75rem 1.5rem; border-radius: 30px; font-size: 0.875rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 1000; pointer-events: none; white-space: nowrap; } .dash-toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- RESPONSIVE DASHBOARD ---- */ @media (max-width: 768px) { .dashboard-sidebar { position: fixed; left: 0; top: 0; height: 100%; transform: translateX(-100%); z-index: 300; } .dashboard-sidebar.open { transform: translateX(0); } .sidebar-close { display: block; } .topbar-menu-btn { display: block; } .stats-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .suscripcion-card { flex-direction: column; align-items: flex-start; } .anuncios-cards-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .planes-mini-grid { grid-template-columns: 1fr; } } /* ---- BOTÓN FAVORITO EN DETALLE ---- */ .btn-favorito-detalle i { color: var(--color-primary); } .btn-favorito-activo { background: var(--color-primary-light) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* ---- RESPUESTA DEL ACOMPAÑANTE (en detalle-anuncio) ---- */ .comentario-respuesta { background: #f8f4ff; border-left: 3px solid #a29bfe; border-radius: 0 8px 8px 0; padding: 0.7rem 1rem; margin-top: 0.6rem; } .respuesta-label { display: block; font-size: 0.72rem; font-weight: 700; color: #6c5ce7; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; } .comentario-respuesta p { font-size: 0.875rem; color: #555; margin: 0; line-height: 1.5; } /* ---- RESPUESTA EN EL DASHBOARD DEL ACOMPAÑANTE ---- */ .com-mod-respuesta { background: #f8f4ff; border-left: 3px solid #a29bfe; border-radius: 0 8px 8px 0; padding: 0.6rem 0.9rem; margin: 0.5rem 0; } .com-mod-respuesta p { font-size: 0.85rem; color: #555; margin: 0.25rem 0 0.5rem; } .com-original-texto { font-size: 0.875rem; color: #666; font-style: italic; background: #f5f6fa; border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1rem; border-left: 3px solid var(--color-gray-light); } /* ---- DEMO CREDENTIALS (login rápido) ---- */ .demo-credentials { background: #f5f6fa; border: 1.5px dashed #d0d3db; border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1.2rem; } .demo-titulo { font-size: 0.78rem; color: #888; margin: 0 0 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .demo-btns { display: flex; gap: 0.6rem; } .demo-btn { flex: 1; padding: 0.5rem 0.8rem; background: #fff; border: 1.5px solid var(--color-gray-light); border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--color-secondary); cursor: pointer; font-family: var(--font-main); display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: border-color 0.15s, background 0.15s; } .demo-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); } /* ===================================================================== DASHBOARD CLIENTE — Estilos específicos ===================================================================== */ /* Badge color cliente */ .sidebar-badge-cliente { background: #fde8f0; color: var(--color-primary); } .sidebar-avatar-cliente i { color: var(--color-primary); } .stat-icon-red { background: #fde8f0; color: var(--color-primary); } /* ---- PREVIEW FAVORITAS (sección resumen) ---- */ .preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; } .preview-header h3 { font-size: 1rem; color: var(--color-secondary); margin: 0; } .btn-link { background: none; border: none; color: var(--color-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0; font-family: var(--font-main); text-decoration: underline; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; } .preview-card { background: #fff; border-radius: 10px; overflow: hidden; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .preview-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .preview-card-info { flex: 1; min-width: 0; } .preview-card-info strong { display: block; font-size: 0.85rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-card-info span { font-size: 0.75rem; color: #888; } /* ---- FAVORITAS TOOLBAR ---- */ .fav-toolbar { display: flex; gap: 0.7rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .fav-search-input { flex: 1; min-width: 160px; padding: 0.55rem 0.9rem; border: 1.5px solid var(--color-gray-light); border-radius: 8px; font-size: 0.875rem; font-family: var(--font-main); outline: none; transition: border-color 0.2s; } .fav-search-input:focus { border-color: var(--color-primary); } .fav-filter-select { padding: 0.55rem 0.9rem; border: 1.5px solid var(--color-gray-light); border-radius: 8px; font-size: 0.875rem; font-family: var(--font-main); background: #fff; color: var(--color-secondary); cursor: pointer; outline: none; } /* ---- FAVORITAS GRID ---- */ .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .fav-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.07); display: flex; flex-direction: column; transition: box-shadow 0.2s; } .fav-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); } .fav-card-img { position: relative; height: 180px; overflow: hidden; background: #f0f0f0; } .fav-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .fav-card:hover .fav-card-img img { transform: scale(1.04); } .fav-verificado { position: absolute; top: 8px; right: 8px; background: #27ae60; color: #fff; font-size: 0.75rem; border-radius: 20px; padding: 0.15rem 0.5rem; } .fav-card-body { padding: 0.9rem 1rem 0.4rem; flex: 1; } .fav-card-body h4 { font-size: 0.95rem; color: var(--color-secondary); margin-bottom: 0.3rem; } .fav-ciudad { font-size: 0.78rem; color: #888; margin-bottom: 0.2rem; } .fav-precio { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; } .fav-card-footer { padding: 0.7rem 1rem; display: flex; gap: 0.5rem; border-top: 1px solid #f0f0f0; } .fav-card-footer .btn-outline { flex: 1; } /* ---- HISTORIAL ---- */ .historial-lista { display: flex; flex-direction: column; gap: 0.6rem; } .historial-item { background: #fff; border-radius: 10px; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .historial-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #f0f0f0; } .historial-foto img { width: 100%; height: 100%; object-fit: cover; } .historial-info { flex: 1; min-width: 0; } .historial-info strong { display: block; font-size: 0.9rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .historial-ciudad { font-size: 0.75rem; color: #888; } .historial-fecha { text-align: right; flex-shrink: 0; font-size: 0.78rem; color: #999; display: flex; flex-direction: column; align-items: flex-end; } .historial-hora { font-size: 0.7rem; color: #777; } .historial-acciones { display: flex; gap: 0.4rem; flex-shrink: 0; } .btn-fav-activo { background: var(--color-primary-light); color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-fav-activo:hover { background: #fde8f0; } /* ---- MIS COMENTARIOS ---- */ .mis-comentarios-lista { display: flex; flex-direction: column; gap: 1rem; } .mi-comentario-card { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .mcom-perfil { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .mcom-perfil img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f0f0f0; } .mcom-perfil strong { display: block; font-size: 0.9rem; color: var(--color-secondary); } .mcom-ver-perfil { font-size: 0.75rem; color: var(--color-primary); text-decoration: none; } .mcom-ver-perfil:hover { text-decoration: underline; } .mcom-texto { font-size: 0.875rem; color: #444; line-height: 1.55; margin-bottom: 0.8rem; } .mcom-footer { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .mcom-fecha { font-size: 0.75rem; color: #999; flex: 1; } .com-estado { font-size: 0.72rem; font-weight: 600; border-radius: 20px; padding: 0.15rem 0.6rem; } .com-aprobado { background: #e8f8f0; color: #27ae60; } .com-pendiente { background: #fef9e7; color: #c9a227; } .mcom-acciones { display: flex; gap: 0.4rem; } /* ---- RESPONSIVE CLIENTE ---- */ @media (max-width: 600px) { .fav-grid { grid-template-columns: 1fr 1fr; } .historial-fecha { display: none; } .preview-grid { grid-template-columns: 1fr; } } @media (max-width: 400px) { .fav-grid { grid-template-columns: 1fr; } } /* ============================================= MULTI-FOTO GRID — subida y reordenación de fotos ============================================= */ .fotos-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; } /* Cada slot (foto existente o botón añadir) */ .foto-slot { position: relative; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 2px solid var(--color-border, #d1d5db); background: var(--color-bg-subtle, #f9fafb); cursor: grab; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s; flex-shrink: 0; } .foto-slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .foto-slot.dragging { opacity: 0.4; cursor: grabbing; } .foto-slot.drag-over { border-color: var(--color-primary, #8b5cf6); box-shadow: 0 0 0 3px rgba(139,92,246,0.25); } /* Badge "Principal" en la primera foto */ .foto-badge-principal { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(139,92,246,0.82); color: #fff; font-size: .65rem; font-weight: 600; text-align: center; padding: 3px 0; letter-spacing: .4px; text-transform: uppercase; } /* Botón × para quitar una foto */ .foto-quitar { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: .75rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 2; } .foto-quitar:hover { background: rgba(220,38,38,0.85); } /* Slot de añadir fotos */ .foto-slot-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border-style: dashed; color: var(--color-text-muted, #9ca3af); text-align: center; padding: 8px; transition: border-color 0.2s, background 0.2s, color 0.2s; } .foto-slot-add span { font-size: .78rem; font-weight: 500; } .foto-slot-add small { font-size: .72rem; line-height: 1.2; } .foto-slot-add:hover, .foto-slot-add.drag-over { border-color: var(--color-primary, #8b5cf6); background: rgba(139,92,246,0.04); color: var(--color-primary, #8b5cf6); } /* ── Badges de moderación en dashboard de acompañante ── */ .mod-estado { display:inline-block; padding:2px 10px; border-radius:99px; font-size:.72rem; font-weight:600; margin:.25rem 0 .4rem; } .mod-borrador { background:#e0e7ff; color:#3730a3; } .mod-pendiente { background:#fef3c7; color:#92400e; } .mod-aprobado { background:#d1fae5; color:#065f46; } .mod-rechazado { background:#fee2e2; color:#991b1b; } /* ── Avatar upload en perfil ── */ .avatar-upload-row { display:flex; align-items:center; gap:1rem; } .avatar-preview-wrap { width:72px; height:72px; flex-shrink:0; } .avatar-preview { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--color-border,#e5e7eb); } .avatar-placeholder { width:72px; height:72px; border-radius:50%; background:var(--color-surface,#f3f4f6); border:2px solid var(--color-border,#e5e7eb); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted,#9ca3af); font-size:2rem; } /* ── Banner de verificación de email en dashboards ── */ .verificacion-banner { display:flex; align-items:center; gap:.75rem; background:#fffbeb; border-bottom:2px solid #fbbf24; padding:.65rem 1.25rem; font-size:.875rem; color:#92400e; flex-wrap:wrap; } .verificacion-banner i { font-size:1.1rem; flex-shrink:0; } .verificacion-banner span { flex:1; } .btn-reenviar-verif { background:#fbbf24; color:#78350f; border:none; border-radius:.4rem; padding:.3rem .85rem; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; } .btn-reenviar-verif:hover { background:#f59e0b; } /* ── Chips de filtros activos ── */ .filtros-chips { display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem 0; } .filtro-chip { display:inline-flex; align-items:center; gap:.3rem; background:#ede9fe; color:#5b21b6; border-radius:99px; padding:.25rem .75rem; font-size:.78rem; font-weight:500; } .filtro-chip button { background:none; border:none; cursor:pointer; color:#7c3aed; font-size:.9rem; padding:.2rem .3rem; line-height:1; min-width:24px; min-height:24px; } .filtro-chip-clear { background:none; border:1px solid #d1d5db; border-radius:99px; padding:.25rem .75rem; font-size:.78rem; cursor:pointer; color:#6b7280; } .filtro-chip-clear:hover { background:#f3f4f6; } /* ── Inputs de rango (edad/precio mínimo) ── */ .filtro-rango-inputs { display:flex; align-items:center; gap:.4rem; } .filtro-range-input { flex:1; border:1px solid var(--color-border,#e5e7eb); border-radius:.4rem; padding:.35rem .5rem; font-size:.85rem; width:100%; box-sizing:border-box; } .filtro-rango-sep { color:#9ca3af; font-weight:600; } /* ── Mis Comentarios (dashboard cliente) ── */ .mis-comentarios-lista { display:flex; flex-direction:column; gap:1rem; } .mc-item { background:#fff; border:1px solid var(--color-border,#e5e7eb); border-radius:.75rem; padding:1rem 1.25rem; } .mc-anuncio { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; } .mc-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; } .mc-avatar-placeholder { width:44px; height:44px; border-radius:50%; background:#f3f4f6; display:flex; align-items:center; justify-content:center; color:#9ca3af; } .mc-titulo { font-weight:600; font-size:.95rem; color:var(--color-primary,#8b5cf6); text-decoration:none; } .mc-titulo:hover { text-decoration:underline; } .mc-texto { color:#374151; font-size:.9rem; margin:.4rem 0; } .mc-footer { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } .mc-fecha { font-size:.78rem; color:#9ca3af; margin-left:auto; } /* ===================================================================== SKELETON LOADERS ===================================================================== */ @keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 800px 100%; animation: skeleton-shimmer 1.4s infinite linear; border-radius: .5rem; } .skeleton-card { pointer-events: none; } .skeleton-img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-md); } .skeleton-body { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; } .skeleton-line { height: 14px; border-radius: 99px; } .skeleton-line.w-80 { width: 80%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } /* Skeleton para tarjetas de anuncio en anuncios.html */ .anuncio-card.skeleton-card .anuncio-image { background: none; } /* ===================================================================== TOASTS MEJORADOS (con tipos) ===================================================================== */ .dash-toast { display: flex; align-items: center; gap: .6rem; min-width: 220px; max-width: 380px; } .dash-toast.toast-success { background: #059669; } .dash-toast.toast-error { background: #dc2626; } .dash-toast.toast-warning { background: #d97706; } .dash-toast.toast-info { background: #3b82f6; } /* ===================================================================== STATS STRIP — homepage ===================================================================== */ .stats-strip { background: var(--color-primary, #8b5cf6); color: #fff; padding: 1.25rem 0; } .stats-strip-grid { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; } .stats-strip-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .stats-strip-valor { font-size: 1.6rem; font-weight: 700; line-height: 1; } .stats-strip-label { font-size: .8rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; } /* Estrellas en tarjeta de anuncio */ .anuncio-stars { display: flex; align-items: center; gap: .2rem; margin: .2rem 0 .4rem; font-size: .8rem; color: #6b7280; } /* ===================================================================== REPORTES — dashboard admin ===================================================================== */ .reportes-lista { display: flex; flex-direction: column; gap: 1rem; } .reporte-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.25rem; } .reporte-pendiente { border-left: 4px solid #dc2626; } .reporte-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; } .reporte-motivo { font-weight: 600; font-size: .95rem; } .reporte-badge-pend { display: inline-flex; align-items: center; gap: .3rem; background: #fef3c7; color: #92400e; border-radius: 99px; padding: 2px 10px; font-size: .75rem; font-weight: 600; } .reporte-badge-rev { display: inline-flex; align-items: center; gap: .3rem; background: #d1fae5; color: #065f46; border-radius: 99px; padding: 2px 10px; font-size: .75rem; font-weight: 600; } .reporte-anuncio { font-size: .9rem; margin-bottom: .25rem; } .reporte-anuncio a { color: var(--color-primary, #8b5cf6); text-decoration: none; } .reporte-anuncio a:hover { text-decoration: underline; } .reporte-detalle { font-size: .88rem; color: #6b7280; font-style: italic; margin: .25rem 0; } .reporte-footer { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; } .reporte-fecha { font-size: .78rem; color: #9ca3af; } /* ===================================================================== BOTÓN REPORTAR ===================================================================== */ .btn-reportar-link { background: none; border: none; color: #9ca3af; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: 0; transition: color .2s; } .btn-reportar-link:hover { color: #dc2626; } /* ── Valoración 👍 / 👎 en formulario de comentario ── */ .valoracion-selector { display: flex; gap: .6rem; margin-top: .2rem; } .val-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 99px; border: 2px solid var(--color-gray-light); background: #fff; font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .15s; color: var(--color-gray); } .val-btn.val-positivo.activa { border-color: #22c55e; background: #f0fdf4; color: #16a34a; } .val-btn.val-negativo.activa { border-color: #ef4444; background: #fef2f2; color: #dc2626; } /* ── Voto en comentario publicado ── */ .comentario-voto { display: inline-flex; align-items: center; font-size: .85rem; padding: .15rem .5rem; border-radius: 99px; } .comentario-voto.positivo { background: #dcfce7; color: #16a34a; } .comentario-voto.negativo { background: #fee2e2; color: #dc2626; } /* ── Comentario negativo destacado en panel de moderación ── */ .comentario-mod-item.negativo { border-left: 3px solid #ef4444; } .comentario-mod-item.positivo { border-left: 3px solid #22c55e; } /* ── Contador de reseñas en tarjeta ── */ .anuncio-resenas { font-size: .78rem; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: .25rem; } /* Label compacto de sección en homepage */ .index-section-label { font-size: 1rem; font-weight: 600; color: var(--color-secondary); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.4rem; } /* ============================================================ SELECTOR DE CÓDIGO DE PAÍS (WhatsApp) ============================================================ */ .phone-input-group { position: relative; display: flex; align-items: stretch; border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); overflow: visible; background: #fff; } .phone-input-group:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(233,30,99,.1); } /* Botón de bandera */ .phone-flag-btn { display: flex; align-items: center; gap: 5px; padding: 0 10px 0 12px; background: #f8f9fa; border: none; border-right: 1px solid var(--color-gray-light); border-radius: var(--radius-md) 0 0 var(--radius-md); cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--color-secondary); white-space: nowrap; min-height: 44px; transition: background .15s; } .phone-flag-btn:hover { background: #eef0f2; } .phone-flag-btn span:first-child { font-size: 1.2rem; line-height: 1; } .phone-chevron { font-size: .65rem; color: #999; transition: transform .2s; } .phone-chevron.open { transform: rotate(180deg); } /* Input del número */ .phone-number-input { flex: 1; border: none !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; box-shadow: none !important; min-height: 44px; padding: 10px 14px; } .phone-number-input:focus { outline: none; } /* Dropdown con la lista de países */ .phone-country-list { position: absolute; top: calc(100% + 4px); left: 0; width: 280px; background: #fff; border: 1px solid var(--color-gray-light); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 600; overflow: hidden; } .phone-search-input { width: 100%; padding: 9px 12px; border: none; border-bottom: 1px solid var(--color-gray-light); font-size: .85rem; outline: none; box-sizing: border-box; } .phone-countries-scroll { max-height: 220px; overflow-y: auto; } .phone-country-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: .85rem; transition: background .1s; } .phone-country-option:hover { background: #f3f4f6; } .pco-flag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .pco-name { flex: 1; color: var(--color-dark); } .pco-code { color: var(--color-gray); font-size: .8rem; font-weight: 600; } /* Scrollbar del dropdown */ .phone-countries-scroll::-webkit-scrollbar { width: 4px; } .phone-countries-scroll::-webkit-scrollbar-track { background: transparent; } .phone-countries-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; } /* ============================================ MODO OSCURO / CLARO ============================================ */ /* Botón toggle tema */ .theme-toggle { background: none; border: 1.5px solid var(--color-gray-light); border-radius: var(--radius-full); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-secondary); font-size: 1rem; transition: var(--transition); flex-shrink: 0; } .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ── Variables base del modo oscuro ── */ html[data-theme="dark"] { --color-white: #1a1a2e; --color-light: #16213e; --color-dark: #e2e8f0; --color-gray: #94a3b8; --color-gray-light: #2d3748; --color-secondary: #a0aec0; --color-secondary-light: #718096; } /* ── Body ── */ html[data-theme="dark"] body { background-color: #0f0f1a; color: #e2e8f0; } /* ── Header / Navbar ── */ html[data-theme="dark"] .header, html[data-theme="dark"] .header.scrolled, html[data-theme="dark"] .header-solid { background-color: #1a1a2e !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } html[data-theme="dark"] .hamburger span { background-color: #e2e8f0; } html[data-theme="dark"] .nav-links a { color: #cbd5e0; } html[data-theme="dark"] .nav-links a:hover, html[data-theme="dark"] .nav-links a.active { color: var(--color-primary); } html[data-theme="dark"] .theme-toggle { border-color: #2d3748; color: #e2e8f0; } /* ── Inputs y formularios (todos los tipos) ── */ html[data-theme="dark"] .btn-geo { background: #16213e; color: #e2e8f0; border-color: #2d3748; } html[data-theme="dark"] .btn-geo:hover { background: #1e2a4a; } html[data-theme="dark"] .btn-geo.activo { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .form-input, html[data-theme="dark"] .filtro-select, html[data-theme="dark"] .ordenar-select, html[data-theme="dark"] .fav-filter-select { background: #16213e !important; color: #e2e8f0 !important; border-color: #2d3748 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #718096 !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .form-input:focus { border-color: var(--color-primary) !important; background: #1a1a2e !important; } html[data-theme="dark"] input[readonly], html[data-theme="dark"] .form-group input[readonly] { background: #0f0f1a !important; color: #718096 !important; } /* ── Tarjetas de anuncio en búsqueda/resultados ── */ html[data-theme="dark"] .search-form, html[data-theme="dark"] .resultados-header, html[data-theme="dark"] .no-resultados, html[data-theme="dark"] .pagina-btn { background: #1a1a2e; color: #e2e8f0; border-color: #2d3748; } html[data-theme="dark"] .pagina-btn:hover { background: #16213e; } /* ── Filtros ── */ html[data-theme="dark"] .filtros-sidebar { background: #1a1a2e; } html[data-theme="dark"] .filtro-grupo { border-bottom-color: #2d3748; } html[data-theme="dark"] .filtro-chip label { background: #16213e; border-color: #2d3748; color: #cbd5e0; } html[data-theme="dark"] .filtro-chip input:checked + label { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ── Tarjetas generales (pricing, steps, testimonials) ── */ html[data-theme="dark"] .step-card, html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .plan-mini-card, html[data-theme="dark"] .suscripcion-card, html[data-theme="dark"] .preview-card { background: #1a1a2e !important; color: #e2e8f0; border-color: #2d3748; } /* ── Tabs de autenticación y generales ── */ html[data-theme="dark"] .tab-btn { color: #94a3b8; border-bottom-color: #2d3748; background: transparent; } html[data-theme="dark"] .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: transparent; } html[data-theme="dark"] .auth-tab-btn.active { background: #1a1a2e; color: var(--color-primary); } html[data-theme="dark"] .auth-form-side { background: #1a1a2e; } /* ── Modal ── */ html[data-theme="dark"] .modal-box { background: #1a1a2e !important; color: #e2e8f0; } html[data-theme="dark"] .modal-header { border-bottom-color: #2d3748; } html[data-theme="dark"] .modal-footer { border-top-color: #2d3748; } /* ── Dashboard (layout admin/usuario/cliente) ── */ html[data-theme="dark"] .dashboard-body { background: #0f0f1a !important; } html[data-theme="dark"] .dashboard-sidebar { background: #1a1a2e !important; } html[data-theme="dark"] .dashboard-topbar { background: #1a1a2e !important; border-bottom-color: #2d3748; } html[data-theme="dark"] .sidebar-nav-item:hover { background: #16213e !important; } /* También el layout alternativo .dash-* */ html[data-theme="dark"] .dash-sidebar { background: #1a1a2e; border-right-color: #2d3748; } html[data-theme="dark"] .dash-sidebar-link { color: #cbd5e0; } html[data-theme="dark"] .dash-sidebar-link:hover, html[data-theme="dark"] .dash-sidebar-link.active { background: #16213e; color: var(--color-primary); } html[data-theme="dark"] .dash-main { background: #0f0f1a; } html[data-theme="dark"] .dash-card, html[data-theme="dark"] .dash-section { background: #1a1a2e; border-color: #2d3748; } html[data-theme="dark"] .dash-form { background: #1a1a2e !important; } /* Tarjetas del dashboard */ html[data-theme="dark"] .stat-card, html[data-theme="dark"] .anuncio-dash-card, html[data-theme="dark"] .comentario-mod-card, html[data-theme="dark"] .quick-action-btn, html[data-theme="dark"] .dash-empty { background: #1a1a2e !important; color: #e2e8f0; border-color: #2d3748; } html[data-theme="dark"] .com-mod-texto { color: #cbd5e0 !important; } html[data-theme="dark"] .comentario-respuesta p, html[data-theme="dark"] .com-mod-respuesta p { color: #94a3b8 !important; } html[data-theme="dark"] .com-original-texto, html[data-theme="dark"] .com-mod-respuesta { background: #16213e !important; } /* Tarjetas de moderación de comentarios */ html[data-theme="dark"] .mod-comentario-item { background: #1a1a2e !important; border-color: #2d3748; } html[data-theme="dark"] .comentario-form textarea { background: #16213e !important; } /* Perfil de acompañante */ html[data-theme="dark"] .perfil-descripcion-card, html[data-theme="dark"] .perfil-sidebar-card, html[data-theme="dark"] .accion-bar, html[data-theme="dark"] .perfil-mapa-section { background: #1a1a2e !important; color: #e2e8f0; } html[data-theme="dark"] .perfil-mapa-titulo { color: #e2e8f0 !important; } /* ── Página de detalle ── */ html[data-theme="dark"] .detalle-container, html[data-theme="dark"] .detalle-info, html[data-theme="dark"] .detalle-sidebar, html[data-theme="dark"] .comentarios-section { background: #1a1a2e; color: #e2e8f0; } html[data-theme="dark"] .comentario-item { border-bottom-color: #2d3748; } /* ── Sección de planes ── */ html[data-theme="dark"] .plan-icono-premium { background: #2d2010 !important; } /* ── Botones ── */ html[data-theme="dark"] .btn-outline { border-color: #4a5568; color: #e2e8f0; } html[data-theme="dark"] .btn-outline:hover { background: #2d3748; color: #fff; border-color: #4a5568; } html[data-theme="dark"] .btn-social { background: #16213e !important; border-color: #2d3748 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .checkbox-label { color: #cbd5e0 !important; } /* ── Selector de teléfono ── */ html[data-theme="dark"] .phone-flag-btn { background: #16213e; border-color: #2d3748; color: #e2e8f0; } html[data-theme="dark"] .phone-country-list { background: #1a1a2e; border-color: #2d3748; } html[data-theme="dark"] .phone-search-input { background: #16213e; color: #e2e8f0; border-bottom-color: #2d3748; } html[data-theme="dark"] .phone-country-option:hover { background: #16213e; } html[data-theme="dark"] .pco-name { color: #e2e8f0; } /* ── Page header ── */ html[data-theme="dark"] .page-header { background: linear-gradient(135deg, #1a1a2e, #16213e); } /* ── Footer ── */ html[data-theme="dark"] .footer { background-color: #13131f !important; color: rgba(255,255,255,0.5); } html[data-theme="dark"] .footer-col h4 { color: rgba(255,255,255,0.55); } html[data-theme="dark"] .footer-col p, html[data-theme="dark"] .footer-col ul li a { color: rgba(255,255,255,0.35); } html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.06); color: rgba(255,255,255,0.25); } html[data-theme="dark"] .footer-minimal { background: #13131f !important; color: rgba(255,255,255,0.35); } /* ── Transición suave al cambiar tema ── */ body, .header, .modal-box, .filtros-sidebar, .form-input, input, select, textarea, .dash-sidebar, .dash-card, .btn-outline, .phone-flag-btn, .phone-country-list, .stat-card, .anuncio-dash-card, .dashboard-sidebar, .dashboard-topbar, .step-card, .pricing-card, .plan-card { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }