/* =========================================================
   JDRON — EL AYUDANTE FLOTANTE DE JDRONESTUDIO.COM
   ---------------------------------------------------------
   Mismo aspecto que el de la tienda. Todo va colgado de
   #jds-bot para que no se pise con el tema ni con el HUD.
   ========================================================= */

#jds-bot{position:fixed;right:20px;bottom:20px;z-index:9998;font-family:inherit;line-height:1.5}
#jds-bot *,#jds-bot *::before,#jds-bot *::after{box-sizing:border-box}

#jds-bot .jds-bot-abrir{
	display:flex;align-items:center;gap:11px;background:#DD0453;color:#fff;border:0;cursor:pointer;
	border-radius:999px;padding:13px 20px 13px 16px;box-shadow:0 10px 28px -10px rgba(221,4,83,.85);
	font-family:inherit;font-size:14.5px;font-weight:700;transition:transform .15s,box-shadow .15s;
	margin:0;text-transform:none;letter-spacing:normal
}
#jds-bot .jds-bot-abrir:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(221,4,83,.95)}
#jds-bot .jds-bot-dron .jds-h{transform-origin:15px 14px;animation:jds-helice 2.4s ease-in-out infinite}
#jds-bot .jds-bot-dron .jds-h2{animation-delay:.4s}
@keyframes jds-helice{0%,100%{opacity:1}50%{opacity:.35}}
#jds-bot .jds-bot-abrir:hover .jds-bot-dron{animation:jds-flota 1.6s ease-in-out infinite}
@keyframes jds-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Sin esto el panel se abre solo al entrar: «display:flex» le gana
   al atributo hidden del navegador. Paso por aqui una vez ya. */
#jds-bot .jds-bot-panel[hidden]{display:none !important}
#jds-bot .jds-bot-panel{
	position:absolute;right:0;bottom:64px;width:418px;max-width:calc(100vw - 32px);
	background:#fff;border:1px solid #EDE3E6;border-radius:16px;overflow:hidden;
	box-shadow:0 24px 60px -22px rgba(0,0,0,.42);display:flex;flex-direction:column;
	max-height:min(80vh,700px);text-align:left
}
#jds-bot.a-la-izquierda .jds-bot-panel{right:auto;left:0}
#jds-bot .jds-bot-cab{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#1D1D1B;color:#fff}
#jds-bot .jds-bot-avatar{color:#DD0453;background:#fff;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
#jds-bot .jds-bot-cab b{display:block;font-size:15px;line-height:1.2;color:#fff}
#jds-bot .jds-bot-cab em{font-style:normal;font-size:12px;opacity:.7}
#jds-bot .jds-bot-min{
	margin-left:auto;background:none;border:0;color:#fff;font-size:26px;line-height:.6;cursor:pointer;
	opacity:.7;padding:0 6px;font-family:inherit
}
#jds-bot .jds-bot-min:hover{opacity:1}
#jds-bot .jds-bot-cerrar{margin-left:0;background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.7;padding:0 4px}
#jds-bot .jds-bot-cerrar:hover{opacity:1}

#jds-bot .jds-bot-hilo{padding:17px 17px 6px;overflow-y:auto;flex:1;background:#FBF9F8;min-height:250px;font-size:14.5px}
#jds-bot .jds-m{margin-bottom:10px;display:flex}
#jds-bot .jds-m-txt{
	display:block;max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55;
	background:#fff;border:1px solid #EDE3E6;color:#1D1D1B
}
#jds-bot .jds-m-bot .jds-m-txt{border-bottom-left-radius:4px}
#jds-bot .jds-m-yo{justify-content:flex-end}
#jds-bot .jds-m-yo .jds-m-txt{background:#DD0453;color:#fff;border-color:#DD0453;border-bottom-right-radius:4px}
#jds-bot .jds-m-txt ul,#jds-bot .jds-m-txt ol{margin:9px 0 0;padding-left:19px;list-style:initial}
#jds-bot .jds-m-txt ol{list-style:decimal}
#jds-bot .jds-m-txt li{margin-bottom:6px}
#jds-bot .jds-m-txt p{margin:0 0 9px}
#jds-bot .jds-m-txt p:last-child{margin-bottom:0}
#jds-bot .jds-m-txt b{font-weight:700}
#jds-bot .jds-m-pie{display:block;margin-top:11px;padding-top:9px;border-top:1px dashed #E6DFDB;font-size:12.5px;color:#7C7A74;line-height:1.5}
#jds-bot .jds-m-esp .jds-m-txt{display:flex;gap:4px;padding:14px}
#jds-bot .jds-m-esp i{width:6px;height:6px;border-radius:50%;background:#C9C3BD;animation:jds-pt 1.1s infinite}
#jds-bot .jds-m-esp i:nth-child(2){animation-delay:.15s}
#jds-bot .jds-m-esp i:nth-child(3){animation-delay:.3s}
@keyframes jds-pt{0%,60%,100%{opacity:.3}30%{opacity:1}}

#jds-bot .jds-m-ops{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px 0}
#jds-bot .jds-m-ops button{
	background:#fff;border:1px solid #DD0453;color:#DD0453;border-radius:999px;padding:8px 14px;
	font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .13s,color .13s;
	text-transform:none;letter-spacing:normal;margin:0
}
#jds-bot .jds-m-ops button:hover{background:#DD0453;color:#fff}

