/* Simulações do Disparo em massa. Reaproveita gestao.css (g-*). */
/* ---- WhatsApp no celular ---- */
.dp-wa { height: 100%; display: flex; flex-direction: column; background: #efeae2; }
.dp-wa-top { background: #008069; color: #fff; display: flex; align-items: center; gap: 8px; padding: 40px 12px 9px; }
.dp-wa-top > span { font-size: 22px; line-height: 1; }
.dp-wa-top i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 17px; }
.dp-wa-top b { display: block; font-size: 13.5px; }
.dp-wa-top small { font-size: 10.5px; opacity: .85; }
.dp-wa-chat { flex: 1; min-height: 0; overflow: hidden; padding: 10px 9px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; }
.dp-dia { align-self: center; background: #fff; color: #54656f; font-size: 9.5px; border-radius: 7px; padding: 3px 8px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.dp-wa-in { display: flex; gap: 6px; padding: 7px 8px 22px; align-items: center; }
.dp-wa-in span { flex: 1; background: #fff; border-radius: 20px; padding: 9px 13px; color: #8696a0; font-size: 12.5px; }
.dp-wa-in i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: #00a884; display: grid; place-items: center; }

.dp-bolha { background: #fff; border-radius: 9px; padding: 4px; max-width: 92%; box-shadow: 0 1px .5px rgba(0,0,0,.13); font-size: 12px; line-height: 1.38; color: #111b21; }
.phero__phone-screen .dp-bolha img, .dp-bolha img { display: block; width: 100%; height: 108px; object-fit: cover; object-position: 50% 50%; border-radius: 7px; }
.dp-bolha p { margin: 6px 6px 0; }
.dp-bolha > small { display: block; text-align: right; color: #667781; font-size: 9.5px; padding: 0 6px 3px; }
.dp-bts { border-top: 1px solid #e9edef; display: flex; flex-direction: column; }
.dp-bts span { text-align: center; color: #027eb5; font-weight: 600; padding: 7px 0; font-size: 12px; }
.dp-bts span + span { border-top: 1px solid #e9edef; }
.dp-eu, .dp-loja { max-width: 84%; border-radius: 9px; padding: 6px 8px 4px; font-size: 12px; line-height: 1.38; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.dp-eu { align-self: flex-end; background: #d9fdd3; }
.dp-loja { align-self: flex-start; background: #fff; }
.dp-eu small, .dp-loja small { display: block; text-align: right; color: #667781; font-size: 9.5px; margin-top: 2px; }
.dp-eu small { color: #53bdeb; }
.dp-ok { border-left: 3px solid #00a884; }
.dp-ok b:first-child { display: block; color: #008069; margin-bottom: 2px; }

.dp-lock { height: 100%; background: linear-gradient(160deg, #0b3b40, #021f23 70%); color: #fff; padding: 70px 12px 0; display: flex; flex-direction: column; align-items: center; }
.dp-lock > b { font-size: 58px; font-weight: 300; line-height: 1; }
.dp-lock > small { font-size: 12.5px; opacity: .85; margin: 6px 0 40px; }
.dp-notif { width: 100%; background: rgba(255,255,255,.88); color: #111827; border-radius: 18px; padding: 10px 11px; display: flex; gap: 9px; align-items: flex-start; backdrop-filter: blur(8px); }
.dp-notif i { font-style: normal; width: 30px; height: 30px; border-radius: 8px; background: #25d366; display: grid; place-items: center; flex: 0 0 auto; }
.dp-notif b { font-size: 12.5px; }
.dp-notif p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; }
.dp-notif > small { margin-left: auto; font-size: 10px; color: #6b7280; }

/* ---- painel ---- */
.dp-nova { background: #16a34a; color: #fff; border-radius: 9px; padding: 6px 12px; font-weight: 700; font-size: 11px; }
.dp-st { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dp-st--env { background: #d1fae5; color: #065f46; }
.dp-st--ag { background: #ccfbf1; color: #025e67; }
.dp-st--ok { background: #dcfce7; color: #166534; }
.dp-camps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-camp { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.dp-camp > b, .dp-camp .g-row b { font-size: 13px; }
.dp-prog { height: 7px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.dp-prog i { display: block; height: 100%; background: #16a34a; border-radius: 99px; }
.dp-prog--g { height: 12px; }
.dp-prog--g i { background: linear-gradient(90deg, #16a34a, #22c55e); animation: dpEnc 5s linear both; }
@keyframes dpEnc { from { width: 48%; } }
.dp-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 3px; }
.dp-chip { border-radius: 8px; padding: 4px 6px; font-weight: 800; font-size: 12px; background: #f1f5f9; color: #334155; }
.dp-chip small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.dp-chip--1 { background: #f0fdfa; color: #0f766e; }
.dp-chip--2 { background: #ecfdf5; color: #047857; }
.dp-chip--3 { background: #fff7ed; color: #9a3412; }
.dp-chip--4 { background: #fef2f2; color: #b91c1c; }
.dp-chip--5 { background: #fffbeb; color: #92400e; }
.dp-agenda { background: #f0fdfa; border: 1px dashed #5eead4; color: #025e67; border-radius: 9px; padding: 9px 10px; font-size: 11px; margin-top: 4px; }

.dp-criar { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; min-height: 0; flex: 1; }
.dp-col { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.dp-passo { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.dp-passo > b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.dp-passo > b span { width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 10.5px; }
.dp-inp { border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; background: #fff; font-size: 11.5px; }
.dp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dp-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.dp-tiles div { border: 2px solid #e5e7eb; border-radius: 10px; padding: 7px 9px; }
.dp-tiles b { display: block; font-size: 11.5px; }
.dp-tiles small { font-size: 9.5px; color: #6b7280; }
.dp-tiles div.on { border-color: #16a34a; background: #f0fdf4; }
.dp-filtros { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-filtros span { background: #f1f5f9; border-radius: 7px; padding: 4px 8px; font-size: 10.5px; }
.dp-conta { align-self: flex-start; background: #dcfce7; color: #166534; border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.dp-prev { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dp-wa-chat--prev { background: #e5ddd5; border-radius: 10px; justify-content: flex-start; padding: 14px 12px; }
.dp-wa-chat--prev .dp-bolha { max-width: 100%; }
.dp-wa-chat--prev .dp-bolha img { height: 150px; }
.dp-cad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-cad div { background: #f8fafc; border-radius: 9px; padding: 7px 9px; }
.dp-cad small { display: block; font-size: 9.5px; color: #64748b; }
.dp-cad b { font-size: 12px; }
.dp-ck { width: 15px; height: 15px; border: 1.5px solid #94a3b8; border-radius: 4px; }
.dp-pre { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; }
.dp-pre > b { font-size: 13px; }
.dp-pronta { margin-top: 4px; text-align: center; background: #dcfce7; color: #166534; border-radius: 9px; padding: 9px; font-weight: 800; font-size: 13px; }
.dp-enviar { background: #111827; color: #fff; border-radius: 9px; padding: 9px; text-align: center; font-weight: 700; font-size: 12px; }

.dp-ao-vivo { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dp-num { font-size: 18px; }
.dp-funil { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.dp-funil div { background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid var(--c); border-radius: 10px; padding: 8px 9px; position: relative; }
.dp-funil small { display: block; font-size: 9.5px; color: #64748b; }
.dp-funil b { font-size: 19px; color: var(--c); }
.dp-funil em { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 9.5px; color: #64748b; }
.dp-feed { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.dp-feed div { font-size: 11.5px; border-top: 1px solid #f3f4f6; padding-top: 5px; }
.dp-feed div small { color: #94a3b8; margin-right: 8px; }

.dp-res { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.dp-roi { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; border-radius: 12px; padding: 14px 16px; color: #065f46; display: flex; flex-direction: column; gap: 8px; }
.dp-roi > small { font-size: 10.5px; }
.dp-roi > b { font-size: 30px; color: #064e3b; }
.dp-roi-l { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.dp-roi-x { align-self: flex-start; background: #047857; color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.dp-jorn { font-size: 12px; letter-spacing: .02em; white-space: nowrap; }

/* ---- página ---- */
.dp-hero-sim { display: flex; justify-content: center; }
.dp-linha { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.dp-linha > b { font-size: 12.5px; }
.dp-linha div { display: grid; grid-template-columns: 62px 12px 1fr; align-items: center; gap: 8px; font-size: 11px; }
.dp-linha small { text-align: right; color: #64748b; font-weight: 700; }
.dp-linha i { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }