/**
 * @author	Alvaro Fuentes <alvaro.fuentes.zurita@gmail.com>
 *
 * Este componente emplea la técnica de pibote global-local, consistiendo en
 * usar REMs para establecer el tamaño del contenedor principal del componente,
 * y usar EMs para establecer el tamaño de cada elemento hijo del mismo. Si se
 * quiere cambiar el tamaño de la fuente de cualquier elemento hijo, es muy
 * IMPORTANTE hacerlo lo más específico posible, aplicando dichos cambios solo a
 * los elmentos de texto y no al padre que los contiene. No seguir esta regla
 * dará como resultado cambios impredecibles en los tamaños de dichos elementos.
 * Adicionalmente es importante reestablecer el tamaño de la fuente en cada
 * elemento padre, de la forma font-size : 100%.
 *
 * @see https://css-tricks.com/rem-global-em-local/
 */

.w-dialog button
{
	cursor			: pointer;
	outline			: none;
	font: 600 2rem 'Lato',sans-serif;
}

.w-dialog__action
{
border-radius: 0.5rem;
    padding: 0.35em 1.3em;
    background-color: var(--primary-a-normal);
    border: none;
    color: #fff;
}

.w-dialog__action:hover{
	background-color: var(--primary-a-light);
}

.w-dialog p
{
	margin	: 0;
}

.w-dialog__field-value
{
	background-color	: #dce1ef;
	border				: none;
	border-radius		: .5em;
	font-size			: 100%;
	outline				: none;
	padding				: .37em .8em;
	transition			: background-color ease-in 0.25s;
}

.w-dialog__field-value:focus
{
	background-color	: #ffdaab;
}



/* Raíz de componente */
.w-dialog
{
	background	: none;
	border		: none;
	font-size	: 1.1rem;
}

.w-dialog::backdrop
{
	background-color	: rgba(0, 0, 0, .4);
}

.w-dialog .w-modal
{
background: #fff;
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif;
    max-width: 40em;
    min-height: 22em;
    min-width: 36em;
    padding: 4.2em 3.2em 3.7em;
    position: relative;
}


/* Botón cerrar */
.w-dialog .w-modal__action--close
{
	background		: none;
	border			: none;
	border-radius	: .3em;
	display			: flex;
	font-size		: 100%;
	height			: 2em;
	position		: absolute;
	right			: 1.2em;
	top				: 1.2em;
	width			: 2em;
}

.w-dialog .w-modal__action--close::before
{
-webkit-mask: url(//shared.lahuen.health/assets/skins/lahuen/base/images/icon_close.svg) no-repeat center/contain;
    background: var(--primary-e-normal);
    content: '';
    height: 3rem;
    width: 3rem;
}

.w-dialog .w-modal__action--close .w-modal__action-label
{
	display	: none;
}



/* Cabecera de componente */
.w-dialog .w-modal__header
{
	display			: flex;
	flex-wrap		: wrap;
	font-size		: 100%;
	justify-content	: center;
	margin-bottom	: 2em;
	text-align		: center;
}


/* Énfasis de diálogo */
.w-dialog .w-modal__header::before
{
	background		: no-repeat center;
	content			: '';
	height 			: 8em;
	margin-bottom	: 1.4em;
	width			: 8em;
}

.w-dialog.error .w-modal__header::before
{
	background-image	: url('//shared.lahuen.health/assets/skins/lahuen/base/images/emphasis_error.svg');
}

.w-dialog.info .w-modal__header::before
{
	background-image	: url('//shared.lahuen.health/assets/hegc/emphasis--i.svg');
}

.w-dialog.question .w-modal__header::before
{
	background-image	: url('//shared.lahuen.health/assets/hegc/emphasis--interrogacion.svg');
}

.w-dialog.warning .w-modal__header::before
{
	background-image	: url('//shared.lahuen.health/assets/hegc/emphasis--exclamacion.svg');
}


/* Título de componente */
.w-dialog .w-modal__title
{
	font-size	: 100%;
	margin		: 0;
	width		: 100%;
}

.w-dialog .w-modal__title-label
{
color: var(--primary-c-normal);
    font: 600 4rem 'Lato',sans-serif;
}


/* Subtítulo de componente */
.w-dialog .w-modal__subtitle
{
	font-size	: 100%;
	margin		: .7em 0 0;
	width		: 100%;
}

.w-dialog .w-modal__subtitle-label
{
	color			: #636363;
	font-family		: 'Dosis', sans-serif;
	font-size		: 1.8em;
	margin-top		: .7em;
	text-transform	: uppercase;
}



/* Cuerpo de componente */
.w-dialog .w-modal__body
{
	display			: flex;
	flex			: 1;
	flex-wrap		: wrap;
	font-size		: 100%;
	justify-content	: center;
	margin-bottom	: 2.4em;
}

.w-dialog__message
{
	font-size	: 1.6em;
	text-align	: center;
	width		: 100%;
}

.w-dialog__message
{
font: 400 2rem 'Open sans',sans-serif;
    text-align: center;
    width: 100%;
}

.w-dialog__field
{
	align-items	: baseline;
	display		: flex;
	font-size	: 100%;
	width		: 100%;
}

.w-dialog__field-label
{
	color			: #193c82;
	font-family		: 'Dosis', sans-serif;
	font-size		: 1em;
	font-weight		: 600;
	margin-right	: 1rem;
	text-transform	: uppercase;
}

.w-dialog__field-value
{
	flex	: 1;
}



/* Pie de componente */
.w-dialog .w-modal__footer
{
	display			: flex;
	font-size		: 100%;
	justify-content	: center;
}

.w-dialog__action:not(:last-child)
{
	margin-right	: 1em;
}