#jds-bot .jds-m-prod{display:grid;gap:8px;margin-top:11px}
#jds-bot .jds-m-prod a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1D1D1B;background:#FBF9F8;border:1px solid #EDE3E6;border-radius:10px;padding:8px}
#jds-bot .jds-m-prod a:hover{border-color:#DD0453}
#jds-bot .jds-m-prod img{width:44px;height:44px;object-fit:cover;flex:none;border-radius:7px}
#jds-bot .jds-m-prod b{display:block;font-size:13.5px;line-height:1.3}
#jds-bot .jds-m-prod em{font-style:normal;font-size:12.5px;color:#DD0453;font-weight:700}
#jds-bot .jds-m-prod .jds-m-sub{display:block;font-size:12px;color:#7C7A74;line-height:1.4;margin-top:2px}
#jds-bot .jds-m-cta{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
#jds-bot .jds-m-cta a{background:#1D1D1B;color:#fff;text-decoration:none;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600}
#jds-bot .jds-m-cta a:hover{color:#fff;background:#000}
#jds-bot .jds-m-cta a.jds-wa{background:#25D366;color:#fff}
#jds-bot .jds-m-cta a.jds-wa:hover{background:#1EBE5A;color:#fff}

#jds-bot .jds-bot-pie{border-top:1px solid #EDE3E6;padding:12px 14px;background:#fff}
#jds-bot .jds-bot-form{display:flex;gap:8px;margin:0}
#jds-bot .jds-bot-input{
	flex:1;min-width:0;border:1px solid #E6DFDB;border-radius:999px;padding:10px 15px;font-family:inherit;
	font-size:16px;background:#FBF9F8;color:#1D1D1B;margin:0;height:auto
}
#jds-bot .jds-bot-input:focus{outline:2px solid #DD0453;outline-offset:1px;background:#fff}
#jds-bot .jds-bot-form button{
	flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#DD0453;color:#fff;
	font-size:18px;cursor:pointer;line-height:1;padding:0;margin:0
}
#jds-bot .jds-bot-form button:hover{background:#B80345}
#jds-bot .jds-bot-aviso{margin:9px 0 0;font-size:11.5px;color:#8A8781;line-height:1.5}
#jds-bot .jds-bot-aviso a{color:#DD0453;font-weight:700;text-decoration:none}

/* Minimizado: solo la cabecera, para que no tape la web */
#jds-bot.minimizado .jds-bot-hilo,
#jds-bot.minimizado .jds-bot-pie{display:none}
#jds-bot.minimizado .jds-bot-panel{max-height:none;width:300px}
#jds-bot.minimizado .jds-bot-min{transform:rotate(180deg)}
#jds-bot.minimizado .jds-bot-cab{cursor:pointer}

/* El globito se retira solo: es un saludo, no un cartel */
#jds-bot .jds-bot-globo{
	max-width:220px;overflow:hidden;white-space:nowrap;
	transition:max-width .35s ease,opacity .25s ease,margin .35s ease
}
#jds-bot.jds-bot-callado .jds-bot-globo{max-width:0;opacity:0;margin-left:-11px}

/* Con la mascota de la casa */
#jds-bot .jds-bot-abrir.con-foto{
	background:#fff;padding:4px 20px 4px 6px;border:2px solid #DD0453;
	color:#1D1D1B;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)
}
#jds-bot .jds-bot-abrir.con-foto:hover{box-shadow:0 16px 34px -12px rgba(221,4,83,.6)}
#jds-bot .jds-bot-mascota{
	width:74px;height:auto;display:block;flex:none;
	filter:drop-shadow(0 3px 5px rgba(0,40,120,.22));
	animation:jds-flota 3s ease-in-out infinite
}
#jds-bot .jds-bot-abrir.con-foto .jds-bot-globo{color:#1D1D1B;font-weight:700}
#jds-bot .jds-bot-avatar.con-foto{background:#fff;padding:2px}
#jds-bot .jds-bot-avatar.con-foto{width:42px;height:42px}
#jds-bot .jds-bot-avatar.con-foto img{width:38px;height:auto;display:block}

@media(max-height:700px){#jds-bot .jds-bot-panel{max-height:72vh}}

@media(max-width:520px){
	#jds-bot .jds-bot-globo{display:none}
	#jds-bot .jds-bot-abrir{padding:14px}
	#jds-bot .jds-bot-abrir.con-foto{padding:5px}
	#jds-bot .jds-bot-mascota{width:62px}
}

/* En el movil no tiene sentido una ventanita: sube como una hoja */
@media(max-width:600px){
	#jds-bot .jds-bot-panel{
		position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;
		border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
		max-height:86vh;box-shadow:0 -18px 50px -18px rgba(0,0,0,.5)
	}
	#jds-bot .jds-bot-hilo{min-height:0;max-height:none}
	#jds-bot .jds-bot-pie{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
	#jds-bot.minimizado .jds-bot-panel{width:auto}
}

/* Al imprimir no pinta nada */
@media print{#jds-bot{display:none !important}}