/* ============================================================================ FullCarro · Componentes Todo el color y la medida sale de tokens.css. Si algo se ve mal, primero revisa que use var(--token) y no un valor a fuego. ============================================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); line-height: 1.5; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .contenedor { max-width: var(--ancho-contenedor); margin: 0 auto; padding: 0 var(--esp-4); } /* ── Cabecera azul marino con buscador ─────────────────────────────────────*/ .cab { background: var(--navy); position: sticky; top: 0; z-index: var(--z-cabecera); } /* Banner del workspace activo (aparece cuando estás como asesor viendo el panel de un dealer). Se ve arriba del contenido del panel, sutil pero visible. Un click en "Volver a mi cuenta" cambia el workspace de una. */ .ws-banner { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: linear-gradient(90deg, rgba(255,149,64,.10), rgba(255,149,64,.04)); border-bottom: 1px solid var(--acento-suave-borde); color: var(--slate); font-size: var(--texto-sm); } .ws-banner__ico { font-size: 16px; line-height: 1; flex-shrink: 0; } .ws-banner__txt { flex: 1; min-width: 0; } .ws-banner__txt b { color: var(--acento); font-weight: 700; } .ws-banner__form { margin: 0; flex-shrink: 0; } .ws-banner__btn { background: none; border: 0; color: var(--acento); font-weight: 700; font-size: var(--texto-sm); cursor: pointer; padding: 4px 8px; border-radius: 6px; } .ws-banner__btn:hover { background: rgba(255,149,64,.14); } @media (max-width: 500px) { .ws-banner { padding: 8px 12px; font-size: 12.5px; } .ws-banner__btn { font-size: 12.5px; } } /* Switcher de workspace (entre "Mi cuenta" y los dealers donde soy asesor). Vive en el header del panel. Usa
nativo para el dropdown, sin JS. */ .ws-switch { position: relative; margin-right: auto; margin-left: 12px; } .ws-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; background: rgba(255,255,255,.08); color: var(--blanco); border-radius: 999px; font-size: 13px; font-weight: 600; user-select: none; transition: background .12s ease; } .ws-switch > summary::-webkit-details-marker { display: none; } .ws-switch > summary:hover { background: rgba(255,255,255,.14); } .ws-switch[open] > summary { background: rgba(255,255,255,.16); } .ws-switch__ico { font-size: 15px; line-height: 1; } .ws-switch__ico--dealer { filter: hue-rotate(0deg); } .ws-switch__nombre { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-switch__chev { width: 12px; height: 12px; color: rgba(255,255,255,.7); flex-shrink: 0; } /* Menú dropdown */ .ws-switch__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 6px; margin: 0; box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 2px; } .ws-switch__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 0; border-radius: 8px; cursor: pointer; width: 100%; text-align: left; color: var(--slate); font: inherit; transition: background .12s ease; } .ws-switch__item:hover { background: rgba(255,149,64,.08); } .ws-switch__item--activo { background: rgba(255,149,64,.12); } .ws-switch__item--activo::after { content: '✓'; margin-left: auto; color: var(--acento); font-weight: 800; } .ws-switch__item .ws-switch__ico { font-size: 20px; } .ws-switch__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ws-switch__txt strong { color: var(--slate); font-size: 13.5px; font-weight: 700; } .ws-switch__txt small { color: var(--gris); font-size: 11.5px; } @media (max-width: 500px) { .ws-switch__nombre { max-width: 90px; font-size: 12.5px; } .ws-switch > summary { padding: 6px 8px 6px 10px; gap: 6px; } .ws-switch__menu { min-width: 240px; } } /* Header del PANEL (app mode): logo "FC" + Publicar + avatar. Barra fina, alineada al MISMO ancho del contenido del panel (logo con el sidebar, avatar con el borde derecho de las cards). */ .cab--app { background: var(--navy); } .cab__inner--app { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--esp-4); max-width: var(--ancho-contenedor); margin: 0 auto; height: 56px; } .cab__acciones-app { display: flex; align-items: center; gap: 14px; } .cab__publicar-app { padding: 8px 16px; font-size: var(--texto-sm); } .cab__marca-grupo { display: flex; align-items: center; gap: 12px; } /* Hamburguesa del panel: solo visible en móvil/tablet (≤799px). Abre el drawer. */ .cab__menu { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-right: -2px; background: none; border: 0; color: #fff; cursor: pointer; border-radius: 9px; } .cab__menu:hover { background: rgba(255,255,255,.1); } .cab__menu svg { width: 24px; height: 24px; } /* Cabecera del drawer (título + cerrar): solo en móvil. */ .panel__nav-top { display: none; } .cab__marca-fc { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--acento), #ff7a2e); color: var(--blanco); font-family: var(--fuente-titulo, inherit); font-weight: 900; font-size: 18px; letter-spacing: -0.5px; text-decoration: none; line-height: 1; transition: transform .12s ease, box-shadow .12s ease; } .cab__marca-fc:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(15,26,36,.12); } @media (max-width: 500px) { .cab__inner--app { padding: 8px 14px; height: 52px; } .cab__marca-fc { width: 36px; height: 36px; font-size: 16px; } } .cab__inner { display: flex; align-items: center; gap: var(--esp-5); height: var(--alto-cabecera); } .marca { font-size: var(--texto-xl); font-weight: var(--peso-extra); letter-spacing: -.5px; white-space: nowrap; } .marca__full { color: var(--acento); } .marca__carro { color: var(--blanco); } /* Nombre del país junto al logo-texto del footer. Por defecto en naranja marca; para los países live, degradado horizontal con los colores de su bandera (las letras toman el color de su banda). Tonos aclarados para leerse sobre navy. */ .marca__pais { display: inline-block; margin-left: .32em; color: var(--acento); } .marca__pais--co, .marca__pais--ve, .marca__pais--br, .marca__pais--us { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .marca__pais--co { background-image: linear-gradient(90deg,#FFD400 0 50%,#3E63E8 50% 75%,#EF3340 75% 100%); } .marca__pais--ve { background-image: linear-gradient(90deg,#FFD400 0 33.33%,#3E63E8 33.33% 66.66%,#EF3340 66.66% 100%); } .marca__pais--br { background-image: linear-gradient(90deg,#00A651 0 45%,#FFD400 45% 78%,#3E7BFF 78% 100%); } .marca__pais--us { background-image: linear-gradient(90deg,#EF3340 0 33.33%,#F5F5F5 33.33% 66.66%,#3E7BFF 66.66% 100%); } /* Paginación de resultados del buscador */ .paginacion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 30px 0 10px; } .pag { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #d7dce3; background: var(--blanco, #fff); color: #33415a; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .pag:hover { border-color: var(--acento); color: var(--acento); } .pag--actual { background: var(--acento); border-color: var(--acento); color: #fff; pointer-events: none; } .pag--gap { border: 0; background: none; min-width: 20px; pointer-events: none; } @media (max-width: 600px) { .pag { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; } } .cab__bandera { display: inline-flex; align-items: center; flex: 0 0 auto; } .cab__bandera .bandera { width: 30px; height: auto; display: block; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .cab__buscar { flex: 1; display: flex; align-items: center; background: var(--blanco); border-radius: var(--radio); overflow: hidden; max-width: 620px; } .cab__lupa { padding: 0 4px 0 12px; color: var(--gris); font-size: var(--texto-sm); } .cab__buscar input { flex: 1; border: none; padding: 11px 12px; font-size: var(--texto-base); outline: none; } .cab__buscar button { background: var(--acento); color: var(--blanco); border: none; padding: 11px 20px; font-weight: var(--peso-fuerte); cursor: pointer; font-size: var(--texto-base); } .cab__buscar button:hover { background: var(--acento-oscuro); } .cab__nav { display: flex; align-items: center; gap: var(--esp-4); margin-left: auto; } .cab__nav a { color: var(--blanco); font-weight: var(--peso-medio); font-size: var(--texto-base); white-space: nowrap; } .cab__publicar { background: var(--acento); color: var(--blanco) !important; padding: 9px 18px; border-radius: var(--radio); display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .cab__publicar:hover { background: var(--acento-oscuro); } .cab__publicar-plus { font-weight: 700; } /* Botón buscar del header: por defecto muestra texto, en mobile pasa a icono */ .cab__buscar-ico { display: none; width: 20px; height: 20px; } .cab__usuario { color: #cfd6e0 !important; } /* Bloque de usuario en el header: SÓLO el círculo (avatar). Va justo al lado del "+ Publicar" (el buscador con flex:1 los empuja al extremo derecho del contenedor juntos). - Logueado: foto del perfil o iniciales sobre fondo naranja marca. - Anónimo: círculo gris con silueta estándar de "iniciar sesión". */ .cab__user { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; line-height: 0; } .cab__user:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255,255,255,.14); } .cab__user-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--acento); color: var(--blanco); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; border: 2px solid rgba(255,255,255,.14); flex-shrink: 0; } .cab__user-foto--vacio { background: linear-gradient(135deg, var(--acento), #ff7a2e); } /* Estado anónimo: círculo gris con silueta blanca. Patrón universal login. */ .cab__user-foto--anonimo { background: rgba(255,255,255,.10); color: #cfd6e0; padding: 6px; border: 2px solid rgba(255,255,255,.16); } .cab__user--login:hover .cab__user-foto--anonimo { background: rgba(255,255,255,.16); color: #fff; } /* Chevron ▼ al lado del avatar: sugiere que el bloque abre panel/menu. El avatar pasa a inline-flex para que chevron y foto vayan alineados. */ .cab__user { gap: 4px; } .cab__user-flecha { width: 12px; height: 12px; color: #cfd6e0; flex-shrink: 0; } .cab__user:hover .cab__user-flecha { color: #fff; } @media (max-width: 500px) { .cab__user-foto { width: 32px; height: 32px; font-size: 12px; } .cab__user-flecha { display: none; } } @media (max-width: 760px) { .cab__inner { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; } .cab__buscar { order: 3; flex-basis: 100%; max-width: none; } } /* Móvil chico (≤500px): compactamos header + Publicar/Buscar como iconos: el "+" naranja compacto + botón lupa. */ @media (max-width: 500px) { .cab__inner { padding: 10px 12px; gap: 8px; } .cab__nav { gap: 8px; flex-wrap: nowrap; } /* "+" Publicar → cuadrado 40x40 solo con el signo + */ .cab__publicar { padding: 0; width: 40px; height: 40px; justify-content: center; font-size: 22px; } .cab__publicar-txt { display: none; } .cab__buscar { min-width: 0; } .cab__buscar input { min-width: 0; padding: 10px 8px; font-size: 14px; } /* "Buscar" → cuadrado con icono lupa */ .cab__buscar button { padding: 0; width: 42px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .cab__buscar-txt { display: none; } .cab__buscar-ico { display: inline-block; } .cab__bandera .bandera { width: 22px; } } /* Móvil MUY chico (≤360px): "+ Publicar" un poco más pequeño. */ @media (max-width: 360px) { .cab__publicar { width: 36px; height: 36px; font-size: 20px; } } /* ── Migas de pan ──────────────────────────────────────────────────────────*/ .miga { background: var(--acento-suave); border-bottom: 1px solid var(--acento-suave-borde); font-size: var(--texto-sm); } .miga .contenedor { padding: 10px 16px; color: var(--gris); } .miga a { color: var(--acento); font-weight: var(--peso-medio); } .miga span { color: var(--gris); } /* ── Listado público ───────────────────────────────────────────────────────*/ .listado { padding: var(--esp-6) var(--esp-4) var(--esp-12); } .listado__cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .listado__cab h1 { font-size: var(--texto-xl); margin: 0; } .listado__total { color: var(--gris); margin: 0; } .filtros { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; } .filtros select { padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--blanco); font-size: var(--texto-base); cursor: pointer; min-width: 160px; } /* ── Tarjeta de vehículo (listado) ─────────────────────────────────────────*/ .rejilla { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Variante compacta: tarjetas rectangulares (foto a la izquierda), para listas densas como "Tus favoritos" del hub. Reusa .vcard, solo cambia el layout. */ .rejilla--compacta { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .rejilla--compacta .vcard { flex-direction: row; height: auto; } .rejilla--compacta .vcard__foto { width: 118px; aspect-ratio: auto; flex-shrink: 0; align-self: stretch; } .rejilla--compacta .vcard__cuerpo { padding: 10px 12px; } .rejilla--compacta .vcard__th { padding-right: 28px; } /* deja aire para el corazón */ .rejilla--compacta .vcard__titulo { font-size: var(--texto-sm); } .rejilla--compacta .vcard__specs { margin-bottom: 6px; gap: 5px; } .rejilla--compacta .vcard__pie { margin-top: 6px; } .rejilla--compacta .vcard__meta { margin-top: 5px; } .rejilla--compacta .vcard__fav-form, .rejilla--compacta .vcard__fav { top: 8px; right: 8px; } .rejilla--compacta .vcard__destacado, .rejilla--compacta .vcard__badge { font-size: 10px; padding: 2px 6px; } .tarjeta { background: var(--blanco); border-radius: var(--radio-md); overflow: hidden; box-shadow: var(--sombra); transition: transform var(--trans), box-shadow var(--trans); } .tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); } .tarjeta__foto { position: relative; aspect-ratio: 4 / 3; background: var(--fondo); } .tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; } .tarjeta__sinfoto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gris); font-size: var(--texto-sm); } .tarjeta__destacado { position: absolute; top: 10px; left: 10px; background: var(--acento); color: var(--blanco); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 10px; border-radius: var(--radio-full); } .tarjeta__cuerpo { padding: 14px; } .tarjeta__precio { font-size: var(--texto-lg); font-weight: var(--peso-extra); color: var(--acento); margin: 0 0 4px; } .tarjeta__titulo { font-size: var(--texto-base); font-weight: var(--peso-medio); margin: 0 0 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tarjeta__datos { display: flex; gap: 12px; color: var(--gris); font-size: var(--texto-sm); margin: 0 0 4px; } .tarjeta__lugar { color: var(--gris); font-size: var(--texto-sm); margin: 0; } .vacio { color: var(--gris); padding: 40px 0; text-align: center; } /* ── Estado vacío de "Mis anuncios" (sin ningún vehículo) ─────────────────── */ .pv { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 48px 32px; text-align: center; } .pv__ilus { width: 168px; height: 120px; margin: 0 auto 22px; display: block; } .pv__tit { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy, #374B5C); margin: 0 0 10px; } .pv__sub { font-size: 15px; color: var(--gris); max-width: 440px; margin: 0 auto 26px; line-height: 1.6; } .pv .pv__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 16px; line-height: 1; padding: 15px 30px; border-radius: 12px; } .pv .pv__cta-ico { width: 20px; height: 20px; fill: currentColor; display: block; flex: none; } .pv__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px auto 0; max-width: 560px; } .pv__paso { background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 18px 14px; } .pv__paso-ico { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 11px; background: var(--acento-suave); display: flex; align-items: center; justify-content: center; } .pv__paso-ico svg { width: 21px; height: 21px; fill: var(--acento); } .pv__paso-n { display: block; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; color: var(--acento); letter-spacing: .04em; margin: 0 0 4px; } .pv__paso-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); margin: 0 0 3px; } .pv__paso-d { display: block; font-size: 12.5px; color: var(--gris); line-height: 1.45; } .pv__pie { margin: 26px 0 0; font-size: 13px; color: var(--gris); } .pv__pie a { color: var(--acento); font-weight: 600; } @media (max-width: 620px) { .pv { padding: 36px 18px; } .pv__pasos { grid-template-columns: 1fr; max-width: 360px; } } /* ── Pie ───────────────────────────────────────────────────────────────────*/ .pie { border-top: 1px solid var(--linea); background: var(--blanco); padding: var(--esp-6) 0; margin-top: var(--esp-10); } .pie p { color: var(--gris); font-size: var(--texto-sm); margin: 0; text-align: center; } /* ── Formularios de cuenta (login, registro, recuperar) ────────────────────*/ .contenedor-estrecho { max-width: 460px; margin: var(--esp-10) auto; padding: 0 var(--esp-4); } .tarjeta-form { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: var(--esp-8); box-shadow: var(--sombra); } .tarjeta-form h1 { font-size: var(--texto-xl); margin: 0 0 6px; } .form-intro { color: var(--gris); margin: 0 0 20px; } .form-pie { margin: 14px 0 0; font-size: var(--texto-sm); color: var(--gris); } /* ── Registro por pasos (Typeform) ── */ .reg__prog { height: 4px; background: var(--linea); border-radius: 999px; overflow: hidden; margin: 0 0 22px; } .reg__prog-bar { display: block; height: 100%; width: 25%; background: var(--acento); border-radius: 999px; transition: width .35s ease; } .reg__paso { animation: reg-in .28s ease; } @keyframes reg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .reg__volver { background: none; border: none; color: var(--gris); font-size: var(--texto-sm); cursor: pointer; padding: 0; margin: 0 0 10px; } .reg__volver:hover { color: var(--acento); } .reg .btn--grande { width: 100%; margin-top: 8px; } /* Casillas del código de 6 dígitos */ .cod6 { display: flex; gap: 8px; justify-content: space-between; margin: 4px 0 6px; } .cod6 input { width: 100%; aspect-ratio: 1 / 1; text-align: center; font-size: 26px; font-weight: var(--peso-extra); color: var(--slate); border: 1.5px solid var(--linea); border-radius: var(--radio); min-width: 0; } .cod6 input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); } .reg__reenvio { margin: 14px 0 0; font-size: var(--texto-sm); color: var(--gris); } .reg__link { background: none; border: none; color: var(--acento); font-weight: var(--peso-medio); cursor: pointer; padding: 0; font-size: inherit; } .reg__link:disabled { color: var(--gris); cursor: default; } .reg__timer { color: var(--gris); } .form-pie a { color: var(--acento); font-weight: var(--peso-medio); } /* Enlace "Reenviar código" durante el cooldown (recuperación por WhatsApp). */ .form-pie a.is-off { color: var(--gris); pointer-events: none; cursor: default; } /* Selector de cuenta cuando un mismo número casa varias (recuperación por WA). */ .wa-cuentas { display: flex; flex-direction: column; gap: 10px; } .wa-cuenta { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--blanco); font-size: var(--texto-base); font-weight: var(--peso-medio); color: var(--texto); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .wa-cuenta:hover { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); } .wa-cuenta:disabled { opacity: .6; cursor: default; } .wa-cuenta.is-cargando { border-color: var(--acento); } /* Campo de contraseña con ojo (ver/ocultar) + botón "Generar clave segura". */ .clave-wrap { position: relative; display: block; } .clave-wrap input { width: 100%; padding-right: 42px; } .clave-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: var(--gris); display: flex; align-items: center; } .clave-ojo:hover { color: var(--acento); } .clave-ojo svg { width: 20px; height: 20px; } .clave-generar { margin: 8px 0 0; background: none; border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 7px 12px; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--acento); cursor: pointer; } .clave-generar:hover { background: var(--fondo, #f5f6f8); border-color: var(--acento); } /* Aviso legal al pie del formulario (letra chica, separada por una línea). */ .form-legal { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); font-size: var(--texto-xs); line-height: 1.5; color: var(--gris); } .form-legal a { color: var(--acento); } /* Sección "Cuenta profesional" (auto-servicio de upgrade en Ajustes). */ .ajustes-pro { margin: 0 0 20px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--blanco); } .ajustes-pro h2 { margin: 0 0 6px; font-size: var(--texto-md); } .ajustes-pro p { margin: 0 0 14px; color: var(--gris); font-size: var(--texto-sm); line-height: 1.5; } /* CTA de activación (estado particular) en un azul propio, distinto del naranja. */ .ajustes-pro .btn { background: #2563EB; color: #fff; border: none; } .ajustes-pro .btn:hover { background: #1D4ED8; } /* Estado "ya concesionario": tarjeta de estado + accesos + downgrade discreto. */ .pro-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; } .pro-head h2 { margin: 0; font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 17px; color: var(--navy, #374B5C); } .pro-badge { display: inline-flex; align-items: center; gap: 6px; background: #EAF1FE; color: #2563EB; border: 1px solid #CFE0FD; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; } .pro-badge svg { width: 14px; height: 14px; fill: currentColor; } .pro-sub { font-size: 13.5px; color: var(--gris); margin: 0 0 16px; } .pro-accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pro-acc { display: flex; flex-direction: column; gap: 7px; background: #F8FAFD; border: 1px solid var(--linea); border-radius: 11px; padding: 13px 12px; text-decoration: none; color: var(--tinta, #314352); transition: .12s; } .pro-acc:hover { border-color: #CFE0FD; background: #EAF1FE; } .pro-acc__ico { width: 32px; height: 32px; border-radius: 9px; background: #EAF1FE; display: flex; align-items: center; justify-content: center; } .pro-acc__ico svg { width: 18px; height: 18px; fill: #2563EB; } .pro-acc__t { font-size: 13px; font-weight: 600; } .pro-acc__d { font-size: 11.5px; color: var(--gris); line-height: 1.35; } .pro-div { border: none; border-top: 1px solid var(--linea); margin: 18px 0 12px; } .pro-down { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); margin: 0; } .pro-down form { display: inline; margin: 0; } .pro-down__link { background: none; border: 0; padding: 0; font: inherit; color: var(--gris); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .pro-down__link:hover { color: var(--tinta, #314352); } /* Barra de completitud de la ficha del concesionario */ .pc-barra { margin: 4px 0 18px; } .pc-barra__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 7px; } .pc-barra__lbl { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy, #374B5C); } .pc-barra__hint { font-size: 12px; color: var(--gris); } .pc-barra__track { height: 8px; border-radius: 999px; background: #E8EDF3; overflow: hidden; } .pc-barra__fill { height: 100%; border-radius: 999px; background: #2563EB; transition: width .4s ease; } .pc-barra--full .pc-barra__fill { background: #22C55E; } /* .ajustes-pro p (gris) le ganaba por especificidad; se sube para que sea rojo. */ .ajustes-pro .pc-barra__faltan { margin: 9px 0 0; font-size: 12.5px; color: #C0392B; line-height: 1.5; } .pc-falta-lbl { font-weight: 700; } /* ── Directorio de concesionarios (/directory/) ───────────────────────────── */ .dir { max-width: var(--ancho-contenedor, 1200px); margin: 0 auto; padding: 24px 16px 48px; } .dir__cab h1 { font-family: 'Comfortaa', sans-serif; font-size: 26px; color: var(--navy, #374B5C); margin: 0 0 6px; } .dir__sub { color: var(--gris); font-size: 15px; margin: 0 0 20px; } .dir__filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; } .dir__buscar { flex: 1 1 240px; min-width: 0; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 10px; font-size: 15px; background: var(--blanco); } .dir__sel { padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; background: var(--blanco); color: var(--tinta, #314352); } .dir__buscar:focus, .dir__sel:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); } .dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .dir-card { display: flex; align-items: center; gap: 13px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--tinta, #314352); transition: .12s; } .dir-card:hover { border-color: #CFE0FD; box-shadow: 0 6px 18px rgba(49, 67, 82, .08); } .dir-card__logo { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--navy, #374B5C); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 18px; } .dir-card__logo img { width: 100%; height: 100%; object-fit: cover; } .dir-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .dir-card__nom { font-weight: 600; font-size: 15px; color: var(--navy, #374B5C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dir-card__meta { font-size: 12.5px; color: var(--gris); display: flex; align-items: center; gap: 4px; } .dir-card__meta svg { width: 13px; height: 13px; } .dir-card__arrow { flex: none; color: #B8C2CE; font-size: 22px; } .dir__pag { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px 0 0; } .dir__pag-btn { color: var(--acento); font-weight: 600; text-decoration: none; font-size: 14px; } .dir__pag-info { color: var(--gris); font-size: 13px; } @media (max-width: 560px) { .pro-accesos { grid-template-columns: repeat(2, 1fr); } } /* Header mínimo de las páginas de cuenta: solo logo + bandera, centrado. */ .cab--auth { border-bottom: 1px solid var(--linea); } .cab__inner--auth { justify-content: flex-start; gap: var(--esp-3); } /* Páginas legales (términos, privacidad). */ .legal { margin: var(--esp-10) 0; max-width: 760px; } .legal h1 { font-size: var(--texto-xl); margin: 0 0 6px; } .legal h2 { font-size: var(--texto-md); margin: 30px 0 8px; color: var(--slate); } .legal p, .legal li { color: var(--slate); line-height: 1.7; font-size: var(--texto-base); } .legal p { margin: 0 0 12px; } .legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--acento); font-weight: var(--peso-medio); } .legal__fecha { color: var(--gris); font-size: var(--texto-sm); margin: 0 0 24px; } .legal__intro { color: var(--slate); line-height: 1.7; } .legal__nota { color: var(--gris); line-height: 1.6; } .legal a { color: var(--acento); font-weight: var(--peso-medio); } .formulario .campo { margin-bottom: var(--esp-4); } .campo label { display: block; font-size: var(--texto-sm); font-weight: var(--peso-medio); margin-bottom: 6px; } .campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=number], .campo input[type=url], .campo input[type=tel], .campo select, .campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: var(--texto-base); font-family: inherit; background: var(--blanco); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); } .campo__ayuda { display: block; color: var(--gris); font-size: var(--texto-xs); margin-top: 4px; } .campo__error { display: block; color: var(--peligro); font-size: var(--texto-sm); margin-top: 4px; } /* Enlace dentro de un error (p. ej. "Iniciar sesión"): azul y subrayado para que se lea como enlace. */ .campo__error a { color: #1a56db; text-decoration: underline; font-weight: var(--peso-medio); } .campo__error a:hover { color: #143fa8; } /* Teléfono con banderita: bandera + indicativo + número en una sola caja. */ .tel-campo { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; } .tel-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); } .tel-bandera { display: flex; align-items: center; padding: 0 2px 0 10px; } .tel-bandera img { display: block; border-radius: 2px; } .tel-campo select.tel-cc, .tel-campo input.tel-num { border: 0; border-radius: 0; box-shadow: none; background: transparent; width: auto; font-size: var(--texto-base); font-family: inherit; color: inherit; } .tel-campo select.tel-cc { padding: 10px 4px; cursor: pointer; } .tel-campo input.tel-num { flex: 1; padding: 10px 12px; min-width: 0; } .tel-campo select.tel-cc:focus, .tel-campo input.tel-num:focus { outline: none; box-shadow: none; } /* Checkbox de consentimiento de contacto (premarcado). */ .check-contacto { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; font-size: var(--texto-sm); line-height: 1.4; cursor: pointer; } .check-contacto input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--acento); cursor: pointer; } /* Aviso que aparece si desmarcan la autorización de contacto (bloquea el registro). */ .check-contacto__aviso { margin: 10px 0 0; padding: 12px 14px; border: 1px solid rgba(255,149,64,.45); border-left: 3px solid var(--acento); border-radius: var(--radio-md); background: rgba(255,149,64,.08); font-size: var(--texto-sm); line-height: 1.5; color: var(--texto, #24303f); } .check-contacto__aviso[hidden] { display: none; } /* ── Botones ───────────────────────────────────────────────────────────────*/ .btn { display: inline-block; background: var(--acento); color: var(--blanco); border: none; padding: 10px 18px; border-radius: var(--radio); font-size: var(--texto-base); font-weight: var(--peso-medio); cursor: pointer; text-align: center; } .btn:hover { background: var(--acento-oscuro); } /* Botón deshabilitado (p. ej. registro sin autorización de contacto): gris e inerte. */ .btn:disabled, .btn[disabled] { background: var(--linea, #d5d9e0); color: var(--gris, #8a93a3); cursor: not-allowed; pointer-events: none; } .btn--grande { width: 100%; padding: 12px; font-size: var(--texto-md); } .btn--texto { background: none; color: var(--gris); } .btn--texto:hover { background: none; color: var(--tinta); } .btn--peligro { background: var(--peligro); } .btn--peligro:hover { background: var(--peligro-oscuro); } /* ── Avisos ────────────────────────────────────────────────────────────────*/ .aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: var(--esp-4); font-size: var(--texto-sm); } .aviso--error { background: var(--peligro-bg); color: var(--peligro-texto); border: 1px solid var(--peligro-borde); } .aviso--success { background: var(--exito-bg); color: var(--exito-texto); border: 1px solid var(--exito-borde); } /* ── Panel del vendedor ────────────────────────────────────────────────────*/ .panel { display: grid; gap: var(--esp-6); max-width: var(--ancho-contenedor); margin: var(--esp-6) auto; padding: 0 var(--esp-4); } @media (min-width: 800px) { .panel { grid-template-columns: 220px minmax(0, 1fr); } } /* CRÍTICO (todos los tamaños): la celda de contenido es un grid item con min-width:auto por defecto, así que un tablero ancho (kanban) la expandía y desbordaba la PÁGINA. Con min-width:0 la celda puede encogerse y el scroll horizontal queda DENTRO del kanban (overflow-x:auto), no en la página. */ .panel__cuerpo { min-width: 0; } .panel__lado { display: flex; flex-direction: column; gap: var(--esp-4); } .panel__nav { display: flex; flex-direction: column; gap: 2px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 8px; } .panel__nav a { padding: 10px 14px; border-radius: var(--radio); font-weight: var(--peso-medio); color: var(--gris); } .panel__nav a:hover { background: var(--fondo); color: var(--tinta); } .panel__nav a.activo { background: var(--acento); color: var(--blanco); } .panel__salir button { width: 100%; background: none; border: 1px solid var(--linea); color: var(--gris); padding: 10px; border-radius: var(--radio); cursor: pointer; font-size: var(--texto-sm); } .panel__salir button:hover { border-color: var(--peligro); color: var(--peligro); } /* MÓVIL (≤ 799px): el sidebar vertical se convierte en un DRAWER lateral desplegable (se abre con la hamburguesa del header). La navegación rápida vive en el bottom bar; el drawer tiene la navegación completa + cerrar sesión. */ @media (max-width: 799px) { .panel { gap: 12px; padding: 0; margin: 0 auto; min-width: 0; display: block; } .cab__menu { display: inline-flex; } .panel__cuerpo { min-width: 0; width: 100%; max-width: 100%; padding: 0 12px 20px; } /* Overlay oscuro detrás del drawer. */ .panel__overlay { position: fixed; inset: 0; z-index: 65; background: rgba(15,23,42,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease; } body.panel-nav-open .panel__overlay { opacity: 1; visibility: visible; } body.panel-nav-open { overflow: hidden; } /* Drawer lateral: fuera de pantalla por defecto, entra al abrir. */ .panel__lado { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(84vw, 300px); gap: 8px; background: var(--blanco); border: 0; border-right: 1px solid var(--linea); overflow-y: auto; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 22px rgba(15,23,42,.16); } body.panel-nav-open .panel__lado { transform: translateX(0); } /* Cabecera del drawer. */ .panel__nav-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; } .panel__nav-title { font-weight: var(--peso-extra); font-size: 15px; color: var(--tinta); } .panel__nav-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: 0; color: var(--gris); cursor: pointer; border-radius: 8px; } .panel__nav-close:hover { background: var(--fondo); color: var(--tinta); } .panel__nav-close svg { width: 22px; height: 22px; } /* Nav en columna dentro del drawer (igual que escritorio). */ .panel__nav { flex-direction: column; overflow: visible; border: 0; border-radius: 0; padding: 0; gap: 2px; width: 100%; max-width: 100%; -webkit-mask-image: none; mask-image: none; } .panel__nav a { flex: 0 0 auto; padding: 12px 14px; border-radius: var(--radio); border-bottom: 0; white-space: normal; font-size: 15px; } .panel__nav a.activo { background: var(--acento); color: var(--blanco); border-bottom: 0; } .panel__nav a:hover { background: var(--fondo); color: var(--tinta); } .panel__nav .nav-badge { margin-left: auto; } /* En el drawer SÍ mostramos todas las secciones y cerrar sesión. */ .panel__nav-item--mobile-hide { display: flex !important; } .panel__salir { display: block; margin-top: 8px; } .panel__cuerpo h1 { font-size: 20px; margin: 12px 0 14px; } .panel__seccion { padding: 14px; margin-top: 12px; min-width: 0; } /* Defensa global: nada dentro del panel debe desbordar horizontalmente */ .panel * { max-width: 100%; } .panel img, .panel video { height: auto; } } /* Bottom tab bar del panel (estilo app móvil). Solo visible en ≤799px. 5 accesos rápidos: Inicio · Inventario · [+ Publicar destacado] · Mensajes · Alertas. El del medio es un FAB (floating action button) elevado — patrón Instagram/ML. */ .panel-bottom { display: none; } @media (max-width: 799px) { .panel-bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--blanco); border-top: 1px solid var(--linea); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; align-items: flex-end; box-shadow: 0 -2px 12px rgba(15,23,42,.06); } .panel-bottom__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; color: var(--gris); text-decoration: none; font-size: 10.5px; font-weight: 600; min-width: 0; transition: color .15s ease; position: relative; } .panel-bottom__item svg { width: 22px; height: 22px; } .panel-bottom__item span:last-child { font-size: 10.5px; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .panel-bottom__item--activo { color: var(--acento); } .panel-bottom__item--activo::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--acento); border-radius: 2px; } /* FAB central: Publicar, elevado y en naranja. Circular. */ .panel-bottom__item--cta { flex: 0 0 auto; margin-top: -14px; } .panel-bottom__cta-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--acento), #ff7a2e); color: #fff; box-shadow: 0 6px 16px rgba(15,26,36,.12), 0 2px 4px rgba(0,0,0,.08); transition: transform .12s ease; } .panel-bottom__item--cta:active .panel-bottom__cta-btn { transform: scale(.94); } .panel-bottom__cta-btn svg { width: 24px; height: 24px; } /* Badge pequeño sobre el icono (Mensajes / Alertas sin leer) */ .panel-bottom__icowrap { position: relative; display: inline-flex; } .panel-bottom__badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--blanco); } /* Espacio al pie del contenido para que el bottom bar no tape el último elemento (altura del bar + safe-area). */ .panel__cuerpo { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE HOTFIXES (auditoría 2026-07-28) ═════════════════════════════════════════════════════════════════════════ */ /* Fix #2: Tabla del dashboard → card view en móvil (evita scroll horizontal de tabla con 7 columnas). Requiere data-label en cada del template inicio.html; sin data-label, degrada bien al mostrar los valores centrados. */ @media (max-width: 700px) { .dash-tabla-wrap { overflow: visible; } .dash-tabla, .dash-tabla tbody, .dash-tabla tr { display: block; width: 100%; } .dash-tabla thead { display: none; } .dash-tabla tr { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; } .dash-tabla td { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: 0; text-align: right; gap: 12px; } .dash-tabla td::before { content: attr(data-label); color: var(--gris); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .dash-tabla td:first-child { border-bottom: 1px solid var(--linea); padding-bottom: 10px; margin-bottom: 6px; } .dash-tabla td:first-child::before { display: none; } .dash-veh__titulo { max-width: none; } } /* Fix #3: Padding global compacto + cabecera de sección apilada + CTAs full-width. El SaaS moderno reduce padding en móvil (Vercel, Linear, Stripe hacen 12-14px). */ @media (max-width: 600px) { .panel__cuerpo h1 { font-size: 22px; margin-bottom: 14px; } .panel__seccion { padding: 14px; border-radius: 10px; } .panel__seccion-cab { flex-direction: column; align-items: stretch; gap: 10px; } .panel__seccion-cab .btn { width: 100%; } } /* Fix #4: Grids rígidas de 3-col colapsan bien en tablet (761-900px que hoy quedaba a medio hacer). Cubre .lead (CRM), .eq-item (Mi Equipo) y .pcard (Inventario). */ @media (max-width: 900px) { .lead { grid-template-columns: 1fr; gap: 12px; } .eq-item { grid-template-columns: 1fr; } .pcard { grid-template-columns: 104px 1fr; } .pcard__acciones { grid-column: 1 / -1; min-width: 0; gap: 6px; } } /* Fix #5: 100dvh en Mensajes (evita que el input quede debajo de las barras dinámicas del navegador iOS/Chrome mobile). + KPIs a 2 columnas + campos de checkbox a 1 columna. */ .cbox { height: calc(100dvh - 210px); min-height: 440px; } @media (max-width: 760px) { .cbox { height: calc(100dvh - 170px); } } @media (max-width: 600px) { .metricas { grid-template-columns: repeat(2, 1fr); gap: 8px; } .metrica { padding: 12px; } .metrica__num { font-size: 22px; } .campo--ancho .checkboxselectmultiple, .campo--ancho ul { columns: 1; } .form-rejilla { grid-template-columns: 1fr; } } @media (max-width: 800px) { .form-rejilla { grid-template-columns: 1fr; } } .panel__cuerpo h1 { font-size: var(--texto-xl); margin: 0 0 20px; } .panel__seccion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 20px; margin-top: 20px; } .panel__seccion-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .panel__seccion-cab h1, .panel__seccion-cab h2 { margin: 0; } .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--esp-4); } .metrica { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 20px; text-align: center; } .metrica__num { display: block; font-size: 30px; font-weight: var(--peso-extra); color: var(--acento); } .metrica__lbl { color: var(--gris); font-size: var(--texto-sm); } /* Leads: se distinguen del resto de KPIs con un borde de acento sutil. */ .metrica--lead { border-color: #FFD9B0; background: #FFFBF6; } /* Tarjeta de Interesados del resumen: el número en verde (leads = plata). */ .metrica--verde { border-color: #BBE7C6; background: #F5FBF7; } .metrica--verde .metrica__num { color: #16a34a; } /* ── Home del vendedor rediseñada (panel/inicio.html) — Parte 1 ──────────── */ .dh-foco { background: linear-gradient(135deg, var(--navy), #223a63); color: #fff; border-radius: 18px; padding: 20px 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--sombra-md); } .dh-foco__hi h1 { color: #fff; margin: 0; font-size: 22px; font-weight: var(--peso-extra); letter-spacing: -.2px; } .dh-foco__hi p { margin: 4px 0 0; color: #aeb9d1; font-size: 13.5px; } .dh-foco__urg { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 13px; min-width: min(100%, 350px); } .dh-foco__ico { width: 40px; height: 40px; border-radius: 11px; background: var(--acento); color: #2a1706; display: grid; place-items: center; flex: 0 0 auto; } .dh-foco__ico svg { width: 20px; height: 20px; } .dh-foco__txt { min-width: 0; flex: 1; } .dh-foco__n { font-weight: var(--peso-extra); font-size: 16px; line-height: 1.15; } .dh-foco__d { color: #c6cfe2; font-size: 12px; margin-top: 2px; } .dh-foco__cta { flex: 0 0 auto; background: var(--acento); color: #2a1706; font-weight: 700; font-size: 13px; text-decoration: none; padding: 9px 14px; border-radius: 10px; white-space: nowrap; } .dh-foco__cta:hover { filter: brightness(1.06); } .dh-foco__ok { display: flex; align-items: center; gap: 8px; color: #d7e6cf; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 15px; } .dh-foco__ok svg { width: 18px; height: 18px; flex: 0 0 auto; } .dh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0 22px; } .dh-kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 15px 16px; box-shadow: var(--sombra-md); position: relative; overflow: hidden; } .dh-kpi--urg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--peligro); } .dh-kpi__l { font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--gris); } .dh-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; } .dh-kpi__n { font-size: 27px; font-weight: var(--peso-extra); line-height: 1; color: var(--slate); } .dh-kpi__spark { width: 78px; height: 28px; flex: 0 0 auto; } .dh-kpi__sub { font-size: 12px; color: var(--gris); margin-top: 9px; display: inline-block; } a.dh-kpi { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; } a.dh-kpi:hover { border-color: var(--acento); transform: translateY(-2px); } .dh-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 9px; } .dh-chip small { font-weight: 500; opacity: .85; margin-left: 2px; } .dh-chip--up { color: var(--exito-texto); background: var(--exito-bg); } .dh-chip--down { color: var(--peligro); background: var(--peligro-bg); } .dh-chip--flat { color: var(--gris); background: var(--gris-suave); } .dh-chip--urg { color: var(--peligro); background: var(--peligro-bg); } .dh-chip--ok { color: var(--exito-texto); background: var(--exito-bg); } @media (max-width: 640px) { .dh-kpis { grid-template-columns: 1fr 1fr; } .dh-foco { padding: 16px; gap: 14px; } .dh-foco__urg { flex-wrap: wrap; } .dh-foco__txt { flex: 1 1 140px; } .dh-foco__cta { flex-basis: 100%; width: 100%; text-align: center; } } /* ── Actividad 30 días + embudo de ventas ── */ .dh-grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; } .dh-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); box-shadow: var(--sombra-md); padding: 18px 20px; } .dh-card__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dh-card__cab h2 { font-size: 1rem; font-weight: var(--peso-extra); color: var(--tinta); margin: 0; } .dh-card__cab a { font-size: var(--texto-sm); color: var(--acento); font-weight: 600; white-space: nowrap; } .dh-card__sub { font-size: var(--texto-sm); color: var(--gris); margin: -4px 0 14px; } .dh-chart { display: block; width: 100%; height: auto; } .dh-leg { display: flex; gap: 18px; margin-top: 10px; font-size: var(--texto-sm); color: var(--slate); } .dh-leg b { color: var(--tinta); margin-left: 3px; } .dh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; } .dh-fun { display: flex; flex-direction: column; gap: 11px; } .dh-fun__row { display: grid; grid-template-columns: 82px 1fr 30px; align-items: center; gap: 10px; } .dh-fun__lbl { font-size: var(--texto-sm); color: var(--slate); } .dh-fun__bar { height: 22px; background: var(--gris-suave); border-radius: 6px; overflow: hidden; } .dh-fun__fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width .5s ease; } .dh-fun__v { font-size: var(--texto-sm); font-weight: var(--peso-extra); color: var(--tinta); text-align: right; } .dh-fun__fill--nuevo { background: #2563eb; } .dh-fun__fill--contactado { background: var(--acento); } .dh-fun__fill--visito { background: #8b5cf6; } .dh-fun__fill--cerrado { background: #16a34a; } .dh-fun__fill--perdido { background: #9aa3af; } @media (max-width: 860px) { .dh-grid2 { grid-template-columns: minmax(0, 1fr); } } /* ── Acciones rápidas (columna apilada dentro de su tarjeta) ── */ .dh-acc { display: flex; flex-direction: column; gap: 10px; } .dh-acc__b { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); color: var(--tinta); transition: border-color .15s, background .15s; } .dh-acc__b:hover { border-color: var(--acento); background: var(--gris-suave); } .dh-acc__b--p { background: var(--acento); border-color: var(--acento); color: #fff; } .dh-acc__b--p:hover { background: #ef8420; border-color: #ef8420; } .dh-acc__i { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--gris-suave); color: var(--slate); } .dh-acc__b--p .dh-acc__i { background: rgba(255,255,255,.22); color: #fff; } .dh-acc__i .ico { width: 20px; height: 20px; } .dh-acc__tx { display: flex; flex-direction: column; min-width: 0; } .dh-acc__tx b { font-size: .92rem; font-weight: var(--peso-extra); line-height: 1.25; } .dh-acc__tx small { font-size: var(--texto-sm); color: var(--gris); margin-top: 2px; } .dh-acc__b--p .dh-acc__tx small { color: rgba(255,255,255,.85); } /* ── Lista de últimos interesados (tarjeta del dashboard) ── */ .dh-leads { list-style: none; margin: 0; padding: 0; } .dh-lead { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--linea); } .dh-lead:first-child { border-top: 0; padding-top: 2px; } /* tx es bloque (no flex-column): así sus hijos nowrap se recortan con ellipsis y NO fuerzan el ancho mínimo de la fila (causaba desborde en columnas angostas). */ .dh-lead__tx { display: block; min-width: 0; flex: 1 1 0; overflow: hidden; } .dh-lead__veh { display: block; font-size: .92rem; font-weight: var(--peso-extra); color: var(--tinta); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-lead__q { display: block; font-size: var(--texto-sm); color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-lead__t { flex: 0 0 auto; margin-left: auto; font-size: var(--texto-sm); color: var(--gris); white-space: nowrap; } /* ── Favorito + similares (home del particular): un grupo por favorito ── */ .favsim { margin-top: 18px; } .favsim + .favsim { padding-top: 18px; border-top: 1px solid var(--linea); } .favsim__eyebrow { display: flex; align-items: center; gap: 7px; font-size: var(--texto-sm); color: var(--slate); margin: 0 0 12px; } .favsim__eyebrow b { color: var(--tinta); font-weight: var(--peso-extra); } .favsim__eyebrow .ico { flex: 0 0 auto; width: 16px; height: 16px; color: #d4537e; } /* ── Tarjetas de autos top: compactas horizontales, 3 por fila ── */ .dh-autos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dh-auto { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); color: var(--tinta); transition: border-color .15s, background .15s; min-width: 0; } .dh-auto:hover { border-color: var(--acento); background: var(--gris-suave); } .dh-auto__foto { position: relative; flex: 0 0 auto; width: 84px; height: 62px; border-radius: 8px; overflow: hidden; background: var(--gris-suave); } .dh-auto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .dh-auto__foto--vacia { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gris); } .dh-auto__foto--vacia .ico { width: 26px; height: 26px; opacity: .5; } .dh-auto__rank { position: absolute; top: 3px; left: 3px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: rgba(15,31,61,.82); border-radius: 5px; } .dh-auto__cuerpo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .dh-auto__top { display: flex; align-items: center; gap: 6px; } .dh-auto__titulo { font-size: .88rem; font-weight: var(--peso-extra); line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dh-estado { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); } .dh-estado--publicado { background: #16a34a; } .dh-estado--borrador { background: #d1a000; } .dh-estado--pausado, .dh-estado--vendido { background: var(--gris); } .dh-auto__m { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .dh-auto__m span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--texto-sm); color: var(--slate); } .dh-auto__m .ico { width: 14px; height: 14px; color: var(--gris); } .dh-auto__m b { color: var(--tinta); } .dh-auto__dias { color: var(--gris); } .dh-ring { width: 36px; height: 36px; flex: 0 0 auto; } .dh-ring__bg { stroke: var(--gris-suave); } .dh-ring__v--ok { stroke: #16a34a; } .dh-ring__v--mid { stroke: var(--acento); } .dh-ring__v--low { stroke: var(--peligro); } .dh-ring__t { font-size: 15px; font-weight: 700; fill: var(--tinta); } @media (max-width: 1100px) { .dh-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dh-autos { grid-template-columns: minmax(0, 1fr); } } /* Lista de últimos interesados en el dashboard. */ .lista-leads li { display: flex; align-items: center; gap: 10px; } .lista-leads .lead-fecha { margin-left: auto; color: var(--gris); font-size: var(--texto-sm); white-space: nowrap; } .lead-canal { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #fff; } .lead-canal--whatsapp { background: #25D366; } .lead-canal--llamada { background: #374B5C; } .lead-canal--chat { background: #FF9540; } /* ── CRM: pipeline de leads (panel/leads.html) ───────────────────────────── */ .leads-cab h1 { margin: 0 0 2px; } .leads-sub { color: var(--gris); font-size: var(--texto-sm); margin: 0 0 18px; } .leads-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .leads-buscar { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-md); font: inherit; } .leads-canal { padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-md); font: inherit; background: var(--blanco); } /* El display:inline-flex del span tapaba el atributo `hidden` → las fechas se veían aunque el rango no fuera "Personalizado". */ .leads-rango-custom[hidden] { display: none; } /* Filtros colapsables SOLO en móvil (en escritorio van todos en línea). */ .leads-filtros__toggle { display: none; } .leads-filtros__col { display: contents; } @media (max-width: 600px) { .leads-filtros { flex-direction: column; align-items: stretch; } .leads-buscar { flex: 1 1 auto; width: 100%; } .leads-filtros__toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--blanco); color: var(--slate); font: inherit; font-weight: 600; cursor: pointer; } .leads-filtros__toggle svg { width: 16px; height: 16px; transition: transform .15s; } .leads-filtros--abierto .leads-filtros__toggle svg { transform: rotate(180deg); } .leads-filtros__col { display: none; } .leads-filtros--abierto .leads-filtros__col { display: flex; flex-direction: column; gap: 8px; width: 100%; } .leads-filtros__col .leads-canal, .leads-filtros__col .btn { width: 100%; } .leads-rango-custom { width: 100%; } .leads-fecha { flex: 1 1 0; min-width: 0; } /* Embudo más compacto en móvil (mismas 6 etapas, menos alto). */ .leads-conteo { padding: 7px 8px; min-width: 74px; } .leads-conteo__n { font-size: 17px; } .leads-conteo__l { font-size: 10px; margin-top: 3px; } } .leads-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--linea); margin-bottom: 16px; padding-bottom: 0; } .leads-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--gris); text-decoration: none; font-size: var(--texto-sm); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; } .leads-tab:hover { color: var(--tinta, #314352); } .leads-tab--on { color: var(--acento); border-bottom-color: var(--acento); } .leads-tab__n { background: #EEF2F6; color: var(--gris); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .leads-tab--on .leads-tab__n { background: #FFF0DD; color: var(--acento); } .leads-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .lead { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 16px; align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; } .lead__veh { display: flex; gap: 10px; align-items: center; min-width: 0; } .lead__foto { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #EEF2F6; } .lead__foto--vacia { display: inline-block; } .lead__vehinfo { min-width: 0; } .lead__titulo { display: block; font-weight: 700; color: var(--tinta, #314352); text-decoration: none; font-size: var(--texto-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lead__titulo:hover { color: var(--acento); } .lead__precio { color: var(--gris); font-size: 12.5px; } .lead__quien { display: flex; flex-direction: column; gap: 6px; } .lead__persona { display: flex; flex-direction: column; gap: 2px; font-size: var(--texto-sm); } .lead__anon { color: var(--gris); font-weight: 600; } .lead__tel { color: var(--acento); text-decoration: none; font-size: 12.5px; } .lead__fecha { color: var(--gris); font-size: 11.5px; } .lead__gestion { display: flex; flex-direction: column; gap: 8px; } /* Interesados (particular): estado + WhatsApp en fila, sin notas ni asesor. */ .lead__gestion--simple { flex-direction: row; align-items: flex-end; flex-wrap: wrap; } .lead__gestion--simple .lead__campo { flex: 1 1 130px; } .lead__campo { display: flex; flex-direction: column; gap: 3px; } .lead__campo-lbl { font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .02em; } .lead__estado { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; background: var(--blanco); } .lead__notas { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; resize: vertical; } .lead__acciones { display: flex; gap: 8px; justify-content: flex-end; } .btn--wa { background: #25D366; color: #fff; } .btn--sec { background: #EEF2F6; color: var(--tinta, #314352); } .leads-vacio { text-align: center; padding: 48px 24px; color: var(--gris); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); box-shadow: var(--sombra); } .leads-vacio p { margin: 0 0 6px; } .leads-vacio__sub { font-size: var(--texto-sm); } /* ── CRM: tablero kanban de leads (concesionario) ────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* El tablero desliza en horizontal (estilo Trello); la PÁGINA no. */ .kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } /* La barra de desplazamiento horizontal vive ARRIBA (proxy sincronizado por JS); se oculta la propia del kanban para no duplicarla abajo. */ .kanban { scrollbar-width: none; -ms-overflow-style: none; } .kanban::-webkit-scrollbar { height: 0; display: none; } /* Slider superior: rótulo con flechas + barra-pastilla, para que se entienda que es para deslizar entre etapas. Solo aparece si hay desborde (clase is-on). */ .kanban-slider { margin: 0 0 12px; } .kanban-slider:not(.is-on) { display: none; } .kanban-slider__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--peso-medio); color: var(--gris); margin: 0 0 5px; } .kanban-slider__hint svg { width: 15px; height: 15px; color: var(--acento); } /* Barra PROPIA (riel + pastilla), no el scrollbar del sistema, para que se vea y se arrastre en TODOS los dispositivos (en touch el scrollbar nativo se oculta). La controla el JS (posición/ancho según el scroll del kanban). */ .kanban-slider__track { position: relative; height: 16px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; } .kanban-slider__thumb { position: absolute; top: 2px; bottom: 2px; left: 0; width: 60px; min-width: 42px; background: var(--acento); border-radius: 999px; cursor: grab; touch-action: none; transition: background .15s; } .kanban-slider__thumb:hover { background: var(--acento-oscuro, #e07a00); } .kanban-slider__thumb:active { cursor: grabbing; background: var(--acento-oscuro, #e07a00); } .kb-col { position: relative; flex: 0 0 300px; max-width: 300px; display: flex; flex-direction: column; background: var(--gris-suave, #eef1f5); border: 1px solid var(--linea); border-radius: var(--radio-md); /* La altura se ajusta a la posición REAL de la columna (var --kb-top que fija el JS) para que quepa EXACTA en el viewport y su scrollbar quede completo y agarrable — antes el 230px fijo la sacaba por debajo (fondo inalcanzable). */ max-height: calc(100dvh - var(--kb-top, 230px) - 14px); } .kb-col__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; background: var(--gris-suave, #eef1f5); border-bottom: 1px solid var(--linea); border-radius: var(--radio-md) var(--radio-md) 0 0; } .kb-col__title { font-weight: 700; font-size: var(--texto-sm); color: var(--tinta, #374b5c); } .kb-col__n { background: var(--blanco); color: var(--gris); border: 1px solid var(--linea); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; min-width: 22px; text-align: center; } /* padding-right mayor = carril reservado para la barra naranja, para que NO se monte sobre las tarjetas (tienen su propio margen a la derecha). */ .kb-col__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 22px 12px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 90px; } .kb-col__body--over { background: var(--acento-suave, #fff5ec); } /* Barra VERTICAL PROPIA de cada etapa (moverse entre los leads): pastilla NARANJA (DOM, no el scrollbar del sistema), VISIBLE y arrastrable con el dedo en TODOS los dispositivos — en touch el scrollbar nativo se oculta, por eso pintamos la nuestra. La controla el JS (posición/alto según el scroll de la columna). Se oculta el scrollbar nativo para no duplicar. */ .kb-col__body { scrollbar-width: none; -ms-overflow-style: none; } .kb-col__body::-webkit-scrollbar { width: 0; height: 0; display: none; } .kb-vbar { position: absolute; right: 6px; width: 9px; bottom: 10px; z-index: 2; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; touch-action: none; -webkit-user-select: none; user-select: none; } .kb-vbar:not(.is-on) { display: none; } .kb-vbar__thumb { position: absolute; left: 1px; right: 1px; top: 0; height: 40px; min-height: 36px; background: var(--acento); border-radius: 999px; cursor: grab; touch-action: none; transition: background .15s; } .kb-vbar__thumb:hover { background: var(--acento-oscuro, #e07a00); } .kb-vbar__thumb:active { cursor: grabbing; background: var(--acento-oscuro, #e07a00); } .kb-col__vacia { color: var(--gris); font-size: 12.5px; text-align: center; margin: 8px 0; } .kb-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; } .kb-card:active { cursor: grabbing; } .kb-card--ghost { opacity: .5; background: var(--acento-suave, #fff5ec); } .kb-card--drag { box-shadow: var(--sombra-md); } .kb-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kb-card__persona { font-weight: 700; font-size: var(--texto-sm); color: var(--tinta, #374b5c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-canal { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #eef2f6; color: var(--gris); } .kb-canal svg { width: 15px; height: 15px; } .kb-canal--whatsapp { background: #e7f7ee; color: #1a9d54; } .kb-canal--llamada { background: #eaf1fb; color: #3268c7; } .kb-canal--cita { background: #f1ecfb; color: #6b46c1; } .kb-canal--chat { background: #fdf0e6; color: #d07a2a; } .kb-canal--meta_form { background: #e8f0fe; color: #1877F2; } .kb-card__veh { font-size: 13px; color: var(--tinta, #374b5c); text-decoration: none; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kb-card__veh:hover { color: var(--acento); } .kb-card__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kb-card__fecha { color: var(--gris); font-size: 11.5px; } .kb-card__abrir { color: var(--acento); font-size: 12px; font-weight: 600; text-decoration: none; } .kb-card__abrir:hover { text-decoration: underline; } .kb-card__mover { display: block; } .kb-move { width: 100%; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--blanco); color: var(--tinta, #374b5c); } @media (max-width: 760px) { /* Columnas más angostas que la pantalla: se deslizan de a una (Trello). */ .kb-col { flex-basis: 82vw; max-width: 82vw; max-height: none; } /* La columna scrollea internamente (altura útil) y se recorre con la BARRA NARANJA propia (arrastrable con el dedo), así llegas al último lead sin pelear con el scroll de la página. */ .kb-col__body { max-height: 62vh; } } /* ── Bloqueo premium (secciones de concesionario para particulares) ── */ .prem-lock { position: relative; border-radius: var(--radio-lg); overflow: hidden; min-height: 440px; } .prem-lock__maqueta { filter: blur(3px); opacity: .5; pointer-events: none; user-select: none; } .prem-lock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .prem-lock__kpi { height: 82px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; } .prem-lock__panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 18px 20px; } .prem-lock__ltitle { display: block; height: 14px; width: 180px; background: var(--gris-suave, #eef2f6); border-radius: 6px; margin-bottom: 14px; } .prem-lock__row { height: 46px; border-top: 1px solid var(--gris-suave, #eef2f6); } .prem-lock__veil { position: absolute; inset: 0; background: rgba(238, 241, 245, .55); } .prem-lock__cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; } .prem-lock__card { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 20px 45px -12px rgba(31, 45, 58, .22); padding: 32px 34px; max-width: 430px; text-align: center; } .prem-lock__ico { width: 60px; height: 60px; border-radius: 16px; background: var(--navy, #374B5C); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; } .prem-lock__ico svg { width: 28px; height: 28px; } .prem-lock__badge { display: inline-block; background: #FFF1E0; color: #E07A1F; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; } .prem-lock__card h2 { font-size: 20px; color: var(--slate, #314352); margin: 0 0 8px; } .prem-lock__card p { font-size: 14px; color: var(--gris, #73818c); line-height: 1.5; margin: 0 0 20px; } /* CTA de activar concesionario en azul (igual que en Ajustes). */ .prem-lock .btn { background: #2563EB; color: #fff; border: none; } .prem-lock .btn:hover { background: #1D4ED8; } .prem-lock__ver { display: block; margin-top: 14px; color: #E07A1F; font-weight: 600; font-size: 13px; text-decoration: none; } .prem-lock__ver:hover { text-decoration: underline; } /* candado en los ítems del menú */ .panel__nav a.nav-lockeable { display: flex; align-items: center; justify-content: space-between; } .nav-lock { color: #9aa7b2; display: inline-flex; } .panel__nav a.activo .nav-lock { color: var(--blanco); } .ico-candado { width: 14px; height: 14px; } @media (max-width: 760px) { .lead { grid-template-columns: 1fr; gap: 12px; } .lead__quien { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } } /* ── Panel del comprador: insignia del menú, búsquedas guardadas, alertas ── */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; } a.metrica { text-decoration: none; color: inherit; transition: border-color .12s; } a.metrica:hover { border-color: var(--acento); } /* Búsquedas guardadas */ .bg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bg-item { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; } .bg-item__info { min-width: 0; } .bg-item__nombre { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta, #314352); text-decoration: none; } .bg-item__nombre:hover { color: var(--acento); } .bg-item__meta { display: block; color: var(--gris); font-size: 12px; margin-top: 2px; } .bg-item__avisos { display: flex; gap: 14px; } .bg-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); white-space: nowrap; cursor: pointer; } .bg-item__del { margin: 0; } /* Bandeja de alertas */ .al-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .al-item { display: flex; gap: 12px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 12px; } .al-item--nueva { border-left: 3px solid var(--acento); background: #FFFBF6; } .al-item__foto { flex: 0 0 auto; width: 84px; height: 60px; border-radius: 8px; overflow: hidden; background: #EEF2F6; display: block; } .al-item__foto img { width: 100%; height: 100%; object-fit: cover; } .al-item__foto--vacia { display: block; width: 100%; height: 100%; } .al-item__cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .al-tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; } .al-tipo--price_drop { color: #1FA463; } .al-tipo--new_match { color: var(--acento); } .al-item__titulo { font-weight: 700; color: var(--tinta, #314352); text-decoration: none; font-size: var(--texto-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-item__titulo:hover { color: var(--acento); } .al-precio-viejo { color: var(--gris); text-decoration: line-through; font-size: 12.5px; margin-right: 6px; } .al-precio-nuevo { color: #1FA463; font-weight: 700; } .al-item__fecha { flex: 0 0 auto; color: var(--gris); font-size: 11.5px; white-space: nowrap; } /* Secciones de la página unificada Alertas (bandeja + búsquedas). */ .al-sec { margin-top: 28px; } .al-sec:first-of-type { margin-top: 16px; } .al-sec__titulo { font-size: var(--texto-md); margin: 0 0 12px; color: var(--slate); } .al-sec__sub { color: var(--gris); font-weight: 400; font-size: var(--texto-sm); } .al-sec__nota { margin: -4px 0 14px; color: var(--gris); font-size: var(--texto-sm); } .al-tipo small { font-weight: 500; color: var(--gris); } .al-vacio { background: var(--blanco); border: 1px dashed var(--linea); border-radius: var(--radio-md); padding: 24px; text-align: center; } .al-vacio p { margin: 0 0 4px; color: var(--slate); } .al-vacio__sub { color: var(--gris); font-size: var(--texto-sm); margin-bottom: 12px !important; } /* El "Guardar búsqueda" del buscador pasó de a