/* Tela de login do webmail: painel da esquerda com o Coliseu no mesmo visual do popup que abre
   depois do login (plugin coliseu). Painel em pé (retângulo vertical): tudo empilhado. */
#gladiator-promo.cp {
	background: radial-gradient(520px 300px at 100% 0%, #E3EEFC 0%, transparent 62%),
		radial-gradient(420px 260px at 0% 100%, #FDEAE1 0%, transparent 60%), #F7F9FE;
	color: #1A1B2E;
	border-right: 1px solid #E6E9F4;
}
#gladiator-promo.cp .gladiator-promo-inner { padding: 36px 34px; width: 100%; text-align: left; }
#gladiator-promo.cp .gladiator-promo-watermark { opacity: .05; }

.cp .cp-marca { display: flex; align-items: center; gap: 10px; }
.cp .cp-marca img { width: 50px; height: 50px; margin: -6px -4px -6px -6px; }
.cp .cp-marca b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.3px; line-height: 1; }
.cp .cp-marca .n1 { color: #0B1D5C; } .cp .cp-marca .n2 { color: #0A66D6; }
.cp .cp-marca small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0B1D5C; margin-top: 4px; }
.cp .cp-novo { display: inline-block; margin-top: 14px; background: #F26E1D; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.cp h2.cp-titulo { font-size: 1.45rem; line-height: 1.22; font-weight: 800; margin: 8px 0 16px; color: #1A1B2E; }
.cp h2.cp-titulo em { font-style: normal; color: #0A66D6; }

/* tela de envio animada (mesma do popup) */
.cp .cp-mock { position: relative; background: #fff; border: 1px solid #E0E3F0; border-radius: 16px; box-shadow: 0 16px 40px rgba(11, 29, 92, .14); padding: 14px; transition: box-shadow .3s ease, border-color .3s ease; }
.cp .cp-mock.cp-arrastando { border-color: #0A66D6; box-shadow: 0 0 0 4px rgba(10, 102, 214, .15), 0 16px 40px rgba(11, 29, 92, .14); }
.cp .cp-ponto { position: absolute; bottom: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; background: #F26E1D; box-shadow: 0 6px 14px rgba(242, 110, 29, .45); animation: cp-pulso 2.4s ease-in-out infinite; }
@keyframes cp-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.cp .cp-topo { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .85rem; color: #0B1D5C; margin-bottom: 10px; }
.cp .cp-topo img { width: 20px; height: 20px; }
.cp .cp-solte { margin-left: auto; font-size: .66rem; font-weight: 600; color: #0A66D6; opacity: 0; transition: opacity .3s ease; }
.cp .cp-arrastando .cp-solte { opacity: 1; }
.cp .cp-arqs { min-height: 138px; }
.cp .cp-arq { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #E0E3F0; border-radius: 10px; margin-bottom: 6px; opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2), border-color .3s ease; }
.cp .cp-arq.cp-entrou { opacity: 1; transform: none; }
.cp .cp-arq.cp-feito { border-color: #BFE3D2; }
.cp .cp-tipo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .55rem; font-weight: 800; color: #fff; flex: none; text-transform: uppercase; }
.cp .cp-tipo.v { background: #7C3AED; } .cp .cp-tipo.z { background: #D97706; } .cp .cp-tipo.p { background: #DC2626; }
.cp .cp-info { flex: 1; min-width: 0; }
.cp .cp-nome { font-weight: 700; font-size: .76rem; color: #1A1B2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .cp-barra { height: 5px; background: #EEF0F9; border-radius: 99px; margin-top: 5px; overflow: hidden; }
.cp .cp-barra i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #0A66D6, #0B119C); border-radius: 99px; transition: width .12s linear; }
.cp .cp-feito .cp-barra i { background: linear-gradient(90deg, #22A06B, #137A4F); }
.cp .cp-tam { color: #6c6f85; font-size: .66rem; white-space: nowrap; }
.cp .cp-pct { width: 30px; text-align: right; font-size: .66rem; font-weight: 700; color: #0A66D6; font-variant-numeric: tabular-nums; }
.cp .cp-ok { display: none; width: 18px; height: 18px; border-radius: 50%; background: #137A4F; color: #fff; font-size: .65rem; place-items: center; flex: none; }
.cp .cp-feito .cp-pct { display: none; }
.cp .cp-feito .cp-ok { display: grid; animation: cp-ok .35s ease; }
@keyframes cp-ok { from { transform: scale(0); } to { transform: scale(1); } }
.cp .cp-link { display: flex; gap: 6px; margin-top: 8px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.cp .cp-pronto .cp-link { opacity: 1; transform: none; }
.cp .cp-link span { flex: 1; min-width: 0; border: 1px solid #E0E3F0; background: #F5F7FD; border-radius: 8px; padding: 6px 8px; font-size: .68rem; color: #6c6f85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .cp-link b { background: #0B119C; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: .68rem; white-space: nowrap; }
.cp .cp-pronto .cp-link b { animation: cp-copiar 1.2s ease .3s 2; }
@keyframes cp-copiar { 0%, 100% { box-shadow: 0 0 0 0 rgba(11, 17, 156, .45); } 50% { box-shadow: 0 0 0 6px rgba(11, 17, 156, 0); } }

.cp .cp-cta { display: inline-block; margin-top: 20px; background: #E8622C; color: #fff !important; font-weight: 700; font-size: .9rem; border-radius: 999px; padding: 10px 20px; text-decoration: none !important; box-shadow: 0 8px 20px rgba(232, 98, 44, .28); }
.cp .cp-cta:hover { background: #d4541f; }
.cp .cp-mais { margin-top: 22px; padding-top: 16px; border-top: 1px solid #E3E6F2; display: flex; flex-direction: column; gap: 8px; }
.cp .cp-mais a { color: #0B119C !important; font-size: .8rem; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; }
.cp .cp-mais a:hover { text-decoration: underline !important; }
.cp .cp-mais a:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F26E1D; flex: none; }

/* telas mais baixas: compacta a tela de envio */
@media (max-height: 720px) {
	#gladiator-promo.cp .gladiator-promo-inner { padding: 24px 28px; }
	.cp h2.cp-titulo { font-size: 1.25rem; margin-bottom: 12px; }
	.cp .cp-arqs { min-height: 118px; }
	.cp .cp-cta { margin-top: 14px; }
	.cp .cp-mais { margin-top: 14px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp *, .cp { transition: none !important; animation: none !important; }
}