/* ==========================================================================
   Leads 360° — estilos do redesign (lista + tela de detalhe estilo HubSpot).
   Carregado como asset plano no AdminPanelProvider (não depende do build Vite).
   Escopado em .leads-list-360 / .lead-360 para não afetar o resto do painel.
   Accent = Sky (mesmo primary do Filament).
   ========================================================================== */

[x-cloak] { display: none !important; }

/* ---- Lista: chips de filtro rápido (restyle das tabs nativas do getTabs) ---- */
.leads-list-360 .fi-tabs {
    border-bottom: 0;
    gap: .4rem;
    flex-wrap: wrap;
    padding-bottom: .25rem;
    box-shadow: none;
}

.leads-list-360 .fi-tabs-item {
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    padding: .4rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: #4B5563;
    background: #fff;
    transition: all .12s ease;
    box-shadow: none;
}

.leads-list-360 .fi-tabs-item:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.leads-list-360 .fi-tabs-item.fi-active,
.leads-list-360 .fi-tabs-item[aria-selected="true"] {
    background: #E0F2FE;
    border-color: #7DD3FC;
    color: #0369A1;
}

.leads-list-360 .fi-tabs-item.fi-active .fi-tabs-item-label,
.leads-list-360 .fi-tabs-item[aria-selected="true"] .fi-tabs-item-label {
    color: #0369A1;
}

.dark .leads-list-360 .fi-tabs-item {
    border-color: rgba(255, 255, 255, .1);
    color: #D1D5DB;
    background: transparent;
}

.dark .leads-list-360 .fi-tabs-item:hover { background: rgba(255, 255, 255, .05); }

.dark .leads-list-360 .fi-tabs-item.fi-active,
.dark .leads-list-360 .fi-tabs-item[aria-selected="true"] {
    background: rgba(2, 132, 199, .2);
    border-color: rgba(125, 211, 252, .45);
    color: #7DD3FC;
}

/* Coluna origem/página na lista */
.lead-list-origem {
    font-size: 13px;
    color: #1F2937;
    font-weight: 500;
}
.lead-list-origem small { display: block; font-size: 12px; color: #9CA3AF; font-weight: 400; }
.dark .lead-list-origem { color: #F3F4F6; }

/* ==========================================================================
   Tela 360°
   ========================================================================== */
.lead-360 {
    font-size: 14px;
    max-width: 1500px;
}

.lead-360-card {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.15rem;
}

.dark .lead-360-card {
    border-color: rgba(255, 255, 255, .08);
    background: #18181B;
}

/* ---- Cabeçalho (identidade) ---- */
.lead-360-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
}
.dark .lead-360-head { border-color: rgba(255,255,255,.08); background: #18181B; }

.lead-360-head__name {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.dark .lead-360-head__name { color: #F9FAFB; }

.lead-360-head__sub {
    font-size: 13.5px;
    color: #6B7280;
    margin-top: .2rem;
}
.dark .lead-360-head__sub { color: #9CA3AF; }

.lead-360-head__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
}

.lead-360-head__meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 13px;
    color: #6B7280;
}
.dark .lead-360-head__meta { color: #9CA3AF; }

.lead-360-head__valor {
    font-size: 15.5px;
    font-weight: 700;
    color: #0369A1;
    margin-left: .15rem;
}

/* ---- Pipeline ---- */
.lead-360-pipewrap { margin-bottom: .85rem; padding: .7rem 1.15rem; }

.lead-360-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
}

.lead-360-pipe-step {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 13.5px;
    color: #9CA3AF;
    padding: .3rem .25rem .5rem;
    border-bottom: 2px solid transparent;
    transition: color .12s ease;
}
.lead-360-pipe-step:hover { color: #374151; }
.lead-360-pipe-step.is-done { color: #6B7280; }
.lead-360-pipe-step.is-active {
    color: #0369A1;
    font-weight: 600;
    border-bottom-color: #0284C7;
}
.lead-360-pipe-sep { color: #D1D5DB; font-size: 13px; }

/* ---- Banner de alerta âmbar ---- */
.lead-360-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: 12px;
    padding: .65rem .9rem;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: .85rem;
}
.dark .lead-360-alert { background: rgba(133,79,11,.18); color: #FAC775; }

/* ==========================================================================
   Grid 3 zonas (HubSpot)
   ========================================================================== */
.lead-360-hs {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 332px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1180px) {
    .lead-360-hs { grid-template-columns: 1fr; }
}

.lead-360-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.lead-360-center { min-width: 0; }

/* ---- Cabeçalho de card (título + ação editar) ---- */
.lead-360-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.lead-360-card__title {
    font-size: 14.5px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dark .lead-360-card__title { color: #F3F4F6; }

.lead-360-count {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    border-radius: 9999px;
    padding: 1px 8px;
}
.dark .lead-360-count { background: rgba(255,255,255,.08); color: #D1D5DB; }

/* ---- Seções colapsáveis (coluna esquerda) ---- */
.lead-360-sec {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    padding: .85rem 1rem;
}
.dark .lead-360-sec { border-color: rgba(255,255,255,.08); background: #18181B; }

.lead-360-sec__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.lead-360-sec__toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.lead-360-sec__title {
    font-size: 14.5px;
    font-weight: 600;
    color: #1F2937;
    flex: 1;
    min-width: 0;
}
.dark .lead-360-sec__title { color: #F3F4F6; }

.lead-360-sec__chev { color: #9CA3AF; transition: transform .15s ease; flex: 0 0 auto; }
.lead-360-sec__edit { flex: 0 0 auto; }

/* ---- Linhas label : valor ---- */
.lead-360-rows {
    display: flex;
    flex-direction: column;
    margin: .5rem 0 0;
}

.lead-360-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    font-size: 13.5px;
    align-items: baseline;
    border-bottom: 1px solid #F3F4F6;
}
.lead-360-row:last-child { border-bottom: 0; }
.dark .lead-360-row { border-bottom-color: rgba(255,255,255,.05); }

.lead-360-row dt {
    color: #6B7280;
    white-space: nowrap;
    margin: 0;
    font-size: 13.5px;
}
.dark .lead-360-row dt { color: #9CA3AF; }

.lead-360-row dd {
    color: #111827;
    text-align: right;
    margin: 0;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}
.dark .lead-360-row dd { color: #F3F4F6; }

.lead-360-val-green, a.lead-360-val-green { color: #0369A1 !important; }
.lead-360-val-blue, a.lead-360-val-blue { color: #185FA5 !important; }
.lead-360-val-muted { color: #9CA3AF !important; font-weight: 400 !important; }
.lead-360-val-italic { font-style: italic; font-weight: 400 !important; color: #6B7280 !important; }

.lead-360-muted {
    font-size: 13px;
    color: #9CA3AF;
    padding: .2rem 0;
}

/* ---- Bloco destaque (Oportunidade) ---- */
.lead-360-highlight {
    border-left: 3px solid #0284C7;
    background: #F0F9FF;
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: .35rem;
}
.dark .lead-360-highlight { background: rgba(2, 132, 199, .12); }

.lead-360-highlight__title {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.25;
}
.dark .lead-360-highlight__title { color: #F3F4F6; }

.lead-360-highlight__sub { font-size: 12.5px; color: #6B7280; margin-top: .15rem; }
.lead-360-highlight__valor { font-size: 19px; font-weight: 700; color: #0369A1; margin-top: .4rem; }

/* ---- Bloco "Próxima ação" sky ---- */
.lead-360-next {
    border-radius: 12px;
    padding: .7rem .85rem;
    background: #E0F2FE;
    border: 1px solid #7DD3FC;
}
.dark .lead-360-next { background: rgba(2, 132, 199, .15); border-color: rgba(2, 132, 199, .35); }

.lead-360-next__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0369A1;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.lead-360-next__title { margin-top: .15rem; font-size: 14px; font-weight: 600; color: #075985; }
.lead-360-next__when { margin-top: .15rem; display: inline-flex; align-items: center; gap: .3rem; font-size: 13px; color: #0369A1; }
.lead-360-next__empty { font-size: 13px; color: #0369A1; }
.dark .lead-360-next__title, .dark .lead-360-next__empty, .dark .lead-360-next__when { color: #7DD3FC; }

/* ---- Botões verticais de ação rápida ---- */
.lead-360-qa-stack { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.lead-360-qa { width: 100%; }
.lead-360-qa > * { width: 100%; justify-content: flex-start !important; }
.lead-360-qa .fi-btn-label, .lead-360-qa span { white-space: nowrap; }
.lead-360-qa .fi-btn { padding-top: .45rem; padding-bottom: .45rem; font-size: 13px; }

/* ---- Proposta vinculada ---- */
.lead-360-proposta { background: #F7F7F4; border-radius: 12px; padding: .8rem .9rem; }
.dark .lead-360-proposta { background: rgba(255, 255, 255, .04); }
.lead-360-proposta__valor { font-size: 19px; font-weight: 700; color: #111827; margin: .15rem 0; }
.dark .lead-360-proposta__valor { color: #F9FAFB; }

/* ==========================================================================
   Feed de atividades (coluna central)
   ========================================================================== */
.lead-360-feed__tabs {
    display: flex;
    gap: 1.2rem;
    border-bottom: 1px solid #E5E7EB;
    margin: -.15rem 0 .85rem;
    flex-wrap: wrap;
}
.dark .lead-360-feed__tabs { border-bottom-color: rgba(255,255,255,.08); }

.lead-360-feed__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #6B7280;
    padding: .4rem .1rem .6rem;
    margin-bottom: -1px;
    transition: color .12s ease;
}
.lead-360-feed__tab:hover { color: #374151; }
.lead-360-feed__tab.is-active { color: #0369A1; font-weight: 600; border-bottom-color: #0284C7; }
.dark .lead-360-feed__tab.is-active { color: #7DD3FC; border-bottom-color: #7DD3FC; }

/* Compositor + barra de "adicionar" da sub-aba */
.lead-360-composer { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }

.lead-360-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    padding: .4rem .85rem;
    cursor: pointer;
    transition: all .12s ease;
}
.lead-360-chip:hover { background: #F0F9FF; border-color: #7DD3FC; color: #0369A1; }
.dark .lead-360-chip { background: transparent; border-color: rgba(255,255,255,.1); color: #D1D5DB; }
.dark .lead-360-chip:hover { background: rgba(2,132,199,.12); }

.lead-360-chip--primary { background: #0284C7; border-color: #0284C7; color: #fff; }
.lead-360-chip--primary:hover { background: #0369A1; border-color: #0369A1; color: #fff; }

/* Lista de eventos */
.lead-360-daylabel {
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: .85rem 0 .4rem;
}
.lead-360-daylabel:first-child { margin-top: 0; }

.lead-360-event { display: flex; gap: .7rem; padding: .5rem 0; }
.lead-360-event.is-clickable { cursor: pointer; border-radius: 8px; padding: .5rem; margin: 0 -.5rem; transition: background .12s ease; }
.lead-360-event.is-clickable:hover { background: #F0F9FF; }
.dark .lead-360-event.is-clickable:hover { background: rgba(2,132,199,.1); }

.lead-360-event__dot {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.lead-360-event__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.lead-360-event__title { font-size: 13.5px; font-weight: 600; color: #1F2937; }
.dark .lead-360-event__title { color: #F3F4F6; }
.lead-360-event__time { flex: 0 0 auto; font-size: 12px; color: #9CA3AF; }
.lead-360-event__desc { font-size: 13px; color: #6B7280; margin-top: .15rem; }
.dark .lead-360-event__desc { color: #9CA3AF; }

/* Mensagem de WhatsApp no feed (balão) */
.lead-360-event__msg {
    font-size: 13px;
    color: #374151;
    margin-top: .25rem;
    padding: .4rem .65rem;
    border-radius: 10px;
    background: #F3F4F6;
    display: inline-block;
    max-width: 100%;
}
.lead-360-event__msg.is-out { background: #E0F2FE; color: #075985; }
.dark .lead-360-event__msg { background: rgba(255,255,255,.06); color: #E5E7EB; }
.dark .lead-360-event__msg.is-out { background: rgba(2,132,199,.18); color: #BAE6FD; }

.lead-360-event__link { font-size: 12.5px; color: #0369A1; }

.lead-360-feed__empty { font-size: 13px; color: #9CA3AF; padding: 1.5rem .25rem; text-align: center; }

/* Sub-aba Propostas */
.lead-360-feed__propostas { display: flex; flex-direction: column; gap: .4rem; }
.lead-360-proposta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .8rem;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none;
    transition: background .12s ease;
}
.lead-360-proposta-row:hover { background: #F0F9FF; }
.dark .lead-360-proposta-row { border-color: rgba(255,255,255,.08); }
.dark .lead-360-proposta-row:hover { background: rgba(255,255,255,.04); }
.lead-360-proposta-row__num { font-size: 13.5px; font-weight: 600; color: #1F2937; }
.dark .lead-360-proposta-row__num { color: #F3F4F6; }
.lead-360-proposta-row__date { font-size: 12px; color: #9CA3AF; }
.lead-360-proposta-row__valor { font-size: 14.5px; font-weight: 700; color: #0369A1; }

/* ---- Contatos / Locais de entrega (múltiplos) ---- */
.lead-360-contato {
    border: 1px solid #EEF0F2;
    border-radius: 10px;
    padding: .5rem .65rem;
    background: #FCFCFD;
}
.dark .lead-360-contato { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.lead-360-contato__nome { font-size: 13.5px; font-weight: 600; color: #1F2937; }
.dark .lead-360-contato__nome { color: #F3F4F6; }
.lead-360-contato__meta { font-size: 12.5px; color: #6B7280; margin-top: .1rem; }
.dark .lead-360-contato__meta { color: #9CA3AF; }
.lead-360-tipos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.lead-360-tipo {
    font-size: 11px;
    font-weight: 500;
    color: #0369A1;
    background: #E0F2FE;
    border-radius: 9999px;
    padding: 1px 8px;
}
.dark .lead-360-tipo { background: rgba(2,132,199,.2); color: #7DD3FC; }

/* ---- Anexos ---- */
.lead-360-anexo {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .15rem;
    border-bottom: 1px solid #F3F4F6;
    text-decoration: none;
    font-size: 13px;
    color: #374151;
}
.lead-360-anexo:last-child { border-bottom: 0; }
.lead-360-anexo:hover .lead-360-anexo__name { color: #0369A1; }
.dark .lead-360-anexo { border-bottom-color: rgba(255,255,255,.05); color: #D1D5DB; }
.lead-360-anexo__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Aba Conversa (WhatsApp) — LeadWhatsappChat ===== */
.lwc{position:relative;display:flex;flex-direction:column;height:68vh;min-height:480px;max-height:760px;border:1px solid #E5E7EB;border-radius:14px;overflow:hidden;background:#fff}
.lwc-loading{flex:1;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;color:#6B7280}
.lwc-thread{flex:1;min-height:0;display:flex;flex-direction:column}
.lwc-thread > div{flex:1;min-height:0;display:flex;flex-direction:column}
.lwc-drop{position:absolute;inset:0;background:rgba(2,132,199,.12);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;z-index:20;border:2px dashed #0284C7;border-radius:14px}
.lwc-drop__box{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#0369A1;font-weight:700;font-size:.95rem}
.lwc-attach{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;background:#F0F9FF;color:#0369A1;font-size:.8rem;font-weight:600;border-top:1px solid #E5E7EB}
.lwc-loc{padding:.6rem .9rem;border-top:1px solid #E5E7EB;background:#F9FAFB}
.lwc-loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.lwc-loc__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}
.lwc-input{border:1px solid #D1D5DB;border-radius:8px;padding:6px 10px;font-size:.82rem;width:100%}
.lwc-composer{display:flex;align-items:flex-end;gap:.4rem;padding:.55rem .7rem;border-top:1px solid #E5E7EB;background:#F7F8FA}
.lwc-text{flex:1;resize:none;max-height:120px;border:1px solid #D1D5DB;border-radius:18px;padding:9px 14px;font-size:.9rem;line-height:1.35;background:#fff;outline:none}
.lwc-text:focus{border-color:#7DD3FC;box-shadow:0 0 0 3px rgba(125,211,252,.35)}
.lwc-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9999px;color:#54656F;background:transparent;border:0;cursor:pointer}
.lwc-icon:hover{background:#EAECEF;color:#0284C7}
.lwc-icon--danger{color:#B91C1C}
.lwc-icon--send{color:#0284C7}
.lwc-btn-send{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:9999px;background:#0284C7;color:#fff;font-weight:700;font-size:.85rem;border:0;cursor:pointer}
.lwc-btn-send:hover{background:#0369A1}
.lwc-btn-send:disabled{opacity:.6;cursor:default}
.lwc-btn-ghost{background:none;border:0;color:#6B7280;font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:underline}
.lwc-rec{display:flex;align-items:center;gap:.5rem;flex:1;padding:6px 12px;background:#fff;border:1px solid #FCA5A5;border-radius:18px;font-size:.85rem;font-weight:600;color:#B91C1C}
.lwc-rec__dot{width:10px;height:10px;border-radius:9999px;background:#EF4444;animation:lwc-pulse 1s infinite}
@keyframes lwc-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Atividade: balõezinhos (Geral/Conversas/E-mails/Ligações) + resumo WhatsApp ===== */
.lead-360-balloons{display:flex;flex-wrap:wrap;gap:.4rem;padding:.15rem 0 .55rem}
.lead-360-balloon{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #E2E8F0;background:#fff;color:#475569;border-radius:9999px;padding:4px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s}
.lead-360-balloon:hover{border-color:#7DD3FC;color:#0369A1}
.lead-360-balloon.is-active{background:#0284C7;border-color:#0284C7;color:#fff}
.lead-360-balloon.is-active .lead-360-count{background:rgba(255,255,255,.28);color:#fff}
.lead-360-wa-summary{background:#F0F9FF;border:1px solid #E0F2FE}
.lead-360-wa-summary:hover{background:#E0F2FE}