/*
:root{
	--verde: #7cba3f;
	--naranja: #f39321;
	--morado: #7b3e90;
	--azul1: #00a8b3;
	--fucsia: #ea4d91;
	--amarillo: #f9be00;
	--azul2: #5bc0cc;
}
*/

@import url('https://fonts.cdnfonts.com/css/coffee-soda');


input::placeholder,
textarea::placeholder{
	color: lightgray;
}



.flex-container{
	display: flex;
	flex-direction: column;
}


/* Desktop */
@media screen and (min-width: 1200px) {
	#crear{
		min-width: 812px;
	}
	.flex-container{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	#avatar{
		justify-self: end;
	}
	#editor{
		text-align: left;
/*		grid-column: 2;*/
	}
	#form{
		grid-column: span 2;
	}
}

#avatar{
	width: 300px;
	height: 550px;
	background-image: url('//bigtwins.co/wp-content/bigtwins/web_avatar/Fondo.svg');	/**/
	border-radius: 35px;

	display: inline-block;
/*	float: left;*/
	margin-right: 30px;

	position: relative;
}
#avatar img{
	position: absolute;
/*	width: 300px;
	height: 600px;*/

	left: 40px;
	top: 60px;
}
#avatar h3{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
/*	overflow: visible;*/
}
/*#nombre{
	width: 90%;
    padding: .5em;
    line-height: 36px;
    font-size: 36px;
	text-align: center;
}*/
#nombre{
	font-family: inherit;	/**/
}
#nombre.a{
	color: var(--morado);
}
#nombre.o{
	color: var(azul);
}
#boca,
#lentes{
	display: none;
}

/*#avatar div{
	width: 400px;
	height: 700px;
	background: 'img/layer.png' 0 0/cover transparent;
/*	pointer-events: none;*/
}*/

form{
	/* use flex layout */
	display: inline-block;
}
#n{
	margin-left: 1em;
}


/*[type=radio],
[type=checkbox]{
	margin-right: .2em;
}*/

ul.historias{
	list-style: none;
	margin: 0;
/*	padding: 0;*/
}


/* -------------- */




/*[name^=o],
[name^=e],
[name=lentes]*/
#editor input{
	display: none;
}
#editor label{
	display: inline-block;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 3px solid transparent;
	background-clip: content-box;

	margin-right: -4px;
}

label[for^=g]{
	font-size: 52px;
}
label[for^=g] img.emoji {
    border-radius: 50%;
    margin: 0 !important;
	vertical-align: top !important;
}

