/**
 * @author Alvaro Fuentes <alvaro.fuentes.zurita@gmail.com>
 */


/* ============================================================================================== */
/* Layout principal */
/* Contenedor nativo */
.w-location-selector.w-modal--native {
	background	: none;
	border		: none;
	padding		: 0;
}

.w-location-selector.w-modal--native::backdrop {
	background-color	: rgba(0, 0, 0, .4);
}

/* Contenedor */
.w-location-selector .w-modal {
	background		: #fcf6f2 no-repeat bottom;
	background-size	: contain;
	border-radius	: 1rem;
	box-shadow		: 0 0 1.5rem .5rem rgba(0, 0, 0, .4);
	display			: flex;
	flex-direction	: column;
	padding			: 1rem 1rem 2.5rem;
}

/* Marco */
.w-location-selector .w-modal__frame {
	display			: flex;
	justify-content	: flex-end;
}

.w-location-selector .w-modal__frame:not(:empty) {
	margin-bottom	: .5rem;
}

.w-location-selector .w-modal__frame .w-action {
	align-items			: center;
	background-color	: #f9efdc;
	border				: none;
	border-radius		: .5rem;
	cursor				: pointer;
	display				: flex;
	height				: 2rem;
	justify-content		: center;
	margin				: 0;
	padding				: 0;
	width				: 2rem;
}

.w-location-selector .w-modal__frame .w-action:not(:last-child) {
	margin-right	: .5rem;
}

.w-location-selector .w-modal__frame .w-action::before {
	-webkit-mask		: no-repeat center;
	-webkit-mask-size	: contain;
	background-color	: #d2b98e;
	content				: '';
	height				: 1rem;
	width				: 1rem;
}

.w-location-selector .w-modal__frame .w-action__label {
	display	: none;
}

/* Cabecera */
.w-location-selector .w-modal__header {
	align-items		: center;
	align-self		: center;
	display			: flex;
	flex-direction	: column;
	margin-bottom	: 1rem;
	padding 		: 0 1.5rem;
	width			: 36rem;
}

.w-location-selector .w-modal__title {
	margin	: 0;
}

.w-location-selector .w-modal__title-label {
	color			: #193c82;
	display			: block;
	font			: 700 2rem/2rem 'Dosis', sans-serif;
	text-align		: center;
	text-transform	: uppercase;
}

.w-location-selector .w-modal__title-label:not(:empty) {
	margin-bottom	: .5rem;
}

.w-location-selector .w-modal__subtitle {
	margin	: 0;
}

.w-location-selector .w-modal__subtitle-label {
	color			: #737373;
	display			: block;
	font			: 700 1.7rem/1.7rem 'Dosis', sans-serif;
	text-transform	: uppercase;
}

/* Cuerpo */
.w-location-selector .w-modal__body {
	display			: flex;
	flex			: 1;
	flex-direction	: column;
	justify-content	: center;
	padding 		: 0 3rem;
}

/* Áreas */
.w-location-selector__areas .w-label {
	display	: none;
}

.w-location-selector__areas .w-action-group {
	display					: grid;
	grid-gap				: .6rem;
	grid-template-columns	: repeat(5, 1fr);
	grid-template-rows		: repeat(2, 1fr);
	margin-bottom			: 2rem;
}

.w-location-selector__areas .w-action {
	align-items			: stretch;
	background-color	: #737373;
	border				: none;
	border-radius		: .5rem;
	color				: #fff;
	display				: flex;
	flex-direction		: column;
	height				: 8rem;
	justify-content		: flex-end;
	padding				: .8rem;
	transition			: background-color ease 0.25s, color ease 0.25s;
	width				: 6rem;
}

.w-location-selector__areas .w-action::before {
	align-items		: center;
	color			: #fff;
	content			: '';
	display			: flex;
	flex			: 1;
	font			: normal normal normal 4.3rem/4.3rem 'hegc-unidades', sans-serif;
	margin-bottom	: .2rem;
	transition		: background-color ease 0.25s;
	width			: 100%;
}

.w-location-selector__areas .w-action--selected {
	background-color	: #3c5d9c;
	cursor				: initial;
}

.w-location-selector__areas .w-action:not(.w-action--selected):disabled {
	background-color	: #ccc;
	cursor				: not-allowed;
}

.w-location-selector__areas .w-action:not(.w-action--selected):disabled::before {
	color	: #909090;
}

.w-location-selector__areas .w-action__label {
	font		: 400 1rem/1rem 'Dosis', sans-serif;
	overflow	: hidden;
}

/* Ubicaciones */
.w-location-selector__locations {
	text-align	: center;
}

.w-location-selector__locations .w-label {
	display	: none;
}

