input[type=file].invalid{ 
  position: relative;
  color: #852324;
  background: #FDD9DB;
}

input[type=file].invalid:hover:after{
  content: "Archivo inválido";
  
  position: absolute;
  right: -6em;
  bottom: 2em;
  z-index: 99;
  width: 12em;
  
  font-weight: bold;
  padding: 1em;
  border: 1px solid #FB2B31;
  background-color: #FDD9DB;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #999;
}

/* Data Driven Error Messages */

input[type=file].invalid.maxSize:hover:after{
  content: "La imagen es desiado grande."; 
}

input[type=file].invalid.maxSize[data-max-size]:hover:after{
  content: "El archivo es demasiado grande, debe ser inferior a (" attr(data-max-size) ")"; 
}

input[type=file].invalid.type:hover:after{
  content: "Tipo de archivo incorrecto"; 
}

input[type=file].invalid.type[data-type]:hover:after{
  content: "Tipo de archivo permitido: " attr(data-type); 
}