/** * Estilos do front do addon Veículos. A maior parte do layout usa Tailwind (já compilado no tema); * aqui vão só o editor WYSIWYG, o botão de IA e ajustes pontuais. * * @package Veiculos_GuiaWP * @author Dante Testa */ /* Editor WYSIWYG da descrição */ .vgw-editor { border: 1px solid #cbd5e1; border-radius: .5rem; overflow: hidden; background: #fff; } .vgw-editor:focus-within { border-color: var(--gcep-color-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .vgw-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; } .vgw-editor__toolbar button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 0; background: transparent; color: #475569; cursor: pointer; font-size: .9rem; } .vgw-editor__toolbar button:hover { background: #e2e8f0; color: #0f172a; } .vgw-editor__area { min-height: 9rem; max-height: 22rem; overflow-y: auto; padding: .85rem; font-size: .9rem; color: #0f172a; line-height: 1.6; outline: none; } .vgw-editor__area:empty:before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; } .vgw-editor__area p { margin: 0 0 .6rem; } .vgw-editor__area h3 { font-size: 1rem; font-weight: 700; margin: .4rem 0; } .vgw-editor__area ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .6rem; } /* Botão "Melhorar com IA" */ .vgw-editor__ia { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: none; border-radius: .5rem; background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; } .vgw-editor__ia:hover { filter: brightness(1.08); } .vgw-editor__ia.is-loading { opacity: .7; cursor: default; } .vgw-editor__ia .material-symbols-outlined { font-size: 1rem; } /* Galeria (thumbs scroll) */ .vgw-gallery [data-full] img { pointer-events: none; } /* Chips (pills) de taxonomia no setup admin — robusto ao Tailwind do tema. */ .vgw-term{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .4rem .3rem .75rem;border-radius:9999px;background:#eef2f7;color:#334155;font-size:.75rem;font-weight:600;line-height:1.2;} .vgw-term-del{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border-radius:9999px;color:#94a3b8;background:transparent;border:0;cursor:pointer;flex:0 0 auto;} .vgw-term-del:hover{background:#fee2e2;color:#dc2626;} .vgw-term-del .material-symbols-outlined{font-size:15px;} /* * Utilitários Tailwind usados SÓ por este addon e ausentes do build pré-compilado do tema * (o content do tailwind.config.js do core não varre os templates de addon). Reproduzem a * semântica exata da classe Tailwind homônima; só carregam nas rotas de veículos (gate no * VGW_Assets), então não vazam para o resto do site. Auditoria 2026-07-30 - Dante Testa. */ .h-20{height:5rem;} .min-w-9{min-width:2.25rem;} .max-h-44{max-height:11rem;} .max-w-\[260px\]{max-width:260px;} .gap-0\.5{gap:.125rem;} .gap-y-1\.5{row-gap:.375rem;} .pr-1\.5{padding-right:.375rem;} .pl-3{padding-left:.75rem;} .-mx-1{margin-left:-.25rem;margin-right:-.25rem;} .text-\[17px\]{font-size:17px;} .text-\[19px\]{font-size:19px;} .text-\[22px\]{font-size:22px;} .text-blue-800{color:#1e40af;} .bg-indigo-50{background-color:#eef2ff;} .hover\:bg-indigo-50:hover{background-color:#eef2ff;} .hover\:text-indigo-600:hover{color:#4f46e5;} @media (min-width:640px){.sm\:mt-0{margin-top:0;}} @media (min-width:768px){.md\:w-56{width:14rem;}} /* Dante Testa — 2026-09-19 20:06 -0300: descrição legível sem estourar a largura no celular. */ .vgw-description { min-width: 0; overflow-wrap: anywhere; } .vgw-editor__area { overflow-wrap: anywhere; white-space: pre-wrap; } /* Dante Testa — 2026-09-19 21:11 -0300: destaque da identidade do anunciante. */ .vgw-advertiser-card{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;padding:22px 18px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;text-align:center;} .vgw-advertiser-card__image{width:80px;height:80px;flex-shrink:0;overflow:hidden;border-radius:50%;background:#fff;} .vgw-advertiser-card__image img{display:block;width:100%;height:100%;object-fit:cover;} .vgw-advertiser-label{margin:0 0 6px;color:#64748b;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;} .vgw-advertiser-card__name{margin:0;color:#0f172a;font-size:17px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;} .vgw-advertiser-card__details{margin:8px 0 0;color:#64748b;font-size:13px;line-height:1.6;overflow-wrap:anywhere;} .vgw-advertiser-profile{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:24px;padding:24px;border:1px solid #dbe4ee;border-left:4px solid var(--gcep-color-primary,#2563eb);border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05);} .vgw-advertiser-profile__image,.vgw-advertiser-profile__placeholder{display:flex;align-items:center;justify-content:center;width:112px;height:112px;flex-shrink:0;border-radius:18px;background:#f8fafc;overflow:hidden;} .vgw-advertiser-profile__image img{display:block;width:100%;height:100%;padding:8px;object-fit:contain;} .vgw-advertiser-profile__identity{flex:1 1 160px;min-width:0;} .vgw-advertiser-profile__name{margin:0;color:#0f172a;font-size:26px;font-weight:800;line-height:1.25;overflow-wrap:anywhere;} .vgw-advertiser-profile a:focus-visible{outline:3px solid var(--gcep-color-primary,#2563eb);outline-offset:4px;border-radius:8px;} @media(max-width:639px){.vgw-advertiser-profile{padding:18px;gap:16px;}.vgw-advertiser-profile__image,.vgw-advertiser-profile__placeholder{width:96px;height:96px;}.vgw-advertiser-profile__identity{flex-basis:120px;}.vgw-advertiser-profile__name{font-size:22px;}} /* Dante Testa — 2026-09-19 21:19 -0300: identidade com largura livre para o nome. */ .vgw-advertiser-card>.min-w-0{width:100%;} .vgw-advertiser-card .vgw-advertiser-label{font-size:10px;letter-spacing:.06em;font-weight:600;margin-bottom:6px;} .vgw-advertiser-card__document{display:block;font-size:12px;}