body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:#eef4ff;
  position:relative;
}

/* LOGO FONDO */
body::before{
  content:"";
  position:fixed;

  top:60%;
  left:50%;
  transform:translate(-50%,-50%);

  width:320px;
  height:320px;

  background:url("logo-institucion.png") no-repeat center;
  background-size:contain;

  opacity:0.12;

  z-index:0;
  pointer-events:none;
}

.card{
  position:relative;
  z-index:2;
}

header,
#sidebar{
  position:relative;
  z-index:2;
}

@media(max-width:768px){
  body::before{
    top:65%;
    opacity:0.08;
  }
}

/* HEADER */
header{
  text-align:center;
  padding:15px 10px;
}

/* LOGO NOMY */
.logo-nomy{
  width:140px;
  display:block;
  margin:0 auto;
}

/* SUBTITULO */
.subtitulo{
  margin:5px 0 0;
  font-size:14px;
  color:#4a6fa5;
}

/* LINK */
.pprin{
  text-decoration:none;
}

/* SIDEBAR */
#sidebar{
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:60px;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:20px;
  box-shadow:2px 0 10px rgba(0,0,0,0.05);
}

#sidebar a{
  margin:15px 0;
}

#sidebar img{
  width:24px;
}

/* CONTENIDO */
#contenedor-principal{
  margin-left:60px;
}

#main-content{
  padding:20px;
}

/* CARDS */
.card{
  background:#ffffff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  margin-bottom:20px;
}

/* BOTONES */
button, .btn{
  background:#2f6fed;
  color:white;
  border:none;
  padding:10px;
  border-radius:8px;
  cursor:pointer;
  margin-top:10px;
}

button:hover{
  background:#1f55c0;
}

/* FORM */
input, select{
  width:100%;
  padding:10px;
  margin:8px 0;
  border-radius:8px;
  border:1px solid #c5d4f5;
}

/* LOGIN */
.login-container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

/* HORARIO */
.horario{
  width:100%;
  border-radius:10px;
}

/* NOTIFICACIONES */
.comunicado{
  background:#e3ecff;
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
  position:relative;
}

.btn-borrar{
  position:absolute;
  right:10px;
  top:10px;
  background:#e53935;
  color:white;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:768px){
  #sidebar{
    width:50px;
  }

  #contenedor-principal{
    margin-left:50px;
  }

  .logo-nomy{
    width:110px;
  }

  body::before{
    width:250px;
    height:250px;
    opacity:0.08;
  }
}

.form-envio{
  max-width:400px;
  margin:auto;
}

textarea{
  width:100%;
  max-width:400px;
  padding:10px;
  border-radius:8px;
  border:1px solid #c5d4f5;
  resize:none;
  font-family:inherit;
}