/* ===== MODO APP (PWA) ===== Vestimenta de app nativa. Se activa SOLO cuando tiene la clase "modo-app" (la pone modo-app.js al detectar que el sitio corre instalado como app; QA en navegador: ?modoapp=1). En la web normal este archivo no cambia NADA. Behavior-preserving: solo oculta/encoge elementos y agrega la barra inferior, cuyos botones son links a páginas que ya existen. Los !important son necesarios: styles.css trae stacks de !important (deuda conocida). */ /* --- Barra de pestañas inferior --- */ .appbar-tabs{ display:none; } html.modo-app .appbar-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:90; /* sobre el contenido (20-80), bajo los modales del sitio (99+) */ display:flex; justify-content:space-around; align-items:stretch; background:#fff; border-top:1px solid var(--app-borde,#E8DDBF); padding:4px 2px calc(6px + env(safe-area-inset-bottom,0px)); -webkit-user-select:none; user-select:none; } html.modo-app .appbar-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; padding:6px 0 3px; min-height:50px; font-size:11px; line-height:1; text-decoration:none; color:#7d867e; -webkit-tap-highlight-color:transparent; } html.modo-app .appbar-tab svg{ width:23px; height:23px; } html.modo-app .appbar-tab span{ font-weight:600; letter-spacing:.1px; } html.modo-app .appbar-tab.appbar-activa{ color:var(--app-verde,#064E2E); } html.modo-app .appbar-publicar{ flex:0 0 74px; } html.modo-app .appbar-fab{ width:50px; height:50px; border-radius:50%; background:var(--app-dorado,#F5B82E); color:var(--app-verde,#064E2E); display:flex; align-items:center; justify-content:center; margin-top:-24px; border:4px solid #fff; box-shadow:0 4px 14px rgba(6,56,31,.25); } html.modo-app .appbar-fab svg{ width:24px; height:24px; } html.modo-app .appbar-publicar.appbar-activa .appbar-fab{ background:var(--app-dorado2,#B89000); } /* Colchón para que el contenido no quede tapado por la barra. */ html.modo-app body{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; } /* Páginas sin barra (conversación de chat): sin colchón. */ html.modo-app.sin-appbar body{ padding-bottom:0 !important; } /* Con el teclado en pantalla la barra estorba: se esconde. */ html.modo-app.teclado-abierto .appbar-tabs{ display:none; } /* Toast/avisos: en modo app el .toast del sitio (bottom:18px) queda DETRÁS de la barra de pestañas y no se lee. Subirlo por encima de la barra y centrarlo. */ html.modo-app .toast{ left:12px !important; right:12px !important; bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important; text-align:center !important; } html.modo-app.sin-appbar .toast{ bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important; } /* --- Tacto de app --- */ html.modo-app{ -webkit-tap-highlight-color:transparent; } html.modo-app button, html.modo-app a{ -webkit-user-select:none; user-select:none; } html.modo-app input, html.modo-app textarea{ -webkit-user-select:text; user-select:text; } html.modo-app img{ -webkit-user-drag:none; } /* --- Inicio: héroe de sitio web -> encabezado de app delgado --- */ html.modo-app .brand-row{ min-height:0 !important; padding:10px 12px 8px !important; flex-wrap:wrap !important; gap:8px 10px !important; } html.modo-app .brand-left{ gap:8px !important; } html.modo-app .brand-logo{ width:32px !important; height:32px !important; object-fit:contain; } html.modo-app .brand-title{ font-size:17px !important; } html.modo-app .brand-title .flag{ width:16px !important; height:auto !important; } html.modo-app .brand-sub{ display:none !important; } /* lema: cosa de web */ html.modo-app .header-market-search{ order:3; flex:1 1 100% !important; max-width:none !important; margin:0 !important; } html.modo-app .header-market-search input{ border-radius:18px !important; } html.modo-app .top-benefits{ order:2; margin-left:auto !important; gap:6px !important; } html.modo-app .trust-mini{ display:none !important; } /* sellitos de web */ html.modo-app .publish-top{ display:none !important; } /* lo reemplaza el botón dorado */ html.modo-app .cat-item.cat-download-app{ display:none !important; } /* "Descargar App" dentro de la app: absurdo (selector específico para ganarle al chip genérico) */ html.modo-app .account-menu-mini .account-main-btn{ font-size:12px !important; padding:6px 10px !important; } /* --- Páginas interiores: topbar delgada; "Volver" sobra (la barra inferior navega) --- */ html.modo-app .pub-topbar{ min-height:0 !important; padding:8px 12px !important; } html.modo-app .pub-brand img{ width:28px !important; height:28px !important; object-fit:contain; } html.modo-app .pub-brand span{ font-size:16px !important; } html.modo-app .pub-actions-top{ gap:6px !important; } html.modo-app .pub-actions-top > button[onclick*="index.html"], html.modo-app .pub-actions-top > button[onclick*="goHome"]{ display:none !important; } /* --- Legal: héroe compacto y sin pie de página de sitio --- */ html.modo-app .info-hero{ padding:14px 16px !important; } html.modo-app .info-footer, html.modo-app .site-footer{ display:none !important; } /* ===== Refinado UI 2026-06-10 (feedback del dueño) ===== */ /* --- Buscador ÚNICO con filtro integrado (inicio) --- */ html.modo-app .header-market-search{ display:flex !important; gap:6px !important; align-items:center !important; } html.modo-app .header-market-search input{ flex:1 1 auto !important; border-radius:20px !important; } html.modo-app .header-market-search > button:not(.appbtn-filtros){ display:none !important; } /* botón amarillo "Buscar": sobra (busca al escribir) */ html.modo-app .appbtn-filtros{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; border:1px solid var(--app-dorado,#F5B82E); background:rgba(255,255,255,.08); color:var(--app-dorado,#F5B82E); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; } html.modo-app .appbtn-filtros svg{ width:20px; height:20px; } html.modo-app.filtros-abiertos .appbtn-filtros{ background:var(--app-dorado,#F5B82E); color:var(--app-verde,#064E2E); } /* Filtros: ocultos por defecto; el botón los abre como panel flotante */ html.modo-app aside.filters{ display:none !important; } html.modo-app.filtros-abiertos aside.filters{ display:block !important; position:fixed !important; left:10px !important; right:auto !important; bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important; top:auto !important; width:calc(100vw - 20px) !important; max-width:none !important; margin:0 !important; max-height:55vh !important; overflow-y:auto !important; z-index:95 !important; background:#fff !important; border:1px solid var(--app-borde,#E8DDBF) !important; border-radius:14px !important; box-shadow:0 -8px 30px rgba(6,56,31,.25) !important; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)) !important; } /* las reglas móviles del sitio esconden los controles del aside: re-mostrarlos dentro del panel */ html.modo-app.filtros-abiertos aside.filters > *{ display:revert !important; } html.modo-app.filtros-abiertos aside.filters label{ display:block !important; margin:10px 0 4px !important; font-size:12px !important; } html.modo-app.filtros-abiertos aside.filters select, html.modo-app.filtros-abiertos aside.filters input{ display:block !important; width:100% !important; } html.modo-app.filtros-abiertos aside.filters h2{ font-size:14px !important; margin:0 0 4px !important; } /* …pero el buscador duplicado y su botón siguen fuera (buscador único) */ html.modo-app.filtros-abiertos aside.filters > .bird-search-box, html.modo-app.filtros-abiertos aside.filters > .search-btn-top{ display:none !important; } /* dentro del panel NO va otro buscador (buscador único) */ html.modo-app .bird-search-box{ display:none !important; } html.modo-app .search-btn-top{ display:none !important; } /* --- Botones superiores compactos (campanita + corazón + sesión) --- */ html.modo-app .appbtn-favoritos{ width:38px; height:38px; border-radius:50%; border:1px solid var(--app-dorado,#F5B82E); background:rgba(255,255,255,.08); color:var(--app-dorado,#F5B82E); display:flex; align-items:center; justify-content:center; text-decoration:none; } html.modo-app .appbtn-favoritos svg{ width:19px; height:19px; } html.modo-app .notif-bell-btn{ width:38px !important; height:38px !important; border-radius:50% !important; padding:0 !important; } /* --- Banner "Publica tus aves" --- */ html.modo-app .appbanner-publicar{ display:flex; align-items:center; gap:12px; margin:10px 12px 0; padding:10px 12px; background:linear-gradient(135deg,var(--app-verde,#064E2E),var(--app-verde2,#04351F)); border:1px solid var(--app-dorado,#F5B82E); border-radius:14px; } html.modo-app .appbanner-publicar img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--app-dorado,#F5B82E); flex:0 0 46px; } html.modo-app .appbanner-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } html.modo-app .appbanner-texto strong{ color:#fff; font-size:14.5px; line-height:1.15; } html.modo-app .appbanner-texto span{ color:#cfe0d4; font-size:11px; line-height:1.25; } html.modo-app .appbanner-btn{ flex:0 0 auto; background:var(--app-dorado,#F5B82E); color:var(--app-verde,#064E2E); font-size:12px; font-weight:700; text-decoration:none; padding:9px 12px; border-radius:18px; white-space:nowrap; } /* --- Categorías: tarjetones con foto -> chips de texto --- */ html.modo-app .category-strip{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:7px !important; padding:10px 12px !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; } html.modo-app .category-strip::-webkit-scrollbar{ display:none; } html.modo-app .cat-item{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; display:inline-flex !important; align-items:center !important; padding:7px 14px !important; margin:0 !important; border:1px solid var(--app-dorado,#F5B82E) !important; border-radius:16px !important; background:rgba(255,255,255,.06) !important; box-shadow:none !important; } html.modo-app .cat-item .cat-img{ display:none !important; } /* sin fotos: chips de texto */ html.modo-app .cat-item small{ display:none !important; } html.modo-app .cat-item .cat-label{ font-size:12px !important; font-weight:700 !important; color:#fff !important; margin:0 !important; white-space:nowrap; } html.modo-app .cat-item.active{ background:var(--app-dorado,#F5B82E) !important; } html.modo-app .cat-item.active .cat-label{ color:var(--app-verde,#064E2E) !important; } /* --- GallinaPro: franja delgada y sutil --- */ html.modo-app .gallinapro-ad{ display:flex !important; align-items:center !important; gap:10px !important; margin:10px 12px !important; padding:9px 12px !important; border-radius:12px !important; } html.modo-app .gallinapro-icon{ font-size:20px !important; flex:0 0 auto; } html.modo-app .gallinapro-text{ flex:1; min-width:0; } html.modo-app .gallinapro-text span{ display:none !important; } /* kicker: sobra */ html.modo-app .gallinapro-text p{ display:none !important; } /* bajada: sobra */ html.modo-app .gallinapro-text h2{ font-size:12px !important; line-height:1.3 !important; margin:0 !important; } html.modo-app .gallinapro-ad{ flex-wrap:wrap !important; } html.modo-app .gallinapro-text{ flex:1 1 55% !important; min-width:170px; } html.modo-app .gallinapro-ad > button{ flex:0 0 auto; width:auto !important; font-size:11px !important; padding:6px 10px !important; border-radius:14px !important; white-space:nowrap; margin-left:auto; } /* --- Cards de publicaciones: solo lo importante --- */ html.modo-app .card .card-cat-chip{ display:none !important; } /* categoría: ya se filtra con los chips */ html.modo-app .card .card-meta-line{ display:none !important; } /* vistas/sexo/edad: ruido (el detalle vive adentro) */ html.modo-app .card .card-body{ padding:9px 10px 10px !important; } html.modo-app .card .card-location{ font-size:10.5px !important; } /* cápsula de precio verde oscuro con carrito blanco (diseño objetivo del dueño) */ html.modo-app .card .price{ display:flex !important; align-items:center !important; justify-content:space-between !important; background:linear-gradient(135deg,#064E2E,#04351F) !important; border-radius:11px !important; padding:9px 11px !important; margin-top:8px !important; color:#fff !important; font-size:16px !important; font-weight:800 !important; } /* carrito (comprar): la card completa ya abre la publicación, donde vive el flujo de compra */ html.modo-app .card .price::after{ content:""; width:26px; height:26px; flex:0 0 26px; background-color:rgba(255,255,255,.16); border-radius:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2.4l2.2 11.2a1.6 1.6 0 0 0 1.6 1.3h7.9a1.6 1.6 0 0 0 1.6-1.3L20.5 8H6'/%3E%3C/svg%3E"); background-size:16px 16px; background-position:center; background-repeat:no-repeat; } /* ===== Inspección visual 2026-06-11: solo OCULTAR/compactar, nada de lógica ===== */ /* --- Inicio: ruido restante --- */ html.modo-app .card .modalidad-chip{ display:none !important; } /* duplicaba (y contradecía) la etiqueta de la foto */ /* --- Publicación: ficha compacta en 2 columnas --- */ html.modo-app .pub-info-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:2px 14px !important; } html.modo-app .pub-info-grid > p{ margin:6px 0 !important; font-size:13px !important; } html.modo-app .pub-info-grid > :not(p){ grid-column:1 / -1; } /* descripción y bloques largos a ancho completo */ /* --- Publicación: botonera ordenada --- */ /* CTA héroe: Solicitar compra grande y dorado */ html.modo-app .pub-action-row{ display:flex !important; flex-direction:column !important; gap:8px !important; } html.modo-app .pub-action-row .detail-main:not(.detail-chat-btn){ order:-1; font-size:16px !important; padding:14px !important; border-radius:12px !important; background:var(--app-dorado,#F5B82E) !important; color:var(--app-verde,#064E2E) !important; font-weight:800 !important; border:0 !important; } /* botón "Chat cerrado por ahora" deshabilitado: no aporta nada tocable */ html.modo-app .pub-action-row .detail-chat-btn[disabled]{ display:none !important; } /* "Preguntar" del grupo: duplicado del botón flotante "Ir a preguntas" */ html.modo-app .pub-action-row .question-jump-btn{ display:none !important; } /* secundarios (Guardar/Ver vendedor/Reportar) en una fila compacta */ html.modo-app .pub-action-row .detail-soft{ flex:1; display:inline-flex; align-items:center; justify-content:center; font-size:12px !important; padding:9px 6px !important; border-radius:10px !important; } html.modo-app .pub-action-row{ flex-wrap:wrap !important; } html.modo-app .pub-action-row .detail-soft{ flex:1 1 30% !important; } /* --- Publicación: galería sin adornos cuando hay UNA sola foto --- */ html.modo-app .pub-thumbs:not(:has(.pub-page-thumb:nth-child(2))){ display:none !important; } html.modo-app .pub-gallery-card:has(.pub-page-thumb:only-child) .pub-gal-counter, html.modo-app .pub-main-img-wrap:has(~ .pub-thumbs .pub-page-thumb:only-child) .pub-gal-counter{ display:none !important; } /* ===== ESTILO PREMIUM 2026-06-11 (pautas de diseño del dueño + imagen objetivo) ===== */ html.modo-app{ --app-verde:#064E2E; --app-verde2:#04351F; --app-dorado:#F5B82E; --app-dorado2:#B89000; --app-crema:#FFF9EC; --app-borde:#E8DDBF; --app-texto:#153B2A; --app-texto2:#666666; } /* Fondo crema general y tipografía serif en títulos clave (look premium del objetivo) */ html.modo-app body{ background:var(--app-crema) !important; } html.modo-app .brand-title, html.modo-app .pub-brand span, html.modo-app .appbanner-texto strong, html.modo-app .section-title h1, html.modo-app .publish-strip span{ font-family:Georgia,"Times New Roman",serif !important; } /* Encabezado: degradado verde elegante (pisa el amarillo !important heredado) */ html.modo-app .hero-header, html.modo-app .pub-topbar{ background:linear-gradient(180deg,var(--app-verde),var(--app-verde2)) !important; border-bottom:0 !important; box-shadow:0 2px 14px rgba(4,53,31,.25) !important; padding-top:env(safe-area-inset-top,0px); } /* Marca: "Aves" dorado + "MarketChile" blanco (spans que pone modo-app.js) */ html.modo-app .brand-aves{ color:var(--app-dorado); } html.modo-app .brand-market{ color:#fff; } html.modo-app .brand-title{ font-weight:700 !important; letter-spacing:.2px; } /* Buscador premium: lupa a la izquierda, borde dorado fino, sombra suave */ html.modo-app .header-market-search input{ background:#fff !important; border:1.5px solid var(--app-dorado) !important; border-radius:24px !important; box-shadow:0 3px 10px rgba(4,53,31,.18) !important; padding:11px 14px 11px 38px !important; font-size:14px !important; color:var(--app-texto) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4.5 4.5'/%3E%3C/svg%3E") !important; background-size:17px 17px !important; background-position:13px center !important; background-repeat:no-repeat !important; } html.modo-app .appbtn-filtros{ background:#fff; border:1.5px solid var(--app-dorado); color:#B89000; box-shadow:0 3px 10px rgba(4,53,31,.18); } html.modo-app.filtros-abiertos .appbtn-filtros{ background:var(--app-dorado); color:var(--app-verde); } /* Botones superiores: mismo sistema visual (blanco + borde dorado + ícono verde) */ html.modo-app .notif-bell-btn{ background:#fff !important; border:1.5px solid var(--app-dorado) !important; color:var(--app-verde) !important; box-shadow:0 2px 8px rgba(4,53,31,.15) !important; } html.modo-app .notif-bell-btn .notif-bell-icon svg{ width:18px; height:18px; display:block; margin:auto; } html.modo-app .appbtn-favoritos{ background:#fff; border:1.5px solid var(--app-dorado); color:var(--app-verde); width:40px; height:40px; box-shadow:0 2px 8px rgba(4,53,31,.15); } html.modo-app .account-menu-mini .account-main-btn{ background:#fff !important; border:1.5px solid var(--app-dorado) !important; color:var(--app-verde) !important; border-radius:20px !important; height:40px; padding:0 16px !important; font-weight:700 !important; box-shadow:0 2px 8px rgba(4,53,31,.15) !important; } html.modo-app .notif-badge{ font-size:10px !important; min-width:16px !important; height:16px !important; line-height:16px !important; } /* Panel de notificaciones: anclado a la esquina superior DERECHA de la pantalla (con la campanita a la izquierda, el ancla original right:0 lo sacaba de pantalla) */ html.modo-app .header-notif-dropdown{ position:fixed !important; top:calc(10px + env(safe-area-inset-top,0px)) !important; right:10px !important; left:auto !important; bottom:auto !important; width:min(340px, calc(100vw - 20px)) !important; max-height:70vh !important; overflow-y:auto !important; z-index:130 !important; } @media (min-width:560px){ html.modo-app .header-notif-dropdown{ right:calc(50vw - 240px + 10px) !important; } /* dentro del marco centrado de 480px */ } /* Chips de categorías: cápsulas livianas crema/doradas */ html.modo-app .cat-item{ background:var(--app-crema) !important; border:1px solid var(--app-dorado) !important; padding:6px 14px !important; border-radius:17px !important; } html.modo-app .cat-item .cat-label{ color:var(--app-verde) !important; font-size:12.5px !important; } html.modo-app .cat-item.active{ background:var(--app-dorado) !important; box-shadow:0 2px 8px rgba(184,144,0,.35) !important; } html.modo-app .cat-item.active .cat-label{ color:var(--app-verde2) !important; } /* Banner publicar: más premium + flecha en el botón */ html.modo-app .appbanner-publicar{ background:linear-gradient(135deg,var(--app-verde),var(--app-verde2)); border:1.5px solid var(--app-dorado); border-radius:16px; box-shadow:0 4px 14px rgba(4,53,31,.18); margin:12px 14px 0; padding:12px 14px; } html.modo-app .appbanner-texto strong{ font-size:15px; } html.modo-app .appbanner-btn{ background:var(--app-dorado); box-shadow:0 2px 8px rgba(184,144,0,.4); } html.modo-app .appbanner-btn::after{ content:" ›"; font-weight:800; } /* GallinaPro: crema con botón cápsula contorneada */ html.modo-app .gallinapro-ad{ background:var(--app-crema) !important; border:1px solid var(--app-borde) !important; box-shadow:none !important; } html.modo-app .gallinapro-text h2{ color:var(--app-texto) !important; } html.modo-app .gallinapro-ad > button{ background:#fff !important; color:var(--app-verde) !important; border:1px solid var(--app-borde) !important; font-weight:700 !important; } /* "Aves Destacadas": título serif verde MÁS PEQUEÑO, "Ver todas" como link discreto */ html.modo-app .section-title h1, html.modo-app .section-title h2{ color:var(--app-verde) !important; font-family:Georgia,"Times New Roman",serif !important; font-size:19px !important; letter-spacing:.2px !important; margin:4px 0 !important; } html.modo-app .section-title button{ background:transparent !important; border:0 !important; color:var(--app-verde) !important; font-weight:700 !important; box-shadow:none !important; font-size:13px !important; padding:4px 6px !important; } /* textos de las cards destacadas: más chicos y ordenados */ html.modo-app .card .card-title{ font-size:13.5px !important; line-height:1.25 !important; } html.modo-app .card .card-location{ font-size:10.5px !important; color:var(--app-texto2,#666) !important; } html.modo-app .card .seller-type-chip{ font-size:10px !important; padding:3px 9px !important; border-radius:11px !important; background:var(--app-crema,#FFF9EC) !important; color:var(--app-verde,#064E2E) !important; font-weight:700 !important; border:0 !important; } html.modo-app .market-pagination, html.modo-app #marketPaginationInfo{ font-size:11.5px !important; color:var(--app-texto2,#666) !important; } /* Cards: sombra suave, radios amplios, corazón en círculo semitransparente */ html.modo-app .card{ border-radius:14px !important; overflow:hidden !important; box-shadow:0 3px 12px rgba(6,56,31,.10) !important; border:0 !important; } html.modo-app .card .heart{ background:rgba(255,255,255,.85) !important; border-radius:50% !important; width:32px !important; height:32px !important; border:0 !important; color:var(--app-verde,#064E2E) !important; font-size:16px !important; line-height:32px !important; } html.modo-app .card .heart.active{ color:#D43F3F !important; } /* favorito marcado: corazón rojo */ html.modo-app .card .card-title{ color:var(--app-texto) !important; } /* Beneficios de confianza: compactos en grilla 2x2 */ html.modo-app .trust-grid-bottom{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin:10px 0 !important; } html.modo-app .trust-grid-bottom article{ display:flex !important; align-items:center !important; gap:8px !important; background:#fff !important; border:1px solid var(--app-borde) !important; border-radius:12px !important; padding:9px 10px !important; box-shadow:none !important; margin:0 !important; } html.modo-app .trust-grid-bottom article > div{ font-size:17px !important; flex:0 0 auto; } html.modo-app .trust-grid-bottom h3{ font-size:11.5px !important; margin:0 !important; color:var(--app-texto) !important; line-height:1.25 !important; } html.modo-app .trust-grid-bottom p{ display:none !important; } /* bajada: sobra en versión compacta */ /* CTA final: crema + borde dorado + botón verde (pauta 10; si no gusta, se oculta) */ html.modo-app .publish-strip{ display:flex !important; align-items:center !important; gap:10px !important; background:var(--app-crema) !important; border:1.5px solid var(--app-borde) !important; border-radius:16px !important; margin:10px 14px 14px !important; padding:14px !important; box-shadow:none !important; } html.modo-app .publish-strip span{ flex:1; color:var(--app-texto) !important; font-size:14px !important; line-height:1.35 !important; } html.modo-app .publish-strip button{ background:var(--app-verde) !important; color:#fff !important; border:0 !important; border-radius:22px !important; padding:11px 16px !important; font-weight:700 !important; white-space:nowrap; box-shadow:0 3px 10px rgba(4,53,31,.25) !important; } /* Barra inferior premium: sombra superior, esquinas redondeadas */ html.modo-app .appbar-tabs{ border-top:0; border-radius:18px 18px 0 0; box-shadow:0 -4px 18px rgba(6,56,31,.12); } html.modo-app .appbar-tab.appbar-activa{ color:var(--app-verde); } html.modo-app .appbar-fab{ background:var(--app-dorado); box-shadow:0 4px 14px rgba(184,144,0,.45); } /* Tacto: transiciones y efecto de presión */ html.modo-app button, html.modo-app .appbar-tab, html.modo-app .cat-item, html.modo-app .appbanner-btn, html.modo-app .card{ transition:transform .12s ease, box-shadow .12s ease; } html.modo-app button:active, html.modo-app .appbar-tab:active, html.modo-app .cat-item:active, html.modo-app .appbanner-btn:active{ transform:scale(.97); } /* En navegador de escritorio: app centrada tipo teléfono */ @media (min-width:560px){ html.modo-app body{ max-width:480px !important; margin:0 auto !important; box-shadow:0 0 34px rgba(4,53,31,.15) !important; } html.modo-app .appbar-tabs{ left:50% !important; right:auto !important; width:100% !important; max-width:480px !important; transform:translateX(-50%) !important; } html.modo-app.filtros-abiertos aside.filters{ left:50% !important; transform:translateX(-50%) !important; width:460px !important; } } /* --- Cuenta: menú vertical, un ítem por fila --- */ html.modo-app .account-tabs{ display:flex !important; flex-direction:column !important; gap:7px !important; grid-template-columns:none !important; } html.modo-app .account-tabs button{ display:flex !important; align-items:center !important; gap:10px !important; width:100% !important; text-align:left !important; padding:13px 14px !important; border-radius:12px !important; font-size:14px !important; min-height:48px; } html.modo-app .account-tabs button::after{ content:"›"; margin-left:auto; font-size:18px; opacity:.45; } html.modo-app .account-tabs button .notif-badge{ margin-left:6px; } /* ===== SIMPLE PARA APP (2026-06-20): menos crema, menos bordes dorados, look limpio ===== */ html.modo-app body{ background:#fbfbf9 !important; } /* utilitarios: hairline gris suave en vez de borde dorado + sin sombra recargada */ html.modo-app .header-market-search input, html.modo-app .appbtn-filtros, html.modo-app .notif-bell-btn, html.modo-app .appbtn-favoritos, html.modo-app .account-menu-mini .account-main-btn{ border-color:rgba(0,0,0,.10) !important; box-shadow:none !important; } /* chips de categoría: blanco con borde suave */ html.modo-app .cat-item{ background:#fff !important; border-color:rgba(0,0,0,.08) !important; } html.modo-app .cat-item.active{ background:var(--app-verde,#064E2E) !important; box-shadow:none !important; } html.modo-app .cat-item.active .cat-label{ color:#fff !important; } /* banners, strip y confianza: blanco con hairline, sin dorado */ html.modo-app .gallinapro-ad, html.modo-app .publish-strip, html.modo-app .trust-grid-bottom article{ background:#fff !important; border-color:rgba(0,0,0,.08) !important; } html.modo-app .appbanner-publicar{ border:0 !important; } /* Detalle: fondo claro y tarjetas con borde suave (sin cajas recargadas) */ html.modo-app body.publication-body{ background:#fbfbf9 !important; } html.modo-app body.publication-body .pub-info-card, html.modo-app body.publication-body .pub-mod-block, html.modo-app body.publication-body .pub-bottom-card, html.modo-app body.publication-body .related-shell, html.modo-app body.publication-body .pub-qa-shell, html.modo-app body.publication-body .reviews-shell{ border-color:rgba(0,0,0,.07) !important; box-shadow:none !important; } /* TWA polish 20260620: small mobile alignment pass. Visual only. */ html.modo-app .mobile-question-jump{ display:none !important; } html.modo-app .pub-page-wrap, html.modo-app .account-page, html.modo-app .publish-shell, html.modo-app .info-shell, html.modo-app .seller-public-wrap{ padding-left:12px !important; padding-right:12px !important; } html.modo-app .content{ padding-left:8px !important; padding-right:8px !important; } html.modo-app .pub-detail-shell, html.modo-app .pub-detail-card, html.modo-app .pub-related-row, html.modo-app .trust-strip{ margin-left:0 !important; margin-right:0 !important; } html.modo-app .pub-info-card.pub-sticky{ padding:18px 16px !important; border-radius:16px !important; } html.modo-app .pub-info-card h1{ font-size:25px !important; line-height:1.08 !important; } html.modo-app .pub-info-card .detail-price, html.modo-app .detail-price{ font-size:32px !important; } html.modo-app .pub-minor-actions{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; } html.modo-app .pub-minor-btn{ min-width:0 !important; white-space:normal !important; } html.modo-app .pub-actions-top .account-btn, html.modo-app .account-menu-mini .account-main-btn{ max-width:176px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } html.modo-app .pub-actions-top{ min-width:0 !important; } html.modo-app .appbar-tabs{ min-height:70px !important; } html.modo-app .seller-public-card{ margin-bottom:20px !important; } html.modo-app .account-menu-mini{ width:auto !important; min-width:0 !important; max-width:calc(100vw - 150px) !important; } html.modo-app .account-menu-mini .account-main-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:104px !important; max-width:168px !important; height:36px !important; padding:0 12px !important; line-height:1.1 !important; } html.modo-app body.account-body .account-menu-mini .account-main-btn{ display:none !important; } html.modo-app body.account-body .account-menu-mini{ max-width:120px !important; }