/*body[data-fondo="árboles1"]{background-image:url(img/fondos/arboles1.jpg)}*/



diálogo-personajes{
	position:absolute;
	inset:0;
	opacity:0;
	pointer-events: none;
	width: auto;
    height: auto;
    max-height: none;
    background: none;
	padding:0;
	overflow: hidden;
	z-index:1000;
	
	.mostrar_diálogo &{
		opacity:1;
		pointer-events: auto;
	}
	
	> personaje-actual{
		position:absolute;
		inset:0;
		background:center bottom no-repeat;
		background-size:100% auto;
		
		&[data-personaje="pj"]{background-image:url(img/pj.png)}
	}
	
	opciones-diálogo{
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		opacity:0;
		pointer-events:none;
	}
	
	&.modoOpciones{
		opciones-diálogo{
			opacity:1;
			pointer-events:auto;
		}
		
		globo-frase{
			opacity:0;
			pointer-events:none;
		}
	}


	globo-frase{
		position:absolute;
		left:1em;
		right:2em;
		bottom:2em;
		padding:1.2em 1.7em 1.6em 1.1em;
		background:white;
		border-radius:1em;
		align-content: center;
		text-align:center;
		min-height:3em;
		
		nombre-personaje{
			position:absolute;
			left:1em;
			top:-1em;
			padding:0.3em 1em;
			background:black;
			color:white;
			border-radius:10em;
		}

		texto-frase{
			text-wrap:balance;
		}
		
		button{
			width: 3em;
			height: 3em;
			border-radius:100%;
			padding: 0;
			min-height: 0;
			position: absolute;
			right: -1.5em;
			top:calc(50% - 1.5em);
			margin:0;
			
			&.desactivar{
				pointer-events: none;
			}
		}
	}
}