label[for=p1]{background-color: #ffc99d;}
label[for=p2]{background-color: #ff8a70;}
label[for=p3]{background-color: #c3684e;}
label[for=p4]{background-color: #903f1c;}

/*
label[for=i1]{background-color: #;}
label[for=i2]{background-color: #;}
label[for=i3]{background-color: #;}
label[for=i4]{background-color: #;}
label[for=i5]{background-color: #;}
*/

label[for^=o],
label[for^=c],
label[for^=e],
label[for=len]{
	background-origin: border-box;
	background-image: url( '//bigtwins.co/wp-content/plugins/bigtwins-avatar/img/sprite.png' );	/**/
	background-origin: content-box;
}

label.nina[for=o1]{background-position: -416px -260px;}
label.nina[for=o2]{background-position: -416px -312px;}
label.nino[for=o1]{background-position: -416px -364px;}
label.nino[for=o2]{background-position: -416px -416px;}

label[for=c1]{background-position: -416px 0;}
label[for=c2]{background-position: -416px -52px;}
label[for=c3]{background-position: -416px -104px;}
label[for=c4]{background-position: -416px -156px;}
label[for=c5]{background-position: -416px -208px;}

label.nina-oscuro[for=e1]{background-position: 0 0;}
label.nina-oscuro[for=e2]{background-position: -52px 0;}
label.nina-oscuro[for=e3]{background-position: -104px 0;}
label.nina-oscuro[for=e4]{background-position: -156px 0;}
label.nina-oscuro[for=e5]{background-position: -208px 0;}
label.nina-oscuro[for=e6]{background-position: -260px 0;}
label.nina-oscuro[for=e7]{background-position: -312px 0;}
label.nina-oscuro[for=e8]{background-position: -364px 0;}
label.nina-medio[for=e1]{background-position: 0 -52px;}
label.nina-medio[for=e2]{background-position: -52px -52px;}
label.nina-medio[for=e3]{background-position: -104px -52px;}
label.nina-medio[for=e4]{background-position: -156px -52px;}
label.nina-medio[for=e5]{background-position: -208px -52px;}
label.nina-medio[for=e6]{background-position: -260px -52px;}
label.nina-medio[for=e7]{background-position: -312px -52px;}
label.nina-medio[for=e8]{background-position: -364px -52px;}
label.nina-claro[for=e1]{background-position: 0 -104px;}
label.nina-claro[for=e2]{background-position: -52px -104px;}
label.nina-claro[for=e3]{background-position: -104px -104px;}
label.nina-claro[for=e4]{background-position: -156px -104px;}
label.nina-claro[for=e5]{background-position: -208px -104px;}
label.nina-claro[for=e6]{background-position: -260px -104px;}
label.nina-claro[for=e7]{background-position: -312px -104px;}
label.nina-claro[for=e8]{background-position: -364px -104px;}
label.nina-rubio[for=e1]{background-position: 0 -156px;}
label.nina-rubio[for=e2]{background-position: -52px -156px;}
label.nina-rubio[for=e3]{background-position: -104px -156px;}
label.nina-rubio[for=e4]{background-position: -156px -156px;}
label.nina-rubio[for=e5]{background-position: -208px -156px;}
label.nina-rubio[for=e6]{background-position: -260px -156px;}
label.nina-rubio[for=e7]{background-position: -312px -156px;}
label.nina-rubio[for=e8]{background-position: -364px -156px;}
label.nina-rojizo[for=e1]{background-position: 0 -208px;}
label.nina-rojizo[for=e2]{background-position: -52px -208px;}
label.nina-rojizo[for=e3]{background-position: -104px -208px;}
label.nina-rojizo[for=e4]{background-position: -156px -208px;}
label.nina-rojizo[for=e5]{background-position: -208px -208px;}
label.nina-rojizo[for=e6]{background-position: -260px -208px;}
label.nina-rojizo[for=e7]{background-position: -312px -208px;}
label.nina-rojizo[for=e8]{background-position: -364px -208px;}
label.nino-oscuro[for=e1]{background-position: 0 -260px;}
label.nino-oscuro[for=e2]{background-position: -52px -260px;}
label.nino-oscuro[for=e3]{background-position: -104px -260px;}
label.nino-oscuro[for=e4]{background-position: -156px -260px;}
label.nino-oscuro[for=e5]{background-position: -208px -260px;}
label.nino-oscuro[for=e6]{background-position: -260px -260px;}
label.nino-oscuro[for=e7]{background-position: -312px -260px;}
label.nino-oscuro[for=e8]{background-position: -364px -260px;}
label.nino-medio[for=e1]{background-position: 0 -312px;}
label.nino-medio[for=e2]{background-position: -52px -312px;}
label.nino-medio[for=e3]{background-position: -104px -312px;}
label.nino-medio[for=e4]{background-position: -156px -312px;}
label.nino-medio[for=e5]{background-position: -208px -312px;}
label.nino-medio[for=e6]{background-position: -260px -312px;}
label.nino-medio[for=e7]{background-position: -312px -312px;}
label.nino-medio[for=e8]{background-position: -364px -312px;}
label.nino-claro[for=e1]{background-position: 0 -364px;}
label.nino-claro[for=e2]{background-position: -52px -364px;}
label.nino-claro[for=e3]{background-position: -104px -364px;}
label.nino-claro[for=e4]{background-position: -156px -364px;}
label.nino-claro[for=e5]{background-position: -208px -364px;}
label.nino-claro[for=e6]{background-position: -260px -364px;}
label.nino-claro[for=e7]{background-position: -312px -364px;}
label.nino-claro[for=e8]{background-position: -364px -364px;}
label.nino-rubio[for=e1]{background-position: 0 -416px;}
label.nino-rubio[for=e2]{background-position: -52px -416px;}
label.nino-rubio[for=e3]{background-position: -104px -416px;}
label.nino-rubio[for=e4]{background-position: -156px -416px;}
label.nino-rubio[for=e5]{background-position: -208px -416px;}
label.nino-rubio[for=e6]{background-position: -260px -416px;}
label.nino-rubio[for=e7]{background-position: -312px -416px;}
label.nino-rubio[for=e8]{background-position: -364px -416px;}
label.nino-rojizo[for=e1]{background-position: 0 -468px;}
label.nino-rojizo[for=e2]{background-position: -52px -468px;}
label.nino-rojizo[for=e3]{background-position: -104px -468px;}
label.nino-rojizo[for=e4]{background-position: -156px -468px;}
label.nino-rojizo[for=e5]{background-position: -208px -468px;}
label.nino-rojizo[for=e6]{background-position: -260px -468px;}
label.nino-rojizo[for=e7]{background-position: -312px -468px;}
label.nino-rojizo[for=e8]{background-position: -364px -468px;}

label[for=len]{background-position: -416px -468px;}

#editor label:has(:checked){
	border-color: var(--verde);
}



/* TMP for historias */
#historias{
	margin: 20px auto;
}
#historias img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
#historias label {
/*	max-width: 24%;	/* grid? */
	width: 19%;	/* grid? */
	line-height: 1.4;
	text-align: center;
	vertical-align: top;
	opacity: .7;
}
#historias label img{
	border: 3px solid transparent;
}
#historias input[type=checkbox]{
	display: none;
}
#historias label:hover,
#historias label:has(:checked){
	opacity: 1;
}
#historias label:has(:checked) img{
	border-color: var(--verde);
}



