:root {
  --primary-color: #0075B0;
}

html,
body {
  height: 100%;
  font-family: "Roboto", sans-serif;
}

/* PANEL */

.panel-primary {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 28px;
  margin: 20px;

  box-shadow: 0 12px 40px rgba(0,0,0,0.25);

  animation: panelEntrance 0.7s ease;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* hover elegante */

.panel-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
}

/* animación entrada */

@keyframes panelEntrance {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* TITULO */

.panel-primary h3 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 20px;
}

/* INPUTS */

#auth-user_id,
#auth-user_pwd {
  border-color: var(--primary-color);
}

/* LABELS */

#auth-user_id-label,
#auth-user_pwd-label {
  color: var(--primary-color);
  font-weight: 600;
}

/* BOTON */

.btn-primary {
  font-weight: 600;

  color: #FFFFFF;
  background-color: var(--primary-color);
  border-color: var(--primary-color);

  transition: all 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(90%);
}