*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* variables */
  /* sb: sombra  // cp: cuerpo // ep: elementos del cuerpo */
  --sb-box-shadow: -7px -7px 10px 0px rgba(255, 255, 255, 0.05),
        -4px -4px 5px 0px rgba(255, 255, 255, 0.05),
        7px 7px 10px 0px rgba(0, 0, 0, 0.5),
        4px 4px 5px 0px rgba(0, 0, 0, 0.5),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
	--sp-box-shadow: -5px -5px 10px -4px rgba(255, 255, 255, 0.05),
               5px 5px 15px rgba(0, 0, 0, 0.5);
}
body {
	background: #07BEB8;
	font-size: 1rem;
}
/*-------------------- Cuerpo Principal --------------------*/
.wrap {
	max-width: 50rem;
	width: 90%;
	margin: auto;
}
.principal {
	width: 100%;
	padding: 3.125rem 0rem;
	color: #fff;
	background: #000;
	box-shadow: var(--sp-box-shadow);
}
.principal .formulario {
	text-align: center;
}
.formulario input[type=text] {
	width: 100%;
	padding: 0.625rem;
	margin-bottom: 1.25rem;
	outline: none;
	border-radius: 0.625rem;
	border: 0.125rem solid #9CEAEF;
	background-color: #F1F1F1;
}
.formulario input[type=text].error {
	border: 0.188rem solid #D32F2F;
	color: #FF2020;
}
.formulario .boton {
	display: inline-block;
	font-size: 1rem;
	padding: 1rem;
  border-radius: 0.625rem;
  border: none;
	color: #fff;
	background-color: #3DCCC7;
}
.formulario .boton:hover {
	opacity: 0.9;
	color: #000;
}

/* - Tareas - */
.tareas {
	text-align: center;
	width: 25rem;
	padding: 0.625rem;
	margin: 0rem auto;
	margin-top: 3.125rem;
	border-radius: 0.625rem;
	box-shadow: var(--sb-box-shadow);
	background-color: #3DCCC7;
}
.tareas .lista {
	list-style: none;
}
.tareas .lista li {
	border-bottom: 1px solid #000;
}
.tareas .lista li a {
	display: block;
	padding: 1.25rem 0rem;
	text-decoration: none;
	color: #000;
}
.tareas .lista li a:hover {
	color: #FF2727;
}
@media screen and (max-width: 400px) {
  .tareas {
    width: 20rem;
  }
}
/*-------------------- End - Cuerpo Principal --------------------*/

/*-------------------- Boton de redes sociales --------------------*/
.container-button{
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
}
.button-main{
  display: none;
}
.redes a, .button-secondary label, .redes input {
  display: block;
  text-decoration: none;
  background: #000;
  color: #fff;
  width: 1.875rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  border-radius: 50%;
  transition: all 500ms ease;
}
.redes a, .redes input{
  margin-bottom: -0.938rem;
  opacity: 0;
  visibility: hidden;
  font-size: 0.75rem;
}
.redes a:hover{
  background: #00FF2E;
  color: #000;
}
.button-main:checked~ .redes a{
  margin-bottom: 0.625rem;
  opacity: 1;
  visibility: visible;
}
/* ~ selecciona el ítem que 
esté inmediatamente después 
y todos los siguientes*/
.button-secondary label{
  cursor: pointer;
  background: #000;
  font-size: 1.25rem;
}
.button-main:checked~ .button-secondary label{
  transform: rotate(135deg);
  font-size: 1.25rem;
}
/*-------------------- Fin de Boton de redes sociales --------------------*/

/* -------------------- PopUp - Bitácora -------------------- */
.modal-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;  
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
}
.show {
  pointer-events: auto;
  opacity: 1;
}
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 37.5rem;
  max-width: 100%;
  padding: 1.875rem 1.875rem;
  margin: 0.625rem;
  border-radius: 0.625rem;
  background: #131319;
  box-shadow: -5px -5px 10px -4px rgba(255, 255, 255, 0.05),
                    5px 5px 15px rgba(0, 0, 0, 0.5);
}
.modal h1 {
  margin: 0.125rem;
  font-weight: 500;
  letter-spacing: 0.063rem;
  color: #03a9f4;
}
.modal p {
  font-size: 0.875rem;
  text-align: justify;
  line-height: 1.375rem;
  color: #fff;
  opacity: 0.8;
  font-weight: 500;
}
.modal span {
  font-size: 0.75rem;
  color: #EC1B1B;
  margin-top: 0.125rem;
  font-weight: 900;
}
.modal .boton-popup {
  position: absolute;
  top: 0.313rem;
  right: 0.625rem;
  padding: 0.125rem 0.438rem;
  z-index: 300;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.875rem;
  border: 0;
  border-radius: 6.25rem;
  color: #000;
  background: #2C2C35;
  box-shadow: -5px -5px 10px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 50%);
}
.modal .boton-popup:hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: inset -3px -3px 7px #000,
              inset 3px 3px 5px #000;
  z-index: 250;
  border-radius: 6.25rem;
  opacity: 0.2;
}
/* -------------------- Fin del PopUp - Bitácora -------------------- */