@import url('https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap');

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #f7f7f7;
	font-family: arial, helvetica, sans-serif;
	font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: 16px;
}

.wrap {
	margin: auto;
	max-width: 800px;
	width: 90%;
}


/* Btns inicial */
.btns{
		display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}
.btn{background: rgb(2 174 8);
    padding: 30px 30px;
    border-radius: 20px;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    margin: 12px;
    width: 230px;
    text-align: center;
}

.principal {
	color: #fff;
	padding: 60px 0 30px;
	width: 100%;
}

.principal .formulario {
	color: #212121;
	text-align: center;
}
.principal .formulario input[type=number],
.principal .formulario input[type=text] {
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #aeaeae;
}
.principal .formulario input[type=number].error,
.principal .formulario input[type=text].error {
	border: 5px solid #D32F2F;
	color: red;
}

.principal .formulario span input:nth-child(1) {
	width:75%;
	margin-right:10px;
}
.principal .formulario span input:nth-child(2) {
	width:20%;
	max-width: 100px;
}


.principal .formulario .boton {
	background: rgb(2 174 8);
    border: none;
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 14px 30px;
    margin: 0 auto;
    border-radius: 46px;
    font-weight: 700;
}

/* .principal .formulario .boton:hover {
	border: 1px solid red;
} */

/* - Tareas - */
.tareas{
	padding-bottom: 70px;
}





.tareas .lista li {
		background: #fff;
		padding: 6px 10px 8px 45px;
		margin-bottom:10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		border-radius: 8px;
		width: 90%;
		-webkit-box-shadow: 0px 0px 31px -14px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 0px 31px -14px rgba(0,0,0,0.21);
box-shadow: 0px 0px 31px -14px rgba(0,0,0,0.21);
}

.tareas .lista li div {
		color: #212121;
		text-decoration: none;
		font-size: 14px;
		text-transform: capitalize;
}

.tareas .lista li .nombre {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100% - 90px);
}



.tareas .lista li .eliminar, .tareas .lista li .checkbox, .tareas .lista li .aumentar, .tareas .lista li .reducir, .tareas .lista li .unidades{position: absolute;}

/* Estilos del eliminar */
.tareas .lista li .eliminar{
	right: -33px;
	top: 16px;
	background: url(../img/close.svg) no-repeat center / 49% rgba(255, 0, 0);
	width: 20px;
	height: 20px;
	border-radius: 16px;
	padding: 3px;
}

/* Estilos de botones + y - */
.tareas .lista li .aumentar, .tareas .lista li .reducir{
	top: 13px;
	width: 25px;
	height: 25px;
	border-radius: 16px;
}

/* Estilos de botón (+) */
.tareas .lista li .aumentar{right: 9px;}

/* Estilos de botón (-) */
.tareas .lista li .reducir{right: 60px;}

/* Estilos de botón (-) */
.tareas .lista li .unidades{right: 34px;top: 18px; text-align: center;font-size: 12px; font-weight: 700;width: 26px;}


/* Estilos de checkbox */
.tareas .lista li .checkbox{
		background-origin: border-box;
		border-radius: 6px;
		cursor: pointer;
		background-color: #fff;
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
		width: 22px;
		height: 22px;
		appearance: none;
		border: 2px solid rgb(9, 218, 17);
		transition: background-color 0.2s ease-in-out;
		left: 12px;
		top: 15px;
}

.tareas .lista li .checkbox:checked {
  	background-color: rgb(9, 218, 17);
}

.tareas .lista li .checkbox:focus {
  	/* border-color: rgb(163, 163, 163); */
  	border-color: rgb(9, 218, 17);
}




.tareas .lista li div.precio {
		font-weight: 800;
		letter-spacing: -.3px;
}

.tareas .total{
  margin-top:20px;
}
.tareas .total li{
  background-color:red;
  border:none;
  color:#fff;
}

/*resultado*/
.result{
	position: fixed;
	bottom: 0;
	background-color: #f7f7f7;
	color: #fff;
	padding: 10px 20px;
	width: 100%;
	border-top: 1px solid #e0e0e0;
	display: flex;
	justify-content: space-between;
	z-index: 9;
}


.result.top{
	top: 0;
	bottom: inherit;
	border-top: none;
	border-bottom: 1px solid #e0e0e0;
	padding: 10px 20px;
}

.result a{
	position: absolute;
	background: url(../img/arrow-black-left.svg) no-repeat center / cover;
	width: 14px;
	height: 14px;
	top: 13px;
}

.result h1{
	font-size: 14px;
	color: #000;
	width: 100%;
	text-align: center;
	margin: 0;
}

.result input{
		background: none;
		border: none;
		font-size: 16px;
		text-align: right;
		max-width:140px;
		color: #000;
		font-weight: 700;
}
.result input#test0{
    float: left;
    text-align: left;
}