/* * Estilos da aba "Dados do lead" (modal "Atender lead"). Mesma estratégia * adotada na timeline do Histórico: CSS puro (sem Tailwind), classes * semânticas escopadas sob `.crm-lead-details`, registrado via * FilamentAsset no SistemaPanelProvider e publicado com * `php artisan filament:assets` — o painel serve um bundle CSS estático * do próprio pacote Filament, que não é recompilado a partir dos Blades * desta aplicação, então utilities Tailwind aqui não têm garantia de * existir no CSS servido. * * Tema escuro: o Filament alterna adicionando a classe `dark` na tag * , por isso os overrides seguem `html.dark .crm-lead-details...`. */ .crm-lead-details { display: flex; flex-direction: column; gap: 1.25rem; } /* --- Toolbar --- */ .crm-lead-details__toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .crm-lead-details__heading { font-size: 0.875rem; font-weight: 600; color: #09090b; } html.dark .crm-lead-details__heading { color: #fff; } .crm-lead-details__subtitle { margin-top: 0.125rem; font-size: 0.75rem; color: #71717a; } html.dark .crm-lead-details__subtitle { color: #a1a1aa; } .crm-lead-details__edit { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px rgb(9 9 11 / 0.1); padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: #09090b; text-decoration: none; } .crm-lead-details__edit:hover { background-color: #fafafa; } html.dark .crm-lead-details__edit { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); color: #fff; } html.dark .crm-lead-details__edit:hover { background-color: rgb(255 255 255 / 0.05); } .crm-lead-details__edit-icon { width: 1rem; height: 1rem; } /* --- Alerta de revisão --- */ .crm-lead-details__warning { display: flex; gap: 0.625rem; border-radius: 0.5rem; background-color: #fffbeb; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); padding: 0.75rem 1rem; } html.dark .crm-lead-details__warning { background-color: rgb(217 119 6 / 0.1); box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.25); } .crm-lead-details__warning-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: #d97706; margin-top: 0.125rem; } html.dark .crm-lead-details__warning-icon { color: #fbbf24; } .crm-lead-details__warning-title { font-size: 0.875rem; font-weight: 600; color: #92400e; } html.dark .crm-lead-details__warning-title { color: #fbbf24; } .crm-lead-details__warning-list { margin: 0.25rem 0 0; padding: 0 0 0 1rem; font-size: 0.8125rem; color: #92400e; } html.dark .crm-lead-details__warning-list { color: #fcd34d; } .crm-lead-details__warning-list li + li { margin-top: 0.125rem; } /* --- Seções --- */ .crm-lead-details__section + .crm-lead-details__section { border-top: 1px solid #e4e4e7; padding-top: 1.25rem; } html.dark .crm-lead-details__section + .crm-lead-details__section { border-color: rgb(255 255 255 / 0.1); } .crm-lead-details__section-title { margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #71717a; } html.dark .crm-lead-details__section-title { color: #a1a1aa; } .crm-lead-details__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 40rem) { .crm-lead-details__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-lead-details__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- Item (ícone + label + valor) --- */ .crm-lead-details__item { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; } .crm-lead-details__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.5rem; background-color: #fafafa; box-shadow: inset 0 0 0 1px rgb(9 9 11 / 0.05); } html.dark .crm-lead-details__icon { background-color: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } .crm-lead-details__icon .fi-icon { width: 1.125rem; height: 1.125rem; color: #52525b; } html.dark .crm-lead-details__icon .fi-icon { color: #d4d4d8; } .crm-lead-details__body { min-width: 0; padding-top: 0.125rem; } .crm-lead-details__label { font-size: 0.75rem; color: #71717a; } html.dark .crm-lead-details__label { color: #a1a1aa; } .crm-lead-details__value { margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500; color: #09090b; word-break: break-word; } html.dark .crm-lead-details__value { color: #fff; } .crm-lead-details__value--muted { font-weight: 400; color: #71717a; } html.dark .crm-lead-details__value--muted { color: #a1a1aa; } .crm-lead-details__action { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; border: none; background: none; padding: 0; font-size: 0.8125rem; font-weight: 500; color: #d97706; cursor: pointer; text-decoration: none; } .crm-lead-details__action:hover { text-decoration: underline; } html.dark .crm-lead-details__action { color: #fbbf24; } /* --- Próximo contato (destaque) --- */ .crm-lead-details__follow-up { display: flex; align-items: flex-start; gap: 0.625rem; border-radius: 0.5rem; padding: 0.625rem 0.75rem; background-color: #fafafa; box-shadow: inset 0 0 0 1px rgb(9 9 11 / 0.05); } html.dark .crm-lead-details__follow-up { background-color: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } .crm-lead-details__follow-up--atrasado { background-color: #fef2f2; box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.2); } html.dark .crm-lead-details__follow-up--atrasado { background-color: rgb(220 38 38 / 0.12); box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.3); } .crm-lead-details__follow-up--atrasado .crm-lead-details__value { color: #b91c1c; } html.dark .crm-lead-details__follow-up--atrasado .crm-lead-details__value { color: #fca5a5; } .crm-lead-details__follow-up--hoje { background-color: #fffbeb; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); } html.dark .crm-lead-details__follow-up--hoje { background-color: rgb(217 119 6 / 0.12); box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.3); } .crm-lead-details__follow-up--hoje .crm-lead-details__value { color: #92400e; } html.dark .crm-lead-details__follow-up--hoje .crm-lead-details__value { color: #fbbf24; } .crm-lead-details__follow-up .crm-lead-details__icon { background-color: transparent; box-shadow: none; } /* --- Observações --- */ .crm-lead-details__notes { font-size: 0.875rem; color: #3f3f46; white-space: pre-line; word-break: break-word; } html.dark .crm-lead-details__notes { color: #d4d4d8; } .crm-lead-details__notes--empty { font-size: 0.875rem; color: #a1a1aa; font-style: italic; } html.dark .crm-lead-details__notes--empty { color: #71717a; }