/* nexel/www — portal público de clasificados. * Look inspirado en los mockups: color de marca en las barras, acento * vibrante en las acciones, tarjetas redondeadas, mobile-first. Sin * bootstrap ni bundlers: CSS plano con variables. */ /* --------- paleta de marca --------- * * PUNTO ÚNICO DE VERDAD. Los dos colores de la marca se declaran acá y * en ningún otro lado: las variantes (más clara, más oscura, el fondo * suave, el halo de foco) salen por `color-mix()` del color base, así * que cambiando estos dos hexes cambia el portal entero. * * Los metadatos que no pueden leer una variable CSS — el theme-color del * navegador, el manifest de la PWA y los botones inline de los mails — * leen estos mismos dos valores desde PHP: `appMarcaColor()` en * lib/marca.php los parsea de este bloque. No los repitas allá. * * ── `--primario` tiene un eco que NO se puede derivar: el ícono ── * * Los PNG de favicon/ están pintados con este mismo hex ADENTRO del * archivo, y no hay forma de que lo lean de acá. El splash de la PWA los * pone juntos —`background_color` sale de esta línea, el dibujo sale del * PNG— así que si los dos no son el mismo color, se ve el cuadrado del * ícono recortado contra un fondo de otro azul. Era exactamente lo que * pasaba hasta el 2026-10-11: la paleta decía #1877f2 y el juego de * íconos venía del generador en #006fff. Ganó el del ícono. * * O sea: tocar `--primario` es repintar también los seis archivos de * www/favicon/ (los dos web-app-manifest, apple-touch, favicon-96, el * .svg y el .ico) y el site.webmanifest que los acompaña. No alcanza con * cambiar el hex de abajo. * * `color-mix()` pide Chrome 111+ / Safari 16.2+ / Firefox 113+ (2023). */ :root { --primario: #006fff; /* color de marca — barras, links, chips activos */ --acento: #f97316; /* acción primaria — ofertar, favoritos, CTAs */ /* Variantes derivadas. Los porcentajes se calibraron para reproducir * clavados los hexes que antes estaban escritos a mano (#4a93f5, * #0f56b3, #d24a7d, #fce4ec), así que cambiar un color base conserva * las mismas relaciones de luminosidad que tenía el diseño original. */ --primario-2: color-mix(in srgb, var(--primario) 78%, #fff); /* variante clara */ --primario-d: color-mix(in srgb, var(--primario) 72%, #000); /* panel de filtros */ --acento-h: color-mix(in srgb, var(--acento) 88%, #000); /* hover */ --acento-soft: color-mix(in srgb, var(--acento) 16%, #fff); /* fondos suaves */ --acento-ring: color-mix(in srgb, var(--acento) 15%, transparent); /* halo de foco de los inputs */ /* Verde pleno, para lo que es una NOVEDAD y no un cartel de "salió * bien": hoy lo usa el sello de conversar cuando el vendedor contestó y * el mensaje sigue sin abrir. Va aparte de `--mint-soft`, que es el * fondo suave de los carteles de confirmación y no tiene contraste para * llevar un glifo blanco encima. El hover se deriva como el del acento, * con la misma mezcla. * * Es un verde VIVO y no uno de bandera: el sello vive sobre una foto y * al lado de los naranjas de `--acento`, que son igual de saturados. Un * verde oscuro se hunde contra las fotos y deja de leerse como la * novedad que es. */ --ok: #22c55e; --ok-h: color-mix(in srgb, var(--ok) 88%, #000); /* El rojo de la tercera cara del sello: "el vendedor no te lo aceptó". * * Es el par de `--ok` y no de `--danger`, y por eso es OTRO rojo: vive * en el mismo lugar que el verde —un círculo de 30px sobre una foto, al * lado de los naranjas de `--acento`— así que necesita la misma * saturación para leerse ahí. El `--danger` de abajo es oscuro a * propósito porque vive dentro de un modal blanco; sobre una foto se * hunde igual que se hundiría un verde de bandera. * * El hover se deriva con la misma mezcla que el acento y el ok. */ --no: #ef4444; --no-h: color-mix(in srgb, var(--no) 88%, #000); /* El rojo de "esto deshace algo". Hoy lo usa `.auth-btn-danger`, que es * la baja de un gesto —cancelar una visita, retirar una oferta—. * * No es un rojo nuevo: es el `#b91c1c` que el portal ya venía usando a * mano en los carteles de error (`.hoja-estado`, `.auth-error` y * compañía). Acá pasa a tener nombre porque lo empezó a necesitar algo * que no es un cartel. Esos cinco lugares siguen con el literal y * podrían apuntar a esta variable el día que se toquen; no se * reescribieron ahora para no mover estados de error sin probarlos. * * Es un rojo OSCURO y no uno vivo, al contrario que `--ok`: el verde * vive sobre una foto y tiene que competir con los naranjas de la card, * y esto vive dentro de un modal blanco, donde un rojo saturado grita * más de lo que una cancelación necesita. Con blanco encima da 7,3:1. * * El hover se deriva con la misma mezcla que el acento y el ok. */ --danger: #b91c1c; --danger-h: color-mix(in srgb, var(--danger) 88%, #000); --yellow-soft: #fef3c7; --mint-soft: #d4f4e9; --lilac: #e9e6ff; /* fondo global suave del mockup */ --bg: #eef0fa; --canvas: #dfe2ec; /* fondo del shell — más oscuro que --bg para que las tarjetas blancas destaquen */ --surface: #ffffff; --border: #e5e7eb; --text: #101636; /* azul-tinta del mockup */ --muted: #7078a0; --star: #f5b301; /* Pines y globos de grupo de la vista mapa del listado. Es el rojo de * Google Maps y **el único color del portal que no sale de la paleta**: * adentro de un mapa el pin rojo quiere decir "acá hay algo" y lo sabe * leer cualquiera, mientras que un pin en `--primario` obliga a aprender * de nuevo algo ya aprendido y encima compite con el azul de las rutas y * del agua que dibuja el propio mapa. * * Entra por token igual que todos los demás —el pin suelto y el globo * del grupo tienen que dar exactamente el mismo color y con dos hexes * escritos a mano se desincronizan— y lo lee `colorPin()` en * assets/js/mapa.js. Mismo criterio y mismo valor que la vista Mapa del * back office (panel/DESIGN.md §21). */ --map-pin: #ea4335; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --shadow-sm: 0 2px 8px rgba(16, 22, 54, 0.06); --shadow-md: 0 8px 24px rgba(16, 22, 54, 0.08); --shadow-lg: 0 20px 40px rgba(16, 22, 54, 0.12); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.4; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* Contenedor mobile-first — el portal se pinta como un stack vertical * angosto que respeta el look "app" incluso en desktop. */ .app-shell { max-width: 480px; margin: 0 auto; background: var(--canvas); min-height: 100vh; position: relative; /* deja lugar para que el contenido no quede tapado por el .app-nav * flotante. Cuenta: 16px de separación del bottom + ~48px del nav + * ~15px de gap visible entre el borde inferior de la tarjeta y el * borde superior del nav + safe-area de iOS. */ padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } /* En la página de detalle sumamos 20px extra de padding para que se * pueda scrollear un poco más allá del borde inferior de la tarjeta, * dejando aire visible entre la tarjeta y el nav flotante. */ .app-shell.page-detalle { padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)); } /* En los listados sumamos 30px extra para que la última card no quede * tapada por la barra de navegación flotante al hacer scroll. */ .app-shell.page-listado { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } /* --------- header navy --------- */ .app-header { background: var(--primario); color: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* El header es fijo y el contenido le pasa por debajo: sin sombra las * cards se cortaban contra un borde plano y parecía que se recortaran * solas. Es el mismo par que usa la barra de navegación de escritorio * (ver escritorio.css), que cumple el mismo rol allá. * * No cae sobre el tirador: la lengüeta va en z 30 y el header en 20, o * sea que ella pinta por encima. Al revés que en escritorio, donde la * barra está por delante y sí le sombrea el nacimiento. */ box-shadow: 0 2px 12px rgba(16, 22, 54, .18), 0 1px 3px rgba(16, 22, 54, .10); /* El padding-bottom era 60px de cuando el buscador "colgaba" del header * sobre un bloque azul alto. Con el panel de filtros saliendo de abajo, * ese aire sobra: la continuidad ya la da el panel. */ padding: 14px 20px 31px; position: relative; overflow: hidden; } /* Grilla de tres columnas con los costados iguales (1fr cada uno): así el * slot del medio queda centrado respecto a la pantalla, sin importar que * a la izquierda haya una flecha y a la derecha dos botones. Con flex y * `space-between` el centro sólo cae en el medio si ambos lados miden * exactamente lo mismo — que no es el caso en el home. * * Escritorio vuelve a flex en escritorio.css: allá el header tiene otra * composición (bloque de texto a la izquierda, acciones a la derecha). */ .app-header-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; z-index: 2; /* Sin min-height: la fila mide lo que miden sus hijos. El viejo 60px * fijo repartía aire arriba y abajo del logo aunque no hiciera falta. */ } .app-header-top > .app-back { justify-self: start; } /* La campana del home ocupa el slot izquierdo, el mismo que en las demás * páginas usa la flecha de volver. El menú NO está acá: vive dentro de * `.app-header-actions`, que ya se alinea al borde derecho. */ .app-header-top > .app-header-bell { justify-self: start; } .app-header-top > .app-header-logo { justify-self: center; } .app-header-actions { justify-self: end; } .app-header-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; } .app-header-title .accent { color: #f0b5cb; font-weight: 400; } /* Logo del header móvil. Ocupa el lugar del título en el home; el PNG es * blanco y depende de que el header siga siendo azul. */ .app-header-logo img { /* Mismo alto que el logo de la barra de escritorio: a 32px quedaba más * grande que los botones circulares de los costados y se comía la fila. * El PNG está recortado al dibujo, así que este número es lo que se ve. * `width: auto` mantiene la proporción; la imagen no se toca. */ height: 26px; width: auto; display: block; } .app-back { background: rgba(255,255,255,.15); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; } .app-header-actions { display: flex; gap: 10px; align-items: center; } .app-icon-btn { background: rgba(255,255,255,.15); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; position: relative; } .app-icon-btn .dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); border: 2px solid var(--primario); } /* buscador flotante que "cuelga" del header */ .app-search-card { background: #fff; border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-md); position: relative; z-index: 2; } .app-search-card input { flex: 1; /* Sin esto el input no baja de su ancho intrínseco: en flex el mínimo * automático de un `` sin `size` es el de ~20 caracteres, y ese * piso gana sobre el `flex: 1`. Cuando el navegador agranda la letra * —Chrome de Android con la escala de texto subida— el campo dejaba de * achicarse, se comía el renglón entero y empujaba al botón AFUERA de * la tarjeta blanca; el `overflow: hidden` del header lo terminaba * recortando contra el borde de la pantalla. Con el piso en 0 el input * cede lo que haga falta y el botón nunca se va de la tarjeta. */ min-width: 0; border: none; outline: none; font-size: 0.95rem; color: var(--text); background: transparent; padding: 4px 0; font-family: inherit; } .app-search-card input::placeholder { color: #a3a9c4; } /* Los dos costados del buscador miden lo que miden y no se negocian: el * único que da y toma ancho es el campo del medio (ver el `min-width: 0` * de arriba). Sin el `flex: 0 0 auto` el botón queda con el `shrink: 1` * por defecto y, cuando el renglón queda justo, se achica hasta dejar de * ser un cuadrado — el ícono se le sale por los costados. */ .app-search-card .search-icon { flex: 0 0 auto; color: #a3a9c4; font-size: 1.1rem; } .app-search-card .filter-icon { flex: 0 0 auto; background: var(--acento-soft); color: var(--acento); border: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; } /* --------- panel de filtros desplegable (home móvil) --------- */ /* El tirador es una lengüeta colgada del borde inferior del header: mismo * azul que él, al ras, esquinas de arriba rectas y las de abajo * redondeadas. Al compartir el color y no dejar junta se lee como una * prolongación del header — que es de donde sale el panel. * * Reemplaza al círculo blanco que iba montado a caballo del borde: sobre el * azul de marca se leía como una burbuja pegoteada encima, ajena tanto al * header como al contenido. * * El diseño es el mismo en las dos vistas — lo único que cambia es de qué * cuelga, del header en móvil y de la barra de navegación en escritorio — * así que vive acá y escritorio.css ya no lo pisa. * * Va después del
y no adentro: el header recorta con * `overflow: hidden` y ahí dentro la lengüeta no existiría. */ .panel-filtros-toggle { margin: 0 auto; position: relative; /* Por encima del panel: es el único control que lo cierra, así que no * puede quedar tapado por él. */ z-index: 30; width: 64px; height: 26px; border: none; border-radius: 0 0 13px 13px; background: var(--primario); color: #fff; font-size: .78rem; display: flex; align-items: center; justify-content: center; /* Sombra sólo hacia abajo: arriba se funde con el header, y una sombra * ahí marcaría justo la junta que no queremos que se vea. */ box-shadow: 0 5px 10px rgba(16, 22, 54, .16); transition: background .18s, color .18s; } .panel-filtros-toggle i { transition: transform .25s ease; } /* Abierto: el chevron apunta arriba, o sea "esto se cierra"... */ .panel-filtros-toggle.is-open i { transform: rotate(180deg); } /* ...y la lengüeta queda sobre el cuerpo del panel, que es azul oscuro: * azul sobre azul desaparecería. Se invierte a pastilla blanca, el mismo * recurso que usan las pestañas activas de la barra de escritorio. */ .panel-filtros-toggle.is-open { background: #fff; color: var(--primario); } /* El hover va detrás de `hover: hover` porque en touch queda pegado: el * dedo levanta el estado y la lengüeta se quedaba con el color de hover * hasta tocar otra cosa. `:active` sí sirve en ambas — es el feedback del * click, que hace falta ahora que la lengüeta no se encoge (el * `scale(.94)` del círculo acá dejaba ver la junta con el header). */ @media (hover: hover) { .panel-filtros-toggle:hover { background: var(--primario-d); } .panel-filtros-toggle.is-open:hover { background: var(--acento-soft); color: var(--acento); } } .panel-filtros-toggle:active { background: var(--primario-d); } .panel-filtros-toggle.is-open:active { background: var(--acento-soft); color: var(--acento); } /* --------- pila superior fija (header + panel + tirador) --------- */ /* Los tres viajan juntos: el panel cuelga de un ancla pegada al header y * el tirador se monta sobre su borde, así que si el header se moviera * solo se separarían. Sticky sobre el conjunto los mantiene solidarios. * * Se esconde al scrollear hacia abajo y vuelve apenas se sube — la clase * la pone assets/js/cabecera.js. */ /* `fixed` y no `sticky`: sticky lo anula cualquier ancestro con overflow, * y `.app-shell` lo tiene a partir de 640px. Con sticky roto el header se * iba por scroll natural y sólo reaparecía al llegar al tope de la página. * `fixed` se posiciona contra el viewport y no le afecta. * * left/right en 0 + `margin: 0 auto` centra la barra dentro del ancho del * shell sin gastar `transform`, que queda libre para el ocultamiento. * * Al salir del flujo deja de reservar su alto: `cabecera.js` se lo devuelve * al shell como padding-top. */ .app-topstack { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px; /* mismo ancho que .app-shell */ z-index: 40; transition: transform .28s ease; } .app-topstack.is-hidden { transform: translateY(-100%); } /* El header tiene que tapar la parte del panel que queda metida detrás. * Ya era `position: relative`; sólo le falta ganar la capa. */ .app-header { z-index: 20; } /* Ancla de alto 0: marca dónde termina el header sin ocupar lugar en el * flujo. El panel cuelga de acá en absoluto, así al abrirse baja POR * ENCIMA del contenido en vez de empujarlo, y el chevron no se mueve. */ .panel-filtros-anchor { position: relative; height: 0; z-index: 10; /* por debajo del header (20), por encima del contenido */ } /* Cuerpo propio, no una prolongación del header: azul más oscuro, 10px de * aire a cada lado y esquinas redondeadas abajo. `--tuck` es cuánto se * mete por detrás del header — más que el radio de 22px, para que las * esquinas superiores queden tapadas incluso en la curva. */ .panel-filtros { --tuck: 26px; position: absolute; top: calc(-1 * var(--tuck)); left: 10px; right: 10px; background: var(--primario-d); color: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 14px 28px rgba(16, 22, 54, .30); overflow: hidden; /* Truco de grid: 0fr -> 1fr anima la altura REAL sin tener que * conocerla de antemano, cosa que max-height no permite. */ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1); } .panel-filtros.is-open { grid-template-rows: 1fr; } .panel-filtros-inner { overflow: hidden; /* recorta el contenido mientras la fila crece */ min-height: 0; /* sin esto, el contenido impone su alto y no colapsa */ } /* El padding vive acá y no en el inner: en el inner se vería como una * franja azul incluso con el panel cerrado. Arriba se suma `--tuck`, que * es la franja que queda escondida detrás del header, más lo que mide el * tirador (26px) y 18 de respiro: la lengüeta cae dentro del panel y sin * ese aire el primer filtro le queda pegado. */ .panel-filtros-body { padding: calc(var(--tuck) + 44px) 18px 20px; } /* Los tiles ya vienen con fondo azul y sombra propios porque en escritorio * son una tarjeta suelta. Acá están sobre azul: se anulan los dos para que * no quede una caja dentro de otra del mismo color. */ .panel-filtros .tiles-panel { background: transparent; box-shadow: none; padding: 0; overflow: visible; } .panel-filtros .tiles-panel::before, .panel-filtros .tiles-panel::after { display: none; } /* Aire propio arriba del "¿Qué buscás?". Va acotado al panel: en * escritorio los tiles son una tarjeta suelta y ya lo aporta su padding. */ .panel-filtros .tiles-title { margin-top: 15px; } /* --- el formulario, re-vestido para fondo azul --- */ .panel-filtros .filtros-label { color: rgba(255, 255, 255, .7); } /* Chip apagado: velo blanco translúcido. Elegido: pastilla blanca sólida * con texto azul — máximo contraste contra el fondo. */ .panel-filtros .filtros-chip span { background: rgba(255, 255, 255, .14); color: #fff; } .panel-filtros .filtros-chip input:checked + span { background: #fff; color: var(--primario); } .panel-filtros .filtros-form input[type="text"] { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff; } .panel-filtros .filtros-form input[type="text"]::placeholder { color: rgba(255, 255, 255, .55); } .panel-filtros .filtros-form input[type="text"]:focus { background: #fff; border-color: #fff; color: var(--text); } /* Slider: la pista tiene que verse sobre azul, y el thumb rosa ya * contrasta bien tal cual está. */ .panel-filtros .range-values { color: #fff; } .panel-filtros .range-track { background: rgba(255, 255, 255, .25); } .panel-filtros .range-slider.is-off .range-track-fill { background: rgba(255, 255, 255, .45); } .panel-filtros .range-slider.is-off .range-values { color: rgba(255, 255, 255, .6); } .panel-filtros .range-slider.is-off .range-input::-webkit-slider-thumb { background: rgba(255, 255, 255, .7); } .panel-filtros .range-slider.is-off .range-input::-moz-range-thumb { background: rgba(255, 255, 255, .7); } .panel-filtros .filtros-section:last-of-type { margin-bottom: 6px; } /* Las dos acciones del pie del panel: el alternador de vista y el envío. * En móvil van apiladas y a todo el ancho —el panel es una columna y dos * botones al 50% dejan los rótulos partidos en dos líneas— con el * alternador ARRIBA: "Ver resultados" es la salida natural del formulario * y tiene que quedar última, pegada al borde. */ .panel-filtros-acciones { display: flex; flex-direction: column; gap: 8px; } .panel-filtros-submit, .panel-filtros-vista { width: 100%; padding: 14px 16px; font-size: .95rem; gap: 8px; } /* Se suma a los 6px que deja la última .filtros-section: 16px en total de * aire entre el último filtro y las acciones. */ .panel-filtros-acciones { margin-top: 10px; } /* Sobre el azul del panel el secundario gris de `.filtros-btn-secondary` * se ensucia: acá va el mismo velo blanco translúcido que usan los chips * apagados y los inputs, que es el vocabulario de "elemento apagado sobre * la banda" (ver los bloques de arriba). */ .panel-filtros .filtros-btn-secondary { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); } .panel-filtros .filtros-btn-secondary:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .45); } /* --------- guardar la búsqueda como radar --------- */ /* Va separada de las dos acciones de arriba por una línea, y es a * propósito: las de arriba devuelven resultados AHORA y ésta no devuelve * nada hoy — pide que el portal escriba mañana. Al lado competirían, y la * que la persona vino a tocar es "Ver resultados". * * La línea es blanca translúcida porque el panel está pintado de azul; un * `--border` acá se ensucia, igual que le pasa al secundario de arriba. */ .panel-filtros-radar { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); } /* Fantasma sobre el azul: sólo contorno. Es el escalón que le faltaba al * vocabulario del panel —relleno naranja para la acción principal, velo * blanco para lo apagado— y deja claro que es de otra familia sin sumar * un color nuevo. */ .filtros-btn-radar { width: 100%; padding: 12px 16px; gap: 8px; font-size: .9rem; background: transparent; color: #fff; border: 1px dashed rgba(255, 255, 255, .5); } .filtros-btn-radar:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-style: solid; } .filtros-btn-radar:disabled { opacity: .85; cursor: default; } .panel-filtros-radar-pie { margin-top: 7px; text-align: center; font-size: .74rem; line-height: 1.4; color: rgba(255, 255, 255, .75); } /* El acuse y el error se dicen en el mismo renglón que la promesa: es el * texto de ese bloque el que cambia, no un cartel nuevo que empuje el * panel hacia abajo justo cuando se acaba de tocar un botón. */ .panel-filtros-radar-pie.is-ok { color: #bbf7d0; font-weight: 600; } .panel-filtros-radar-pie.is-error { color: #fecaca; font-weight: 600; } /* chips debajo del buscador (Best offers, Free, etc.) */ .app-chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 14px 10px 4px; scrollbar-width: none; } .app-chip-row::-webkit-scrollbar { display: none; } .app-chip { background: #fff; color: var(--text); border: 1px solid var(--border); padding: 6px 14px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .app-chip.pink, .app-chip.mint, .app-chip.lilac { background: #fff; color: var(--text); } .app-chip.active { background: var(--primario); color: #fff; border-color: var(--primario); } /* --------- bloque de categorías (tarjetas grandes tipo mockup) --------- */ /* Las secciones dejan 10px libres a cada lado para que ni el panel de * tiles ni las tarjetas de aviso peguen contra el borde del shell. */ .app-section { padding: 20px 10px 4px; } .app-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .app-section-title .link { font-size: 0.8rem; font-weight: 500; color: var(--acento); } .tiles-panel { background: var(--primario); border-radius: var(--radius-lg); padding: 22px 18px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 0 32px rgba(16, 22, 54, 0.22), 0 0 8px rgba(16, 22, 54, 0.10); } .tiles-panel::before { content: ''; position: absolute; right: -30px; bottom: -30px; width: 90px; height: 90px; background: #f0b344; border-radius: 50%; opacity: .3; } .tiles-panel::after { content: ''; position: absolute; left: -18px; bottom: -18px; width: 50px; height: 50px; background: #8b5cf6; border-radius: 12px; transform: rotate(20deg); opacity: .35; } .tiles-title { position: relative; z-index: 1; color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; min-height: 20px; opacity: .95; text-align: center; } /* Grilla de 4 columnas que baja de renglón: TODOS los tiles de la vista se * ven a la vez, sin scroll. * * Antes era un carrusel (`overflow-x: auto` + tiles de 92px fijos) y la * vista más poblada —5 tiles: Volver + 4 opciones— dejaba el último * cortado contra el borde. El scroll horizontal no se anuncia solo: sin * flecha ni sombra de corte, la mitad de la gente nunca descubría que * "Camión" o "Todos" existían. * * El tile mide exactamente un cuarto de la fila (descontados los 3 gaps), * así que entran 4 por renglón y el quinto baja. Es deliberado que la * medida NO dependa de cuántos tiles haya: repartiendo el ancho entre * todos, una vista de 5 los achicaba a ~57px y una de 3 los dejaba * enormes, y la misma opción cambiaba de tamaño al navegar entre vistas. * Con el cuarto fijo, "Casa" mide igual en todas. * * `flex-shrink: 0` es lo que garantiza el corte en 4: sin eso flex prefiere * apretar antes que bajar de renglón. Lo que sobra —el renglón huérfano de * 1 tile, o el ancho de más cuando el `max-width` ya topó— lo centra el * `justify-content`. * * Sin `overflow` tampoco se recorta el `.tile-badge`, que cuelga fuera * de la caja del ícono. */ .tiles-row { --tiles-cols: 4; --tiles-gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px var(--tiles-gap); padding: 2px 0; position: relative; z-index: 1; } .tile { flex: 0 0 auto; width: calc((100% - var(--tiles-gap) * (var(--tiles-cols) - 1)) / var(--tiles-cols)); min-width: 0; max-width: 96px; background: transparent; color: #fff; border: none; text-align: center; padding: 8px 2px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: background .15s; text-decoration: none; font: inherit; cursor: pointer; } .tile:hover { background: rgba(255,255,255,.08); } .tile[disabled] { opacity: .4; cursor: not-allowed; } .tile[disabled]:hover { background: transparent; } .tiles-view { position: relative; } /* Los 56px del cuadrado pasan de medida fija a techo: si el tile es más * angosto que eso, el ícono lo acompaña y se mantiene cuadrado con * `aspect-ratio`. Con 4 columnas eso recién ocurre por debajo de ~308px de * viewport (la pantalla de tapa de un plegable); en cualquier teléfono real * el cuadrado da los 56px enteros. El glifo se queda en 1.7rem: aun en ese * caso extremo la caja ronda los 49px y lo contiene sin apretarlo. */ .tile-icon { font-size: 1.7rem; width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 14px; position: relative; } /* Las etiquetas más largas son de 9 caracteres ("Camioneta", "Vehículos") * y son palabras sueltas: no hay dónde cortarlas en dos renglones, así que * el que se achica es el cuerpo. Sólo hace falta por debajo de ~400px de * viewport; de ahí para arriba la columna ya da los 0.85rem completos. El * `ellipsis` es la red de contención por si aparece una etiqueta más larga * que las de hoy. */ .tile-label { font-size: clamp(.72rem, 3.4vw, .85rem); font-weight: 500; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-badge { position: absolute; top: -4px; right: -8px; background: var(--acento); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; } /* --------- tarjetas de aviso (listado / destacados) --------- */ .card-list { display: flex; flex-direction: column; gap: 16px; padding: 0 10px; } /* Cuando el listado vive dentro de una .app-section (home destacados), * la sección ya aporta el inset lateral — evitamos doblarlo. */ .app-section .card-list { padding: 0; } /* Tarjeta grande con foto arriba y datos abajo. */ .aviso-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 0 24px rgba(16, 22, 54, 0.18), 0 0 6px rgba(16, 22, 54, 0.08); overflow: hidden; color: var(--text); display: block; padding: 3px; transition: box-shadow .2s ease; } /* Card en foco: halo del azul de marca en vez de la sombra gris de * reposo. El foco lo marcan dos disparadores distintos y el realce tiene * que ser el mismo en los dos: el hover del mouse en escritorio, y la * clase `.is-foco` —que pone assets/js/gallery.js sobre la card que el * auto-slide eligió por viewport— en móvil. */ .aviso-card:hover, .aviso-card.is-foco { box-shadow: 0 0 34px color-mix(in srgb, var(--primario) 65%, transparent), 0 0 10px color-mix(in srgb, var(--primario) 50%, transparent); } .aviso-media { position: relative; aspect-ratio: 16 / 10; background: #eef0fa center/cover no-repeat; border-radius: var(--radius-sm); overflow: hidden; touch-action: pan-y; } .aviso-media img { width: 100%; height: 100%; object-fit: cover; } /* --- galería swipeable (listado + detalle) --- */ .media-strip { display: flex; width: 100%; height: 100%; transition: transform .25s ease; will-change: transform; } .media-strip img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; /* deja el swipe al contenedor */ transform: scale(1); transition: transform .3s ease-out; will-change: transform; } /* Zoom "Ken Burns" durante el auto-slide: sólo se aplica a la img * visible de la card auto-slideante. La clase la agrega/quita el JS * en sync con cada tick del intervalo. */ .media-strip img.is-zooming { transform: scale(1.45); transition: transform 3s ease-out; } /* El ancho lo pone el contenido, así que sin `max-width` una publicación * con muchas fotos arma una fila más larga que la card y se derrama por * los costados. El tope de fotos de la card (APP_CARD_MAX_FOTOS en * lib/render.php) ya evita que pase ahí; esto es la red de seguridad para * el resto de los usos — el hero del detalle sí monta todas las fotos. * * Envuelve en vez de recortar: con `overflow:hidden` el punto activo * puede quedar fuera de vista, y ahí el indicador deja de indicar. Al * estar anclado por `bottom`, las filas extra crecen hacia arriba y * quedan dentro de la imagen. */ .media-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 16px); gap: 5px; z-index: 3; padding: 3px 8px; background: rgba(16, 22, 54, .35); border-radius: 99px; } .media-dots span { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: background .15s; } .media-dots span.active { background: #fff; } .aviso-ribbon { position: absolute; top: 10px; left: 10px; background: var(--acento-soft); color: var(--acento); padding: 4px 10px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* "Mi aviso" — el cartel de las cards propias, DEBAJO del rubro y en la * misma columna izquierda (ver lib/render.php). * * Estuvo hasta 2026-09-28 en la esquina derecha, ocupando el lugar que * en las cards ajenas llevan el corazón y el hamburguesa. Leía mal: esa * esquina es la de los GESTOS —todo lo que hay ahí se toca— y el cartel * no es un gesto sino una propiedad del aviso, igual que el rubro. Puesto * en la esquina de los botones se leía como un botón apagado, y encima * hacía saltar el ojo de una punta a la otra para juntar dos datos que * son del mismo tipo. * * Ahora van los dos en una columna: el rubro arriba, el cartel abajo. * Misma pastilla, misma medida, y lo único que los distingue es el color * —el rubro en el acento, éste en el de MARCA— porque hablan de cosas * distintas: uno del aviso, el otro de quien lo mira. El fondo se mezcla * acá y no en `:root` porque es el único que lo usa; la proporción es la * de `--acento-soft`, para que las dos pastillas pesen lo mismo sobre la * foto. * * El corrimiento es un `translateY` de su PROPIA altura y no un `top` * calculado a mano: las dos pastillas tienen el mismo `font-size`, el * mismo `padding` y heredan el mismo `line-height` del contenedor, así * que miden igual y el salto sigue siendo exacto si mañana cambia la * tipografía. Un `top: 38px` habría que recalcularlo a ojo. * * `z-index` igual al que tenían los botones: la fila de `.media-dots` * pasa por abajo. */ .aviso-mio { position: absolute; top: 10px; left: 10px; transform: translateY(calc(100% + 6px)); background: color-mix(in srgb, var(--primario) 16%, #fff); color: var(--primario); padding: 4px 10px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; z-index: 4; } /* En la ficha, el mismo cartel en la medida del hero: los 12px de la * esquina y un cuerpo acorde al tamaño de la foto grande. * * Va en la MISMA esquina que en la card —arriba a la izquierda— porque * las dos superficies tienen que decir lo mismo en el mismo lugar. Pero * sin el corrimiento: el hero no dibuja rubro, así que la esquina está * libre y el cartel se apoya directamente en ella. */ .detalle-hero .aviso-mio { top: 12px; left: 12px; right: auto; transform: none; font-size: 0.75rem; padding: 5px 12px; } /* EL CORAZÓN — la única pieza del favorito en la card, y tiene TRES * caras. Durante un tiempo el favorito no hizo más que guardar, y avisar * cuando el aviso cambiaba fue un gesto aparte con su propia campana en la * fila de sellos de al lado. Los dos se fusionaron y el corazón se comió * esa campana. * * · vacío → no lo sigue * · relleno, pastilla blanca → lo sigue * · relleno blanco, pastilla naranja → lo sigue Y el aviso cambió sin * que lo haya visto * * Las dos primeras las alternan el PHP al pintar y el JS al tocarlo, entre * `fa-regular` y `fa-solid`; la tercera es `.tiene-novedad` (ver * lib/render.php, detalle.php y `pintarCorazon()` en * assets/js/aviso-modales.js). `.is-fav` queda como estado para el JS, no * como gancho de color: el color del glifo no cambia con él. * * --------------------------------------------------------------- * Por qué la pastilla naranja aparece SÓLO en la tercera * --------------------------------------------------------------- * La pastilla llena en el acento es el lenguaje de los SELLOS (ver * `.aviso-sello[data-cara]`) y quiere decir una cosa muy concreta: hay algo * del otro lado que no viste. Por eso estuvo mal hasta 2026-09-18f, cuando * el corazón la usaba para decir "guardado" — un estado que nadie tiene que * ir a mirar, pintado como una notificación, en una fila que ya tenía * cuatro. * * Ahora sí la usa, y por el motivo correcto: en la tercera cara el corazón * ESTÁ diciendo "el aviso cambió, andá a verlo". Es el mismo naranja y el * mismo significado que tenía la campana que reemplaza, así que la persona * que ya lo tenía aprendido no tiene que aprender nada nuevo. Guardar un * favorito, en cambio, sigue sin ser una notificación: ésa es la cara del * medio y se queda en la pastilla blanca. */ .aviso-corazon { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,.85); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; z-index: 4; /* por encima de .media-dots, si no el corazón queda tapado */ transition: background .15s, transform .15s; } /* La tercera cara, en las dos medidas. El glifo va en blanco y sigue * relleno: la novedad sólo puede darse sobre un aviso marcado, así que * vaciarlo acá sería contradecir el estado que el botón está informando. * * Una sola regla para la card y para el hero: cambia la medida, no el * significado. Le gana a las dos bases por ESPECIFICIDAD (dos clases contra * una) y no por orden, que es lo que permite que viva acá aunque * `.detalle-corazon-lg` se declare mucho más abajo. */ .aviso-corazon.tiene-novedad, .detalle-corazon-lg.tiene-novedad { background: var(--acento); color: #fff; } .aviso-corazon.tiene-novedad:hover, .detalle-corazon-lg.tiene-novedad:hover { background: var(--acento-h); } /* Hamburguesa de acciones — la misma pastilla que el corazón y en el * mismo rosa, justo debajo (10px del borde + 30px del corazón + 6px de * aire). Son dos botones de la misma familia: lo que los distingue es el * glifo, no el color. Abierto se invierte igual que un corazón guardado. */ .aviso-menu { position: absolute; top: 46px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,.85); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; z-index: 4; /* igual que el corazón: por encima de .media-dots */ transition: background .15s, transform .15s; } .aviso-menu[aria-expanded="true"] { background: var(--acento); color: #fff; } /* Sellos de lo que esta persona ya hizo con el aviso —visitó, ofertó, * consultó, sigue—, a la izquierda del corazón y en su misma fila. * * La fila arranca donde termina el corazón (10px del borde + 30px del * corazón + 6px de aire) y CRECE HACIA LA IZQUIERDA: al estar anclada a * la derecha, un sello apagado no deja un hueco en el medio, los que * quedan se corren solos. Por eso es un contenedor flex y no cuatro * `right` fijos. * * Cada sello abre el mismo modal que su ítem del menú (ver * assets/js/aviso-acciones.js): dicen qué pasó y llevan a donde se hace * de nuevo —o se deshace, en el caso del favorito. * * Nacen en la MISMA pastilla blanca del corazón y el hamburguesa —fondo * semitransparente, glifo en `--acento`— y no rellenos, que es como * estaban hasta 2026-09-17d. Con cuatro sellos posibles por card, una fila * de círculos naranjas llenos al lado del corazón y el hamburguesa pálidos * se leía como cuatro alertas sobre cada aviso, y en una grilla de treinta * cards eso es una pared de naranja que no dice nada. La pastilla pálida * es el estado de reposo de todos los botones que viven sobre la foto: el * relleno queda reservado para cuando hay algo que decir (ver * `[data-cara]` abajo). * * `hidden` no alcanza contra el `inline-flex`: lo apaga la última regla, * igual que el resto de los `[hidden]` del archivo. */ .aviso-sellos { position: absolute; top: 10px; right: 46px; display: flex; gap: 6px; z-index: 4; /* mismo plano que el corazón y el hamburguesa */ } .aviso-sello { width: 30px; height: 30px; background: rgba(255,255,255,.85); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: background .15s, transform .15s; } .aviso-sello:hover { background: #fff; } .aviso-sello:active { transform: scale(.94); } .aviso-sello[hidden] { display: none !important; } /* LAS CARAS SÓLIDAS. La pastilla pálida de arriba es la de `espera` y no * necesita regla: es el fondo base y quiere decir "esto está en curso y no * hay nada nuevo". * * El relleno es lo que llama la atención, así que sólo lo llevan los dos * sellos que tienen algo para contar. Qué dicen lo decide el servidor * (`appSelloCara()` en lib/marcas.php) y depende de la marca: * * · visita y oferta → el RESULTADO. Verde si el vendedor aceptó —y ahí * se queda para siempre—, rojo si no, hasta que se lee. * · conversar y favorito → la NOVEDAD. Hay mensajes sin leer, o el aviso * cambió. Nunca rojo: no hay nada que rechazar. * * Y de ahí que la misma cara `ok` se pinte de dos colores distintos, que * es la única excepción de este bloque: en visita y oferta el verde dice * QUE SÍ —es un resultado, y el verde es lo que lo distingue del rojo de * al lado—, pero en conversar y favorito no hay un sí ni un no, sólo "mirá * esto". Para eso el color del portal es `--acento`, el mismo del corazón * con novedad y del hamburguesa abierto. Un chat en verde estaría diciendo * que algo salió bien cuando lo único que pasó es que llegó un mensaje. * * El cambio es sólo de fondo y de glifo: misma medida, mismo ícono y mismo * lugar en la fila, porque sigue siendo el mismo sello. * * Van después de la regla base y del hover para ganarle a los dos sin * `!important`: misma especificidad más orden. El atributo lo pone el * servidor al rendir y lo mueve el JS sin recargar, desde dos lados: el * latido que pregunta cada tanto si pasó algo (assets/js/novedades.js) y * la respuesta del GET del gesto, que es la que puede dejar el sello en su * cara final (`appNovedadSello()`, mismo archivo). * * --------------------------------------------------------------- * Sin parpadeo, a propósito * --------------------------------------------------------------- * Hasta 2026-09-17 el glifo del sello verde parpadeaba a 1 Hz, y tenía * sentido mientras el verde era exclusivo de conversar: era un sello * único, y un color quieto se vuelve parte de la foto a los dos segundos * de mirarla. * * Con los cuatro sellos capaces de pintarse eso se dio vuelta: en una card * pueden quedar cuatro glifos parpadeando a la vez, cada uno con su fase, * y en una grilla de treinta cards son decenas. Deja de llamar la atención * sobre algo y pasa a ser ruido sobre todo. El contraste contra la * pastilla pálida ya distingue la cara, que es lo único que el sello tiene * que decir. * * Con esto el portal se queda sin ninguna animación infinita: las que * quedan son pops de medio segundo, así que tampoco hace falta la guarda * de `prefers-reduced-motion` que acompañaba al parpadeo. */ .aviso-sello[data-cara="ok"], .aviso-sello[data-cara="no"] { color: #fff; } .aviso-sello[data-cara="ok"] { background: var(--ok); } .aviso-sello[data-cara="ok"]:hover { background: var(--ok-h); } .aviso-sello[data-cara="no"] { background: var(--no); } .aviso-sello[data-cara="no"]:hover { background: var(--no-h); } /* La novedad de conversar, en el acento y no en el verde (ver arriba). Va * después para ganarle por orden, con la especificidad justa para pisar * sólo ésta. * * `favorito` estaba en esta misma regla hasta que su sello se fue de la * fila: esa novedad la pinta ahora el corazón, con este mismo naranja (ver * `.aviso-corazon.tiene-novedad`). El color es el mismo a propósito — * cambió qué pieza lo lleva, no qué significa. */ .aviso-sello[data-aviso-sello="conversar"][data-cara="ok"] { background: var(--acento); } .aviso-sello[data-aviso-sello="conversar"][data-cara="ok"]:hover { background: var(--acento-h); } /* Menú de acciones del aviso — uno solo por página (ver * assets/js/aviso-acciones.js). Va al centro de la pantalla en cualquier * medida, con el mismo velo que los modales `.hoja-*` a los que lleva * cada ítem: son el mismo gesto en dos pasos y el segundo tiene que * aparecer donde estaba el primero. De qué aviso habla lo dice la tira de * arriba (`.hoja-aviso`), no la posición. */ .aviso-acciones[hidden] { display: none !important; } .aviso-acciones { position: fixed; inset: 0; z-index: 230; /* por encima de los modales, que abren desde acá */ display: flex; align-items: center; justify-content: center; /* Sin aire a los costados: en teléfono el panel va de borde a borde, * igual que la tarjeta de los modales `.hoja-*`. El que manda el ancho * es el `max-width` del panel, no un margen de acá. * * Arriba y abajo sí queda: el panel se centra con flex, y un panel más * alto que la pantalla —cinco botones, con los rótulos partidos en dos * renglones— se sale por los dos lados a la vez sin poder scrollear. */ padding: 20px 0; } .aviso-acciones-backdrop { position: absolute; inset: 0; background: rgba(16, 22, 54, .55); backdrop-filter: blur(2px); } /* Las MISMAS MEDIDAS que la tarjeta de los modales `.hoja-*` a los que * lleva cada ítem, en las dos anchuras: en teléfono toma la pantalla * entera (tope de 480, el ancho del `.app-shell`) y de 640 para arriba se * planta en 420 en el medio. El menú y el modal que abre son la misma * caja en dos pasos, y eso incluye cuánto miden. * * En teléfono no es sólo coherencia: los rótulos de los cuatro de abajo * viven en media caja, y el más largo —"Hacer una oferta"— necesita cada * píxel que haya. */ .aviso-acciones-panel { position: relative; width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(16, 22, 54, .32); /* El MISMO margen interno que la tarjeta de los modales `.hoja-*` a los * que lleva cada ítem (ver `.hoja-card`): el menú y el modal que abre * son la misma caja en dos pasos, y si el contenido de uno arranca * pegado al borde y el del otro no, el segundo paso se lee como otra * pantalla y no como la continuación del primero. * * Sin el `env(safe-area-inset-bottom)` que sí lleva `.hoja-card`: eso * es de una hoja pegada al pie de la pantalla, y este panel va * centrado. */ padding: 16px 18px 20px; overflow: hidden; animation: acciones-pop .16s ease-out; /* Dos columnas: "Coordinar compra" ocupa las dos y los otros cuatro van * de a uno. La jerarquía la dice la FORMA y no el rótulo — en una lista * de cinco renglones iguales hay que leerlos todos para saber cuál es * el importante (ver `appAvisoAccionesMenu()` en lib/acciones.php). * * Un ítem oculto no deja hueco: `display: none` lo saca de la grilla y * los de abajo se reacomodan solos. Eso importa porque los cuatro de * abajo se muestran u ocultan por card según los módulos de la cuenta * dueña del aviso. */ display: grid; grid-template-columns: 1fr 1fr; /* Aire parejo en las dos direcciones, y el mismo que hay entre la tira * y el primer botón: cinco rectángulos casi pegados se leen como un * bloque partido por ranuras, y lo que se elige acá es UNO. * * Es el aire ENTRE botones y nada más: a qué distancia quedan del * borde de la caja lo fija el `padding` del panel, arriba. */ gap: 16px; } /* La tira va de lado a lado: es de qué aviso habla todo el menú, no una * opción más. El `role="presentation"` que la envuelve es el mismo que * la saca de la cuenta de ítems de un lector de pantalla. * * El aire de abajo lo pone entero el `gap` — sin margen propio, que se * le sumaría y la dejaría más lejos de los botones que ellos entre sí. * Que la tira no se lea como un ítem más de la pila ya lo dice la forma: * una tarjeta clara con foto y precio arriba de botones pintados. */ .aviso-acciones-panel > [role="presentation"] { grid-column: 1 / -1; } /* El mismo corte y los mismos valores que usan `.hoja-modal` / `.hoja-card` * para pasar de hoja a tarjeta: de acá para arriba hay pantalla de sobra y * un panel de borde a borde sería una tira, no un menú. */ @media (min-width: 640px) { .aviso-acciones { padding: 20px; } .aviso-acciones-panel { max-width: 420px; } } /* Entra creciendo apenas, para que se lea como que sale del botón que la * abrió y no como un cartel que cayó de la nada. */ @keyframes acciones-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } /* La tira viene con los márgenes que usa dentro del modal, donde cuelga * de un encabezado; acá es lo primero de la caja y el aire de arriba lo * pone el padding del panel. */ /* El aire de abajo lo pone ahora el `gap` de la grilla; con el margen * puesto se sumaban los dos. */ .aviso-acciones .hoja-aviso { margin: 0; } /* BOTONES de verdad, no renglones de una lista. * * Hasta acá eran texto suelto alineado a la izquierda sobre fondo * transparente, que es la forma de un menú contextual de escritorio y la * única del portal que se veía así. Ahora usan el mismo lenguaje que los * `.auth-btn` del resto de las pantallas —pintados, centrados, radio * grande, cuerpo en 700— y sobre todo la misma PAREJA DE TONOS que ya * usan los modales a los que este menú lleva: el naranja para lo único * que la pantalla propone hacer, y el gris claro para lo que lo acompaña * (ver `.auth-btn` y `.auth-btn-gris-claro`). * * Los valores no se copian a ojo: son los mismos de esas dos clases. No * se reusan por `class` porque `.auth-btn` trae `margin-top` y un ancho * pensado para apilarse en una tarjeta de sesión, y acá el que manda es * el `gap` de la grilla. */ .aviso-acciones button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; /* sin esto el texto largo desborda la columna */ /* Más altos que un `.auth-btn` de formulario: acá están pegados de a * dos y uno arriba del otro, y lo que separa a cada uno del que sigue * son 6px. El cuerpo del botón es entonces lo que se ve, y un botón * flaco en esa pila se lee como un renglón de lista. De paso es el * blanco que se toca con el pulgar en un teléfono. */ padding: 17px 10px; border: none; border-radius: var(--radius-md); background: #f1f5f9; /* Una sombra suave en lugar de un contorno: dice dónde empieza y dónde * termina cada botón levantándolo del fondo, que es lo que ya hacen la * tarjeta del aviso y el panel entero. Un borde lo dibujaba como una * caja y metía en el menú una línea que no existe en ninguna otra * pantalla del portal. * * Misma tinta que la sombra del panel —el azul oscuro de la marca y no * un gris— apenas desplazada hacia abajo y muy corta: tiene que * separarlo del fondo, no hacerlo flotar. */ box-shadow: 0 1px 3px rgba(16, 22, 54, .12); color: color-mix(in srgb, var(--muted) 70%, #000); font-family: inherit; font-size: .9rem; font-weight: 700; text-align: center; /* A media caja "Hacer una oferta" entra justo, y en una pantalla más * angosta o con el cuerpo de letra agrandado deja de entrar. Con dos * renglones permitidos se parte y la grilla empareja el alto de las dos * celdas de esa fila, que es mejor que recortar el rótulo o achicar el * cuerpo. */ white-space: normal; line-height: 1.25; transition: background .15s; } .aviso-acciones button[hidden] { display: none !important; } .aviso-acciones button:hover { background: #e2e8f0; } /* El ancho entero Y el naranja del portal: es la única acción del menú * que arranca de un acuerdo ya hecho, y con los otros cuatro en gris es * el único que se lee como "esto es lo que hay que hacer acá". * * Es el mismo `.auth-btn` pelado que llevan los botones de enviar de los * cinco modales, así que el naranja significa lo mismo en los dos pasos * del gesto. */ .aviso-acciones button[data-accion="compra"] { grid-column: 1 / -1; background: var(--acento); color: #fff; } .aviso-acciones button[data-accion="compra"]:hover { background: var(--acento-h); } /* El glifo va en el acento sobre los grises y hereda el blanco sobre el * naranja — un naranja sobre naranja no se vería. Sin ancho fijo: eso * servía para alinear los íconos de una lista, y en un botón centrado * sólo mete aire muerto entre el glifo y el rótulo. */ .aviso-acciones button i { flex: none; /* el glifo no se achica cuando el rótulo se parte */ font-size: 1rem; color: var(--acento); } .aviso-acciones button[data-accion="compra"] i { color: inherit; } /* "Gestionar servicios" tuvo acá un `grid-column: 1 / -1` que lo mandaba a * lo ancho, abajo de todo. Era una solución de PARIDAD y no de jerarquía: * con cinco ítems abajo del ancho, la grilla de dos columnas dejaba al * último solo a media caja, que se lee como si faltara algo. * * Los cinco pasaron a ser cuatro cuando el favorito perdió su ítem —lo * hace el corazón de la card, ver `appAvisoAccionesMenu()` en * lib/acciones.php—, así que la grilla cierra sola y servicios entró en el * casillero que quedó libre. Sigue en gris como los otros tres: el naranja * es de "Coordinar compra", la única acción que la pantalla propone. */ /* Pulso al tocar el corazón — feedback inmediato, antes de que responda el * servidor. */ .corazon-pulse { animation: corazon-pop .32s ease; } @keyframes corazon-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } .aviso-body { padding: 12px 14px 14px; } .aviso-title { font-size: 1rem; font-weight: 700; line-height: 1.25; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aviso-precio { color: var(--acento); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .aviso-precio .per { color: var(--muted); font-weight: 500; font-size: 0.75rem; } .aviso-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 0.8rem; margin-top: 6px; } .aviso-meta .dot { color: #cfd3e5; } .aviso-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .aviso-badge { padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .aviso-badge.op-venta { background: var(--primario); color: #fff; } .aviso-badge.op-alquiler { background: var(--mint-soft); color: #128473; } .aviso-badge.tipo { background: var(--lilac); color: #6b5cb8; } /* Tarjeta más chica horizontal (jobs / listado angosto). */ .aviso-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); align-items: center; color: var(--text); } .aviso-row-thumb { width: 84px; height: 84px; border-radius: var(--radius-sm); background: #eef0fa center/cover no-repeat; overflow: hidden; } .aviso-row-thumb img { width: 100%; height: 100%; object-fit: cover; } .aviso-row-body { min-width: 0; } .aviso-row-title { font-weight: 700; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --------- CTA banner (Post a Job / Publica tu aviso) --------- */ .cta-panel { margin: 22px 10px 4px; background: var(--primario); color: #fff; border-radius: var(--radius-lg); padding: 18px; text-align: center; position: relative; overflow: hidden; } .cta-panel::after { content: ''; position: absolute; right: -25px; bottom: -25px; width: 60px; height: 60px; background: #f0b344; border-radius: 50%; opacity: .3; } .cta-title { font-weight: 600; margin-bottom: 12px; font-size: 0.95rem; } .cta-btn { display: inline-block; background: var(--acento); color: #fff; padding: 10px 30px; border-radius: 99px; font-weight: 700; border: none; text-decoration: none; font-size: 0.9rem; } .cta-btn:hover { background: var(--acento-h); } /* --------- filtros / listado --------- */ .list-toolbar { display: flex; gap: 8px; padding: 14px 10px 4px; align-items: center; overflow-x: auto; scrollbar-width: none; } .list-toolbar::-webkit-scrollbar { display: none; } .list-toolbar .btn-toolbar { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 12px; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; } .list-toolbar .btn-toolbar.active { background: var(--primario); color: #fff; border-color: var(--primario); } /* empty state (No results — como el mockup) */ .empty-state { padding: 60px 30px; text-align: center; color: var(--muted); } .empty-state h3 { color: var(--text); margin-bottom: 6px; font-size: 1rem; font-weight: 700; } .empty-state p { font-size: 0.85rem; margin-bottom: 12px; } /* El `:not()` no es decorativo: sin él esta regla —que es más específica * que `.auth-btn`— le pintaba el texto de acento a la salida del estado * vacío, y quedaba naranja sobre el azul del botón. El acento es para el * link pelado; el botón trae su propio color de texto. */ .empty-state a:not(.auth-btn) { color: var(--acento); font-weight: 600; } /* La salida del estado vacío, cuando es un botón y no un link, va en * `--primario` en cualquier página. Es la misma acción en todas —"andá a * hacer lo que todavía no hiciste"— y tiene que verse igual en las dos * que hoy la tienen: /mi-cuenta (que ya la pintaba así por la regla de * `.page-cuenta`) y /favoritos, que corre bajo `page-listado` y sin esto * saldría de acento. * * Y va A MEDIDA DE SU TEXTO, no al ancho del contenedor: `.auth-btn` nace * con `width: 100%` porque su lugar natural es apilado al pie de un * formulario, donde estirar es lo correcto. Acá no hay formulario —hay un * bloque centrado con un ícono, un título y una frase— y una barra de * lado a lado no se lee como el remate de ese bloque sino como otra * sección. El centrado ya lo da el `text-align: center` de `.empty-state` * sobre una caja inline-flex; no hace falta `margin: auto`. */ .empty-state .auth-btn { background: var(--primario); width: auto; padding-inline: 26px; } .empty-state .auth-btn:hover { background: var(--primario-d); } /* --------- detalle --------- */ /* Wrapper que contiene todo el aviso (foto + galería + título + ficha + * publicado por). Se lee como una .aviso-card "abierta" al hacer tap: * misma superficie blanca, mismas esquinas redondeadas y misma sombra * suave que las cards del listado. */ .detalle-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 0 24px rgba(16, 22, 54, 0.18), 0 0 6px rgba(16, 22, 54, 0.08); overflow: hidden; margin: 12px 10px 0; padding: 3px; } .detalle-hero { background: var(--surface); overflow: hidden; position: relative; border-radius: var(--radius-sm); aspect-ratio: 16 / 10; touch-action: pan-y; } .detalle-hero > img { /* Compat: si no hay `.media-strip` (edge case sin fotos múltiples), la * imagen suelta ocupa todo el hero como antes. */ width: 100%; height: 100%; object-fit: cover; background: #eef0fa; } .detalle-hero .media-strip img { background: #eef0fa; } /* El corazón del hero: el mismo de la card en la medida grande, y con la * misma regla —pastilla blanca en los dos estados, el relleno del glifo es * lo que dice si está en favoritos— (ver la nota de `.aviso-corazon`). */ .detalle-corazon-lg { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,.9); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* Hamburguesa de acciones del hero — la misma pastilla que el corazón y * justo debajo (12px del borde + 36px del corazón + 6px de aire). Es el * par que ya llevan las cards del listado (`.aviso-corazon` + * `.aviso-menu`), en la medida grande de la ficha. Abierto se invierte * igual que allá. */ .detalle-menu-lg { position: absolute; top: 54px; right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,.9); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; z-index: 4; /* por encima de .media-dots, igual que en la card */ } .detalle-menu-lg[aria-expanded="true"] { background: var(--acento); color: #fff; } /* Anterior / siguiente del hero — la misma pastilla blanca del corazón y el * hamburguesa, las DOS JUNTAS en la esquina inferior izquierda. * * Antes iban una en cada costado y a media altura, que es la convención de * un carrusel de escritorio. Acá estorbaban: a media altura caen justo * sobre el centro de la foto —donde está lo que la foto muestra— y una de * cada lado obliga a cruzar la pantalla con el pulgar para ir y volver. En * la esquina las dos quedan bajo el mismo dedo y despejan la imagen. * * Esa esquina es la única libre del hero: arriba a la derecha viven el * corazón, el hamburguesa y los sellos, y los puntos van centrados al pie. * Contra ellos el `z-index: 4` es lo que decide, igual que antes. * * Las separa 6px, y cada una queda a 12 del borde: es el mismo ritmo que ya * usan el corazón y el hamburguesa apilados a la derecha (12 + 36 + 6). * * La sombra corta las separa del fondo: sobre una foto clara —un cielo, una * pared blanca— una pastilla de blanco al 90% se queda sin borde y el botón * desaparece. El corazón y el hamburguesa no la necesitan porque siempre * caen sobre la esquina, que es donde las fotos suelen tener algo. */ .detalle-nav-lg { position: absolute; bottom: 12px; width: 36px; height: 36px; background: rgba(255,255,255,.9); color: var(--acento); border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: 0 1px 4px rgba(16, 22, 54, .25); transition: background .15s; z-index: 4; /* por encima de .media-dots, igual que el hamburguesa */ } .detalle-nav-lg:hover { background: #fff; } .detalle-nav-lg.prev { left: 12px; } .detalle-nav-lg.next { left: 54px; } /* 12 del borde + 36 del botón + 6 de aire */ /* Los sellos del hero — los mismos cuatro de la card (ver `.aviso-sellos`) * en la medida grande de la ficha: a la izquierda del corazón y en su * misma fila (12px del borde + 36px del corazón + 6px de aire). * * Reusa `.aviso-sello` en vez de clonarlo: entre las dos medidas lo único * que cambia es el lado del círculo y el cuerpo del glifo. El color, el * hover y el apagado son los mismos, y duplicarlos sería el camino más * corto a que un día se despinten uno del otro. * * Por eso este bloque NO toca el fondo, aunque el corazón y el hamburguesa * del hero usen `.9` de blanco y el sello se quede con el `.85` de la * card: un punto de opacidad no se ve, y para ponerlo habría que repetir * acá las cinco reglas de `[data-cara]` con más especificidad —más sus * hovers—, que es exactamente la duplicación que este comentario viene * evitando. */ .detalle-sellos { position: absolute; top: 12px; right: 54px; display: flex; gap: 6px; z-index: 4; } .detalle-sellos .aviso-sello { width: 36px; height: 36px; font-size: 0.95rem; } .detalle-body { padding: 16px 14px; } .detalle-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; } .detalle-precio { color: var(--acento); font-weight: 700; font-size: 1.35rem; margin-bottom: 12px; } .detalle-precio .per { color: var(--muted); font-weight: 500; font-size: 0.85rem; } .detalle-section { padding: 0 14px; margin-bottom: 16px; } .detalle-section h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; } .detalle-section p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .spec { background: var(--bg); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.83rem; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; } .spec-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; } .spec .k { color: var(--muted); display: block; margin-bottom: 2px; font-size: 0.75rem; } .spec .v { color: var(--text); font-weight: 600; } .spec .spec-icon { flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; font-size: 1.75rem; line-height: 1; color: var(--text); opacity: 0.5; } .tags-row { display: flex; gap: 6px; flex-wrap: wrap; } .tag { padding: 4px 12px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; background: var(--acento-soft); color: var(--acento); } /* Las variantes .mint / .lilac / .yellow se quitaron: el único lugar que * las usaba era el renglón de etiquetas del detalle, y ahí las tres van * en el rosa de `.tag`. Si vuelve a hacer falta una etiqueta de otro * color, sale de las variables, no de hexadecimales sueltos. */ /* Barra de acciones al final del detalle. Vive dentro de .detalle-card * como sección interna: padding propio, sin margen externo. */ .detalle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 14px 16px; } /* `a` y `button` juntos: los dos botones son