body {
    background-color: #eaeaea;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body > .container.principal {
  flex: 1;
}

/* CLASES PERSOLIZADAS */
.principal {
    background-color: #f4f4f4;
}

.tachado {
   text-decoration: line-through;
    opacity: 0.6; 
}

.footer {
  flex-shrink: 0;
}

/* BOTONES SOCIALES */
.login-container, .registro-container {
  max-width: 320px;
  width: 100%;
  padding: 2rem;
}

.social-btn {
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.social-icon {
  width: 28px;
  height: 28px;
}

/* ANIMACION DE LOGIN */
.principal {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}