/* ========================================================== ANUNCIOS (VISTA PÚBLICA) — MEJORAS VISUALES Alcance: solo páginas con Objetivo: - Aumentar contraste y legibilidad (tema claro) - Mantener identidad/estructura existente - No afectar otras pantallas ========================================================== */ /* Paleta local (scoped) */ .anuncios-page{ --ap-bg: #f6f8fb; --ap-surface: #ffffff; --ap-text: #0f172a; --ap-muted: #475569; --ap-line: #d8e0ea; --ap-accent: #2563eb; --ap-accent-soft: rgba(37,99,235,.10); --ap-shadow: 0 10px 28px rgba(2,6,23,.08); } /* Fondo general */ .anuncios-page body, body.anuncios-page{ background: var(--ap-bg) !important; color: var(--ap-text) !important; } /* Topnav: más claro y con buen contraste */ body.anuncios-page .topnav{ border-bottom: 1px solid var(--ap-line); background: rgba(255,255,255,.82) !important; backdrop-filter: blur(10px); } body.anuncios-page .topnav .brand span{ color: var(--ap-text); } body.anuncios-page .topnav img{ filter: none; } /* Pills del menú */ body.anuncios-page .topnav a, body.anuncios-page header nav a, body.anuncios-page .nav a{ border-color: rgba(15,23,42,.10) !important; background: rgba(15,23,42,.04) !important; color: var(--ap-text) !important; } body.anuncios-page .topnav a:hover, body.anuncios-page header nav a:hover, body.anuncios-page .nav a:hover{ background: rgba(37,99,235,.08) !important; border-color: rgba(37,99,235,.22) !important; } body.anuncios-page .topnav a.active, body.anuncios-page .topnav a[aria-current="page"], body.anuncios-page header nav a.active, body.anuncios-page header nav a[aria-current="page"]{ background: var(--ap-accent-soft) !important; border-color: rgba(37,99,235,.35) !important; } /* Contenedor */ body.anuncios-page .container{ max-width: 1100px; } /* Cards */ body.anuncios-page .card{ background: var(--ap-surface) !important; border: 1px solid var(--ap-line) !important; box-shadow: var(--ap-shadow) !important; color: var(--ap-text) !important; } /* Textos */ body.anuncios-page .muted{ color: var(--ap-muted) !important; opacity: 1 !important; } body.anuncios-page h1, body.anuncios-page h2, body.anuncios-page h3{ color: var(--ap-text) !important; } /* Título */ body.anuncios-page .anuncios__title{ margin: 10px 0 8px; letter-spacing: -0.02em; } /* Filtro */ body.anuncios-page .anuncios__filtro{ padding: 14px !important; margin: 14px 0 !important; } body.anuncios-page .anuncios__chips{ display:flex; gap:10px; flex-wrap:wrap; } /* Botones secundarios (chips) */ body.anuncios-page .btn-secondary{ padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(15,23,42,.14) !important; background: rgba(15,23,42,.03) !important; color: var(--ap-text) !important; text-decoration: none; font-weight: 750; transition: transform .12s ease, background .12s ease, border-color .12s ease; } body.anuncios-page .btn-secondary:hover{ background: rgba(37,99,235,.08) !important; border-color: rgba(37,99,235,.26) !important; transform: translateY(-1px); } body.anuncios-page .btn-secondary.is-active{ background: var(--ap-accent-soft) !important; border-color: rgba(37,99,235,.40) !important; } /* Grid de anuncios: antes no estaba definido */ body.anuncios-page .grid3{ display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 760px){ body.anuncios-page .grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px){ body.anuncios-page .grid3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Contenido HTML del anuncio */ body.anuncios-page .anuncios__body{ color: var(--ap-text); line-height: 1.55; } body.anuncios-page .anuncios__body a{ color: var(--ap-accent); font-weight: 700; } body.anuncios-page .anuncios__body a:hover{ text-decoration: underline; } body.anuncios-page .anuncios__body ul, body.anuncios-page .anuncios__body ol{ padding-left: 20px; } body.anuncios-page .anuncios__body li{ margin: 4px 0; } body.anuncios-page .anuncios__body code{ background: rgba(2,6,23,.04) !important; border-color: rgba(2,6,23,.10) !important; color: var(--ap-text) !important; } /* Badge (audiencia) */ body.anuncios-page .badge{ border: 1px solid rgba(37,99,235,.25) !important; background: rgba(37,99,235,.10) !important; color: rgba(30,64,175,1) !important; font-weight: 850; } /* Nota de fechas */ body.anuncios-page .smallNote{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(2,6,23,.12); color: var(--ap-muted); font-size: 12px; } /* Slider: suaviza la sensación de "oscuro" sin romper la estética */ body.anuncios-page .heroBanner{ margin-top: 8px; } body.anuncios-page .heroBanner .slider{ border: 1px solid var(--ap-line); box-shadow: var(--ap-shadow); } body.anuncios-page .slide::after{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,6,23,.25)) !important; } /* Footer */ body.anuncios-page .footer{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ap-line); } /* Accesibilidad */ body.anuncios-page .sr-only{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } /* Tools bar */ body.anuncios-page .anuncios__tools{ padding: 14px !important; } body.anuncios-page .toolsRow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; } body.anuncios-page .searchWrap{ display:flex; align-items:center; gap:8px; flex: 1 1 320px; min-width: 240px; border: 1px solid rgba(15,23,42,.14); border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,.75); } body.anuncios-page .input{ appearance:none; border:0 !important; outline:0 !important; background: transparent !important; width:100%; color: var(--ap-text); font-weight: 650; padding: 2px 4px; } body.anuncios-page .input::placeholder{ color: rgba(71,85,105,.85); } body.anuncios-page .btn-ghost{ border: 1px solid rgba(15,23,42,.14); background: rgba(15,23,42,.03); color: var(--ap-text); border-radius: 999px; padding: 6px 10px; cursor:pointer; font-weight: 850; } body.anuncios-page .btn-ghost:hover{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.26); } body.anuncios-page .toolGroup{ display:flex; gap:10px; align-items:center; flex: 0 0 auto; } /* Segmented view toggle */ body.anuncios-page .segmented{ display:flex; border: 1px solid rgba(15,23,42,.14); border-radius: 999px; overflow:hidden; background: rgba(15,23,42,.03); } body.anuncios-page .segBtn{ border:0; background: transparent; padding: 8px 12px; cursor:pointer; font-weight: 800; color: var(--ap-text); } body.anuncios-page .segBtn:hover{ background: rgba(37,99,235,.08); } body.anuncios-page .segBtn.is-active{ background: var(--ap-accent-soft); color: rgba(30,64,175,1); } /* Select */ body.anuncios-page .select{ border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.75); color: var(--ap-text); border-radius: 999px; padding: 9px 12px; font-weight: 750; } /* Pager */ body.anuncios-page .anuncios__pager{ margin-top: 14px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; } body.anuncios-page .pagerBtn{ border: 1px solid rgba(15,23,42,.14); background: rgba(15,23,42,.03); color: var(--ap-text); border-radius: 999px; padding: 8px 11px; cursor:pointer; font-weight: 850; min-width: 40px; } body.anuncios-page .pagerBtn:hover{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.26); } body.anuncios-page .pagerBtn:disabled{ opacity:.45; cursor:not-allowed; } body.anuncios-page .pagerBtn.is-active{ background: var(--ap-accent-soft); border-color: rgba(37,99,235,.35); color: rgba(30,64,175,1); } body.anuncios-page .pagerEllipsis{ color: var(--ap-muted); padding: 0 6px; font-weight: 900; } /* Empty results */ body.anuncios-page .anuncios__empty{ margin-top: 14px; } /* List view */ body.anuncios-page #anunciosList.is-list{ grid-template-columns: 1fr !important; } body.anuncios-page #anunciosList.is-list .card{ box-shadow: 0 8px 20px rgba(2,6,23,.06) !important; } /* Mobile: más compacto por defecto */ @media (max-width: 760px){ body.anuncios-page .card{ padding: 12px !important; } body.anuncios-page .anuncios__body{ font-size: 14px; } body.anuncios-page .badge{ font-size: 12px; } body.anuncios-page .toolsRow{ align-items: stretch; } body.anuncios-page .toolGroup{ width:100%; justify-content:space-between; } body.anuncios-page .select{ flex:1; } } /* ========================================================== THEME OVERRIDE — AZUL OSCURO (COHERENTE CON EL SITIO) Nota: este bloque va AL FINAL del archivo y pisa el tema claro. Alcance: solo body.anuncios-page ========================================================== */ body.anuncios-page{ --ap-bg: linear-gradient(180deg,#0f1f3a 0%, #0b1730 100%); --ap-surface: #132748; --ap-text: #e6edf7; --ap-muted: #9fb3d6; --ap-line: rgba(255,255,255,.10); --ap-accent: #4da3ff; --ap-accent-soft: rgba(77,163,255,.16); --ap-shadow: 0 10px 28px rgba(0,0,0,.35); } /* Fondo general */ body.anuncios-page{ background: var(--ap-bg) !important; color: var(--ap-text) !important; } /* Topnav más “portal” */ body.anuncios-page .topnav{ background: rgba(10,20,40,.78) !important; border-bottom: 1px solid var(--ap-line) !important; } body.anuncios-page .topnav .brand span{ color: var(--ap-text) !important; } /* Cards */ body.anuncios-page .card{ background: var(--ap-surface) !important; border: 1px solid var(--ap-line) !important; box-shadow: var(--ap-shadow) !important; color: var(--ap-text) !important; } /* Textos */ body.anuncios-page .muted{ color: var(--ap-muted) !important; } body.anuncios-page h1, body.anuncios-page h2, body.anuncios-page h3{ color: #ffffff !important; } /* Chips */ body.anuncios-page .btn-secondary{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: var(--ap-text) !important; } body.anuncios-page .btn-secondary:hover{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; } body.anuncios-page .btn-secondary.is-active{ background: var(--ap-accent-soft) !important; border-color: rgba(77,163,255,.42) !important; } /* Badge */ body.anuncios-page .badge{ background: rgba(77,163,255,.18) !important; border-color: rgba(77,163,255,.38) !important; color: #9fd0ff !important; } /* Inputs/Select (buscador y page size) */ body.anuncios-page .input, body.anuncios-page .select{ background: rgba(10,20,40,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--ap-text) !important; } body.anuncios-page .input::placeholder{ color: rgba(159,179,214,.85) !important; } /* Botón limpiar búsqueda */ body.anuncios-page .btn-ghost{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ap-text) !important; } body.anuncios-page .btn-ghost:hover{ background: rgba(255,255,255,.12) !important; } /* Paginador */ body.anuncios-page .pagerBtn{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ap-text) !important; } body.anuncios-page .pagerBtn:hover{ background: rgba(255,255,255,.12) !important; } body.anuncios-page .pagerBtn.is-active{ background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: #081a30 !important; } /* ========================================================== FIX ALINEACION HEADER (igual que resto del sitio) ========================================================== */ body.anuncios-page .topnav{ padding-left:0; padding-right:0; } body.anuncios-page .topnav .brand, body.anuncios-page .topnav .navlinks{ max-width:1100px; margin:auto; padding-left:20px; padding-right:20px; } /* ========================================================== FIX: herramientas (buscador / vista / page size) sin solaparse ========================================================== */ body.anuncios-page .anuncios__tools{ margin-top: 14px !important; } body.anuncios-page .anuncios__tools .toolsRow{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; } body.anuncios-page .anuncios__tools .searchWrap{ flex: 1 1 520px; min-width: 280px; } body.anuncios-page .anuncios__tools .toolGroup{ flex: 0 0 auto; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end; } body.anuncios-page .anuncios__tools .segmented{ display:inline-flex; gap:6px; padding:6px; border-radius:999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); } body.anuncios-page .anuncios__tools .segBtn{ white-space:nowrap; } body.anuncios-page .anuncios__tools .select{ min-width: 170px; } @media (max-width: 980px){ body.anuncios-page .anuncios__tools .toolGroup{ width: 100%; justify-content:flex-start; } } /* ========================================================== MEJORAS: destacado + "afiche" cuando hay imagen ========================================================== */ body.anuncios-page .anuncioDestacado{ grid-column: 1 / -1; background: linear-gradient(135deg, rgba(77,163,255,.18), rgba(0,0,0,.10)); border: 1px solid rgba(255,255,255,.16) !important; } body.anuncios-page .anuncioDestacado h3{ font-size: 22px; } body.anuncios-page .anuncioDestacado .anuncios__body{ font-size: 16px; } body.anuncios-page .anuncioItem.has-image .anuncios__body img{ display:block; width:100%; max-width: 640px; margin: 14px auto; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.38); } body.anuncios-page .grid3.is-list .anuncioItem.has-image .anuncios__body img{ max-width: 520px; } /* ========================================================== MEJORAS: badge NUEVO + afiche (imagen arriba) + media wrapper ========================================================== */ body.anuncios-page .badge.badge-new{ background: rgba(250, 204, 21, .18) !important; /* amarillo suave */ border-color: rgba(250, 204, 21, .45) !important; color: #ffe08a !important; } body.anuncios-page .anuncioMedia{ margin-top: 10px; margin-bottom: 10px; } body.anuncios-page .anuncioMedia img{ display:block; width:100%; max-width: 640px; margin: 0 auto; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.38); } /* En vista lista, que el afiche no se aplaste */ body.anuncios-page .grid3.is-list .anuncioMedia img{ max-width: 520px; } /* ========================================================== LAYOUT: Masonry (sin huecos) para modo "Tarjetas" Nota: NO rompe el modo lista. ========================================================== */ /* En modo tarjetas: usar columnas (masonry) */ body.anuncios-page .grid3:not(.is-list){ display: block !important; column-count: 3; column-gap: 18px; } /* Cada anuncio es un bloque dentro de la columna */ body.anuncios-page .grid3:not(.is-list) .anuncioItem{ display: inline-block; width: 100%; margin: 0 0 18px; break-inside: avoid; } /* Responsive */ @media (max-width: 1100px){ body.anuncios-page .grid3:not(.is-list){ column-count: 2; } } @media (max-width: 700px){ body.anuncios-page .grid3:not(.is-list){ column-count: 1; } } /* Destacado: ancho completo (en masonry lo simulamos poniéndolo antes y con mejor presencia) */ body.anuncios-page .anuncioDestacado{ border: 1px solid rgba(255,255,255,.18) !important; background: linear-gradient(135deg, rgba(77,163,255,.18), rgba(0,0,0,.10)) !important; } /* Badge NUEVO */ body.anuncios-page .badge-new{ background: rgba(34,197,94,.18) !important; border: 1px solid rgba(34,197,94,.40) !important; color: #86efac !important; font-weight: 900; } /* Imagen “afiche” arriba */ body.anuncios-page .anuncioMedia{ margin-top: 12px; } body.anuncios-page .anuncioMedia img{ display:block; width:100%; max-width: 640px; margin: 0 auto; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.38); } /* ========================================================== OVERRIDES FINALES — VERSIÓN PROFESIONAL (GRID LIMPIO) - Fondo azul coherente con el sitio - Herramientas sin solape - Tarjetas en GRID (sin huecos raros) - Destacado tipo "hero" ========================================================== */ /* Paleta azul (pisa cualquier tema anterior) */ body.anuncios-page{ --ap-bg: linear-gradient(180deg,#0f1f3a 0%, #0b1730 100%); --ap-surface: #132748; --ap-surface-2:#162f55; --ap-text: #e6edf7; --ap-muted: #9fb3d6; --ap-line: rgba(255,255,255,.10); --ap-accent: #4da3ff; --ap-accent-soft: rgba(77,163,255,.16); --ap-shadow: 0 10px 28px rgba(0,0,0,.35); background: var(--ap-bg) !important; color: var(--ap-text) !important; } /* Cards y textos */ body.anuncios-page .card{ background: var(--ap-surface) !important; border: 1px solid var(--ap-line) !important; box-shadow: var(--ap-shadow) !important; color: var(--ap-text) !important; } body.anuncios-page .muted{ color: var(--ap-muted) !important; opacity: 1 !important; } body.anuncios-page h1, body.anuncios-page h2, body.anuncios-page h3{ color: #ffffff !important; } /* Herramientas (buscador / vista / page size) sin solape */ body.anuncios-page .anuncios__tools{ margin-top: 14px !important; } body.anuncios-page .anuncios__tools .toolsRow{ display:flex !important; gap:16px !important; flex-wrap:wrap !important; align-items:center !important; } body.anuncios-page .anuncios__tools .searchWrap{ flex: 1 1 520px !important; min-width: 280px !important; } body.anuncios-page .anuncios__tools .toolGroup{ flex: 0 0 auto !important; display:flex !important; gap:12px !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-end !important; } @media (max-width: 980px){ body.anuncios-page .anuncios__tools .toolGroup{ width: 100% !important; justify-content:flex-start !important; } } /* Inputs/Select */ body.anuncios-page .input, body.anuncios-page .select{ background: rgba(10,20,40,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--ap-text) !important; } body.anuncios-page .input::placeholder{ color: rgba(159,179,214,.85) !important; } /* Chips filtros */ body.anuncios-page .btn-secondary{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: var(--ap-text) !important; } body.anuncios-page .btn-secondary:hover{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; } body.anuncios-page .btn-secondary.is-active{ background: var(--ap-accent-soft) !important; border-color: rgba(77,163,255,.42) !important; } /* Badge base + NUEVO */ body.anuncios-page .badge{ background: rgba(77,163,255,.18) !important; border: 1px solid rgba(77,163,255,.38) !important; color: #9fd0ff !important; font-weight: 850 !important; } body.anuncios-page .badge-new{ background: rgba(34,197,94,.18) !important; border: 1px solid rgba(34,197,94,.40) !important; color: #86efac !important; font-weight: 900 !important; } /* ========================= GRID LIMPIO (Tarjetas) ========================= */ body.anuncios-page .grid3{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* Modo lista: una columna y cards más compactas */ body.anuncios-page .grid3.is-list{ grid-template-columns: 1fr !important; gap: 12px !important; } body.anuncios-page .grid3.is-list .card{ padding: 14px !important; } /* Destacado tipo HERO (primer anuncio) */ body.anuncios-page .anuncioDestacado{ grid-column: 1 / -1 !important; background: linear-gradient(135deg, rgba(77,163,255,.22), rgba(0,0,0,.10)) !important; border: 1px solid rgba(255,255,255,.18) !important; } body.anuncios-page .anuncioDestacado h3{ font-size: 22px !important; } body.anuncios-page .anuncioDestacado .anuncios__body{ font-size: 16px !important; } /* Media "afiche" arriba */ body.anuncios-page .anuncioMedia{ margin-top: 12px !important; } body.anuncios-page .anuncioMedia img, body.anuncios-page .anuncioItem.has-image .anuncios__body img{ display:block !important; width:100% !important; max-width: 760px !important; margin: 0 auto 6px !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0,0,0,.38) !important; } /* En cards no destacadas, el afiche un poco más chico */ body.anuncios-page .anuncioItem.has-image:not(.anuncioDestacado) .anuncioMedia img{ max-width: 640px !important; } /* Paginador */ body.anuncios-page .pagerBtn{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ap-text) !important; } body.anuncios-page .pagerBtn:hover{ background: rgba(255,255,255,.12) !important; } body.anuncios-page .pagerBtn.is-active{ background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: #081a30 !important; }