/* Panel VeoVirtual — estilos de la web pública */

/* ---------------------------------------------------- barra superior */
#vvp-topbars{width:100%}
.vvp-bar{
	position:relative;width:100%;box-sizing:border-box;
	padding:11px 16px;text-align:center;
	font-size:15px;line-height:1.4;font-weight:500;z-index:9999;
}
.vvp-bar-cerrable{padding-left:44px;padding-right:44px}
.vvp-bar a{color:inherit;text-decoration:underline}
.vvp-bar-txt{display:inline-block}
/* Marquesina: la ventana recorta el texto dentro del área con padding,
   así nunca pasa por debajo del aspa de cerrar. */
.vvp-bar-win{display:block;overflow:hidden;white-space:nowrap}
.vvp-bar-win .vvp-bar-move{display:inline-block;padding-left:100%;animation-name:vvp-marquee;animation-timing-function:linear;animation-iteration-count:infinite}
.vvp-bar-anim:hover .vvp-bar-move{animation-play-state:paused}
@keyframes vvp-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.vvp-bar-x{
	position:absolute;right:0;top:0;height:100%;width:40px;
	background:none;border:0;color:inherit;opacity:.75;font-size:22px;line-height:1;
	cursor:pointer;padding:0;
}
.vvp-bar-x:hover{opacity:1}

/* Cerrar / abrir: la barra se pliega hacia arriba y vuelve a bajar. */
.vvp-bar.vvp-oculta{display:none}
.vvp-bar.vvp-anim{
	overflow:hidden;
	transition:height .4s cubic-bezier(.4,0,.2,1),
	           transform .4s cubic-bezier(.4,0,.2,1),
	           padding .4s cubic-bezier(.4,0,.2,1),
	           opacity .3s ease;
}
.vvp-bar.vvp-fuera{transform:translateY(-100%);opacity:0;padding-top:0;padding-bottom:0}

/* Botón redondo con la "i" para recuperar los avisos cerrados. */
#vvp-fab{
	position:fixed;top:12px;right:12px;z-index:100000;
	width:34px;height:34px;padding:0;border:0;border-radius:50%;
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.28);
	opacity:0;transform:translateY(-10px) scale(.8);
	transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.4,.64,1);
}
/* Posición configurable (por si choca con el menú o el logo del tema) */
#vvp-fab.vvp-fab-td{right:12px;left:auto}
#vvp-fab.vvp-fab-ti{left:12px;right:auto}
#vvp-fab.vvp-fab-bd{right:14px;left:auto;top:auto;bottom:14px;transform:translateY(10px) scale(.8)}
#vvp-fab.vvp-fab-bi{left:14px;right:auto;top:auto;bottom:14px;transform:translateY(10px) scale(.8)}
#vvp-fab.on{opacity:.88;transform:none}
#vvp-fab:hover,#vvp-fab:focus{opacity:1}
#vvp-fab span{font:italic 700 17px/1 Georgia,"Times New Roman",serif;pointer-events:none}

@media (prefers-reduced-motion: reduce){
	.vvp-bar-win .vvp-bar-move{animation:none;padding-left:0}
	.vvp-bar-win{white-space:normal;overflow:visible}
	.vvp-bar.vvp-anim{transition:none}
	#vvp-fab{transition:none}
}

/* ------------------------------------------------ avisos en la página */
.vvp-avisos{display:block}
.vvp-aviso{margin:18px 0;text-align:left}
.vvp-aviso-caja{
	border:1px solid rgba(0,0,0,.10);border-left:5px solid #b71c1c;border-radius:10px;
	padding:16px 18px;background:rgba(0,0,0,.02);
}
.vvp-aviso-tit{margin:0 0 8px;font-size:1.25em;line-height:1.25}
.vvp-aviso-cont p{margin:0 0 .7em}
.vvp-aviso-cont p:last-child{margin-bottom:0}
.vvp-aviso-cont ul,.vvp-aviso-cont ol{margin:0 0 .7em 1.2em}
.vvp-aviso-plano{padding:0;border:0;background:none}