#historia {
    display: table;
    margin: 0 auto 20px;

	position: relative;
	width: 812px;
	height: 340px;

	background: #eee url('../img/BigTwins-gris.png') no-repeat center center;
	border: 1px solid #ddd;
}
#historia > div{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: grid;
	align-items: center;
	justify-items: center;
}

#resumen{
	position: absolute;
	width: 50%;
	background-color: #fffc;
	line-height: 1.4;
    padding: 20px 20px 0;/**/
	color: black;
}

#libro{
	width: 812px;
	height: 396px;/**/
	
	background: #eee url('../img/BigTwins-gris.png') no-repeat center center;
	border: 1px solid #ddd;
}


#n{
	border: 2px solid gray;
	border-radius: 7px;
	font: inherit;
	width: 240px;
    margin: 0;
    padding: .2em .4em;
}
#total{
	color: var(--verde);
}

textarea[name=dedicatoria]{
	width: 60%;
	border: 3px solid var(--morado);
	background: #eee url('../img/BigTwins-gris-2.png') no-repeat center center;
}
[for=acepto]{
	padding: 0 .6em;
	border: 2px solid transparent;
}


h3.sec-title__title span {
    display: inline-block;
    border: solid 3px #039;
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
}



/**/
#seleccionar-historias,
#escribir-dedicatoria,
#previsualizar-libro{
	display: none;
}
/**/





#crear{
	width: 100%;
	text-align: center;

/*	margin: 80px auto;
	background-color: rgba(256, 256, 256, 0.7);
	background-color: #fff9;
*/
}
#crear > div {
	margin-bottom: 80px;
}

a.kidearn-btn{
	background-color: var(--naranja);
}
a.kidearn-btn.volver {
	background-color: var(--amarillo);
}

/* test */
/*
#crear > *,
#crear > * > *,
#crear > * > * > *,
#crear > * > * > * > *,
#crear > * > * > * > * > *,
#crear > * > * > * > * > * > *{
	margin: 1px;
}
*/

/*
#crear > *{
	border: 1px dashed red;
}
#crear > * > *{
	border: 1px dashed orange;
}
#crear > * > * > *{
	border: 1px dashed yellow;
}
/*
#crear > * > * > * > *{
	border: 1px dashed cyan;
}
#crear > * > * > * > * > *{
	border: 1px dashed blue;
}
#crear > * > * > * > * > * > *{
	border: 1px dashed magenta;
}


/*
#test{
	padding: 0 .7em;
	color: #ccc;

	position: absolute;
	top: 0;
}
/* test */

.kidearn-btn.disabled,
.product-details__buttons .thm-btn.disabled{
	background-color: lightgray;
	color: gray;
}
.kidearn-btn.disabled::before,
.kidearn-btn.disabled::after,
.product-details__buttons .thm-btn.disabled::before,
.product-details__buttons .thm-btn.disabled::after{
	visibility: hidden;
}


.incomplete{
	color: darkred !important;
}
input.incomplete{
	border-color: darkred !important;
}
.invalid{
	animation: invalid 1s infinite !important;
}
@keyframes invalid{
	33%{
		border-color: orangered;
	}
}