/* EM Afiliados — estilos frontend
   - Burbuja "Te invitó X" (bottom-left)
   - Bloque [em_affiliate_link]
   - Settings [em_affiliate_settings]
*/

/* ============================================================
   Burbuja
   ============================================================ */
.em-afil-bubble{
	position:fixed;
	left:20px; bottom:20px;
	z-index:9999;
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px 12px 12px;
	border-radius:14px;
	background:linear-gradient(135deg, #131a21, #0b1014);
	border:1px solid rgba(32,255,132,.50);
	box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 24px rgba(32,255,132,.15);
	color:#f4f1eb;
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	opacity:0;
	transform:translateY(20px);
	transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
	max-width:calc(100vw - 40px);
}
.em-afil-bubble.is-on{ opacity:1; transform:translateY(0); }
.em-afil-bubble__avatar{
	flex:none;
	width:40px; height:40px;
	border-radius:50%;
	background:linear-gradient(135deg, #20ff84, #8affc1);
	color:#03110a;
	display:flex; align-items:center; justify-content:center;
	font:800 16px/1 inherit;
}
.em-afil-bubble__body{ min-width:0; }
.em-afil-bubble__label{
	font:800 10.5px/1 inherit;
	letter-spacing:.10em;
	text-transform:uppercase;
	color:rgba(255,255,255,.55);
	margin-bottom:3px;
}
.em-afil-bubble__name{
	font:800 14px/1.2 inherit;
	color:#8affc1;
}
.em-afil-bubble__close{
	flex:none;
	appearance:none; border:0;
	width:24px; height:24px;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#f4f1eb;
	font-size:16px;
	cursor:pointer;
	transition:.18s;
}
.em-afil-bubble__close:hover{ background:rgba(255,255,255,.16); }

@media (max-width:600px){
	.em-afil-bubble{ left:12px; right:12px; bottom:12px; }
}

/* ============================================================
   Login CTA (cuando el usuario no está logged in)
   ============================================================ */
.em-afil-cta-login{
	display:flex;
	gap:16px;
	align-items:flex-start;
	padding:22px 24px;
	border-radius:18px;
	background:linear-gradient(135deg, rgba(32,255,132,.10), rgba(32,255,132,.02));
	border:1px solid rgba(32,255,132,.30);
	max-width:680px;
	margin:0 auto 22px;
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
}
.em-afil-cta-login__icon{
	flex:none;
	width:48px; height:48px;
	border-radius:12px;
	background:linear-gradient(135deg, #20ff84, #8affc1);
	color:#03110a;
	display:flex; align-items:center; justify-content:center;
	font-size:24px;
}
.em-afil-cta-login__body{ flex:1; min-width:0; }
.em-afil-cta-login__title{
	font:800 16px/1.2 inherit;
	margin-bottom:6px;
	letter-spacing:-.01em;
}
.em-afil-cta-login__sub{
	margin:0 0 12px;
	font-size:13.5px;
	line-height:1.5;
	color:rgba(255,255,255,.66);
}
.em-afil-cta-login__btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:11px 22px;
	border-radius:999px;
	background:linear-gradient(135deg, #20ff84, #8affc1);
	color:#03110a;
	font:800 13px/1 inherit;
	text-decoration:none;
	box-shadow:0 10px 24px rgba(32,255,132,.30);
	transition:.18s;
}
.em-afil-cta-login__btn:hover{ transform:translateY(-2px); }

/* ============================================================
   Bloque link único
   ============================================================ */
.em-afil-link{
	max-width:680px;
	margin:0 auto 22px;
	padding:22px 24px;
	border-radius:18px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.10);
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
}
.em-afil-link__head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:14px;
}
.em-afil-link__label{
	font:800 11px/1 inherit;
	letter-spacing:.10em;
	text-transform:uppercase;
	color:#8affc1;
	margin-bottom:6px;
}
.em-afil-link__user{ font:600 14px/1.2 inherit; }
.em-afil-link__user strong{ color:#8affc1; }
.em-afil-link__stats{
	display:flex;
	gap:14px;
}
.em-afil-link__stats > div{
	text-align:right;
}
.em-afil-link__stats strong{
	display:block;
	font:800 20px/1 inherit;
	color:#8affc1;
	letter-spacing:-.02em;
}
.em-afil-link__stats span{
	font-size:10.5px;
	color:rgba(255,255,255,.55);
	font-weight:600;
	letter-spacing:.04em;
}
.em-afil-link__row{
	display:flex;
	gap:8px;
	margin-bottom:6px;
}
.em-afil-link__input{
	flex:1; min-width:0;
	padding:11px 14px;
	border-radius:10px;
	background:rgba(0,0,0,.30);
	border:1px solid rgba(255,255,255,.14);
	color:#f4f1eb;
	font:600 13.5px/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	outline:none;
}
.em-afil-link__input:focus{
	border-color:rgba(32,255,132,.40);
	background:rgba(0,0,0,.45);
}
.em-afil-link__copy,
.em-afil-link__save{
	flex:none;
	padding:11px 18px;
	border-radius:10px;
	background:linear-gradient(135deg, #20ff84, #8affc1);
	color:#03110a;
	border:0;
	font:800 13px/1 inherit;
	cursor:pointer;
	transition:.18s;
}
.em-afil-link__copy:hover,
.em-afil-link__save:hover{ transform:translateY(-1px); }
.em-afil-link__copy.is-copied{ background:#fff; }
.em-afil-link__details{
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid rgba(255,255,255,.08);
}
.em-afil-link__details summary{
	cursor:pointer;
	font:700 13px/1 inherit;
	color:#8affc1;
	user-select:none;
}
.em-afil-link__form label{
	display:block;
	margin:12px 0 6px;
	font-size:12.5px;
	color:rgba(255,255,255,.78);
}
.em-afil-link__form label code{
	font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	background:rgba(0,0,0,.30);
	padding:1px 5px;
	border-radius:4px;
	color:#8affc1;
}
.em-afil-link__hint{
	margin:8px 0 0;
	font-size:11.5px;
	color:rgba(255,255,255,.55);
}
.em-afil-link__msg{
	margin:8px 0 0;
	font-size:12.5px;
	font-weight:700;
	padding:8px 10px;
	border-radius:8px;
}
.em-afil-link__msg.is-ok{ background:rgba(32,255,132,.10); color:#8affc1; }
.em-afil-link__msg.is-err{ background:rgba(255,107,107,.10); color:#ff8a8a; }

/* ============================================================
   Settings (versión solo del form)
   ============================================================ */
.em-afil-settings{
	max-width:560px;
	margin:0 auto 22px;
	padding:22px 24px;
	border-radius:16px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.10);
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
}
.em-afil-settings h3{
	margin:0 0 8px;
	font:800 16px/1.2 inherit;
	letter-spacing:-.01em;
}
.em-afil-settings__hint{
	margin:0 0 12px;
	font-size:12.5px;
	color:rgba(255,255,255,.66);
}
.em-afil-settings__hint code{
	font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	background:rgba(0,0,0,.30);
	padding:2px 6px;
	border-radius:4px;
	color:#8affc1;
	word-break:break-all;
}

/* ============================================================
   Calculadora dinámica (shortcode em_affiliate_calculator)
   ============================================================ */
.em-afil-calc{
	max-width:880px;
	margin:18px auto;
	padding:22px 24px;
	border-radius:18px;
	background:linear-gradient(135deg, rgba(32,255,132,.10), rgba(32,255,132,.02));
	border:1px solid rgba(32,255,132,.30);
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
}
.em-afil-calc__head{ text-align:center; margin-bottom:18px; }
.em-afil-calc__chip{
	display:inline-block;
	padding:5px 12px; border-radius:999px;
	background:rgba(32,255,132,.14);
	border:1px solid rgba(32,255,132,.32);
	color:#8affc1;
	font:800 11px/1 inherit;
	letter-spacing:.10em; text-transform:uppercase;
	margin-bottom:8px;
}
.em-afil-calc__head h3{
	margin:0 0 6px;
	font:800 18px/1.3 inherit;
	letter-spacing:-.01em;
	color:#f4f1eb;
}
.em-afil-calc__head h3 strong{ color:#8affc1; }
.em-afil-calc__head p{ margin:0; font-size:13px; color:rgba(255,255,255,.66); }
.em-afil-calc__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
}
@media (max-width:680px){ .em-afil-calc__grid{ grid-template-columns:1fr; } }
.em-afil-calc__col{
	padding:16px 14px;
	border-radius:14px;
	background:rgba(0,0,0,.20);
	border:1px solid rgba(255,255,255,.08);
}
.em-afil-calc__col-head{
	font:800 12.5px/1.2 inherit;
	color:#f4f1eb;
	margin-bottom:10px;
	padding-bottom:8px;
	border-bottom:1px solid rgba(255,255,255,.10);
}
.em-afil-calc__row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px 10px;
	border-radius:8px;
	margin-bottom:4px;
}
.em-afil-calc__row span{ font-size:13px; color:rgba(255,255,255,.78); }
.em-afil-calc__row span small{ color:rgba(255,255,255,.45); font-weight:600; margin-left:4px; }
.em-afil-calc__row strong{ font:800 15px/1 inherit; color:#8affc1; letter-spacing:-.01em; }
.em-afil-calc__row--featured{
	background:rgba(32,255,132,.10);
	border:1px solid rgba(32,255,132,.25);
}
.em-afil-calc__note{
	margin:10px 0 0;
	font-size:11px;
	color:rgba(255,255,255,.55);
	font-style:italic;
	line-height:1.4;
}
.em-afil-calc--guest .em-afil-calc__example{
	margin-top:12px;
	padding:14px 16px;
	border-radius:12px;
	background:rgba(0,0,0,.20);
	border:1px solid rgba(255,255,255,.08);
	font-size:13px;
}
.em-afil-calc--guest .em-afil-calc__example ul{
	margin:6px 0 0; padding-left:20px;
	color:rgba(255,255,255,.78);
	line-height:1.7;
}
.em-afil-calc--guest .em-afil-calc__example strong{ color:#8affc1; }

/* ============================================================
   Progress (página registra-afiliado)
   ============================================================ */
.em-afil-progress{
	max-width:880px;
	margin:18px auto;
	padding:22px 24px;
	border-radius:18px;
	background:linear-gradient(135deg, rgba(32,255,132,.10), rgba(32,255,132,.02));
	border:1px solid rgba(32,255,132,.30);
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
}
.em-afil-progress__head{ text-align:center; margin-bottom:18px; }
.em-afil-progress__chip{
	display:inline-block; padding:5px 12px; border-radius:999px;
	background:rgba(32,255,132,.14); border:1px solid rgba(32,255,132,.32);
	color:#8affc1; font:800 11px/1 inherit;
	letter-spacing:.10em; text-transform:uppercase;
	margin-bottom:8px;
}
.em-afil-progress__head h3{
	margin:0 0 8px; font:800 19px/1.3 inherit; color:#f4f1eb; letter-spacing:-.01em;
}
.em-afil-progress__head h3 strong{ color:#8affc1; }
.em-afil-progress__head p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.6; }
.em-afil-progress__head p strong{ color:#f4f1eb; }
.em-afil-progress__login{
	display:inline-block; margin-top:12px;
	padding:11px 22px; border-radius:999px;
	background:linear-gradient(135deg, #20ff84, #8affc1);
	color:#03110a; font:800 13px/1 inherit;
	text-decoration:none;
}
.em-afil-progress__grid{
	display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:680px){ .em-afil-progress__grid{ grid-template-columns:1fr; } }
.em-afil-progress__col{
	padding:16px 14px; border-radius:14px;
	background:rgba(0,0,0,.20);
	border:1px solid rgba(255,255,255,.08);
}
.em-afil-progress__col-head{
	font:800 13px/1.2 inherit; color:#f4f1eb; margin-bottom:4px;
}
.em-afil-progress__col-sub{
	margin:0 0 12px; font-size:11.5px;
	color:rgba(255,255,255,.55); font-style:italic;
}
.em-afil-progress__row{
	display:flex; justify-content:space-between; align-items:center;
	padding:9px 11px; border-radius:8px; margin-bottom:5px;
}
.em-afil-progress__row span{ font-size:13px; color:rgba(255,255,255,.78); }
.em-afil-progress__row span small{ display:block; color:rgba(255,255,255,.45); font-weight:600; font-size:10.5px; margin-top:2px; }
.em-afil-progress__row strong{ font:800 16px/1 inherit; color:#ffd34d; letter-spacing:-.01em; }
.em-afil-progress__row--featured{
	background:rgba(255,193,7,.08);
	border:1px solid rgba(255,193,7,.25);
}

/* ============================================================
   Form de registro de referido (página)
   ============================================================ */
.em-ref-form-page{
	max-width:680px;
	margin:18px auto;
	padding:24px 26px;
	border-radius:18px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.10);
	font-family:'Inter',system-ui,-apple-system,sans-serif;
	color:#f4f1eb;
	display:flex; flex-direction:column; gap:12px;
}
.em-ref-form-page__field label{
	display:block; font:700 11.5px/1 inherit;
	letter-spacing:.05em; text-transform:uppercase;
	color:rgba(255,255,255,.66); margin-bottom:6px;
}
.em-ref-form-page__field input,
.em-ref-form-page__field select,
.em-ref-form-page__field textarea{
	width:100%; padding:12px 14px; border-radius:10px;
	background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.14);
	color:#f4f1eb; font:600 14px/1.2 inherit; outline:none; box-sizing:border-box;
}
.em-ref-form-page__field input:focus,
.em-ref-form-page__field select:focus,
.em-ref-form-page__field textarea:focus{
	border-color:rgba(32,255,132,.40); background:rgba(0,0,0,.45);
}
/* Forzar fondo blanco y texto negro en las options del dropdown.
   Sin esto, los browsers heredan color:#f4f1eb del <select> y dejan
   las opciones blanco-sobre-blanco al desplegar. */
.em-ref-form-page__field select option,
.em-ref-form-page__field select optgroup{
	background-color:#ffffff;
	color:#1a1a1a;
	font-weight:600;
}
.em-ref-form-page__row{
	display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:560px){ .em-ref-form-page__row{ grid-template-columns:1fr; } }
.em-ref-form-page__submit{
	appearance:none; border:0; padding:14px 16px;
	border-radius:12px;
	background:linear-gradient(135deg, #25d366, #128c7e);
	color:#fff; font:800 14.5px/1 inherit;
	cursor:pointer; margin-top:6px;
	box-shadow:0 14px 30px rgba(37,211,102,.30);
	transition:.18s;
}
.em-ref-form-page__submit:hover{ transform:translateY(-1px); }
.em-ref-form-page__submit:disabled{ opacity:.6; cursor:wait; }
.em-ref-form-page__msg{
	margin:0; padding:10px 12px; border-radius:10px;
	font:700 12.5px/1.4 inherit;
}
.em-ref-form-page__msg.is-ok{ background:rgba(32,255,132,.12); color:#8affc1; border:1px solid rgba(32,255,132,.30); }
.em-ref-form-page__msg.is-err{ background:rgba(255,107,107,.12); color:#ff8a8a; border:1px solid rgba(255,107,107,.30); }
.em-ref-form-page__hint{
	margin:0; font-size:12px; color:rgba(255,255,255,.55);
	line-height:1.5; text-align:center;
}

/* ============================================================
   Contador de clicks compacto
   ============================================================ */
.em-afil-clicks{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:8px;
	max-width:480px;
	margin:0 auto 18px;
}
.em-afil-clicks__item{
	text-align:center;
	padding:14px 10px;
	border-radius:14px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.10);
	color:#f4f1eb;
	font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.em-afil-clicks__item strong{
	display:block;
	font:800 22px/1 inherit;
	color:#8affc1;
	letter-spacing:-.02em;
	margin-bottom:4px;
}
.em-afil-clicks__item span{
	font-size:10.5px;
	color:rgba(255,255,255,.55);
	font-weight:600;
	letter-spacing:.04em;
	text-transform:uppercase;
}