.w-location-selector__locations .w-select {
	border			: .2rem solid #d8d6d5;
	border-radius	: .5rem;
	font			: 1.3rem/1.3rem 'Open Sans', sans-serif;
	margin			: 0 0 1rem;
	outline			: none;
	padding			: .3rem 1rem;
	width			: 28rem;
}

/* Pie */
.w-location-selector .w-modal__footer {
	display			: flex;
	justify-content	: center;
}

.w-location-selector .w-modal__footer:not(:empty) {
	margin-top	: 2rem;
}

.w-location-selector .w-modal__footer .w-action {
	align-items			: center;
	background-color	: #fff;
	border				: .2rem solid #d8d6d5;
	border-radius		: .5rem;
	cursor				: pointer;
	display				: flex;
	justify-content		: center;
	margin				: 0;
	padding				: .2rem 1.3rem;
	text-transform		: uppercase;
}

.w-location-selector .w-modal__footer .w-action:focus {
	outline : none;
}

.w-location-selector .w-modal__footer .w-action--primary {
	background-color	: #4267bb;
	border-color		: #4267bb;
	color				: #fff;
}

.w-location-selector .w-modal__footer .w-action:not(:last-child) {
	margin-right	: 1rem;
}

.w-location-selector .w-modal__footer .w-action__label {
	font	: 600 1.2rem/1.2rem 'Dosis', sans-serif;
}

/* ============================================================================================== */
/* Reglas por acción en marco */
.w-location-selector .w-modal__frame .w-action.close::before {
	-webkit-mask-image	: url('./icon--equis.svg');
}

/* ============================================================================================== */
/* Reglas por acción de áreas */
.w-location-selector__areas .w-action.ballena::before {
	content	: '\61';
}

.w-location-selector__areas .w-action.condor::before {
	content	: '\6D';
}

.w-location-selector__areas .w-action.gorrito-de-lana::before {
	content	: '\6C';
}

.w-location-selector__areas .w-action.oveja::before {
	content	: '\75';
}

.w-location-selector__areas .w-action.flor-tipanie::before {
	content	: '\33';
}

.w-location-selector__areas .w-action.pez::before {
	content	: '\31';
}

.w-location-selector__areas .w-action.alpaca::before {
	content	: '\39';
}

.w-location-selector__areas .w-action.flamenco::before {
	content	: '\2D';
}

.w-location-selector__areas .w-action.desierto-florido::before {
	content	: '\37';
}

.w-location-selector__areas .w-action.araucaria::before {
	content	: '\6a';
}

.w-location-selector__areas .w-action.pudu::before {
	content	: '\6e';
}

.w-location-selector__areas .w-action.volcan::before {
	content	: '\6f';
}

.w-location-selector__areas .w-action.gallo::before {
	content	: '\72';
}

.w-location-selector__areas .w-action.zanahoria::before {
	content	: '\73';
}

.w-location-selector__areas .w-action.uva::before {
	content	: '\71';
}

.w-location-selector__areas .w-action.estrella-de-mar::before {
	content	: '\35';
}

.w-location-selector__areas .w-action.copihue::before {
	content	: '\70';
}

.w-location-selector__areas .w-action.colibri::before {
	content	: '\69';
}

.w-location-selector__areas .w-action.pinguino::before {
	content	: '\62';
}

.w-location-selector__areas .w-action.adolescentologia::before {
	content	: '\68';
}

.w-location-selector__areas .w-action.tractor::before {
	content	: '\77';
}

/* ============================================================================================== */
/* Reglas por aplicación/unidad */
/* Ficha */
[data-app-name="ficha"] .w-location-selector.w-modal--native {
	transform	: scale(.8);
}

[data-app-name="ficha"] .w-location-selector .w-modal {
	background-color	: #fff;
	background-image	: url('./bg--modal-ficha.svg');
}

[data-app-name="ficha"] .w-location-selector .w-modal__frame .w-action {
	background-color	: #bfd4d8;
}

[data-app-name="ficha"] .w-location-selector .w-modal__frame .w-action::before {
	background-color	: #2d6370;
}

/* Ambulatoria */
[data-unit-name="ambulatoria"] .w-location-selector .w-modal {
	background-image	: url('./bg--modal-ambulatoria.svg');
}

[data-unit-name="ambulatoria"] .w-location-selector__areas .w-action-group {
	grid-template-columns	: repeat(6, 1fr);
}

/* Hospitalización */
[data-unit-name="hospitalizacion"] .w-location-selector .w-modal {
	background-image	: url('./bg--modal-hospitalizacion.svg');
}

/* Servicios */
[data-unit-name="servicios"] .w-location-selector .w-modal {
	background-image	: url('./bg--modal-servicios.svg');
}

/* Urgencia */
[data-unit-name="urgencia"] .w-location-selector .w-modal {
	background-image	: url('./bg--modal-urgencia.svg');
}